title, appearance, a few more bugs, better defaults

public/index.html

@@ -4,7 +4,7 @@
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-	<title>Svelte app</title>
+	<title>Binary Quiz!</title>
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>

src/components/Inputs.svelte

@@ -17,6 +17,9 @@
         if (!$num_problems){
             num_problems.update(() => DEFAULT_NUM_PROBLEMS)
         }
+        if (!$bits){
+            bits.update(() => DEFAULT_BITS)
+        }
         const problems_ = generateProblems($bits, $num_problems)
         problems.update(() => problems_)
         activeQuiz.update(() => true)

src/components/Problem.svelte

@@ -34,8 +34,15 @@
 </script>
 
 {#if displaySummary}
-    <div>Congratulations, you've completed {$num_problems} {$bits}-bit problems!</div>
-    <a href="#" on:click={reset}>Go back to home screen.</a>
+    <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">

src/config.js

@@ -4,8 +4,8 @@ export const MIN_PROBLEMS = 2
 export const MAX_PROBLEMS = 99
 export const MAX_DIGITS_PROBLEMS = MAX_PROBLEMS.toString().length
 export const MAX_DIGITS_BITS = MAX_BITS.toString().length
-export const DEFAULT_BITS = 8
-export const DEFAULT_NUM_PROBLEMS = 20
+export const DEFAULT_BITS = 4
+export const DEFAULT_NUM_PROBLEMS = 10
 
 export const getMaxPermutations = (bits) => {
    return Math.pow(2, bits)