tessera-learn 0.0.10 → 0.0.13

package/src/components/MultipleChoice.svelte

@@ -23,15 +23,23 @@
   const groupId = `mc-${componentId}`;
 
   const q = useQuestion({
-    get id() { return id ?? `mc-${slugFromQuestion(question)}`; },
-    get weight() { return weight; },
-    get maxRetries() { return maxRetries; },
+    get id() {
+      return id ?? `mc-${slugFromQuestion(question)}`;
+    },
+    get weight() {
+      return weight;
+    },
+    get maxRetries() {
+      return maxRetries;
+    },
     response: () => ({
       type: 'choice',
       response: selectedOption !== null ? [String(selectedOption)] : [],
       correct: [String(correct)],
     }),
-    reset: () => { selectedOption = null; },
+    reset: () => {
+      selectedOption = null;
+    },
   });
 
   // `q.mode` is fixed for the lifetime of the widget; capture once.
@@ -58,62 +66,72 @@
 
   function getOptionClass(optIndex) {
     if (!q.feedbackVisible) return '';
-    const answer = inQuiz ? q.answer : selectedOption;
     if (isCorrectOption(optIndex)) return 'correct';
-    if (optIndex === answer && !isCorrectOption(optIndex)) return 'incorrect';
+    if (optIndex === selectedOption && !isCorrectOption(optIndex))
+      return 'incorrect';
     return '';
   }
 </script>
 
-{#if !inQuiz}
-  <div class="tessera-mc" role="radiogroup" aria-labelledby="{groupId}-label">
-    <p class="tessera-mc-question" id="{groupId}-label">{question}</p>
-
-    <div class="tessera-mc-options">
-      {#each options as option, i}
-        {@const optionId = `${groupId}-opt-${i}`}
-        {@const isSelected = selectedOption === i}
-        {@const stateClass = getOptionClass(i)}
-        <label
-          class="tessera-mc-option {stateClass}"
-          class:selected={isSelected}
-          for={optionId}
-        >
-          <input
-            type="radio"
-            id={optionId}
-            name={groupId}
-            value={i}
-            checked={isSelected}
-            disabled={q.submitted}
-            onchange={() => handleSelect(i)}
-          />
-          <span class="tessera-mc-radio-custom"></span>
-          <span class="tessera-mc-option-text">{option}</span>
-
-          {#if q.submitted}
-            {#if stateClass === 'correct' && (correctFeedback || optionFeedback[i])}
-              <span class="tessera-mc-feedback correct">{optionFeedback[i] || correctFeedback}</span>
-            {:else if stateClass === 'incorrect' && (incorrectFeedback || optionFeedback[i])}
-              <span class="tessera-mc-feedback incorrect">{optionFeedback[i] || incorrectFeedback}</span>
-            {:else if optionFeedback[i]}
-              <span class="tessera-mc-feedback">{optionFeedback[i]}</span>
-            {/if}
+{#snippet mcContent()}
+  <p class="tessera-mc-question" id="{groupId}-label">{question}</p>
+
+  <div class="tessera-mc-options">
+    {#each options as option, i (i)}
+      {@const optionId = `${groupId}-opt-${i}`}
+      {@const isSelected = selectedOption === i}
+      {@const stateClass = getOptionClass(i)}
+      <label
+        class="tessera-mc-option {stateClass}"
+        class:selected={isSelected}
+        for={optionId}
+      >
+        <input
+          type="radio"
+          id={optionId}
+          name={groupId}
+          value={i}
+          checked={isSelected}
+          disabled={q.locked}
+          onchange={() => handleSelect(i)}
+        />
+        <span class="tessera-mc-radio-custom"></span>
+        <span class="tessera-mc-option-text">{option}</span>
+
+        {#if q.feedbackVisible}
+          {#if stateClass === 'correct' && (correctFeedback || optionFeedback[i])}
+            <span class="tessera-mc-feedback correct"
+              >{optionFeedback[i] || correctFeedback}</span
+            >
+          {:else if stateClass === 'incorrect' && (incorrectFeedback || optionFeedback[i])}
+            <span class="tessera-mc-feedback incorrect"
+              >{optionFeedback[i] || incorrectFeedback}</span
+            >
+          {:else if optionFeedback[i]}
+            <span class="tessera-mc-feedback">{optionFeedback[i]}</span>
           {/if}
-        </label>
-      {/each}
-    </div>
-
-    {#if q.submitted}
-      {#if selectedOption === correct && correctFeedback && !optionFeedback[selectedOption]}
-        <div class="tessera-mc-overall-feedback correct">{correctFeedback}</div>
-      {:else if selectedOption !== correct && incorrectFeedback && !optionFeedback[selectedOption]}
-        <div class="tessera-mc-overall-feedback incorrect">{incorrectFeedback}</div>
-      {/if}
-      {#if q.canRetry}
-        <RetryButton onclick={() => q.retry()} />
-      {/if}
+        {/if}
+      </label>
+    {/each}
+  </div>
+
+  {#if q.feedbackVisible}
+    {#if selectedOption === correct && correctFeedback && !optionFeedback[selectedOption]}
+      <div class="tessera-mc-overall-feedback correct">{correctFeedback}</div>
+    {:else if selectedOption !== correct && incorrectFeedback && !optionFeedback[selectedOption]}
+      <div class="tessera-mc-overall-feedback incorrect">
+        {incorrectFeedback}
+      </div>
+    {/if}
+    {#if !inQuiz && q.canRetry}
+      <RetryButton onclick={() => q.retry()} />
     {/if}
+  {/if}
+{/snippet}
+
+{#if !inQuiz}
+  <div class="tessera-mc" role="radiogroup" aria-labelledby="{groupId}-label">
+    {@render mcContent()}
   </div>
 {/if}
 
@@ -122,51 +140,7 @@
     {#if q.isLockedCorrect}
       <LockedBanner />
     {/if}
-    <p class="tessera-mc-question" id="{groupId}-label">{question}</p>
-
-    <div class="tessera-mc-options">
-      {#each options as option, i}
-        {@const optionId = `${groupId}-opt-${i}`}
-        {@const isSelected = (q.locked ? q.answer : selectedOption) === i}
-        {@const stateClass = getOptionClass(i)}
-        <label
-          class="tessera-mc-option {stateClass}"
-          class:selected={isSelected}
-          for={optionId}
-        >
-          <input
-            type="radio"
-            id={optionId}
-            name={groupId}
-            value={i}
-            checked={isSelected}
-            disabled={q.locked}
-            onchange={() => handleSelect(i)}
-          />
-          <span class="tessera-mc-radio-custom"></span>
-          <span class="tessera-mc-option-text">{option}</span>
-
-          {#if q.feedbackVisible}
-            {#if stateClass === 'correct' && (correctFeedback || optionFeedback[i])}
-              <span class="tessera-mc-feedback correct">{optionFeedback[i] || correctFeedback}</span>
-            {:else if stateClass === 'incorrect' && (incorrectFeedback || optionFeedback[i])}
-              <span class="tessera-mc-feedback incorrect">{optionFeedback[i] || incorrectFeedback}</span>
-            {:else if optionFeedback[i]}
-              <span class="tessera-mc-feedback">{optionFeedback[i]}</span>
-            {/if}
-          {/if}
-        </label>
-      {/each}
-    </div>
-
-    {#if q.feedbackVisible}
-      {@const answer = q.answer}
-      {#if answer === correct && correctFeedback && !optionFeedback[answer]}
-        <div class="tessera-mc-overall-feedback correct">{correctFeedback}</div>
-      {:else if answer !== correct && incorrectFeedback && !optionFeedback[answer]}
-        <div class="tessera-mc-overall-feedback incorrect">{incorrectFeedback}</div>
-      {/if}
-    {/if}
+    {@render mcContent()}
   </div>
 {/snippet}
 
@@ -196,7 +170,9 @@
     border: 2px solid var(--tessera-border);
     border-radius: 8px;
     cursor: pointer;
-    transition: border-color 0.2s, background 0.2s;
+    transition:
+      border-color 0.2s,
+      background 0.2s;
     flex-wrap: wrap;
     min-height: 44px;
   }
@@ -221,7 +197,7 @@
     background: var(--tessera-error-bg);
   }
 
-  .tessera-mc-option input[type="radio"] {
+  .tessera-mc-option input[type='radio'] {
     position: absolute;
     opacity: 0;
     width: 0;
@@ -235,7 +211,9 @@
     border: 2px solid var(--tessera-border);
     border-radius: 50%;
     margin-top: 2px;
-    transition: border-color 0.2s, background 0.2s;
+    transition:
+      border-color 0.2s,
+      background 0.2s;
     position: relative;
   }
 
@@ -279,7 +257,8 @@
   .tessera-mc-feedback {
     width: 100%;
     font-size: 0.875rem;
-    padding: var(--tessera-spacing-sm) 0 0 calc(20px + var(--tessera-spacing-md));
+    padding: var(--tessera-spacing-sm) 0 0
+      calc(20px + var(--tessera-spacing-md));
     line-height: 1.4;
   }
 

package/src/components/Quiz.svelte

@@ -1,26 +1,28 @@
 <script>
   import { getContext } from 'svelte';
   import { useQuiz } from '../runtime/hooks.svelte.js';
+  import { TESSERA_PAGE } from '../runtime/contexts.js';
 
   let { children } = $props();
   let quizElement = $state(null);
 
   const handle = useQuiz({ element: () => quizElement });
 
-  const pageCtx = getContext('tessera-page');
+  const pageCtx = getContext(TESSERA_PAGE);
   let quizConfig = $derived(pageCtx?.quiz ?? {});
   let feedbackDisabled = $derived(quizConfig.feedbackMode === 'never');
   let maxAttempts = $derived(quizConfig.maxAttempts ?? Infinity);
-  let isImmediateMode = $derived(!feedbackDisabled && quizConfig.feedbackMode === 'immediate');
+  let isImmediateMode = $derived(
+    !feedbackDisabled && quizConfig.feedbackMode === 'immediate',
+  );
 
   let currentQuestionIndex = $state(0);
   let reviewIndex = $state(0);
 
   let totalQuestions = $derived(handle.questions.length);
   let currentQuestion = $derived(handle.questions[currentQuestionIndex]);
-  let reviewQuestion = $derived(handle.questions[reviewIndex]);
   let correctCount = $derived(
-    handle.questions.reduce((sum, q) => sum + (q.correct ? 1 : 0), 0)
+    handle.questions.reduce((sum, q) => sum + (q.correct ? 1 : 0), 0),
   );
   let passed = $derived(handle.score >= handle.passingScore);
 
@@ -31,7 +33,12 @@
 
   function needsReveal(q) {
     if (!q) return false;
-    return isImmediateMode && isAnswered(q) && !q.isLockedCorrect && !q.feedbackVisible;
+    return (
+      isImmediateMode &&
+      isAnswered(q) &&
+      !q.isLockedCorrect &&
+      !q.feedbackVisible
+    );
   }
 
   function goNextQuestion() {
@@ -74,25 +81,40 @@
   }
 </script>
 
-<div class="tessera-quiz" bind:this={quizElement} role="region" aria-label="Quiz">
+<div
+  class="tessera-quiz"
+  bind:this={quizElement}
+  role="region"
+  aria-label="Quiz"
+>
   {#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 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-progress-track">
         <div
           class="tessera-progress-fill"
-          style="width: {totalQuestions > 0 ? ((currentQuestionIndex + 1) / totalQuestions) * 100 : 0}%"
+          style="width: {totalQuestions > 0
+            ? ((currentQuestionIndex + 1) / totalQuestions) * 100
+            : 0}%"
         ></div>
       </div>
     </div>
 
     <div class="tessera-quiz-questions">
       {#each handle.questions as q, i (q.id)}
-        <div class="tessera-quiz-question-wrapper" class:active={i === currentQuestionIndex} aria-hidden={i !== currentQuestionIndex}>
+        <div
+          class="tessera-quiz-question-wrapper"
+          class:active={i === currentQuestionIndex}
+          aria-hidden={i !== currentQuestionIndex}
+        >
           {#if q.render}
             {@render q.render()}
           {/if}
@@ -114,7 +136,9 @@
           disabled={!isAnswered(currentQuestion)}
           onclick={goNextQuestion}
         >
-          {currentQuestion?.feedbackVisible && isImmediateMode ? 'Continue' : 'Next'}
+          {currentQuestion?.feedbackVisible && isImmediateMode
+            ? 'Continue'
+            : 'Next'}
         </button>
       {:else if needsReveal(currentQuestion)}
         <button
@@ -133,19 +157,26 @@
         </button>
       {/if}
     </div>
-
   {:else if handle.state === 'reviewing'}
     <!-- Review phase -->
     <div class="tessera-quiz-progress" aria-live="polite">
       <span class="tessera-quiz-progress-text">
-        <span class="tessera-quiz-progress-desktop">Review: Question {reviewIndex + 1} of {totalQuestions}</span>
-        <span class="tessera-quiz-progress-mobile">Review: {reviewIndex + 1}/{totalQuestions}</span>
+        <span class="tessera-quiz-progress-desktop"
+          >Review: Question {reviewIndex + 1} of {totalQuestions}</span
+        >
+        <span class="tessera-quiz-progress-mobile"
+          >Review: {reviewIndex + 1}/{totalQuestions}</span
+        >
       </span>
     </div>
 
     <div class="tessera-quiz-questions">
       {#each handle.questions as q, i (q.id)}
-        <div class="tessera-quiz-question-wrapper" class:active={i === reviewIndex} aria-hidden={i !== reviewIndex}>
+        <div
+          class="tessera-quiz-question-wrapper"
+          class:active={i === reviewIndex}
+          aria-hidden={i !== reviewIndex}
+        >
           {#if q.render}
             {@render q.render()}
           {/if}
@@ -177,14 +208,17 @@
         </button>
       {/if}
     </div>
-
   {:else}
     <!-- Results phase -->
     <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">{handle.score}%</span>
-        <span class="tessera-quiz-score-label" class:passed class:failed={!passed}>
+        <span
+          class="tessera-quiz-score-label"
+          class:passed
+          class:failed={!passed}
+        >
           {passed ? 'Passed' : 'Not Passed'}
         </span>
       </div>
@@ -210,7 +244,9 @@
           </button>
         {/if}
         {#if maxAttempts !== Infinity && handle.attemptCount >= maxAttempts}
-          <p class="tessera-quiz-attempts-exhausted">All attempts used ({handle.attemptCount}/{maxAttempts})</p>
+          <p class="tessera-quiz-attempts-exhausted">
+            All attempts used ({handle.attemptCount}/{maxAttempts})
+          </p>
         {/if}
       </div>
     </div>
@@ -271,7 +307,9 @@
     font-size: 0.9375rem;
     font-weight: 500;
     cursor: pointer;
-    transition: background 0.2s, opacity 0.2s;
+    transition:
+      background 0.2s,
+      opacity 0.2s;
     min-height: 44px;
     min-width: 44px;
   }
@@ -352,8 +390,12 @@
 
   /* Mobile */
   @media (max-width: 640px) {
-    .tessera-quiz-progress-desktop { display: none; }
-    .tessera-quiz-progress-mobile { display: inline; }
+    .tessera-quiz-progress-desktop {
+      display: none;
+    }
+    .tessera-quiz-progress-mobile {
+      display: inline;
+    }
 
     .tessera-quiz-nav {
       position: sticky;

package/src/components/ResultIcon.svelte

@@ -3,11 +3,27 @@
 </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
+    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
+    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/RevealModal.svelte

@@ -7,8 +7,6 @@
    * @prop {import('svelte').Snippet} trigger - Trigger content snippet
    * @prop {import('svelte').Snippet} content - Modal body snippet
    */
-  import { onMount } from 'svelte';
-
   let { trigger, content, title = '' } = $props();
   let open = $state(false);
   let modalRef = $state(null);
@@ -26,13 +24,6 @@
     }
   }
 
-  function handleTriggerKey(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      openModal();
-    }
-  }
-
   function handleOverlayClick(e) {
     if (e.target === e.currentTarget) {
       closeModal();
@@ -48,7 +39,7 @@
     // Focus trap
     if (e.key === 'Tab' && modalRef) {
       const focusable = modalRef.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
       );
       if (focusable.length === 0) return;
 
@@ -76,7 +67,7 @@
       queueMicrotask(() => {
         if (modalRef) {
           const firstFocusable = modalRef.querySelector(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
           );
           if (firstFocusable) firstFocusable.focus();
           else modalRef.focus();
@@ -90,10 +81,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="tessera-reveal-trigger"
-  onclick={openModal}
->
+<div class="tessera-reveal-trigger" onclick={openModal}>
   {@render trigger()}
 </div>
 
@@ -118,7 +106,11 @@
       <div class="tessera-modal-body">
         {@render content()}
       </div>
-      <button class="tessera-modal-close" onclick={closeModal} aria-label="Close modal">
+      <button
+        class="tessera-modal-close"
+        onclick={closeModal}
+        aria-label="Close modal"
+      >
         ✕
       </button>
     </div>
@@ -194,8 +186,9 @@
     color: var(--tessera-text-light);
     cursor: pointer;
     border-radius: 6px;
-    transition: background-color var(--tessera-transition-fast),
-                color var(--tessera-transition-fast);
+    transition:
+      background-color var(--tessera-transition-fast),
+      color var(--tessera-transition-fast);
   }
 
   .tessera-modal-close:hover {
@@ -209,13 +202,23 @@
   }
 
   @keyframes tessera-modal-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
 
   @keyframes tessera-modal-slide-in {
-    from { transform: translateY(10px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
+    from {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
 
   @media (max-width: 640px) {