tessera-learn 0.0.1 → 0.0.2

package/src/components/FillInTheBlank.svelte

@@ -2,6 +2,9 @@
   import { getContext, onMount } from 'svelte';
   import { useQuestion } from '../runtime/hooks.svelte.js';
   import { slugFromQuestion } from './util.js';
+  import LockedBanner from './LockedBanner.svelte';
+  import ResultIcon from './ResultIcon.svelte';
+  import RetryButton from './RetryButton.svelte';
 
   let {
     id,
@@ -18,11 +21,9 @@
   const standalone = !quiz;
 
   let inputValue = $state('');
-  let saRetryCount = $state(0);
-  let saCanRetry = $derived(saRetryCount < maxRetries);
 
-  const inputId = `fitb-${Math.random().toString(36).slice(2, 9)}`;
-  const defaultId = `fitb-${slugFromQuestion(question)}`;
+  const componentId = $props.id();
+  const inputId = `fitb-${componentId}`;
 
   function checkAnswer(userAnswer) {
     if (!userAnswer || typeof userAnswer !== 'string') return false;
@@ -35,8 +36,9 @@
   }
 
   const handle = useQuestion({
-    id: id ?? defaultId,
-    weight,
+    get id() { return id ?? `fitb-${slugFromQuestion(question)}`; },
+    get weight() { return weight; },
+    get maxRetries() { return maxRetries; },
     response: () => ({
       type: 'fill-in',
       response: inputValue,
@@ -73,11 +75,6 @@
     }
   }
 
-  function handleRetry() {
-    saRetryCount++;
-    inputValue = '';
-    handle.reset();
-  }
 </script>
 
 {#if standalone}
@@ -100,7 +97,7 @@
       />
       {#if !handle.submitted}
         <button
-          class="tessera-fitb-check-btn"
+          class="tessera-btn-primary tessera-fitb-check-btn"
           disabled={!inputValue.trim()}
           onclick={() => { handle.submit(); }}
         >
@@ -114,9 +111,7 @@
       <div class="tessera-fitb-review">
         {#if isCorrect}
           <div class="tessera-fitb-result correct">
-            <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
+            <ResultIcon kind="correct" />
             Correct
           </div>
           {#if correctFeedback}
@@ -124,9 +119,7 @@
           {/if}
         {:else}
           <div class="tessera-fitb-result incorrect">
-            <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
+            <ResultIcon kind="incorrect" />
             Incorrect
           </div>
           <p class="tessera-fitb-correct-answer">
@@ -136,8 +129,8 @@
             <p class="tessera-fitb-feedback incorrect">{incorrectFeedback}</p>
           {/if}
         {/if}
-        {#if saCanRetry}
-          <button class="tessera-standalone-retry" onclick={handleRetry}>Try again</button>
+        {#if handle.canRetry}
+          <RetryButton onclick={() => handle.retry()} />
         {/if}
       </div>
     {/if}
@@ -147,12 +140,7 @@
 {#snippet renderQuestion()}
   <div class="tessera-fitb">
     {#if isLocked}
-      <div class="tessera-quiz-locked-banner">
-        <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
-        You already got this one right — click Next to continue.
-      </div>
+      <LockedBanner />
     {/if}
     <label class="tessera-fitb-question" for={inputId}>{question}</label>
 
@@ -177,9 +165,7 @@
       <div class="tessera-fitb-review">
         {#if isCorrect}
           <div class="tessera-fitb-result correct">
-            <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
+            <ResultIcon kind="correct" />
             Correct
           </div>
           {#if correctFeedback}
@@ -187,9 +173,7 @@
           {/if}
         {:else}
           <div class="tessera-fitb-result incorrect">
-            <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
+            <ResultIcon kind="incorrect" />
             Incorrect
           </div>
           <p class="tessera-fitb-correct-answer">
@@ -237,7 +221,7 @@
   .tessera-fitb-input:focus {
     outline: none;
     border-color: var(--tessera-primary);
-    box-shadow: var(--tessera-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.4));
+    box-shadow: var(--tessera-focus-ring);
   }
 
   .tessera-fitb-input:disabled {
@@ -288,12 +272,12 @@
 
   .tessera-fitb-feedback.correct {
     color: var(--tessera-success);
-    background: color-mix(in srgb, var(--tessera-success) 8%, transparent);
+    background: var(--tessera-success-bg);
   }
 
   .tessera-fitb-feedback.incorrect {
     color: var(--tessera-error);
-    background: color-mix(in srgb, var(--tessera-error) 8%, transparent);
+    background: var(--tessera-error-bg);
   }
 
   .tessera-fitb-check-btn {
@@ -301,40 +285,6 @@
     padding: 0.5rem 1rem;
     font-size: 0.875rem;
     font-weight: 600;
-    color: #fff;
-    background: var(--tessera-primary);
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    min-height: 44px;
-    transition: background 0.2s, opacity 0.2s;
-  }
-
-  .tessera-fitb-check-btn:hover:not(:disabled) {
-    background: var(--tessera-primary-dark);
-  }
-
-  .tessera-fitb-check-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .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);
   }
 
   @media (max-width: 640px) {

package/src/components/LockedBanner.svelte

@@ -0,0 +1,30 @@
+<script>
+  let { message = 'You already got this one right — click Next to continue.' } = $props();
+</script>
+
+<div class="tessera-quiz-locked-banner">
+  <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
+  {message}
+</div>
+
+<style>
+  .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: var(--tessera-success-bg);
+    border: 1px solid var(--tessera-success-border);
+    border-radius: 6px;
+    color: var(--tessera-success);
+    font-size: 0.9375rem;
+    font-weight: 500;
+  }
+
+  .tessera-quiz-locked-banner svg {
+    flex-shrink: 0;
+  }
+</style>

package/src/components/Matching.svelte

@@ -2,7 +2,10 @@
   import { getContext, onMount } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { useQuestion } from '../runtime/hooks.svelte.js';
-  import { slugFromQuestion } from './util.js';
+  import { slugFromQuestion, shuffle } from './util.js';
+  import LockedBanner from './LockedBanner.svelte';
+  import ResultIcon from './ResultIcon.svelte';
+  import RetryButton from './RetryButton.svelte';
 
   let {
     id,
@@ -19,31 +22,19 @@
 
   let shuffledRight = $state([]);
   let matches = $state(new SvelteMap());
+  // Reverse index (right.originalIndex → left index) for O(1) right-column lookups.
+  let rightToLeft = $state(new SvelteMap());
   let selectedLeft = $state(null);
   let selectedRight = $state(null);
 
-  let saRetryCount = $state(0);
-  let saCanRetry = $derived(saRetryCount < maxRetries);
-  let saAllMatched = $derived(matches.size === pairs.length);
-
-  const defaultId = `matching-${slugFromQuestion(question)}`;
 
   const pairColors = [
     '#2563eb', '#9333ea', '#0891b2', '#c2410c', '#4f46e5',
     '#0d9488', '#b91c1c', '#7c3aed', '#0369a1', '#a16207',
   ];
 
-  function shuffleArray(arr) {
-    const shuffled = [...arr];
-    for (let i = shuffled.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
-    }
-    return shuffled;
-  }
-
   function initShuffle() {
-    shuffledRight = shuffleArray(pairs.map((p, i) => ({ text: p.right, originalIndex: i })));
+    shuffledRight = shuffle(pairs.map((p, i) => ({ text: p.right, originalIndex: i })));
   }
 
   if (standalone) {
@@ -66,14 +57,16 @@
 
   function resetState() {
     matches = new SvelteMap();
+    rightToLeft = new SvelteMap();
     selectedLeft = null;
     selectedRight = null;
     initShuffle();
   }
 
   const handle = useQuestion({
-    id: id ?? defaultId,
-    weight,
+    get id() { return id ?? `matching-${slugFromQuestion(question)}`; },
+    get weight() { return weight; },
+    get maxRetries() { return maxRetries; },
     response: () => ({
       type: 'matching',
       response: [...matches.entries()].map(([l, r]) => [String(l), String(r)]),
@@ -87,13 +80,6 @@
   let isLocked = $derived(standalone ? false : quiz.isLockedCorrect(myIndex));
   let quizLocked = $derived(standalone ? handle.submitted : quiz.isAnswerLocked(myIndex));
 
-  // Auto-submit in standalone mode when all pairs matched
-  $effect(() => {
-    if (standalone && saAllMatched && !handle.submitted) {
-      handle.submit();
-    }
-  });
-
   function handleLeftClick(leftIndex) {
     if (standalone) {
       if (handle.submitted) return;
@@ -133,17 +119,26 @@
   }
 
   function createMatch(leftIndex, rightOriginalIndex) {
-    for (const [l, r] of matches) {
-      if (l === leftIndex || r === rightOriginalIndex) {
-        matches.delete(l);
-      }
+    // Free any prior partner on either side so both maps stay consistent.
+    const priorRightForLeft = matches.get(leftIndex);
+    if (priorRightForLeft !== undefined) {
+      rightToLeft.delete(priorRightForLeft);
+    }
+    const priorLeftForRight = rightToLeft.get(rightOriginalIndex);
+    if (priorLeftForRight !== undefined) {
+      matches.delete(priorLeftForRight);
     }
 
     matches.set(leftIndex, rightOriginalIndex);
+    rightToLeft.set(rightOriginalIndex, leftIndex);
     selectedLeft = null;
     selectedRight = null;
 
-    if (!standalone) {
+    if (standalone) {
+      if (matches.size === pairs.length && !handle.submitted) {
+        handle.submit();
+      }
+    } else {
       quiz.setAnswer(myIndex, new Map(matches));
     }
   }
@@ -154,34 +149,30 @@
     } else {
       if (quizLocked) return;
     }
+    const right = matches.get(leftIndex);
     matches.delete(leftIndex);
+    if (right !== undefined) rightToLeft.delete(right);
     if (!standalone) {
       quiz.setAnswer(myIndex, new Map(matches));
     }
   }
 
-  function handleRetry() {
-    saRetryCount++;
-    handle.reset();
-  }
-
   function getMatchColor(leftIndex) {
     if (!matches.has(leftIndex)) return null;
     return pairColors[leftIndex % pairColors.length];
   }
 
   function getRightMatchColor(rightOriginalIndex) {
-    for (const [l, r] of matches) {
-      if (r === rightOriginalIndex) return pairColors[l % pairColors.length];
-    }
-    return null;
+    const l = rightToLeft.get(rightOriginalIndex);
+    return l === undefined ? null : pairColors[l % pairColors.length];
   }
 
   function isRightMatched(rightOriginalIndex) {
-    for (const [, r] of matches) {
-      if (r === rightOriginalIndex) return true;
-    }
-    return false;
+    return rightToLeft.has(rightOriginalIndex);
+  }
+
+  function getLeftForRight(rightOriginalIndex) {
+    return rightToLeft.get(rightOriginalIndex);
   }
 
   function isMatchCorrect(leftIndex) {
@@ -246,7 +237,7 @@
           aria-label="{item.text}{matched ? ' (matched)' : ''}"
         >
           {#if matched}
-            {@const leftIdx = [...matches.entries()].find(([, r]) => r === item.originalIndex)?.[0]}
+            {@const leftIdx = getLeftForRight(item.originalIndex)}
             <span class="tessera-matching-badge" style="background: {color}">
               {leftIdx !== undefined ? leftIdx + 1 : ''}
             </span>
@@ -262,9 +253,7 @@
     <div class="tessera-matching-review">
       {#if isCorrect}
         <div class="tessera-matching-result correct">
-          <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
+          <ResultIcon kind="correct" />
           All pairs matched correctly!
         </div>
         {#if correctFeedback}
@@ -272,9 +261,7 @@
         {/if}
       {:else}
         <div class="tessera-matching-result incorrect">
-          <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
+          <ResultIcon kind="incorrect" />
           Some pairs are incorrect
         </div>
         <div class="tessera-matching-correct-pairs">
@@ -287,8 +274,8 @@
           <p class="tessera-matching-feedback incorrect">{incorrectFeedback}</p>
         {/if}
       {/if}
-      {#if standalone && saCanRetry}
-        <button class="tessera-standalone-retry" onclick={handleRetry}>Try again</button>
+      {#if standalone && handle.canRetry}
+        <RetryButton onclick={() => handle.retry()} />
       {/if}
     </div>
   {/if}
@@ -303,12 +290,7 @@
 {#snippet renderQuestion()}
   <div class="tessera-matching" aria-label={question}>
     {#if isLocked}
-      <div class="tessera-quiz-locked-banner">
-        <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
-        You already got this one right — click Next to continue.
-      </div>
+      <LockedBanner />
     {/if}
     {@render matchingContent()}
   </div>
@@ -382,12 +364,12 @@
 
   .tessera-matching-item.correct {
     border-color: var(--tessera-success) !important;
-    background: color-mix(in srgb, var(--tessera-success) 8%, transparent) !important;
+    background: var(--tessera-success-bg) !important;
   }
 
   .tessera-matching-item.incorrect {
     border-color: var(--tessera-error) !important;
-    background: color-mix(in srgb, var(--tessera-error) 8%, transparent) !important;
+    background: var(--tessera-error-bg) !important;
   }
 
   .tessera-matching-item:disabled {
@@ -474,30 +456,12 @@
 
   .tessera-matching-feedback.correct {
     color: var(--tessera-success);
-    background: color-mix(in srgb, var(--tessera-success) 8%, transparent);
+    background: var(--tessera-success-bg);
   }
 
   .tessera-matching-feedback.incorrect {
     color: var(--tessera-error);
-    background: color-mix(in srgb, var(--tessera-error) 8%, transparent);
-  }
-
-  .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);
+    background: var(--tessera-error-bg);
   }
 
   @media (max-width: 640px) {

package/src/components/MultipleChoice.svelte

@@ -2,6 +2,8 @@
   import { getContext, onMount } from 'svelte';
   import { useQuestion } from '../runtime/hooks.svelte.js';
   import { slugFromQuestion } from './util.js';
+  import LockedBanner from './LockedBanner.svelte';
+  import RetryButton from './RetryButton.svelte';
 
   let {
     id,
@@ -19,16 +21,14 @@
   const standalone = !quiz;
 
   let selectedOption = $state(null);
-  let saRetryCount = $state(0);
-  let saCanRetry = $derived(saRetryCount < maxRetries);
 
-  // Unique IDs for accessibility
-  const groupId = `mc-${Math.random().toString(36).slice(2, 9)}`;
-  const defaultId = `mc-${slugFromQuestion(question)}`;
+  const componentId = $props.id();
+  const groupId = `mc-${componentId}`;
 
   const handle = useQuestion({
-    id: id ?? defaultId,
-    weight,
+    get id() { return id ?? `mc-${slugFromQuestion(question)}`; },
+    get weight() { return weight; },
+    get maxRetries() { return maxRetries; },
     response: () => ({
       type: 'choice',
       response: selectedOption !== null ? [String(selectedOption)] : [],
@@ -55,12 +55,6 @@
     }
   }
 
-  function handleRetry() {
-    saRetryCount++;
-    selectedOption = null;
-    handle.reset();
-  }
-
   function isCorrectOption(optIndex) {
     return optIndex === correct;
   }
@@ -129,8 +123,8 @@
       {:else if selectedOption !== correct && incorrectFeedback && !optionFeedback[selectedOption]}
         <div class="tessera-mc-overall-feedback incorrect">{incorrectFeedback}</div>
       {/if}
-      {#if saCanRetry}
-        <button class="tessera-standalone-retry" onclick={handleRetry}>Try again</button>
+      {#if handle.canRetry}
+        <RetryButton onclick={() => handle.retry()} />
       {/if}
     {/if}
   </div>
@@ -139,12 +133,7 @@
 {#snippet renderQuestion()}
   <div class="tessera-mc" role="radiogroup" aria-labelledby="{groupId}-label">
     {#if isLocked}
-      <div class="tessera-quiz-locked-banner">
-        <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16" 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>
-        You already got this one right — click Next to continue.
-      </div>
+      <LockedBanner />
     {/if}
     <p class="tessera-mc-question" id="{groupId}-label">{question}</p>
 
@@ -237,12 +226,12 @@
 
   .tessera-mc-option.correct {
     border-color: var(--tessera-success);
-    background: color-mix(in srgb, var(--tessera-success) 8%, transparent);
+    background: var(--tessera-success-bg);
   }
 
   .tessera-mc-option.incorrect {
     border-color: var(--tessera-error);
-    background: color-mix(in srgb, var(--tessera-error) 8%, transparent);
+    background: var(--tessera-error-bg);
   }
 
   .tessera-mc-option input[type="radio"] {
@@ -323,33 +312,15 @@
   }
 
   .tessera-mc-overall-feedback.correct {
-    background: color-mix(in srgb, var(--tessera-success) 8%, transparent);
+    background: var(--tessera-success-bg);
     color: var(--tessera-success);
   }
 
   .tessera-mc-overall-feedback.incorrect {
-    background: color-mix(in srgb, var(--tessera-error) 8%, transparent);
+    background: var(--tessera-error-bg);
     color: var(--tessera-error);
   }
 
-  .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);
-  }
-
   .tessera-mc-option:has(input:focus-visible) {
     outline: 2px solid var(--tessera-primary);
     outline-offset: 2px;