@0m0g1/griot 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0m0g1/griot",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "A self-contained block-based rich text editor and renderer built for historical document authoring.",
   "type": "module",
   "main": "./src/Griot.js",

package/src/blocks/BlockRenderer.js

@@ -298,6 +298,9 @@ function _render(block, opts) {
       return _renderCitation(block, opts);
     }
 
+    case 'quiz':
+      return _renderQuiz(block, opts);
+
     default: {
       const el = document.createElement('p');
       el.className = 'griot-block griot-paragraph';
@@ -341,6 +344,280 @@ function _renderCitation(block, opts) {
   return wrap;
 }
 
+// ─── Quiz renderer ────────────────────────────────────────────────────────
+function escapeHtml(str) {
+  if (!str) return '';
+  return str.replace(/[&<>]/g, function(m) {
+    if (m === '&') return '&amp;';
+    if (m === '<') return '&lt;';
+    if (m === '>') return '&gt;';
+    return m;
+  });
+}
+
+function _renderQuiz(block, opts) {
+  const { meta = {} } = block;
+  const title = meta.title || '';
+  const questions = Array.isArray(meta.questions) ? meta.questions : [];
+
+  const container = document.createElement('div');
+  container.className = 'griot-block griot-quiz';
+
+  if (title) {
+    const titleEl = document.createElement('h4');
+    titleEl.className = 'griot-quiz__title';
+    titleEl.textContent = title;
+    container.appendChild(titleEl);
+  }
+
+  if (questions.length === 0) {
+    const empty = document.createElement('p');
+    empty.className = 'griot-quiz__empty';
+    empty.textContent = 'No questions yet.';
+    container.appendChild(empty);
+    return container;
+  }
+
+  const form = document.createElement('form');
+  form.className = 'griot-quiz__form';
+
+  questions.forEach((q, idx) => {
+    const qid = q.id || `q${idx}`;
+    const text = q.text || `Question ${idx + 1}`;
+    const options = Array.isArray(q.options) ? q.options : [];
+    const correctIdx = q.correctOption;
+    const explanation = q.explanation || '';
+
+    const fieldset = document.createElement('fieldset');
+    fieldset.className = 'griot-quiz__question';
+    fieldset.dataset.index = idx;
+
+    const legend = document.createElement('legend');
+    legend.className = 'griot-quiz__question-text';
+    legend.innerHTML = `<span class="griot-quiz__q-num">${idx + 1}.</span> ${escapeHtml(text)}`;
+    fieldset.appendChild(legend);
+
+    const optionsContainer = document.createElement('div');
+    optionsContainer.className = 'griot-quiz__options';
+
+    options.forEach((opt, optIdx) => {
+      const label = document.createElement('label');
+      label.className = 'griot-quiz__option';
+
+      const radio = document.createElement('input');
+      radio.type = 'radio';
+      radio.name = `quiz_${block.id}_${qid}`;
+      radio.value = optIdx;
+
+      const span = document.createElement('span');
+      span.textContent = `${String.fromCharCode(65 + optIdx)}. ${escapeHtml(opt)}`;
+
+      label.appendChild(radio);
+      label.appendChild(span);
+      optionsContainer.appendChild(label);
+    });
+
+    fieldset.appendChild(optionsContainer);
+
+    const feedback = document.createElement('div');
+    feedback.className = 'griot-quiz__feedback';
+    fieldset.appendChild(feedback);
+
+    form.appendChild(fieldset);
+  });
+
+  const submitBtn = document.createElement('button');
+  submitBtn.type = 'button';
+  submitBtn.className = 'griot-quiz__submit';
+  submitBtn.textContent = 'Check answers';
+  submitBtn.addEventListener('click', () => {
+    let score = 0;
+    const answers = {};
+    questions.forEach((q, idx) => {
+      const qid = q.id || `q${idx}`;
+      const radios = form.querySelectorAll(`input[name="quiz_${block.id}_${qid}"]`);
+      let selected = null;
+      radios.forEach((r, i) => { if (r.checked) selected = i; });
+      answers[qid] = selected;
+      const isCorrect = (selected !== null && selected === q.correctOption);
+      if (isCorrect) score++;
+
+      const feedbackDiv = form.querySelector(`fieldset[data-index="${idx}"] .griot-quiz__feedback`);
+      if (feedbackDiv) {
+        if (selected === null) {
+          feedbackDiv.textContent = '❓ No answer selected.';
+          feedbackDiv.className = 'griot-quiz__feedback griot-quiz__feedback--missing';
+        } else if (isCorrect) {
+          feedbackDiv.textContent = '✓ Correct!';
+          feedbackDiv.className = 'griot-quiz__feedback griot-quiz__feedback--correct';
+        } else {
+          const correctAnswerText = q.options[q.correctOption];
+          feedbackDiv.innerHTML = `✗ Incorrect. Correct answer: ${escapeHtml(correctAnswerText)}. ${escapeHtml(q.explanation || '')}`;
+          feedbackDiv.className = 'griot-quiz__feedback griot-quiz__feedback--wrong';
+        }
+      }
+    });
+    const totalScore = questions.length;
+
+    const existingScore = container.querySelector('.griot-quiz__score');
+    if (existingScore) existingScore.remove();
+    const scoreDiv = document.createElement('div');
+    scoreDiv.className = 'griot-quiz__score';
+    scoreDiv.textContent = `You scored ${score} out of ${totalScore}.`;
+    container.appendChild(scoreDiv);
+
+    if (typeof opts.onQuizSubmit === 'function') {
+      opts.onQuizSubmit(block.id, score, totalScore, answers);
+    }
+  });
+
+  form.appendChild(submitBtn);
+  container.appendChild(form);
+  return container;
+}
+
+function _renderQuiz(block, opts) {
+  const { meta = {} } = block;
+  const title = meta.title || '';
+  const questions = Array.isArray(meta.questions) ? meta.questions : [];
+  const answers = meta._submittedAnswers || {};   // optional: store last answers
+
+  const container = document.createElement('div');
+  container.className = 'griot-block griot-quiz';
+
+  if (title) {
+    const titleEl = document.createElement('h4');
+    titleEl.className = 'griot-quiz__title';
+    titleEl.textContent = title;
+    container.appendChild(titleEl);
+  }
+
+  if (questions.length === 0) {
+    const empty = document.createElement('p');
+    empty.className = 'griot-quiz__empty';
+    empty.textContent = 'No questions yet.';
+    container.appendChild(empty);
+    return container;
+  }
+
+  const form = document.createElement('form');
+  form.className = 'griot-quiz__form';
+
+  let totalScore = 0;
+  let userScore = 0;
+
+  questions.forEach((q, idx) => {
+    const qid = q.id || `q${idx}`;
+    const text = q.text || `Question ${idx + 1}`;
+    const options = Array.isArray(q.options) ? q.options : [];
+    const correctIdx = q.correctOption; // 0‑based index
+    const explanation = q.explanation || '';
+    const userChoice = answers[qid] !== undefined ? answers[qid] : null;
+
+    const fieldset = document.createElement('fieldset');
+    fieldset.className = 'griot-quiz__question';
+    fieldset.dataset.index = idx;
+
+    const legend = document.createElement('legend');
+    legend.className = 'griot-quiz__question-text';
+    legend.innerHTML = `<span class="griot-quiz__q-num">${idx + 1}.</span> ${escapeHtml(text)}`;
+    fieldset.appendChild(legend);
+
+    const optionsContainer = document.createElement('div');
+    optionsContainer.className = 'griot-quiz__options';
+
+    options.forEach((opt, optIdx) => {
+      const label = document.createElement('label');
+      label.className = 'griot-quiz__option';
+
+      const radio = document.createElement('input');
+      radio.type = 'radio';
+      radio.name = `quiz_${block.id}_${qid}`;
+      radio.value = optIdx;
+      if (userChoice === optIdx) radio.checked = true;
+      radio.addEventListener('change', () => {
+        // Update stored answers in meta (optional – allows preserving after submit)
+        const newAnswers = { ...(block.meta._submittedAnswers || {}), [qid]: optIdx };
+        // We'll trigger an external callback later – for now just store in meta
+        // But meta updates must go through the editor, not viewer. So we only calculate on‑the‑fly.
+        // Instead, we call a user callback when the quiz is submitted.
+      });
+
+      const span = document.createElement('span');
+      span.textContent = `${String.fromCharCode(65 + optIdx)}. ${escapeHtml(opt)}`;
+
+      label.appendChild(radio);
+      label.appendChild(span);
+      optionsContainer.appendChild(label);
+    });
+
+    fieldset.appendChild(optionsContainer);
+
+    // Show correct / wrong feedback after evaluation
+    const feedback = document.createElement('div');
+    feedback.className = 'griot-quiz__feedback';
+    fieldset.appendChild(feedback);
+
+    form.appendChild(fieldset);
+  });
+
+  const submitBtn = document.createElement('button');
+  submitBtn.type = 'button';
+  submitBtn.className = 'griot-quiz__submit';
+  submitBtn.textContent = 'Check answers';
+  submitBtn.addEventListener('click', () => {
+    let score = 0;
+    const newAnswers = {};
+    questions.forEach((q, idx) => {
+      const qid = q.id || `q${idx}`;
+      const radios = form.querySelectorAll(`input[name="quiz_${block.id}_${qid}"]`);
+      let selected = null;
+      radios.forEach((r, i) => { if (r.checked) selected = i; });
+      newAnswers[qid] = selected;
+      const isCorrect = (selected !== null && selected === q.correctOption);
+      if (isCorrect) score++;
+
+      // Show feedback per question
+      const feedbackDiv = form.querySelector(`fieldset[data-index="${idx}"] .griot-quiz__feedback`);
+      if (feedbackDiv) {
+        if (selected === null) {
+          feedbackDiv.textContent = '❓ No answer selected.';
+          feedbackDiv.className = 'griot-quiz__feedback griot-quiz__feedback--missing';
+        } else if (isCorrect) {
+          feedbackDiv.textContent = '✓ Correct!';
+          feedbackDiv.className = 'griot-quiz__feedback griot-quiz__feedback--correct';
+        } else {
+          const correctAnswerText = q.options[q.correctOption];
+          feedbackDiv.innerHTML = `✗ Incorrect. Correct answer: ${escapeHtml(correctAnswerText)}. ${escapeHtml(q.explanation || '')}`;
+          feedbackDiv.className = 'griot-quiz__feedback griot-quiz__feedback--wrong';
+        }
+        if (q.explanation && selected !== null && !isCorrect) {
+          // Already added above
+        }
+      }
+    });
+    totalScore = questions.length;
+    userScore = score;
+
+    // Display overall score
+    const existingScore = container.querySelector('.griot-quiz__score');
+    if (existingScore) existingScore.remove();
+    const scoreDiv = document.createElement('div');
+    scoreDiv.className = 'griot-quiz__score';
+    scoreDiv.textContent = `You scored ${score} out of ${totalScore}.`;
+    container.appendChild(scoreDiv);
+
+    // Fire user callback if provided
+    if (typeof opts.onQuizSubmit === 'function') {
+      opts.onQuizSubmit(block.id, score, totalScore, newAnswers);
+    }
+  });
+
+  form.appendChild(submitBtn);
+  container.appendChild(form);
+  return container;
+}
+
 // ─── Embed URL helpers ────────────────────────────────────────────────────────
 
 function _ytEmbed(src) {

package/src/blocks/BlockSchema.js

@@ -1,39 +1,40 @@
-// ─── BlockSchema.js ───────────────────────────────────────────────────────────
-// Single source of truth for all block types
-// Fields: category, label, icon, slashLabel, hasText, hasInline, defaultMeta, placeholder
-// ─────────────────────────────────────────────────────────────────────────────
-
-const SCHEMA = {
-  paragraph:       { category:'text',      label:'Paragraph',      icon:'¶',   slashLabel:'Text',           hasText:true,  hasInline:true,  defaultMeta:{},                                                          placeholder:'Write something… **bold** *italic* `code` ==highlight==' },
-  heading:         { category:'text',      label:'Heading',        icon:'H',   slashLabel:'Heading',        hasText:true,  hasInline:false, defaultMeta:{ level:2 },                                                placeholder:'Heading…' },
-  blockquote:      { category:'text',      label:'Quote',          icon:'❝',   slashLabel:'Quote',          hasText:true,  hasInline:true,  defaultMeta:{},                                                          placeholder:'Quote…' },
-  callout:         { category:'text',      label:'Callout',        icon:'💡',  slashLabel:'Callout',        hasText:true,  hasInline:true,  defaultMeta:{ icon:'💡' },                                              placeholder:'Callout text…' },
-  callout_warning: { category:'text',      label:'Warning',        icon:'⚠️',  slashLabel:'Warning',        hasText:true,  hasInline:true,  defaultMeta:{ icon:'⚠️' },                                              placeholder:'Warning message…' },
-  callout_tip:     { category:'text',      label:'Tip',            icon:'✅',  slashLabel:'Tip',            hasText:true,  hasInline:true,  defaultMeta:{ icon:'✅' },                                              placeholder:'Tip or note…' },
-  callout_danger:  { category:'text',      label:'Danger',         icon:'🚨',  slashLabel:'Danger',         hasText:true,  hasInline:true,  defaultMeta:{ icon:'🚨' },                                              placeholder:'Critical warning…' },
-  code:            { category:'text',      label:'Code',           icon:'</>', slashLabel:'Code block',     hasText:true,  hasInline:false, defaultMeta:{ language:'' },                                           placeholder:'// code…' },
-  list_ul:         { category:'text',      label:'Bullet List',    icon:'•',   slashLabel:'Bullet list',    hasText:true,  hasInline:false, defaultMeta:{},                                                          placeholder:'Item 1\nItem 2\nItem 3' },
-  list_ol:         { category:'text',      label:'Numbered List',  icon:'1.',  slashLabel:'Numbered list',  hasText:true,  hasInline:false, defaultMeta:{},                                                          placeholder:'First item\nSecond item' },
-  checklist:       { category:'text',      label:'Checklist',      icon:'☑',   slashLabel:'Checklist',      hasText:false, hasInline:false, defaultMeta:{ items:[{ text:'', checked:false }] },                    placeholder:null },
-
-  image:           { category:'media',     label:'Image',          icon:'🖼',  slashLabel:'Image',          hasText:false, hasInline:false, defaultMeta:{ src:'', alt:'', caption:'', width:'full' },             placeholder:null },
-  video:           { category:'media',     label:'Video',          icon:'▶',   slashLabel:'Video',          hasText:false, hasInline:false, defaultMeta:{ src:'', caption:'', embedUrl:null, platform:null },      placeholder:null },
-  audio:           { category:'media',     label:'Audio',          icon:'🎵',  slashLabel:'Audio',          hasText:false, hasInline:false, defaultMeta:{ src:'', caption:'', embedUrl:null, platform:null },      placeholder:null },
-  gallery:         { category:'media',     label:'Gallery',        icon:'▦',   slashLabel:'Gallery',        hasText:false, hasInline:false, defaultMeta:{ items:[], layout:'grid' },                              placeholder:null },
-
-  embed:           { category:'embed',     label:'Embed',          icon:'⬡',   slashLabel:'Embed / iframe', hasText:false, hasInline:false, defaultMeta:{ src:'', height:400, caption:'' },                       placeholder:null },
-
-  table:           { category:'structure', label:'Table',          icon:'⊞',  slashLabel:'Table',          hasText:false, hasInline:false, defaultMeta:{ headers:['Column 1','Column 2'], rows:[['','']] },       placeholder:null },
-  columns:         { category:'structure', label:'Columns',        icon:'⊟',  slashLabel:'Columns',        hasText:false, hasInline:false, defaultMeta:{ columns:[{ text:'' },{ text:'' }] },                    placeholder:null },
-  divider:         { category:'structure', label:'Divider',        icon:'—',   slashLabel:'Divider',        hasText:false, hasInline:false, defaultMeta:{},                                                          placeholder:null },
-
-  timeline_ref:    { category:'structure', label:'Timeline Event', icon:'⏱',  slashLabel:'Timeline event', hasText:false, hasInline:false, defaultMeta:{ eventId:'', eventTitle:'', note:'' },                    placeholder:null },
-  book_citation:   { category:'structure', label:'Book Citation',  icon:'📖',  slashLabel:'Book citation',  hasText:false, hasInline:false, defaultMeta:{ bookId:'', unitId:'', quote:'', note:'' },               placeholder:null },
-};
-
-export function getBlockDef(type)        { return SCHEMA[type] ?? SCHEMA.paragraph; }
-export function getAllTypes()            { return Object.keys(SCHEMA); }
-export function getTypesByCategory(cat)  { return Object.entries(SCHEMA).filter(([,d]) => d.category === cat).map(([t]) => t); }
-export function defaultMeta(type)        { return { ...(SCHEMA[type]?.defaultMeta ?? {}) }; }
-
+// ─── BlockSchema.js ───────────────────────────────────────────────────────────
+// Single source of truth for all block types
+// Fields: category, label, icon, slashLabel, hasText, hasInline, defaultMeta, placeholder
+// ─────────────────────────────────────────────────────────────────────────────
+
+const SCHEMA = {
+  paragraph:       { category:'text',      label:'Paragraph',      icon:'¶',   slashLabel:'Text',           hasText:true,  hasInline:true,  defaultMeta:{},                                                          placeholder:'Write something… **bold** *italic* `code` ==highlight==' },
+  heading:         { category:'text',      label:'Heading',        icon:'H',   slashLabel:'Heading',        hasText:true,  hasInline:false, defaultMeta:{ level:2 },                                                placeholder:'Heading…' },
+  blockquote:      { category:'text',      label:'Quote',          icon:'❝',   slashLabel:'Quote',          hasText:true,  hasInline:true,  defaultMeta:{},                                                          placeholder:'Quote…' },
+  callout:         { category:'text',      label:'Callout',        icon:'💡',  slashLabel:'Callout',        hasText:true,  hasInline:true,  defaultMeta:{ icon:'💡' },                                              placeholder:'Callout text…' },
+  callout_warning: { category:'text',      label:'Warning',        icon:'⚠️',  slashLabel:'Warning',        hasText:true,  hasInline:true,  defaultMeta:{ icon:'⚠️' },                                              placeholder:'Warning message…' },
+  callout_tip:     { category:'text',      label:'Tip',            icon:'✅',  slashLabel:'Tip',            hasText:true,  hasInline:true,  defaultMeta:{ icon:'✅' },                                              placeholder:'Tip or note…' },
+  callout_danger:  { category:'text',      label:'Danger',         icon:'🚨',  slashLabel:'Danger',         hasText:true,  hasInline:true,  defaultMeta:{ icon:'🚨' },                                              placeholder:'Critical warning…' },
+  code:            { category:'text',      label:'Code',           icon:'</>', slashLabel:'Code block',     hasText:true,  hasInline:false, defaultMeta:{ language:'' },                                           placeholder:'// code…' },
+  list_ul:         { category:'text',      label:'Bullet List',    icon:'•',   slashLabel:'Bullet list',    hasText:true,  hasInline:false, defaultMeta:{},                                                          placeholder:'Item 1\nItem 2\nItem 3' },
+  list_ol:         { category:'text',      label:'Numbered List',  icon:'1.',  slashLabel:'Numbered list',  hasText:true,  hasInline:false, defaultMeta:{},                                                          placeholder:'First item\nSecond item' },
+  checklist:       { category:'text',      label:'Checklist',      icon:'☑',   slashLabel:'Checklist',      hasText:false, hasInline:false, defaultMeta:{ items:[{ text:'', checked:false }] },                    placeholder:null },
+
+  image:           { category:'media',     label:'Image',          icon:'🖼',  slashLabel:'Image',          hasText:false, hasInline:false, defaultMeta:{ src:'', alt:'', caption:'', width:'full' },             placeholder:null },
+  video:           { category:'media',     label:'Video',          icon:'▶',   slashLabel:'Video',          hasText:false, hasInline:false, defaultMeta:{ src:'', caption:'', embedUrl:null, platform:null },      placeholder:null },
+  audio:           { category:'media',     label:'Audio',          icon:'🎵',  slashLabel:'Audio',          hasText:false, hasInline:false, defaultMeta:{ src:'', caption:'', embedUrl:null, platform:null },      placeholder:null },
+  gallery:         { category:'media',     label:'Gallery',        icon:'▦',   slashLabel:'Gallery',        hasText:false, hasInline:false, defaultMeta:{ items:[], layout:'grid' },                              placeholder:null },
+
+  embed:           { category:'embed',     label:'Embed',          icon:'⬡',   slashLabel:'Embed / iframe', hasText:false, hasInline:false, defaultMeta:{ src:'', height:400, caption:'' },                       placeholder:null },
+
+  table:           { category:'structure', label:'Table',          icon:'⊞',  slashLabel:'Table',          hasText:false, hasInline:false, defaultMeta:{ headers:['Column 1','Column 2'], rows:[['','']] },       placeholder:null },
+  columns:         { category:'structure', label:'Columns',        icon:'⊟',  slashLabel:'Columns',        hasText:false, hasInline:false, defaultMeta:{ columns:[{ text:'' },{ text:'' }] },                    placeholder:null },
+  divider:         { category:'structure', label:'Divider',        icon:'—',   slashLabel:'Divider',        hasText:false, hasInline:false, defaultMeta:{},                                                          placeholder:null },
+
+  timeline_ref:    { category:'structure', label:'Timeline Event', icon:'⏱',  slashLabel:'Timeline event', hasText:false, hasInline:false, defaultMeta:{ eventId:'', eventTitle:'', note:'' },                    placeholder:null },
+  book_citation:   { category:'structure', label:'Book Citation',  icon:'📖',  slashLabel:'Book citation',  hasText:false, hasInline:false, defaultMeta:{ bookId:'', unitId:'', quote:'', note:'' },               placeholder:null },
+  quiz:            { category:'interactive', label:'Quiz',          icon:'✓',   slashLabel:'Quiz',           hasText:false, hasInline:false, defaultMeta:{ title:'', questions:[] },                         placeholder:null },
+};
+
+export function getBlockDef(type)        { return SCHEMA[type] ?? SCHEMA.paragraph; }
+export function getAllTypes()            { return Object.keys(SCHEMA); }
+export function getTypesByCategory(cat)  { return Object.entries(SCHEMA).filter(([,d]) => d.category === cat).map(([t]) => t); }
+export function defaultMeta(type)        { return { ...(SCHEMA[type]?.defaultMeta ?? {}) }; }
+
 export default SCHEMA;

package/src/editor/Editor.js

@@ -649,6 +649,10 @@ export class Editor {
         wrap.appendChild(this._metaTextarea(block, 'note', 'Commentary (inline syntax ok)…', { rows: 2 }));
         break;
       }
+
+      case 'quiz':
+        wrap.appendChild(this._buildQuizEditor(block));
+        break;
     }
 
     return wrap;
@@ -759,6 +763,151 @@ export class Editor {
     return container;
   }
 
+  _buildQuizEditor(block) {
+    const container = document.createElement('div');
+    container.className = 'griot-editor-quiz';
+
+    // Title
+    const titleRow = document.createElement('div');
+    titleRow.className = 'griot-editor-quiz__title-row';
+    const titleLabel = document.createElement('label');
+    titleLabel.textContent = 'Quiz title:';
+    const titleInput = this._metaInput(block, 'title', 'Optional quiz title', { style: 'flex:1' });
+    titleRow.append(titleLabel, titleInput);
+    container.appendChild(titleRow);
+
+    const questionsContainer = document.createElement('div');
+    questionsContainer.className = 'griot-editor-quiz__questions';
+    container.appendChild(questionsContainer);
+
+    const refreshQuestions = () => {
+      questionsContainer.innerHTML = '';
+      const questions = Array.isArray(block.meta?.questions) ? block.meta.questions : [];
+
+      questions.forEach((q, qIdx) => {
+        const qCard = document.createElement('div');
+        qCard.className = 'griot-editor-quiz__question-card';
+
+        const header = document.createElement('div');
+        header.className = 'griot-editor-quiz__q-header';
+        const qNum = document.createElement('span');
+        qNum.className = 'griot-editor-quiz__q-num';
+        qNum.textContent = `Question ${qIdx + 1}`;
+        const removeBtn = this._mkSmallBtn('×', 'Remove question', () => {
+          const newQuestions = [...questions];
+          newQuestions.splice(qIdx, 1);
+          this._commit(updateBlock(this._doc, block.id, { meta: { ...block.meta, questions: newQuestions } }));
+        }, 'is-del');
+        header.append(qNum, removeBtn);
+
+        const qTextInput = document.createElement('input');
+        qTextInput.type = 'text';
+        qTextInput.className = 'griot-editor-block__meta-input';
+        qTextInput.placeholder = 'Question text...';
+        qTextInput.value = q.text || '';
+        qTextInput.addEventListener('input', () => {
+          const updated = [...questions];
+          updated[qIdx] = { ...updated[qIdx], text: qTextInput.value };
+          this._commit(updateBlock(this._doc, block.id, { meta: { ...block.meta, questions: updated } }));
+        });
+
+        const optionsContainer = document.createElement('div');
+        optionsContainer.className = 'griot-editor-quiz__options';
+
+        const refreshOptions = () => {
+          optionsContainer.innerHTML = '';
+          const opts = q.options || [];
+
+          opts.forEach((opt, optIdx) => {
+            const optRow = document.createElement('div');
+            optRow.className = 'griot-editor-quiz__opt-row';
+
+            const radio = document.createElement('input');
+            radio.type = 'radio';
+            radio.name = `quiz_correct_${block.id}_${qIdx}`;
+            radio.checked = (q.correctOption === optIdx);
+            radio.addEventListener('change', () => {
+              const updated = [...questions];
+              updated[qIdx] = { ...updated[qIdx], correctOption: optIdx };
+              this._commit(updateBlock(this._doc, block.id, { meta: { ...block.meta, questions: updated } }));
+            });
+
+            const optInput = document.createElement('input');
+            optInput.type = 'text';
+            optInput.className = 'griot-editor-block__meta-input';
+            optInput.placeholder = `Option ${String.fromCharCode(65 + optIdx)}`;
+            optInput.value = opt;
+            optInput.addEventListener('input', () => {
+              const updated = [...questions];
+              const newOpts = [...(updated[qIdx].options || [])];
+              newOpts[optIdx] = optInput.value;
+              updated[qIdx] = { ...updated[qIdx], options: newOpts };
+              this._commit(updateBlock(this._doc, block.id, { meta: { ...block.meta, questions: updated } }));
+            });
+
+            const delOptBtn = this._mkSmallBtn('×', 'Remove option', () => {
+              if (opts.length <= 1) return;
+              const updated = [...questions];
+              const newOpts = opts.filter((_, i) => i !== optIdx);
+              let newCorrect = q.correctOption;
+              if (newCorrect === optIdx) newCorrect = 0;
+              else if (newCorrect > optIdx) newCorrect--;
+              updated[qIdx] = { ...updated[qIdx], options: newOpts, correctOption: newCorrect };
+              this._commit(updateBlock(this._doc, block.id, { meta: { ...block.meta, questions: updated } }));
+            }, 'is-del');
+
+            optRow.append(radio, optInput, delOptBtn);
+            optionsContainer.appendChild(optRow);
+          });
+
+          const addOptBtn = this._mkSmallBtn('+ Add option', 'Add option', () => {
+            const updated = [...questions];
+            const newOpts = [...(updated[qIdx].options || []), `Option ${(updated[qIdx].options?.length || 0) + 1}`];
+            updated[qIdx] = { ...updated[qIdx], options: newOpts };
+            this._commit(updateBlock(this._doc, block.id, { meta: { ...block.meta, questions: updated } }));
+          });
+          optionsContainer.appendChild(addOptBtn);
+        };
+
+        refreshOptions();
+
+        const explanationInput = document.createElement('textarea');
+        explanationInput.className = 'griot-editor-block__meta-input griot-editor-block__meta-textarea';
+        explanationInput.rows = 2;
+        explanationInput.placeholder = 'Explanation (shown after answering)';
+        explanationInput.value = q.explanation || '';
+        explanationInput.addEventListener('input', () => {
+          const updated = [...questions];
+          updated[qIdx] = { ...updated[qIdx], explanation: explanationInput.value };
+          this._commit(updateBlock(this._doc, block.id, { meta: { ...block.meta, questions: updated } }));
+        });
+
+        qCard.append(header, qTextInput, optionsContainer, explanationInput);
+        questionsContainer.appendChild(qCard);
+      });
+
+      const addQBtn = document.createElement('button');
+      addQBtn.type = 'button';
+      addQBtn.className = 'griot-editor-block__pick-btn';
+      addQBtn.textContent = '+ Add question';
+      addQBtn.addEventListener('click', () => {
+        const newQuestion = {
+          id: Date.now() + Math.random(),
+          text: 'New question',
+          options: ['Option A', 'Option B'],
+          correctOption: 0,
+          explanation: '',
+        };
+        const updated = [...(block.meta?.questions || []), newQuestion];
+        this._commit(updateBlock(this._doc, block.id, { meta: { ...block.meta, questions: updated } }));
+      });
+      questionsContainer.appendChild(addQBtn);
+    };
+
+    refreshQuestions();
+    return container;
+  }
+
   _mkSmallBtn(label, title, onClick, extraClass = '') {
     const b = document.createElement('button');
     b.type = 'button'; b.title = title;
@@ -1175,6 +1324,60 @@ function _injectEditorStyles() {
 .griot-editor-checklist__row { display:flex; align-items:center; gap:6px; }
 .griot-editor-checklist__cb { flex-shrink:0; width:15px; height:15px; accent-color:#6366f1; cursor:pointer; }
 .griot-editor-checklist__text { flex:1; }
+
+/* ── Quiz editor ────────────────────────────────────────────────────────── */
+.griot-editor-quiz {
+  background: rgba(0,0,0,0.2);
+  border-radius: var(--griot-radius);
+  padding: 10px;
+}
+.griot-editor-quiz__title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+.griot-editor-quiz__title-row label {
+  font-size: 12px;
+  color: var(--griot-text-muted);
+}
+.griot-editor-quiz__question-card {
+  background: rgba(255,255,255,0.02);
+  border: 1px solid var(--griot-border);
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+}
+.griot-editor-quiz__q-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.griot-editor-quiz__q-num {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--griot-accent);
+}
+.griot-editor-quiz__options {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.griot-editor-quiz__opt-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.griot-editor-quiz__opt-row input[type="radio"] {
+  accent-color: var(--griot-accent);
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+.griot-editor-quiz__opt-row .griot-editor-block__meta-input {
+  flex: 1;
+}
   `;
   document.head.appendChild(s);
 }

package/src/griot.css

@@ -351,3 +351,70 @@
   margin-bottom: 7px;
   font-weight: 600;
 }
+
+/* ── Quiz viewer ─────────────────────────────────────────────────────────── */
+.griot-quiz {
+  background: rgba(99,102,241,0.03);
+  border: 1px solid var(--griot-border);
+  border-radius: var(--griot-radius);
+  padding: 16px;
+  margin: 20px 0;
+}
+.griot-quiz__title {
+  margin: 0 0 12px 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--griot-accent-text);
+}
+.griot-quiz__question {
+  border: none;
+  margin: 0 0 20px 0;
+  padding: 0;
+}
+.griot-quiz__question-text {
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: var(--griot-text);
+}
+.griot-quiz__options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.griot-quiz__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 0.95rem;
+}
+.griot-quiz__option input {
+  margin: 0;
+  accent-color: var(--griot-accent);
+}
+.griot-quiz__feedback {
+  font-size: 0.85rem;
+  padding: 5px 0;
+}
+.griot-quiz__feedback--correct { color: #86efac; }
+.griot-quiz__feedback--wrong   { color: #f87171; }
+.griot-quiz__feedback--missing { color: var(--griot-text-muted); }
+.griot-quiz__submit {
+  background: var(--griot-accent);
+  border: none;
+  border-radius: var(--griot-radius-sm);
+  color: white;
+  padding: 6px 16px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.griot-quiz__submit:hover { background: #7c3aed; }
+.griot-quiz__score {
+  margin-top: 16px;
+  font-weight: 500;
+  text-align: right;
+  border-top: 1px solid var(--griot-border);
+  padding-top: 12px;
+}

package/src/inline/InlineLexer.js

@@ -1,95 +1,95 @@
-// ─── InlineLexer.js ───────────────────────────────────────────────────────────
-// Tokenises a plain-text string that uses lightweight inline markup.
-//
-// Supported syntax
-// ─────────────────────────────────────────────────────────────────────────────
-//   **bold**                           → TOKEN.BOLD        { text }
-//   *italic*                           → TOKEN.ITALIC      { text }
-//   __underline__                      → TOKEN.UNDERLINE   { text }
-//   ~~strikethrough~~                  → TOKEN.STRIKE      { text }
-//   ^superscript^                      → TOKEN.SUPER       { text }
-//   ~subscript~                        → TOKEN.SUB         { text }
-//   `inline code`                      → TOKEN.CODE        { code }
-//   ==highlight==                      → TOKEN.HIGHLIGHT   { text }
-//   {#f00:red text}  {blue:text}       → TOKEN.COLOR_MARK  { color, text }
-//   [label](url)                       → TOKEN.LINK        { label, href }
-//   ![alt](url)                        → TOKEN.IMAGE       { alt, src }
-//   [[event:id|label]]                 → TOKEN.EVENT_REF   { eventId, label }
-//   [[cite:blockId|label]]             → TOKEN.CITE_REF    { blockId, label }
-//   plain text                         → TOKEN.TEXT        { text }
-//
-// Stateless and re-entrant. Rules are anchored regexes in priority order.
-// ─────────────────────────────────────────────────────────────────────────────
-
-export const TOKEN = Object.freeze({
-  TEXT:       'text',
-  BOLD:       'bold',
-  ITALIC:     'italic',
-  UNDERLINE:  'underline',
-  STRIKE:     'strike',
-  SUPER:      'super',
-  SUB:        'sub',
-  CODE:       'code',
-  LINK:       'link',
-  IMAGE:      'image',
-  HIGHLIGHT:  'highlight',
-  COLOR_MARK: 'color_mark',
-  EVENT_REF:  'event_ref',
-  CITE_REF:   'cite_ref',
-});
-
-const RULES = [
-  // Inline image ![alt](url) — must precede link rule
-  { type: TOKEN.IMAGE,      re: /^!\[([^\]]*)\]\(([^)\s]+)\)/,                      build: m => ({ alt: m[1], src: m[2] }) },
-  // Link [label](url)
-  { type: TOKEN.LINK,       re: /^\[([^\]]+)\]\(([^)\s]+)\)/,                       build: m => ({ label: m[1], href: m[2] }) },
-  // Bold **text** — before italic
-  { type: TOKEN.BOLD,       re: /^\*\*((?:[^*]|\*(?!\*))+)\*\*/,                    build: m => ({ text: m[1] }) },
-  // Italic *text*
-  { type: TOKEN.ITALIC,     re: /^\*((?:[^*])+)\*/,                                 build: m => ({ text: m[1] }) },
-  // Underline __text__
-  { type: TOKEN.UNDERLINE,  re: /^__((?:[^_])+)__/,                                 build: m => ({ text: m[1] }) },
-  // Strikethrough ~~text~~ (must come before single ~ subscript)
-  { type: TOKEN.STRIKE,     re: /^~~((?:[^~])+)~~/,                                 build: m => ({ text: m[1] }) },
-  // Subscript ~text~
-  { type: TOKEN.SUB,        re: /^~((?:[^~])+)~/,                                   build: m => ({ text: m[1] }) },
-  // Superscript ^text^
-  { type: TOKEN.SUPER,      re: /^\^((?:[^^])+)\^/,                                 build: m => ({ text: m[1] }) },
-  // Highlight ==text==
-  { type: TOKEN.HIGHLIGHT,  re: /^==((?:[^=])+)==/,                                 build: m => ({ text: m[1] }) },
-  // Colour mark {#hex:text} or {colorname:text}
-  { type: TOKEN.COLOR_MARK, re: /^\{(#[0-9a-fA-F]{3,8}|[a-zA-Z][a-zA-Z0-9_-]*):([^}]+)\}/, build: m => ({ color: m[1], text: m[2] }) },
-  // Inline code `code`
-  { type: TOKEN.CODE,       re: /^`([^`]+)`/,                                       build: m => ({ code: m[1] }) },
-  // Event ref [[event:id|label]]
-  { type: TOKEN.EVENT_REF,  re: /^\[\[event:([^\]|]+)(?:\|([^\]]*))?\]\]/,          build: m => ({ eventId: m[1], label: m[2] || m[1] }) },
-  // Cite ref [[cite:id|label]]
-  { type: TOKEN.CITE_REF,   re: /^\[\[cite:([^\]|]+)(?:\|([^\]]*))?\]\]/,           build: m => ({ blockId: m[1], label: m[2] || m[1] }) },
-];
-
-export function tokenizeInline(text = '') {
-  if (!text) return [];
-  const tokens = [];
-  let pos = 0, textStart = 0;
-
-  while (pos < text.length) {
-    const remaining = text.slice(pos);
-    let matched = false;
-
-    for (const rule of RULES) {
-      const m = remaining.match(rule.re);
-      if (!m) continue;
-      if (pos > textStart) tokens.push({ type: TOKEN.TEXT, text: text.slice(textStart, pos) });
-      tokens.push({ type: rule.type, ...rule.build(m) });
-      pos += m[0].length;
-      textStart = pos;
-      matched = true;
-      break;
-    }
-
-    if (!matched) pos++;
-  }
-
-  if (textStart < text.length) tokens.push({ type: TOKEN.TEXT, text: text.slice(textStart) });
-  return tokens.length ? tokens : [{ type: TOKEN.TEXT, text }];
+// ─── InlineLexer.js ───────────────────────────────────────────────────────────
+// Tokenises a plain-text string that uses lightweight inline markup.
+//
+// Supported syntax
+// ─────────────────────────────────────────────────────────────────────────────
+//   **bold**                           → TOKEN.BOLD        { text }
+//   *italic*                           → TOKEN.ITALIC      { text }
+//   __underline__                      → TOKEN.UNDERLINE   { text }
+//   ~~strikethrough~~                  → TOKEN.STRIKE      { text }
+//   ^superscript^                      → TOKEN.SUPER       { text }
+//   ~subscript~                        → TOKEN.SUB         { text }
+//   `inline code`                      → TOKEN.CODE        { code }
+//   ==highlight==                      → TOKEN.HIGHLIGHT   { text }
+//   {#f00:red text}  {blue:text}       → TOKEN.COLOR_MARK  { color, text }
+//   [label](url)                       → TOKEN.LINK        { label, href }
+//   ![alt](url)                        → TOKEN.IMAGE       { alt, src }
+//   [[event:id|label]]                 → TOKEN.EVENT_REF   { eventId, label }
+//   [[cite:blockId|label]]             → TOKEN.CITE_REF    { blockId, label }
+//   plain text                         → TOKEN.TEXT        { text }
+//
+// Stateless and re-entrant. Rules are anchored regexes in priority order.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const TOKEN = Object.freeze({
+  TEXT:       'text',
+  BOLD:       'bold',
+  ITALIC:     'italic',
+  UNDERLINE:  'underline',
+  STRIKE:     'strike',
+  SUPER:      'super',
+  SUB:        'sub',
+  CODE:       'code',
+  LINK:       'link',
+  IMAGE:      'image',
+  HIGHLIGHT:  'highlight',
+  COLOR_MARK: 'color_mark',
+  EVENT_REF:  'event_ref',
+  CITE_REF:   'cite_ref',
+});
+
+const RULES = [
+  // Inline image ![alt](url) — must precede link rule
+  { type: TOKEN.IMAGE,      re: /^!\[([^\]]*)\]\(([^)\s]+)\)/,                      build: m => ({ alt: m[1], src: m[2] }) },
+  // Link [label](url)
+  { type: TOKEN.LINK,       re: /^\[([^\]]+)\]\(([^)\s]+)\)/,                       build: m => ({ label: m[1], href: m[2] }) },
+  // Bold **text** — before italic
+  { type: TOKEN.BOLD,       re: /^\*\*((?:[^*]|\*(?!\*))+)\*\*/,                    build: m => ({ text: m[1] }) },
+  // Italic *text*
+  { type: TOKEN.ITALIC,     re: /^\*((?:[^*])+)\*/,                                 build: m => ({ text: m[1] }) },
+  // Underline __text__
+  { type: TOKEN.UNDERLINE,  re: /^__((?:[^_])+)__/,                                 build: m => ({ text: m[1] }) },
+  // Strikethrough ~~text~~ (must come before single ~ subscript)
+  { type: TOKEN.STRIKE,     re: /^~~((?:[^~])+)~~/,                                 build: m => ({ text: m[1] }) },
+  // Subscript ~text~
+  { type: TOKEN.SUB,        re: /^~((?:[^~])+)~/,                                   build: m => ({ text: m[1] }) },
+  // Superscript ^text^
+  { type: TOKEN.SUPER,      re: /^\^((?:[^^])+)\^/,                                 build: m => ({ text: m[1] }) },
+  // Highlight ==text==
+  { type: TOKEN.HIGHLIGHT,  re: /^==((?:[^=])+)==/,                                 build: m => ({ text: m[1] }) },
+  // Colour mark {#hex:text} or {colorname:text}
+  { type: TOKEN.COLOR_MARK, re: /^\{(#[0-9a-fA-F]{3,8}|[a-zA-Z][a-zA-Z0-9_-]*):([^}]+)\}/, build: m => ({ color: m[1], text: m[2] }) },
+  // Inline code `code`
+  { type: TOKEN.CODE,       re: /^`([^`]+)`/,                                       build: m => ({ code: m[1] }) },
+  // Event ref [[event:id|label]]
+  { type: TOKEN.EVENT_REF,  re: /^\[\[event:([^\]|]+)(?:\|([^\]]*))?\]\]/,          build: m => ({ eventId: m[1], label: m[2] || m[1] }) },
+  // Cite ref [[cite:id|label]]
+  { type: TOKEN.CITE_REF,   re: /^\[\[cite:([^\]|]+)(?:\|([^\]]*))?\]\]/,           build: m => ({ blockId: m[1], label: m[2] || m[1] }) },
+];
+
+export function tokenizeInline(text = '') {
+  if (!text) return [];
+  const tokens = [];
+  let pos = 0, textStart = 0;
+
+  while (pos < text.length) {
+    const remaining = text.slice(pos);
+    let matched = false;
+
+    for (const rule of RULES) {
+      const m = remaining.match(rule.re);
+      if (!m) continue;
+      if (pos > textStart) tokens.push({ type: TOKEN.TEXT, text: text.slice(textStart, pos) });
+      tokens.push({ type: rule.type, ...rule.build(m) });
+      pos += m[0].length;
+      textStart = pos;
+      matched = true;
+      break;
+    }
+
+    if (!matched) pos++;
+  }
+
+  if (textStart < text.length) tokens.push({ type: TOKEN.TEXT, text: text.slice(textStart) });
+  return tokens.length ? tokens : [{ type: TOKEN.TEXT, text }];
 }