small tweaks

.gitignore

@@ -2,3 +2,5 @@
 /public/build/
 
 .DS_Store
+
+.now

TODO.md

@@ -1,13 +1,17 @@
-- deploy
-  - now.sh, waiting for it to be purely front end
-    - purely front end except for mailing list
-- remove repeated exercises
 - make text inputs big enough for MAX_DIGITS_PROBLEMS and MAX_DIGITS_BITS
 - show a message on submit
 - show warning when specifying invalid number of bits or problems
-- prevent submissions more than x times per time
-- show a live-updating preview as you select different settings
-- make it look nice
 - add contact info
 - add 'about'
 - add mailing list
+  - prompt at the end of a quiz to sign up for it
+- uncomment PDF part
+- add PDF export in pure front end
+- does it work on mobile?
+- add animations
+  - 'nuh-uh' shake for wrong answers
+  - nice reward animations for right answers
+  - make the placeholders become real text for a split second before starting
+  - super mario land pixellation animation
+- deploy to production
+  - use a custom domain

package.json

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

public/global.css

@@ -68,6 +68,9 @@ button:focus {
 	text-align: right; width: 2em; border: none; outline: none;
 }
 
+input:focus {
+	outline: none;
+}
 
 .primary-button {
 	cursor: pointer;

src/components/Inputs.svelte

@@ -14,6 +14,9 @@
     }
 
     const submit = () => {
+        if (!$num_problems){
+            num_problems.update(() => DEFAULT_NUM_PROBLEMS)
+        }
         const problems_ = generateProblems($bits, $num_problems)
         problems.update(() => problems_)
         activeQuiz.update(() => true)
@@ -33,7 +36,7 @@
                     type=number
                     bind:value={$bits}
             >
-            Bits
+            bits
         </label>
         <label>
             <input
@@ -44,9 +47,18 @@
                     type=number
                     bind:value={$num_problems}
             >
-            Number of Problems
+            problems
         </label>
     </div>
-    <input class="primary-button" disabled={!$valid} type=submit value="Start Quiz" >
-    <input class="button" disabled={!$valid} type=button on:click={downloadAndClear} value="Download PDFs">
+    <input class="primary-button" disabled={!$valid} type=submit value="Start Quiz [enter]" >
+<!--    <input class="button" disabled={!$valid} type=button on:click={downloadAndClear} value="Download PDFs">-->
 </form>
+
+<style>
+    input[type=number] {
+        font-size: 3em;
+    }
+    input[type=submit] {
+        font-size: 1.5em;
+    }
+</style>

src/components/Problem.svelte

@@ -36,7 +36,7 @@
     <form on:submit|preventDefault={check} class="{class_} problem">
         <label>
            {problem} =
-           <input autofocus type=number style="width: {$bits}em" bind:value={solution}>
+           <input autofocus type=number bind:value={solution}>
         </label>
         <input type=submit style="visibility: hidden">
     </form>
@@ -45,8 +45,10 @@
 <style>
     .problem {
         font-size: 3em;
-        display: flex;
-        flex-direction: row;
+    }
+
+    .problem input[type=number] {
+       border: none;
     }
     .incorrect {
         border: dodgerblue;

src/stores.js

@@ -14,6 +14,6 @@ export const valid = derived([bits, num_problems], ([$bits, $num_problems]) => (
     && ($bits || DEFAULT_BITS) >= MIN_BITS
     && ($num_problems || DEFAULT_NUM_PROBLEMS) >= MIN_PROBLEMS
     && ($num_problems || DEFAULT_NUM_PROBLEMS) <= MAX_PROBLEMS
-    && ($num_problems || DEFAULT_NUM_PROBLEMS) <= getMaxPermutations($bits)
+    && ($num_problems || DEFAULT_NUM_PROBLEMS) <= getMaxPermutations($bits || DEFAULT_BITS)
 ))