simplification

package.json

@@ -1,6 +1,6 @@
 {
   "name": "binary-quiz-frontend",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "author": "Zev Averbach <zev@averba.ch> (https://averba.ch)",
   "license": "MIT",
   "scripts": {

public/global.css

@@ -94,3 +94,10 @@ input[type=number] {
     -moz-appearance:textfield;
 }
 
+.problem {
+	font-size: 3em;
+}
+
+.problem input[type=number] {
+	border: none;
+}

src/components/Inputs.svelte

@@ -1,5 +1,5 @@
 <script>
-    import download from '../utils/download'
+    import download from '../download'
     import {
         MIN_BITS, MAX_BITS, MIN_PROBLEMS, MAX_PROBLEMS, DEFAULT_BITS, DEFAULT_NUM_PROBLEMS,
         MAX_DIGITS_BITS, MAX_DIGITS_PROBLEMS

src/components/Problem.svelte

@@ -1,68 +0,0 @@
-<script>
-    import {checkAnswer} from "../problems";
-    import {bits, activeProblemIndex, tally, num_problems, activeQuiz} from '../stores'
-    import Tally from "./Tally.svelte";
-
-    export let problem
-    let displaySummary = false
-    let solution
-    let class_ = ""
-
-    const check = () => {
-        if (checkAnswer(solution, problem)) {
-            tally.update(() => $tally + 1)
-            if ($num_problems === $activeProblemIndex + 1) {
-                displaySummary = true
-            } else {
-                activeProblemIndex.update(() => $activeProblemIndex + 1)
-            }
-        } else {
-            class_ = "incorrect"
-        }
-        solution = null
-    }
-
-    const reset = () => {
-        activeProblemIndex.update(() => 0)
-        tally.update(() => 0)
-        activeQuiz.update(() => false)
-        bits.update(() => null)
-        num_problems.update(() => null)
-        displaySummary = false
-    }
-
-</script>
-
-{#if displaySummary}
-    <div style="font-size: 2em;">
-        <div>
-            Congratulations, you've completed {$num_problems} {$bits}-bit problems!
-        </div>
-        <div style="margin-top: 1em;">
-            <a href="#" on:click={reset}>Go back to the home screen.</a>
-        </div>
-    </div>
-
-{:else}
-    <Tally />
-    <form on:submit|preventDefault={check} class="{class_} problem">
-        <label>
-           {problem} =
-           <input autofocus type=number bind:value={solution}>
-        </label>
-        <input type=submit style="visibility: hidden">
-    </form>
-{/if}
-
-<style>
-    .problem {
-        font-size: 3em;
-    }
-
-    .problem input[type=number] {
-       border: none;
-    }
-    .incorrect {
-        border: dodgerblue;
-    }
-</style>

src/components/Quiz.svelte

@@ -1,7 +1,54 @@
 <script>
-    import {bits, num_problems, problems, activeProblemIndex} from '../stores.js'
-    import Problem from "./Problem.svelte";
+    import {checkAnswer} from "../problems";
+    import {problems, bits, activeProblemIndex, tally, num_problems, activeQuiz} from '../stores'
+    import Tally from "./Tally.svelte";
+
+    $: problem = $problems[$activeProblemIndex]
+    let displaySummary = false
+    let solution
+
+    const check = () => {
+        if (!checkAnswer(solution, problem)) {
+            class_ = "incorrect"
+        } else {
+            tally.update(() => $tally + 1)
+            if ($num_problems === $activeProblemIndex + 1) {
+                displaySummary = true
+            } else {
+                activeProblemIndex.update(() => $activeProblemIndex + 1)
+            }
+            solution = null
+        }
+    }
+
+    const reset = () => {
+        activeProblemIndex.update(() => 0)
+        tally.update(() => 0)
+        activeQuiz.update(() => false)
+        bits.update(() => null)
+        num_problems.update(() => null)
+        displaySummary = false
+    }
+
 </script>
 
-<Problem problem={$problems[$activeProblemIndex]}/>
+{#if displaySummary}
+    <div style="font-size: 2em;">
+        <div>
+            Congratulations, you've completed {$num_problems} {$bits}-bit problems!
+        </div>
+        <div style="margin-top: 1em;">
+            <a href="#" on:click={reset}>Go back to the home screen.</a>
+        </div>
+    </div>
+{:else}
+    <Tally />
+    <form on:submit|preventDefault={check} class="problem">
+        <label>
+           {problem} =
+           <input autofocus type=number bind:value={solution}>
+        </label>
+        <input type=submit style="visibility: hidden">
+    </form>
+{/if}
 

src/problems.js

@@ -3,14 +3,15 @@ import {DEFAULT_BITS, DEFAULT_NUM_PROBLEMS} from "./config";
 export const generateProblems = (bits, num_problems) => {
     let probs = []
     let counter = 0
+
     while (counter < (num_problems || DEFAULT_NUM_PROBLEMS)) {
         let problem = generateProblem(bits || DEFAULT_BITS)
-        if (probs.includes(problem)) {
-            continue
+        if (!probs.includes(problem)) {
+            probs.push(problem)
+            counter++
         }
-        probs.push(problem)
-        counter++
     }
+
     return probs
 }