SMF/app/js/quiz.js

// =====================================================
// Quiz — multiple choice per hovedtema med sub-temaer
// =====================================================

let quizData = null;
let quizState = {
  category: 'all',
  subtopic: 'all',
  questions: [],
  current: 0,
  selected: null,
  answered: false,
  correct: 0,
  wrong: 0,
  perSubtopic: {},  // subtopic -> {correct, total}
  finished: false
};

async function quizLoad() {
  if (quizData) return quizData;
  try {
    const res = await fetch('data/quiz.json');
    quizData = await res.json();
  } catch (e) {
    console.error('Klarte ikke laste quiz:', e);
    quizData = [];
  }
  return quizData;
}

function quizCategoryLabel(cat) {
  return {
    etikk: 'Etikk',
    baerekraft: 'Bærekraft',
    samfunn: 'Samfunnsansvar',
    verktoy: 'Verktøy & implementering',
    all: 'Alt pensum'
  }[cat] || cat;
}

function categoryQuestions(cat) {
  if (cat === 'all') return quizData;
  return quizData.filter(q => q.category === cat);
}

function subtopicsForCategory(cat) {
  const qs = categoryQuestions(cat);
  const counts = new Map();
  qs.forEach(q => {
    const sub = q.subtopic || 'Tverrgående';
    counts.set(sub, (counts.get(sub) || 0) + 1);
  });
  return [...counts.entries()].sort((a, b) => b[1] - a[1]);
}

function quizFilter(cat, subtopic) {
  const base = categoryQuestions(cat);
  if (!subtopic || subtopic === 'all') return base;
  return base.filter(q => (q.subtopic || 'Tverrgående') === subtopic);
}

function quizShuffle(arr) {
  arr = [...arr];
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

// ============= Start page (4 main parts) =============
function quizRenderStart() {
  const stage = document.getElementById('quizStage');
  const counts = {
    all: quizData.length,
    etikk: categoryQuestions('etikk').length,
    baerekraft: categoryQuestions('baerekraft').length,
    samfunn: categoryQuestions('samfunn').length,
    verktoy: categoryQuestions('verktoy').length
  };

  const cardFor = (cat, label, eyebrow, romanNum, themeClass) => {
    const subs = subtopicsForCategory(cat);
    const chips = subs.slice(0, 4).map(([name]) => `<span class="theme-card__chip">${name}</span>`).join('');
    const more = subs.length > 4 ? `<span class="theme-card__chip" style="opacity:0.6">+${subs.length - 4} til</span>` : '';
    return `
      <button class="theme-card ${themeClass} reveal" data-cat="${cat}" style="text-align:left">
        <span class="theme-card__num">${romanNum}</span>
        <div class="theme-card__eyebrow">${eyebrow}</div>
        <h3 class="theme-card__title">${label}</h3>
        <p class="theme-card__summary">${counts[cat]} spørsmål · ${subs.length} deltemaer</p>
        <div class="theme-card__list">${chips}${more}</div>
        <div class="theme-card__foot"><span>Multiple choice</span><span class="theme-card__arrow">Velg →</span></div>
      </button>
    `;
  };

  stage.innerHTML = `
    <header class="lesson-header reveal" style="text-align:center; border:none; padding-bottom:var(--sp-5)">
      <div class="lesson-header__num">Studiemodus</div>
      <h1 class="lesson-header__title"><em>Multiple</em> choice</h1>
      <div class="lesson-header__meta" style="justify-content:center"><span>${counts.all} spørsmål · 4 hovedtemaer · filter på deltema</span></div>
    </header>

    <div class="themes__grid reveal" style="margin-top: var(--sp-7)">
      ${cardFor('etikk', '<em>Etikk</em>', 'Oppgave I', 'I', 'theme-card--etikk')}
      ${cardFor('baerekraft', '<em>Bærekraft</em>', 'Oppgave II', 'II', 'theme-card--baerekraft')}
      ${cardFor('samfunn', 'Samfunns<em>ansvar</em>', 'Oppgave III', 'III', 'theme-card--samfunn')}
      ${cardFor('verktoy', '<em>Verktøy</em> & impl.', 'Oppgave IV · Case', 'IV', 'theme-card--verktoy')}
    </div>

    <div style="margin-top: var(--sp-7); text-align:center" class="reveal">
      <button class="btn btn--primary" data-cat="all" style="padding: var(--sp-4) var(--sp-7); font-size: var(--s-1)">
        Test meg på <em style="font-family:var(--f-display); font-style:italic; color:inherit">alt</em> — ${counts.all} spørsmål
      </button>
    </div>
  `;

  stage.querySelectorAll('[data-cat]').forEach(btn => {
    btn.addEventListener('click', () => {
      const cat = btn.dataset.cat;
      if (cat === 'all') {
        quizBegin(cat, 'all');
      } else {
        quizRenderCategoryHub(cat);
      }
    });
  });
}

// ============= Sub-topic hub for a category =============
function quizRenderCategoryHub(cat) {
  const stage = document.getElementById('quizStage');
  const subs = subtopicsForCategory(cat);
  const total = categoryQuestions(cat).length;
  const themeClass = `theme-card--${cat}`;
  const themeColors = SMF.THEME_COLORS[cat];

  stage.innerHTML = `
    <header class="lesson-header reveal">
      <div class="lesson-header__num" style="color:${themeColors.color}">Multiple choice</div>
      <h1 class="lesson-header__title">${quizCategoryLabel(cat)}</h1>
      <div class="lesson-header__meta">
        <span>${total} spørsmål totalt</span>
        <span>${subs.length} deltemaer</span>
      </div>
    </header>

    <p style="margin: var(--sp-5) 0 var(--sp-3); font-family: var(--f-mono); font-size: var(--s-0); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted)">Velg deltema</p>

    <div class="quiz-sub-grid reveal">
      <button class="quiz-sub-card quiz-sub-card--all" data-sub="all">
        <div class="quiz-sub-card__count">${total}</div>
        <div class="quiz-sub-card__label">Alle deltemaer</div>
        <div class="quiz-sub-card__hint">test deg bredt</div>
      </button>
      ${subs.map(([name, count]) => `
        <button class="quiz-sub-card" data-sub="${name}">
          <div class="quiz-sub-card__count">${count}</div>
          <div class="quiz-sub-card__label">${name}</div>
          <div class="quiz-sub-card__hint">spørsmål</div>
        </button>
      `).join('')}
    </div>

    <div class="quiz-actions reveal" style="margin-top: var(--sp-7); justify-content: flex-start">
      <button class="btn btn--ghost" id="quizBack">← Tilbake</button>
    </div>
  `;

  stage.querySelectorAll('[data-sub]').forEach(btn => {
    btn.addEventListener('click', () => {
      quizBegin(cat, btn.dataset.sub);
    });
  });
  document.getElementById('quizBack').addEventListener('click', quizRenderStart);
}

// ============= Begin a quiz =============
function quizBegin(cat, sub) {
  quizState.category = cat;
  quizState.subtopic = sub;
  quizState.questions = quizShuffle(quizFilter(cat, sub));
  quizState.current = 0;
  quizState.selected = null;
  quizState.answered = false;
  quizState.correct = 0;
  quizState.wrong = 0;
  quizState.perSubtopic = {};
  quizState.finished = false;
  quizRenderCurrent();
}

function quizRenderCurrent() {
  const stage = document.getElementById('quizStage');
  if (quizState.finished) return quizRenderResult();
  const total = quizState.questions.length;
  const q = quizState.questions[quizState.current];
  if (!q) return;
  const progress = (quizState.current / total) * 100;
  const letters = ['A', 'B', 'C', 'D', 'E'];
  const themeColors = quizState.category === 'all'
    ? SMF.THEME_COLORS[q.category]
    : SMF.THEME_COLORS[quizState.category];
  const subLabel = q.subtopic || 'Tverrgående';

  stage.innerHTML = `
    <div class="quiz-bar"><div class="quiz-bar__fill" style="width:${progress}%; background:${themeColors.color}"></div></div>
    <div class="quiz-meta">
      <span><strong>${quizState.current + 1}</strong> / ${total}</span>
      <span style="color:${themeColors.color}">${quizCategoryLabel(q.category)} · ${subLabel}</span>
      <span>Riktig: <strong>${quizState.correct}</strong></span>
    </div>
    <h2 class="quiz-question reveal">${q.question}</h2>
    <div class="quiz-options" id="quizOptions">
      ${q.options.map((opt, i) => `
        <button class="quiz-option reveal" data-i="${i}">
          <span class="quiz-option__letter">${letters[i]}</span>
          <span>${opt}</span>
        </button>
      `).join('')}
    </div>
    <div id="quizExplanation"></div>
    <div class="quiz-actions">
      <button class="btn btn--ghost" id="quizCancel">Avslutt</button>
      <button class="btn btn--primary" id="quizNext" disabled>Neste →</button>
    </div>
  `;

  stage.querySelectorAll('.quiz-option').forEach(opt => {
    opt.addEventListener('click', () => {
      if (quizState.answered) return;
      quizSelect(parseInt(opt.dataset.i, 10));
    });
  });

  document.getElementById('quizNext').addEventListener('click', quizAdvance);
  document.getElementById('quizCancel').addEventListener('click', () => {
    if (confirm('Avslutte testen?')) quizRenderStart();
  });
}

function quizSelect(i) {
  const q = quizState.questions[quizState.current];
  quizState.selected = i;
  quizState.answered = true;
  const opts = document.querySelectorAll('.quiz-option');
  opts.forEach((opt, idx) => {
    opt.classList.add('quiz-option--disabled');
    if (idx === q.correct) opt.classList.add('quiz-option--correct');
    if (idx === i && i !== q.correct) opt.classList.add('quiz-option--wrong');
    if (idx === i) opt.classList.add('quiz-option--selected');
  });
  const sub = q.subtopic || 'Tverrgående';
  if (!quizState.perSubtopic[sub]) quizState.perSubtopic[sub] = { correct: 0, total: 0 };
  quizState.perSubtopic[sub].total++;
  if (i === q.correct) {
    quizState.correct++;
    quizState.perSubtopic[sub].correct++;
  } else {
    quizState.wrong++;
  }

  const exp = document.getElementById('quizExplanation');
  exp.innerHTML = `
    <div class="quiz-explanation reveal">
      <div class="quiz-explanation__label">${i === q.correct ? 'Riktig — ' : 'Forklaring — '}</div>
      <div>${q.explanation}</div>
    </div>
  `;
  document.getElementById('quizNext').disabled = false;
}

function quizAdvance() {
  quizState.current++;
  quizState.selected = null;
  quizState.answered = false;
  if (quizState.current >= quizState.questions.length) {
    quizState.finished = true;
  }
  quizRenderCurrent();
}

function quizRenderResult() {
  const stage = document.getElementById('quizStage');
  const total = quizState.questions.length;
  const pct = total ? Math.round((quizState.correct / total) * 100) : 0;
  let verdict, vColor;
  if (pct >= 90)      { verdict = 'Fremragende.'; vColor = 'var(--theme-baerekraft)'; }
  else if (pct >= 80) { verdict = 'Meget god.'; vColor = 'var(--theme-baerekraft)'; }
  else if (pct >= 65) { verdict = 'Solid forståelse.'; vColor = 'var(--theme-samfunn)'; }
  else if (pct >= 50) { verdict = 'Greit, men trener videre.'; vColor = 'var(--theme-samfunn)'; }
  else                { verdict = 'Repeter mer av dette temaet.'; vColor = 'var(--theme-etikk)'; }

  // Per-subtopic breakdown
  const subRows = Object.entries(quizState.perSubtopic)
    .sort((a, b) => b[1].total - a[1].total)
    .map(([name, { correct, total }]) => {
      const p = total ? Math.round((correct / total) * 100) : 0;
      const barColor = p >= 70 ? 'var(--theme-baerekraft)' : p >= 50 ? 'var(--theme-samfunn)' : 'var(--theme-etikk)';
      return `
        <div class="subtopic-row">
          <div class="subtopic-row__name">${name}</div>
          <div class="subtopic-row__bar"><div class="subtopic-row__fill" style="width:${p}%; background:${barColor}"></div></div>
          <div class="subtopic-row__score"><strong>${correct}</strong>/${total}</div>
        </div>
      `;
    }).join('');

  stage.innerHTML = `
    <div class="quiz-result reveal">
      <div class="quiz-result__score">${quizState.correct}<span style="color:var(--muted)">/${total}</span></div>
      <div class="quiz-result__label">${pct} % riktig</div>
      <div class="quiz-result__verdict" style="color:${vColor}">${verdict}</div>
    </div>

    ${subRows ? `
      <div class="subtopic-breakdown reveal">
        <div class="subtopic-breakdown__label">Fordelt på deltema</div>
        ${subRows}
      </div>
    ` : ''}

    <div class="quiz-actions reveal" style="justify-content:center; margin-top: var(--sp-7)">
      <button class="btn" id="quizRestart">Ta på nytt</button>
      <button class="btn btn--primary" id="quizMore">Andre kategori</button>
    </div>
  `;
  document.getElementById('quizRestart').addEventListener('click', () => quizBegin(quizState.category, quizState.subtopic));
  document.getElementById('quizMore').addEventListener('click', () => quizRenderStart());
}

function quizKeyboard(e) {
  if (location.hash !== '#/quiz') {
    document.removeEventListener('keydown', quizKeyboard);
    return;
  }
  const tag = document.activeElement?.tagName;
  if (tag === 'INPUT' || tag === 'TEXTAREA') return;

  // 1-4 to select option, Enter to advance, Esc to cancel
  if (!quizState.finished && quizState.questions.length > 0) {
    if (e.key === '1' || e.key === '2' || e.key === '3' || e.key === '4') {
      const idx = parseInt(e.key, 10) - 1;
      if (!quizState.answered) {
        const q = quizState.questions[quizState.current];
        if (q && idx < q.options.length) {
          e.preventDefault();
          quizSelect(idx);
        }
      }
    } else if ((e.key === 'Enter' || e.key === ' ') && quizState.answered) {
      e.preventDefault();
      quizAdvance();
    }
  }
}

async function quizInit() {
  await quizLoad();
  quizRenderStart();
  document.removeEventListener('keydown', quizKeyboard);
  document.addEventListener('keydown', quizKeyboard);
}

SMF.quizInit = quizInit;