Making multiple examps available

Updating dependencies
Possibly fixing errors on MultipleSelect Questions

src/stores.ts

@@ -1,6 +1,21 @@
 import { writable, readable } from "svelte/store";
-import Data from "../data.json";
-import { Question } from "./data";
+import { Question, Exam } from "./data";
+
+import CCNA2 from "../ccna2.json";
+import CCNA3 from "../ccna3.json";
+import TestData from "../data-test.json";
+
+const tests = new Map<string, Exam>();
+tests.set("ccna3", CCNA3);
+tests.set("ccna2", CCNA2);
+tests.set("test", TestData)
+
+let test = new URL(window.location.href).searchParams.get("exam");
+
+const dataVersion = tests.has(test) ? test : "ccna3";
+const Data = tests.get(dataVersion);
+
+console.log("Running exam:", dataVersion);
 
 const runsShould = 3;
 

src/views/Question.svelte

@@ -8,6 +8,7 @@
     import SelectMultiple from "./questions/SelectMultiple.svelte";
     import AssignValues from "./questions/AssignValues.svelte";
     import TextInput from "./questions/TextInput.svelte";
+    import Identity from 'svelte-key'
 
     const questions = new Map();
     questions.set(QuestionTypes.SelectOne, SelectOne);
@@ -24,14 +25,14 @@
     let idx = 0;
 
     function next() {
-        idx++;
+        showResult = false;
         if (isCorrect) {
             isCorrect = false;
             $activeQuestion.correct()
         } else {
             $activeQuestion.wrong();
         }
-        showResult = false;
+        idx++;
     }
 </script>
 
@@ -46,7 +47,9 @@
         </div>
     {/each}
     <div class="margin">
-        <svelte:component key={idx} this={component} {question} {showResult} bind:isCorrect />
+        <Identity key={idx}>
+            <svelte:component key={idx} this={component} {question} {showResult} bind:isCorrect />
+        </Identity>
     </div>
     <div class="margin fl">
         {#if !showResult}

src/views/questions/SelectMultiple.svelte

@@ -5,26 +5,16 @@
     export let showResult = false;
     export let isCorrect = false;
 
-
     $: options = randomize(Object.keys(question.options).map(e => ({ key: e, value: question.options[e] })));
 
     let selected = [];
+
     $: isCorrect = selected.length === question.correct.length && selected.every(val => question.correct.find(v => v === val));
 
     $: console.log("Selected:", selected, "showResult:", showResult, "isCorrect", isCorrect);
-
-
-    function toggle(id) {
-        if (selected.indexOf(id) < 0) {
-            selected = [...selected, id];
-        } else {
-            selected = selected.filter(e => e !== id);
-        }
-    }
-
 </script>
 <h3>Select {question.correct.length}</h3>
-{#each options as option}
+{#each options as option (option.key)}
     <div
         key={option.key}
         class:should={showResult && question.correct.indexOf(option.key) >= 0}
@@ -32,9 +22,10 @@
         <label class="input-checkbox" for={option.key}>{@html option.value.replace(/\n/g, "<br>")}
             <input
                 type="checkbox" 
-                id={option.key} 
-                checked={selected.indexOf(option.key) >= 0} 
-                on:click={(evt)=>showResult ? evt.preventDefault() : toggle(option.key)}
+                id={option.key}
+                bind:group={selected}
+                on:click={(evt)=>showResult ? evt.preventDefault() : undefined}
+                value={option.key}
             >
             <span></span>
         </label>