First version with CCNA 2 questions and answers

src/views/questions/AssignValues.svelte

@@ -0,0 +1 @@
+The developer was to lazy to implement this type of question. Sorry :)

src/views/questions/SelectMultiple.svelte

@@ -0,0 +1,47 @@
+<script>
+    export let question;
+    export let showResult = false;
+    export let isCorrect = false;
+
+
+    $: options = Object.keys(question.options).map(e => ({ key: e, value: question.options[e] }));
+
+    let selected = [];
+    $: isCorrect = selected.every(val => question.correct[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>
+
+{#each options as option}
+    <div
+        key={option.key}
+        class:should={showResult && question.correct.indexOf(option.key) >= 0}
+    >
+        <label class="input-checkbox" for={option.key}>{option.value}
+            <input
+                type="checkbox" 
+                id={option.key} 
+                checked={selected.indexOf(option.key) >= 0} 
+                on:click={(evt)=>showResult ? evt.preventDefault() : toggle(option.key)}
+            >
+            <span></span>
+        </label>
+        <br/>
+    </div>
+{/each}
+
+<style>
+    .should {
+        color: var(--primary) !important;
+    }
+</style>

src/views/questions/SelectOne.svelte

@@ -0,0 +1,40 @@
+<script>
+    export let question;
+    export let showResult = false;
+
+    export let isCorrect = false;
+
+
+    $: options = Object.keys(question.options).map(e => ({ key: e, value: question.options[e] }));
+
+    let selected = undefined;
+    $: isCorrect = selected === question.correct;
+
+    $: console.log("Selected:", selected, "showResult:", showResult, "isCorrect", isCorrect);
+
+</script>
+
+{#each options as option}
+    <div
+        key={option.key}
+        class:should={showResult && option.key === question.correct }
+    >
+        <label class="input-checkbox" for={option.key}>{option.value}
+            <input
+                type="radio"
+                id={option.key} 
+                checked={option.key===selected} 
+                on:click={(evt)=>showResult ?
+                evt.preventDefault() : selected = option.key}
+            >
+            <span></span>
+        </label>
+        <br/>
+    </div>
+{/each}
+
+<style>
+    .should {
+        color: var(--primary) !important;
+    }
+</style>

src/views/questions/TextInput.svelte

@@ -0,0 +1,34 @@
+<script>
+    export let question;
+    export let showResult = false;
+    export let isCorrect = false;
+
+
+    $: options = Object.keys(question.options).map(e => ({ key: e, value: question.options[e] }));
+
+    let selected = [];
+    $: isCorrect = selected.every(val => question.correct[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>
+
+<div class="input-group">
+    <label>Value</label>;
+    <input />
+</div>
+
+<style>
+    .should {
+        color: var(--primary) !important;
+    }
+</style>