ethical-data-science.js

// =============================================================
//  ethical-data-science.js  —  Renderer
//  Reads COURSE_DATA from content.js and builds the page DOM.
//  Edit content.js to change course material.
//  Edit ethical-data-science.css to change colours/fonts.
//  Only edit this file if you want to change page structure.
// =============================================================

(function () {
  'use strict';

  // ── Entry point ──────────────────────────────────────────────
  document.addEventListener('DOMContentLoaded', () => {
    buildNav(COURSE_DATA);
    buildContent(COURSE_DATA);
    initQuiz();
    initScrollSpy();
    initScrollTop();
    // Re-render MathJax after content is injected
    if (window.MathJax && MathJax.typesetPromise) {
      MathJax.typesetPromise();
    }
  });

  // ── Sidebar navigation ───────────────────────────────────────
  function buildNav(data) {
    const nav = document.getElementById('sidebar-nav');
    nav.innerHTML = data.lectures.map(lec =>
      `<a href="#${lec.id}" class="nav-link">
         <span class="num">${lec.number}</span> ${escHtml(lec.title)}
       </a>`
    ).join('');
  }

  // ── Full page content ────────────────────────────────────────
  function buildContent(data) {
    const root = document.getElementById('content');
    let html = renderHero(data.course);

    data.lectures.forEach((lec, i) => {
      if (i > 0) html += '<hr class="divider" />';
      html += renderLecture(lec);
    });

    html += renderFooter(data.course);
    root.innerHTML = html;
  }

  // ── Hero ─────────────────────────────────────────────────────
  function renderHero(course) {
    const authors = course.authors.map(a => `<strong>${escHtml(a)}</strong>`).join(' &amp; ');
    return `
<header class="hero">
  <div class="series-label">${escHtml(course.subtitle)}</div>
  <h1>Ethical <em>Data Science</em></h1>
  <div class="byline">Lecture notes by ${authors} · Interactive essay with spaced repetition</div>
  <div class="intro-note">${course.intro}</div>
</header>`;
  }

  // ── One lecture ───────────────────────────────────────────────
  function renderLecture(lec) {
    let html = `
<section id="${lec.id}" class="lecture-section">
  <div class="lecture-label">Lecture ${escHtml(lec.number)}</div>
  <h2>${escHtml(lec.title)}</h2>
  <div class="lecture-subtitle">${escHtml(lec.subtitle)}</div>`;

    // Sections
    lec.sections.forEach(sec => {
      if (sec.heading) html += `<h3>${escHtml(sec.heading)}</h3>`;
      sec.blocks.forEach(block => { html += renderBlock(block); });
    });

    // Quiz cards
    if (lec.quiz && lec.quiz.length) {
      html += renderQuizSection(lec);
    }

    html += '</section>';
    return html;
  }

  // ── Block dispatcher ─────────────────────────────────────────
  function renderBlock(block) {
    switch (block.type) {
      case 'paragraph':   return renderParagraph(block);
      case 'callout':     return renderCallout(block);
      case 'case-study':  return renderCaseStudy(block);
      case 'list':        return renderList(block);
      case 'grid':        return renderGrid(block);
      case 'formula':     return renderFormula(block);
      case 'table':       return renderTable(block);
      case 'blockquote':  return renderBlockquote(block);
      default:
        console.warn('Unknown block type:', block.type);
        return '';
    }
  }

  // ── Block renderers ──────────────────────────────────────────

  function renderParagraph(b) {
    return `<p>${b.html}</p>`;
  }

  function renderCallout(b) {
    const variantClass = b.variant === 'accent' ? ' callout-accent'
                       : b.variant === 'dark'   ? ' callout-dark'
                       : '';
    const label = b.label ? `<div class="callout-label">${escHtml(b.label)}</div>` : '';
    return `<div class="callout${variantClass}">${label}<p>${b.html}</p></div>`;
  }

  function renderCaseStudy(b) {
    const label = b.label ? `<div class="case-label">${escHtml(b.label)}</div>` : '';
    // title may contain LaTeX — render as innerHTML
    const title = b.title ? `<h4>${b.title}</h4>` : '';
    const paras = (b.paragraphs || []).map(p => `<p>${p}</p>`).join('');
    return `<div class="case-study">${label}${title}${paras}</div>`;
  }

  function renderList(b) {
    const tag = b.ordered ? 'ol' : 'ul';
    const items = (b.items || []).map(item => `<li>${item}</li>`).join('');
    return `<${tag} class="styled">${items}</${tag}>`;
  }

  function renderGrid(b) {
    const colClass = b.columns === 3 ? 'three-col'
                   : b.columns === 1 ? 'one-col'
                   : 'two-col';
    const cards = (b.items || []).map(item => {
      const variantClass = item.variant === 'accent' ? ' accent'
                         : item.variant === 'full'   ? ' full-width'
                         : '';
      const title = item.title ? `<h4>${escHtml(item.title)}</h4>` : '';
      return `<div class="grid-card${variantClass}">${title}<p>${item.body}</p></div>`;
    }).join('');
    return `<div class="${colClass}">${cards}</div>`;
  }

  function renderFormula(b) {
    const lines = (b.lines || []).map(line => `<p>${line}</p>`).join('');
    return `<div class="formula">${lines}</div>`;
  }

  function renderTable(b) {
    const headers = (b.headers || []).map(h => `<th>${h}</th>`).join('');
    const rows = (b.rows || []).map(row => {
      const cells = row.map(cell => `<td>${cell}</td>`).join('');
      return `<tr>${cells}</tr>`;
    }).join('');
    return `<table class="styled"><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
  }

  function renderBlockquote(b) {
    const cite = b.cite ? `<cite>${escHtml(b.cite)}</cite>` : '';
    return `<blockquote>${b.text}${cite}</blockquote>`;
  }

  // ── Quiz section ─────────────────────────────────────────────
  function renderQuizSection(lec) {
    const cards = lec.quiz.map(card => `
<div class="quiz-card" data-id="${card.id}">
  <p class="quiz-question">${escHtml(card.question)}</p>
  <div class="quiz-answer">${card.answer}</div>
  <div class="quiz-controls">
    <button class="btn-reveal" onclick="EDS.reveal(this)">Reveal answer</button>
    <button class="btn-remembered" onclick="EDS.mark(this,'remembered')">✓ Remembered</button>
    <button class="btn-forgot"     onclick="EDS.mark(this,'forgotten')">✗ Forgot</button>
  </div>
</div>`).join('');

    return `
<div class="quiz-section">
  <div class="quiz-section-title">Review — Lecture ${escHtml(lec.number)}</div>
  ${cards}
</div>`;
  }

  // ── Footer ───────────────────────────────────────────────────
  function renderFooter(course) {
    const refs = (course.references || []).map(r =>
      `<a href="${r.url}" target="_blank">${escHtml(r.title)}</a>`
    ).join(' · ');
    const authors = (course.authors || []).join(' & ');
    return `
<footer style="margin-top:80px;padding-top:28px;border-top:2px solid var(--rule);font-family:var(--sans);font-size:13px;color:var(--text-light);">
  <p><strong style="color:var(--text);">${escHtml(course.title)}</strong> · ${escHtml(course.subtitle)} · ${escHtml(course.year)}</p>
  <p style="margin-top:5px;">Lectures by ${escHtml(authors)}. Interactive format inspired by <a href="https://quantum.country" target="_blank">quantum.country</a>.</p>
  <p style="margin-top:5px;">Key references: ${refs}</p>
</footer>`;
  }

  // ── Quiz interactivity ───────────────────────────────────────
  const answeredCards = new Set();

  function initQuiz() { updateProgress(); }

  window.EDS = {
    reveal(btn) {
      const card = btn.closest('.quiz-card');
      card.querySelector('.quiz-answer').classList.add('visible');
      btn.style.display = 'none';
      card.querySelector('.btn-remembered').classList.add('visible');
      card.querySelector('.btn-forgot').classList.add('visible');
      // Re-typeset any LaTeX inside the revealed answer
      if (window.MathJax && MathJax.typesetPromise) {
        MathJax.typesetPromise([card.querySelector('.quiz-answer')]);
      }
    },
    mark(btn, status) {
      const card = btn.closest('.quiz-card');
      card.classList.remove('remembered', 'forgotten');
      card.classList.add(status);
      answeredCards.add(card.dataset.id);
      updateProgress();
    }
  };

  function updateProgress() {
    const total    = document.querySelectorAll('.quiz-card').length;
    const answered = answeredCards.size;
    const pct      = total ? Math.round((answered / total) * 100) : 0;
    const bar  = document.getElementById('progress-bar');
    const text = document.getElementById('progress-text');
    if (bar)  bar.style.width = pct + '%';
    if (text) text.textContent = answered + ' / ' + total + ' answered';
  }

  // ── Scroll spy (active nav link) ─────────────────────────────
  function initScrollSpy() {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (!e.isIntersecting) return;
        document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
        const link = document.querySelector(`.nav-link[href="#${e.target.id}"]`);
        if (link) link.classList.add('active');
      });
    }, { rootMargin: '-20% 0px -70% 0px' });

    document.querySelectorAll('.lecture-section').forEach(s => io.observe(s));
  }

  // ── Scroll-to-top button ─────────────────────────────────────
  function initScrollTop() {
    window.addEventListener('scroll', () => {
      const btn = document.getElementById('scroll-top');
      if (btn) btn.classList.toggle('visible', window.scrollY > 400);
    });
  }

  // ── Utility ──────────────────────────────────────────────────
  function escHtml(str) {
    if (!str) return '';
    return String(str)
      .replace(/&/g,  '&amp;')
      .replace(/</g,  '&lt;')
      .replace(/>/g,  '&gt;')
      .replace(/"/g,  '&quot;');
  }

})();