tessera-learn 0.0.1 → 0.0.2

package/src/components/Quiz.svelte

@@ -1,115 +1,45 @@
 <script>
-  import { getContext, setContext, onMount } from 'svelte';
-  import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-  import { buildQuizInteractions } from './quiz-payload.js';
+  import { getContext } from 'svelte';
+  import { useQuiz } from '../runtime/hooks.svelte.js';
 
   let { children } = $props();
   let quizElement = $state(null);
 
-  // Read quiz config from page context (set by App.svelte)
+  const handle = useQuiz({ element: () => quizElement });
+
   const pageCtx = getContext('tessera-page');
-  const quizConfig = $derived(pageCtx?.quiz ?? {});
+  let quizConfig = $derived(pageCtx?.quiz ?? {});
+  let passingScore = $derived(pageCtx?.passingScore ?? 70);
+  let showFeedback = $derived(quizConfig.showFeedback ?? true);
+  let maxAttempts = $derived(quizConfig.maxAttempts ?? Infinity);
+  let isImmediateMode = $derived(showFeedback && quizConfig.feedbackMode === 'immediate');
 
-  // State
-  let questions = $state([]);
   let currentQuestionIndex = $state(0);
-  let answers = $state(new SvelteMap());
-  let submitted = $state(false);
-  let score = $state(0);
-  let correctCount = $state(0);
-  let attemptCount = $state(0);
-  let reviewing = $state(false);
   let reviewIndex = $state(0);
 
-  // Immediate feedback state
-  let feedbackShown = $state(new SvelteSet());
-  // Retry mode: locked correct questions from prior attempt
-  let lockedCorrect = $state(new SvelteSet());
-
-  // Derived
-  let totalQuestions = $derived(questions.length);
-  let maxAttempts = $derived(quizConfig.maxAttempts ?? Infinity);
-  let showFeedback = $derived(quizConfig.showFeedback ?? true);
-  let passingScore = $derived(pageCtx?.passingScore ?? 70);
-  let canRetry = $derived(attemptCount < maxAttempts);
-  let passed = $derived(score >= passingScore);
-  let allAnswered = $derived(totalQuestions > 0 && answers.size >= totalQuestions);
-  let feedbackMode = $derived(
-    (quizConfig.showFeedback && quizConfig.feedbackMode === 'immediate') ? 'immediate' : 'review'
+  let totalQuestions = $derived(handle.questions.length);
+  let correctCount = $derived(
+    handle.questions.reduce((sum, q) => sum + (q.correct ? 1 : 0), 0)
   );
-  let retryMode = $derived(quizConfig.retryMode ?? 'full');
-
-  // Register question API (children call this on mount).
-  // The returned integer is the child's quizIndex — position in the `questions`
-  // array — and is used to address the same question in setRender / setAnswer /
-  // getAnswer / feedbackVisible / isAnswerLocked. Keep it distinct from the
-  // API-level `id` the question passes in (a stable slug used for LMS
-  // interaction reporting).
-  function registerQuestion(questionApi) {
-    const index = questions.length;
-    const weight = typeof questionApi.weight === 'number' && questionApi.weight > 0
-      ? questionApi.weight
-      : 1;
-    questions.push({ ...questionApi, weight });
-    return index;
-  }
-
-  // Hand the Quiz the render snippet for a registered question.
-  // Snippets aren't available at a child's script-top (they live in the template
-  // block), so built-ins call this from onMount once the snippet has compiled.
-  function setRender(index, render) {
-    questions[index].render = render;
-  }
-
-  function setAnswer(questionIndex, answer) {
-    answers.set(questionIndex, answer);
-  }
-
-  function getAnswer(questionIndex) {
-    return answers.get(questionIndex);
-  }
-
-  // Provide context to child question components
-  setContext('tessera-quiz', {
-    get registerQuestion() { return registerQuestion; },
-    get setRender() { return setRender; },
-    get setAnswer() { return setAnswer; },
-    get getAnswer() { return getAnswer; },
-    get submitted() { return submitted; },
-    get reviewing() { return reviewing; },
-    get showFeedback() { return showFeedback; },
-    get currentQuestionIndex() { return reviewing ? reviewIndex : currentQuestionIndex; },
-    get feedbackVisible() {
-      return (index) => {
-        if (feedbackMode === 'immediate' && showFeedback && feedbackShown.has(index)) return true;
-        if (submitted && reviewing && showFeedback) return true;
-        return false;
-      };
-    },
-    get isAnswerLocked() {
-      return (index) => {
-        // Locked during immediate feedback (answer already revealed)
-        if (feedbackMode === 'immediate' && feedbackShown.has(index)) return true;
-        // Locked after submission
-        if (submitted) return true;
-        // Locked from incorrect-only retry
-        if (lockedCorrect.has(index)) return true;
-        return false;
-      };
-    },
-    get isLockedCorrect() {
-      return (index) => lockedCorrect.has(index);
-    },
-  });
-
-  // Navigation
+  let passed = $derived(handle.score >= passingScore);
+
+  function isAnswered(i) {
+    return handle.getAnswer(i) !== undefined || handle.isLockedCorrect(i);
+  }
+
+  function needsReveal(i) {
+    return (
+      isImmediateMode &&
+      isAnswered(i) &&
+      !handle.isLockedCorrect(i) &&
+      !handle.feedbackVisible(i)
+    );
+  }
+
   function goNextQuestion() {
-    // Immediate feedback: first Next shows feedback, second advances
-    if (feedbackMode === 'immediate'
-        && answers.has(currentQuestionIndex)
-        && !feedbackShown.has(currentQuestionIndex)
-        && !lockedCorrect.has(currentQuestionIndex)) {
-      feedbackShown.add(currentQuestionIndex);
+    // Immediate-mode: first click reveals feedback, second advances.
+    if (needsReveal(currentQuestionIndex)) {
+      handle.revealFeedback(currentQuestionIndex);
       return;
     }
     if (currentQuestionIndex < totalQuestions - 1) {
@@ -118,143 +48,56 @@
   }
 
   function goPrevQuestion() {
-    if (currentQuestionIndex > 0) {
-      currentQuestionIndex--;
-    }
+    if (currentQuestionIndex > 0) currentQuestionIndex--;
   }
 
   function goNextReview() {
-    if (reviewIndex < totalQuestions - 1) {
-      reviewIndex++;
-    }
+    if (reviewIndex < totalQuestions - 1) reviewIndex++;
   }
 
   function goPrevReview() {
-    if (reviewIndex > 0) {
-      reviewIndex--;
-    }
+    if (reviewIndex > 0) reviewIndex--;
   }
 
-  // Check if the current question needs immediate feedback before advancing/submitting
-  function needsImmediateFeedback() {
-    return feedbackMode === 'immediate'
-      && !feedbackShown.has(currentQuestionIndex)
-      && !lockedCorrect.has(currentQuestionIndex)
-      && answers.has(currentQuestionIndex);
-  }
-
-  function showImmediateFeedback() {
-    feedbackShown.add(currentQuestionIndex);
-  }
-
-  // Submission
   function handleSubmit() {
-    if (!allAnswered) return;
-
-    // Weighted rollup: Σ(w·correct)/Σ(w)·100. With every weight = 1 (the
-    // default) this collapses to the unweighted mean, so existing courses
-    // that never set a `weight` prop see no change.
-    let count = 0;
-    let weighted = 0;
-    let totalWeight = 0;
-    for (let i = 0; i < questions.length; i++) {
-      const q = questions[i];
-      const answer = answers.get(i);
-      const ok = q.checkAnswer(answer);
-      totalWeight += q.weight;
-      if (ok) {
-        weighted += q.weight;
-        count++;
-      }
-    }
-
-    correctCount = count;
-    score = totalWeight === 0 ? 0 : Math.round((weighted / totalWeight) * 100);
-    submitted = true;
-    attemptCount++;
-
-    // Report score and per-question interactions via custom event.
-    // `interactions` is empty for built-in components until Phase 2 migrates
-    // them onto the new useQuestion API — additive and back-compat.
-    const interactions = buildQuizInteractions(questions, answers);
-    const event = new CustomEvent('tessera-quiz-complete', {
-      detail: { score, interactions },
-      bubbles: true,
-    });
-    quizElement?.dispatchEvent(event);
-  }
-
-  // Review
-  function startReview() {
-    reviewing = true;
-    reviewIndex = 0;
+    if (!handle.canSubmit) return;
+    handle.submit();
   }
 
-  function exitReview() {
-    reviewing = false;
+  function handleStartReview() {
+    reviewIndex = 0;
+    handle.startReview();
   }
 
-  // Retry
   function handleRetry() {
-    submitted = false;
-    reviewing = false;
-    score = 0;
-    correctCount = 0;
+    handle.retry();
     currentQuestionIndex = 0;
     reviewIndex = 0;
-    feedbackShown = new SvelteSet();
-
-    if (retryMode === 'incorrect-only') {
-      // Identify correct questions
-      const newLockedCorrect = new SvelteSet();
-      const preservedAnswers = new SvelteMap();
-      for (let i = 0; i < questions.length; i++) {
-        const answer = answers.get(i);
-        if (questions[i].checkAnswer(answer)) {
-          newLockedCorrect.add(i);
-          preservedAnswers.set(i, answer);
-        }
-      }
-      lockedCorrect = newLockedCorrect;
-      answers = preservedAnswers;
-      // Only reset incorrect questions
-      for (let i = 0; i < questions.length; i++) {
-        if (!newLockedCorrect.has(i) && questions[i].reset) {
-          questions[i].reset();
-        }
-      }
-    } else {
-      lockedCorrect = new SvelteSet();
-      answers = new SvelteMap();
-      for (const q of questions) {
-        if (q.reset) q.reset();
-      }
-    }
   }
-
 </script>
 
 <div class="tessera-quiz" bind:this={quizElement} role="region" aria-label="Quiz">
-  {#if !submitted}
+  {#if handle.state === 'answering'}
     <!-- Question phase -->
     <div class="tessera-quiz-progress" aria-live="polite">
       <span class="tessera-quiz-progress-text">
         <span class="tessera-quiz-progress-desktop">Question {currentQuestionIndex + 1} of {totalQuestions}</span>
         <span class="tessera-quiz-progress-mobile">{currentQuestionIndex + 1}/{totalQuestions}</span>
       </span>
-      <div class="tessera-quiz-progress-bar">
+      <div class="tessera-progress-track">
         <div
-          class="tessera-quiz-progress-fill"
+          class="tessera-progress-fill"
           style="width: {totalQuestions > 0 ? ((currentQuestionIndex + 1) / totalQuestions) * 100 : 0}%"
         ></div>
       </div>
     </div>
 
     <div class="tessera-quiz-questions">
-      {#each questions as q, i (q.id)}
+      {#each handle.questions as q, i (q.id)}
+        {@const render = handle.getRender(i)}
         <div class="tessera-quiz-question-wrapper" class:active={i === currentQuestionIndex} aria-hidden={i !== currentQuestionIndex}>
-          {#if q.render}
-            {@render q.render()}
+          {#if render}
+            {@render render()}
           {/if}
         </div>
       {/each}
@@ -270,23 +113,23 @@
       </button>
       {#if currentQuestionIndex < totalQuestions - 1}
         <button
-          class="tessera-quiz-btn tessera-quiz-btn-primary"
-          disabled={!answers.has(currentQuestionIndex) && !lockedCorrect.has(currentQuestionIndex)}
+          class="tessera-quiz-btn tessera-btn-primary"
+          disabled={!isAnswered(currentQuestionIndex)}
           onclick={goNextQuestion}
         >
-          {feedbackShown.has(currentQuestionIndex) && feedbackMode === 'immediate' ? 'Continue' : 'Next'}
+          {handle.feedbackVisible(currentQuestionIndex) && isImmediateMode ? 'Continue' : 'Next'}
         </button>
-      {:else if needsImmediateFeedback()}
+      {:else if needsReveal(currentQuestionIndex)}
         <button
-          class="tessera-quiz-btn tessera-quiz-btn-primary"
-          onclick={showImmediateFeedback}
+          class="tessera-quiz-btn tessera-btn-primary"
+          onclick={() => handle.revealFeedback(currentQuestionIndex)}
         >
           Check Answer
         </button>
       {:else}
         <button
-          class="tessera-quiz-btn tessera-quiz-btn-primary tessera-quiz-btn-submit"
-          disabled={!allAnswered}
+          class="tessera-quiz-btn tessera-btn-primary tessera-quiz-btn-submit"
+          disabled={!handle.canSubmit}
           onclick={handleSubmit}
         >
           Submit
@@ -294,7 +137,7 @@
       {/if}
     </div>
 
-  {:else if reviewing}
+  {:else if handle.state === 'reviewing'}
     <!-- Review phase -->
     <div class="tessera-quiz-progress" aria-live="polite">
       <span class="tessera-quiz-progress-text">
@@ -304,10 +147,11 @@
     </div>
 
     <div class="tessera-quiz-questions">
-      {#each questions as q, i (q.id)}
+      {#each handle.questions as q, i (q.id)}
+        {@const render = handle.getRender(i)}
         <div class="tessera-quiz-question-wrapper" class:active={i === reviewIndex} aria-hidden={i !== reviewIndex}>
-          {#if q.render}
-            {@render q.render()}
+          {#if render}
+            {@render render()}
           {/if}
         </div>
       {/each}
@@ -323,15 +167,15 @@
       </button>
       {#if reviewIndex < totalQuestions - 1}
         <button
-          class="tessera-quiz-btn tessera-quiz-btn-primary"
+          class="tessera-quiz-btn tessera-btn-primary"
           onclick={goNextReview}
         >
           Next
         </button>
       {:else}
         <button
-          class="tessera-quiz-btn tessera-quiz-btn-primary"
-          onclick={exitReview}
+          class="tessera-quiz-btn tessera-btn-primary"
+          onclick={() => handle.exitReview()}
         >
           Done
         </button>
@@ -343,7 +187,7 @@
     <div class="tessera-quiz-results" role="status" aria-live="polite">
       <h2 class="tessera-quiz-results-title">Quiz Results</h2>
       <div class="tessera-quiz-score">
-        <span class="tessera-quiz-score-value">{score}%</span>
+        <span class="tessera-quiz-score-value">{handle.score}%</span>
         <span class="tessera-quiz-score-label" class:passed class:failed={!passed}>
           {passed ? 'Passed' : 'Not Passed'}
         </span>
@@ -356,21 +200,21 @@
         {#if showFeedback}
           <button
             class="tessera-quiz-btn tessera-quiz-btn-secondary"
-            onclick={startReview}
+            onclick={handleStartReview}
           >
             Review Answers
           </button>
         {/if}
-        {#if canRetry}
+        {#if handle.canRetry}
           <button
-            class="tessera-quiz-btn tessera-quiz-btn-primary"
+            class="tessera-quiz-btn tessera-btn-primary"
             onclick={handleRetry}
           >
             Retry Quiz
           </button>
         {/if}
-        {#if maxAttempts !== Infinity && attemptCount >= maxAttempts}
-          <p class="tessera-quiz-attempts-exhausted">All attempts used ({attemptCount}/{maxAttempts})</p>
+        {#if maxAttempts !== Infinity && handle.attemptCount >= maxAttempts}
+          <p class="tessera-quiz-attempts-exhausted">All attempts used ({handle.attemptCount}/{maxAttempts})</p>
         {/if}
       </div>
     </div>
@@ -403,19 +247,8 @@
     display: none;
   }
 
-  .tessera-quiz-progress-bar {
+  .tessera-quiz-progress :global(.tessera-progress-track) {
     flex: 1;
-    height: 4px;
-    background: var(--tessera-border);
-    border-radius: 2px;
-    overflow: hidden;
-  }
-
-  .tessera-quiz-progress-fill {
-    height: 100%;
-    background: var(--tessera-primary);
-    border-radius: 2px;
-    transition: width 0.3s ease;
   }
 
   .tessera-quiz-question-wrapper {
@@ -452,15 +285,6 @@
     cursor: not-allowed;
   }
 
-  .tessera-quiz-btn-primary {
-    background: var(--tessera-primary);
-    color: #fff;
-  }
-
-  .tessera-quiz-btn-primary:hover:not(:disabled) {
-    background: var(--tessera-primary-dark);
-  }
-
   .tessera-quiz-btn-secondary {
     background: var(--tessera-bg-secondary);
     color: var(--tessera-text);
@@ -530,24 +354,6 @@
     font-style: italic;
   }
 
-  .tessera-quiz-locked-banner {
-    display: flex;
-    align-items: center;
-    gap: var(--tessera-spacing-sm);
-    padding: var(--tessera-spacing-md);
-    margin-bottom: var(--tessera-spacing-md);
-    background: color-mix(in srgb, var(--tessera-success) 8%, transparent);
-    border: 1px solid color-mix(in srgb, var(--tessera-success) 25%, transparent);
-    border-radius: 6px;
-    color: var(--tessera-success);
-    font-size: 0.9375rem;
-    font-weight: 500;
-  }
-
-  .tessera-quiz-locked-banner svg {
-    flex-shrink: 0;
-  }
-
   /* Mobile */
   @media (max-width: 640px) {
     .tessera-quiz-progress-desktop { display: none; }

package/src/components/ResultIcon.svelte

@@ -0,0 +1,13 @@
+<script>
+  let { kind, size = 16 } = $props();
+</script>
+
+{#if kind === 'correct'}
+  <svg viewBox="0 0 16 16" fill="currentColor" width={size} height={size} aria-hidden="true">
+    <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
+  </svg>
+{:else}
+  <svg viewBox="0 0 16 16" fill="currentColor" width={size} height={size} aria-hidden="true">
+    <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
+  </svg>
+{/if}

package/src/components/RetryButton.svelte

@@ -0,0 +1,25 @@
+<script>
+  let { onclick, label = 'Try again' } = $props();
+</script>
+
+<button class="tessera-standalone-retry" {onclick}>{label}</button>
+
+<style>
+  .tessera-standalone-retry {
+    display: inline-block;
+    margin-top: var(--tessera-spacing-md);
+    padding: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--tessera-primary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .tessera-standalone-retry:hover {
+    color: var(--tessera-primary-dark);
+  }
+</style>