editor.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#1e3c72">
  <meta name="robots" content="noindex, follow">
  <meta name="description" content="Create and edit exam questions with the built-in Examplar editor.">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="apple-touch-icon" href="assets/media/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="64x64" href="assets/media/favicon-64.png">
  <title>Question editor | Examplar</title>
  <link href="assets/vendor/fontawesome/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/app-footer.css">
  <link rel="stylesheet" href="assets/css/editor-styles.css">
</head>
<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <main id="main-content" class="editor-container" tabindex="-1">
    <div class="cr-topbar">
      <div class="cr-topnav">
        <a class="logo cr-topnav-brand" href="index.html" data-route="home" aria-label="Examplar home">
          <img class="logo-img" src="assets/media/examplar-mark.png" alt="Examplar logo" width="64" height="64" decoding="async">
          <h1>Exampl<span class="logo-accent">a</span>r</h1>
        </a>
        <nav class="cr-topnav-links" aria-label="Site links">
          <a href="index.html" data-route="home">Home</a>
          <a href="roadmaps.html" data-route="roadmaps">Roadmaps</a>
          <a href="https://github.com/rmssantos/examsim" target="_blank" rel="noopener noreferrer">GitHub</a>
          <div class="theme-controls">
            <button id="editorThemeToggle" class="theme-toggle" type="button" title="Toggle theme" aria-label="Toggle theme">
              <i aria-hidden="true" class="fas fa-moon theme-icon" id="editorThemeIcon"></i>
            </button>
          </div>
        </nav>
      </div>
    </div>

    <!-- Exam Selection Bar -->
    <div class="exam-selection-bar">
      <div class="exam-select-group">
        <label for="examSelect"><i aria-hidden="true" class="fas fa-book"></i> Exam</label>
        <select id="examSelect">
          <option value="">Loading exams...</option>
        </select>
      </div>

      <div class="exam-actions-group">
        <div class="custom-exam-input">
          <input id="customExamCode" type="text" placeholder="Exam code (e.g., myexam)" aria-label="Custom exam code"/>
          <button id="loadCustomExam" class="btn btn-secondary" title="Load custom exam" aria-label="Load custom exam"><i aria-hidden="true" class="fas fa-folder-open"></i> Load</button>
          <button id="newExamBtn" class="btn btn-secondary" title="Create a new custom exam" aria-label="Create new exam"><i aria-hidden="true" class="fas fa-plus-circle"></i> New</button>
        </div>
      </div>
    </div>

    <div class="split">
      <!-- Sidebar with Questions List -->
      <div class="sidebar">
        <div class="sidebar-header">
          <h3><i aria-hidden="true" class="fas fa-list"></i> Questions</h3>
          <input id="searchInput" type="text" placeholder="Search questions..." aria-label="Search questions"/>

          <div class="sidebar-filters">
            <select id="filterType" aria-label="Filter by question type">
              <option value="">All Types</option>
              <option value="STANDARD">Single Choice</option>
              <option value="MULTI">Multiple Choice</option>
              <option value="SEQUENCE">Sequence</option>
              <option value="DRAG_DROP_SELECT">Drag & Drop</option>
              <option value="YES_NO_MATRIX">Yes/No Matrix</option>
            </select>
            <select id="filterCategory" aria-label="Filter by category">
              <option value="">All Categories</option>
            </select>
          </div>

          <button id="addNew" class="btn primary editor-full-width-action">
            <i aria-hidden="true" class="fas fa-plus"></i> New Question
          </button>
        </div>

        <div class="list" id="questionList"></div>

        <section class="editor-metadata-panel" aria-labelledby="editorMetadataTitle">
          <h4 id="editorMetadataTitle"><i aria-hidden="true" class="fas fa-tags"></i> Library Metadata</h4>
          <p class="editor-metadata-note">Used by the library filters and cards. Optional for private/imported packs.</p>
          <div id="editorMetadataStatus" class="editor-metadata-status" role="status" aria-live="polite">
            <i aria-hidden="true" class="fas fa-circle-info"></i>
            <span>Complete these fields before preparing a public pack.</span>
          </div>
          <div class="editor-metadata-grid">
            <label for="metaVendor">
              <span>Vendor</span>
              <input id="metaVendor" type="text" placeholder="e.g., Microsoft, AWS, Cisco">
            </label>
            <label for="metaCertificationCode">
              <span>Code</span>
              <input id="metaCertificationCode" type="text" placeholder="e.g., AZ-900">
            </label>
            <label for="metaDomains">
              <span>Domains</span>
              <input id="metaDomains" type="text" placeholder="Cloud, Security, AI">
            </label>
            <label for="metaLevel">
              <span>Level</span>
              <input id="metaLevel" type="text" placeholder="Fundamentals, Associate">
            </label>
            <label for="metaProductFamily">
              <span>Product family</span>
              <input id="metaProductFamily" type="text" placeholder="Azure, Networking, Kubernetes">
            </label>
            <label for="metaContentType">
              <span>Content type</span>
              <input id="metaContentType" type="text" placeholder="practice-exam">
            </label>
          </div>
        </section>

        <div class="sidebar-footer">
          <div class="exam-management">
            <h4><i aria-hidden="true" class="fas fa-cog"></i> Exam Management</h4>
            <button id="importJson" class="btn btn-outline" title="Import questions from JSON file">
              <i aria-hidden="true" class="fas fa-file-import"></i> Import Questions
            </button>
            <button id="exportJson" class="btn btn-outline" title="Export all questions to JSON">
              <i aria-hidden="true" class="fas fa-file-export"></i> Export Questions
            </button>
            <button id="clearOverride" class="btn btn-danger" title="Reset all custom changes to original exam">
              <i aria-hidden="true" class="fas fa-undo"></i> Reset to Original
            </button>
          </div>
        </div>
      </div>
      <div class="right-pane">
      <div class="form">
        <div class="form-header">
          <span class="form-header-title" id="formTitle">Edit Question</span>
          <span class="form-header-status" id="editorSaveState" role="status" aria-live="polite" title="Current question has no unsaved edits">
            <i aria-hidden="true" class="fas fa-check-circle"></i>
            <span>No unsaved edits</span>
          </span>
        </div>
        <div id="editorValidation" class="editor-validation editor-validation-ok" role="status" aria-live="polite">
          <i aria-hidden="true" class="fas fa-shield-alt"></i>
          <span id="editorValidationText">Question is valid</span>
        </div>

        <div class="form-meta-row">
          <div class="row">
            <label for="qType"><i aria-hidden="true" class="fas fa-list"></i> Type</label>
            <select id="qType">
              <option value="STANDARD">Single Choice</option>
              <option value="MULTI">Multiple Choice</option>
              <option value="SEQUENCE">Sequence</option>
              <option value="DRAG_DROP_SELECT">Drag & Drop</option>
              <option value="YES_NO_MATRIX">Yes/No Matrix</option>
            </select>
          </div>
          <div class="row">
            <label for="qModule"><i aria-hidden="true" class="fas fa-folder"></i> Module</label>
            <input id="qModule" type="text" placeholder="e.g., Security Concepts"/>
          </div>
          <div class="row">
            <label for="qId"><i aria-hidden="true" class="fas fa-hashtag"></i> ID</label>
            <input id="qId" type="number" placeholder="Auto"/>
          </div>
        </div>

        <div class="row">
          <label for="qText"><i aria-hidden="true" class="fas fa-pen"></i> Question</label>
          <textarea id="qText" placeholder="Type your question here..."></textarea>
        </div>
        <div class="row">
          <label for="qExplanation"><i aria-hidden="true" class="fas fa-lightbulb"></i> Explanation</label>
          <textarea id="qExplanation" placeholder="Explain the correct answer..."></textarea>
        </div>

        <div class="section-title">Images</div>
        <div class="grid2">
          <div>
            <label class="small" for="qImages">Question images (filenames relative to images/, one per line)</label>
            <textarea id="qImages" placeholder="question_image1.png"></textarea>
            <div class="inline-actions">
              <input id="qImgFiles" type="file" accept=".jpg,.jpeg,.png,.gif,.webp,image/jpeg,image/png,image/gif,image/webp" multiple aria-label="Upload question images" title="Upload question images" />
              <button id="qImgUpload" class="btn"><i aria-hidden="true" class="fas fa-upload"></i> Upload</button>
            </div>
          </div>
          <div>
            <label class="small" for="eImages">Explanation images (filenames relative to images/, one per line)</label>
            <textarea id="eImages" placeholder="explanation_image1.png"></textarea>
            <div class="inline-actions">
              <input id="eImgFiles" type="file" accept=".jpg,.jpeg,.png,.gif,.webp,image/jpeg,image/png,image/gif,image/webp" multiple aria-label="Upload explanation images" title="Upload explanation images" />
              <button id="eImgUpload" class="btn"><i aria-hidden="true" class="fas fa-upload"></i> Upload</button>
            </div>
          </div>
        </div>

        <div class="section-title"><i aria-hidden="true" class="fas fa-list"></i> Answer Options</div>
        <div id="sequenceHint" class="is-hidden">
          <strong><i aria-hidden="true" class="fas fa-info-circle"></i> Sequence:</strong> Use the Preview panel below to set the correct order with the Up/Down arrows.
        </div>
        <div id="options" class="options"></div>
        <div class="footer">
          <button id="addOption" class="btn primary"><i aria-hidden="true" class="fas fa-plus"></i> Add Option</button>
          <span id="optionsHelp" class="small editor-help-text">Check the boxes next to correct answers</span>
        </div>
        <div class="row is-hidden"><label for="qCorrect">Correct</label><input id="qCorrect" type="text" placeholder="Auto-managed"/></div>
        <div class="row is-hidden" id="ddSelectRow"><label for="qDragSelectN">Select N</label><input id="qDragSelectN" type="number" min="1" placeholder="Count"/></div>
        <div class="row is-hidden" id="ynMatrixRow"><label for="qStatements">Statements</label><textarea id="qStatements" placeholder="One per line"></textarea></div>

        <div class="form-footer">
          <button id="save" class="btn primary"><i aria-hidden="true" class="fas fa-save"></i> Save Local Changes</button>
          <button id="deleteCurrent" class="btn danger"><i aria-hidden="true" class="fas fa-trash"></i> Delete</button>
          <span class="small editor-save-status" id="saveStatus" role="status" aria-live="polite">
            <i aria-hidden="true" class="fas fa-check-circle"></i>
            <span>No unsaved edits</span>
          </span>
        </div>
      </div>
      <div class="preview" id="preview">
        <h3>Preview</h3>
        <div id="pvType" class="pv-type">STANDARD</div>
        <div id="pvQuestion" class="pv-question"></div>
        <div id="pvQImages" class="pv-images"></div>
        <div id="pvOptions" class="pv-options"></div>
        <div id="pvExplanation" class="pv-explanation editor-preview-explanation"></div>
        <div id="pvEImages" class="pv-images"></div>
      </div>
      </div>
    </div>
  </main>

  <input id="fileInput" class="is-hidden" type="file" accept="application/json" aria-label="Import exam JSON file" />
  <footer class="app-footer" aria-label="Project and privacy links">
    <div class="app-footer-inner">
      <p class="app-footer-note">
        <strong>Examplar</strong>
        <span>Offline-ready. Browser edits stay local unless exported.</span>
      </p>
      <nav class="app-footer-links" aria-label="Project links">
        <a href="https://github.com/rmssantos/examsim" target="_blank" rel="noopener noreferrer">
          <i aria-hidden="true" class="fab fa-github"></i>
          <span>Source</span>
        </a>
        <a href="https://github.com/rmssantos/examsim/issues" target="_blank" rel="noopener noreferrer">
          <i aria-hidden="true" class="fas fa-circle-exclamation"></i>
          <span>Report issue</span>
        </a>
        <a href="privacy-and-storage.html" data-route="privacy-and-storage">
          <i aria-hidden="true" class="fas fa-shield-alt"></i>
          <span>Privacy &amp; storage</span>
        </a>
      </nav>
    </div>
  </footer>

  <script src="assets/js/router.js"></script>
  <script src="assets/js/pwa.js"></script>
  <script src="assets/js/utils.js"></script>
  <script src="assets/js/exam-storage.js"></script>
  <script src="assets/js/secure-transfer.js"></script>
  <script src="assets/js/exam-manager.js"></script>
  <script src="assets/js/exam-loader.js"></script>
  <script src="assets/js/editor-init.js"></script>
  <script src="assets/js/editor.js"></script>
</body>
</html>