diff --git a/TODO.md b/TODO.md
index 892f99a..0bd88a5 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,6 +1,7 @@
 - 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
diff --git a/public/global.css b/public/global.css
index ec905f5..587b220 100644
--- a/public/global.css
+++ b/public/global.css
@@ -64,3 +64,30 @@ button:not(:disabled):active {
 button:focus {
 	border-color: #666;
 }
+.inputs {
+	text-align: right; width: 2em; border: none; outline: none;
+}
+
+
+.primary-button {
+	cursor: pointer;
+    border: none;
+	background-color: dodgerblue;
+	color: white
+}
+
+.button {
+    cursor: pointer;
+	background-color: white;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+input[type=number] {
+    -moz-appearance:textfield;
+}
+
diff --git a/src/App.svelte b/src/App.svelte
index 7089399..b4db6e8 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,9 +1,15 @@
 <script>
-    import Inputs from "./Inputs.svelte";
-    import Quiz from "./Quiz.svelte";
+    import Inputs from "./components/Inputs.svelte";
+    import Quiz from "./components/Quiz.svelte";
+    import Tally from "./components/Tally.svelte";
+    import {activeQuiz} from './stores'
 </script>
 <main style="margin: 2em;">
     <h1>Binary Quiz!</h1>
-    <Inputs />
-    <Quiz />
+    {#if ($activeQuiz)}
+        <Tally />
+        <Quiz />
+    {:else}
+        <Inputs />
+    {/if}
 </main>
diff --git a/src/Inputs.svelte b/src/Inputs.svelte
deleted file mode 100644
index 573f8a2..0000000
--- a/src/Inputs.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-    import download from './utils/download.js'
-    import {
-        MIN_BITS, MAX_BITS, MIN_PROBLEMS, MAX_PROBLEMS, DEFAULT_BITS, DEFAULT_NUM_PROBLEMS ,
-            MAX_DIGITS_BITS, MAX_DIGITS_PROBLEMS
-    } from './config.js'
-    import { bits, num_problems } from './stores.js'
-
-    $: valid = ($bits || DEFAULT_BITS) <= MAX_BITS
-            && ($bits || DEFAULT_BITS) >= MIN_BITS
-            && ($num_problems || DEFAULT_NUM_PROBLEMS) >= MIN_PROBLEMS
-            && ($num_problems || DEFAULT_NUM_PROBLEMS) <= MAX_PROBLEMS
-
-    const downloadAndClear = () => {
-        download($bits || DEFAULT_BITS, $num_problems || DEFAULT_NUM_PROBLEMS)
-        bits.update(() => null)
-        num_problems.update(() => null)
-    }
-
-</script>
-
-<form on:submit|preventDefault={downloadAndClear}>
-    <div id=inputs style="margin: 2em;">
-        <label>
-            <input
-                    style="text-align: right; width: 2em; border: none; outline: none"
-                    maxlength={MAX_DIGITS_BITS}
-                    placeholder={DEFAULT_BITS}
-                    autofocus
-                    type=text bind:value={$bits}
-            >
-            Bits
-        </label>
-        <label>
-            <input
-                    style="text-align: right; width: 2em; border: none; outline: none"
-                    maxlength={MAX_DIGITS_PROBLEMS}
-                    placeholder={DEFAULT_NUM_PROBLEMS}
-                    type=text bind:value={$num_problems}
-            >
-            Number of Problems
-        </label>
-    </div>
-    <input disabled={!valid} type=submit style="cursor:pointer;" value="Download PDFs" >
-</form>
diff --git a/src/Quiz.svelte b/src/Quiz.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Inputs.svelte b/src/components/Inputs.svelte
new file mode 100644
index 0000000..f83f1b6
--- /dev/null
+++ b/src/components/Inputs.svelte
@@ -0,0 +1,52 @@
+<script>
+    import download from '../utils/download'
+    import {
+        MIN_BITS, MAX_BITS, MIN_PROBLEMS, MAX_PROBLEMS, DEFAULT_BITS, DEFAULT_NUM_PROBLEMS,
+        MAX_DIGITS_BITS, MAX_DIGITS_PROBLEMS
+    } from '../config'
+    import { bits, num_problems, valid, activeQuiz, problems } from '../stores'
+    import {generateProblems} from "../problems";
+
+    const downloadAndClear = () => {
+        download($bits || DEFAULT_BITS, $num_problems || DEFAULT_NUM_PROBLEMS)
+        bits.update(() => null)
+        num_problems.update(() => null)
+    }
+
+    const submit = () => {
+        const problems_ = generateProblems($bits, $num_problems)
+        problems.update(() => problems_)
+        activeQuiz.update(() => true)
+    }
+
+</script>
+
+<form on:submit|preventDefault={submit}>
+    <div id=inputs style="margin: 2em;">
+        <label>
+            <input
+                    class="inputs"
+                    max={MAX_BITS}
+                    min={MIN_BITS}
+                    placeholder={DEFAULT_BITS}
+                    autofocus
+                    type=number
+                    bind:value={$bits}
+            >
+            Bits
+        </label>
+        <label>
+            <input
+                    class="inputs"
+                    max={MAX_PROBLEMS}
+                    min={MIN_PROBLEMS}
+                    placeholder={DEFAULT_NUM_PROBLEMS}
+                    type=number
+                    bind:value={$num_problems}
+            >
+            Number of 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">
+</form>
diff --git a/src/components/Problem.svelte b/src/components/Problem.svelte
new file mode 100644
index 0000000..32160cc
--- /dev/null
+++ b/src/components/Problem.svelte
@@ -0,0 +1,54 @@
+<script>
+    import {checkAnswer} from "../problems";
+    import { bits, activeProblemIndex, tally, num_problems, activeQuiz } from '../stores'
+    export let problem
+    let displaySummary = false
+    let solution
+    let submitted = false
+    let class_ = ""
+
+    const check = () => {
+        if (checkAnswer(solution, problem)) {
+            submitted = true
+            if ($num_problems === $activeProblemIndex + 1) {
+                displaySummary = true
+            }
+            activeProblemIndex.update(() => $activeProblemIndex + 1)
+            tally.update(() => $tally + 1)
+        } else {
+            class_ = "incorrect"
+        }
+        solution = null
+    }
+
+    const reset = () => {
+        activeQuiz.update(() => false)
+        bits.update(() => null)
+        num_problems.update(() => null)
+    }
+
+</script>
+
+{#if displaySummary}
+    <div>Congratulations, you've completed {$num_problems} {$bits}-bit problems!</div>
+    <div><a on:click={reset}>Go back to home screen.</a></div>
+{:else}
+    <form on:submit|preventDefault={check} class="{class_} problem">
+        <label>
+           {problem} =
+           <input autofocus type=number style="width: {$bits}em" bind:value={solution}>
+        </label>
+        <input type=submit style="visibility: hidden">
+    </form>
+{/if}
+
+<style>
+    .problem {
+        font-size: 3em;
+        display: flex;
+        flex-direction: row;
+    }
+    .incorrect {
+        border: dodgerblue;
+    }
+</style>
diff --git a/src/components/Quiz.svelte b/src/components/Quiz.svelte
new file mode 100644
index 0000000..3023eff
--- /dev/null
+++ b/src/components/Quiz.svelte
@@ -0,0 +1,7 @@
+<script>
+    import {bits, num_problems, problems, activeProblemIndex} from '../stores.js'
+    import Problem from "./Problem.svelte";
+</script>
+
+<Problem problem={$problems[$activeProblemIndex]}/>
+
diff --git a/src/components/Tally.svelte b/src/components/Tally.svelte
new file mode 100644
index 0000000..f9aef8e
--- /dev/null
+++ b/src/components/Tally.svelte
@@ -0,0 +1,7 @@
+<script>
+    import { tally, num_problems, bits } from '../stores'
+</script>
+
+<div>
+    {$tally}/{$num_problems}
+</div>
diff --git a/src/config.js b/src/config.js
index 78ca859..fcd45ae 100644
--- a/src/config.js
+++ b/src/config.js
@@ -7,3 +7,7 @@ export const MAX_DIGITS_BITS = MAX_BITS.toString().length
 export const DEFAULT_BITS = 8
 export const DEFAULT_NUM_PROBLEMS = 20
 
+export const getMaxPermutations = (bits) => {
+   return Math.pow(2, bits)
+}
+
diff --git a/src/problems.js b/src/problems.js
new file mode 100644
index 0000000..bf8669e
--- /dev/null
+++ b/src/problems.js
@@ -0,0 +1,22 @@
+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
+        }
+        probs.push(problem)
+        counter++
+    }
+    return probs
+}
+
+export const generateProblem = bits => Array.from(Array(bits)).map((_, i) => Math.random() >= .5 ? '1' : '0').join('')
+
+export const solveProblem = problem => parseInt(problem, 2)
+
+export const checkAnswer = (answer, problem) => solveProblem(problem) === answer
+
diff --git a/src/stores.js b/src/stores.js
index c4e1773..3883b7d 100644
--- a/src/stores.js
+++ b/src/stores.js
@@ -1,4 +1,19 @@
-import { writable } from 'svelte/store'
+import {derived, writable} from 'svelte/store'
+import {generateProblem} from "./problems"
+import {getMaxPermutations, MIN_BITS, MAX_BITS, MIN_PROBLEMS, MAX_PROBLEMS, DEFAULT_BITS, DEFAULT_NUM_PROBLEMS} from "./config"
 
 export const bits = writable()
 export const num_problems = writable()
+export const activeQuiz = writable(false)
+export const activeProblemIndex = writable(0)
+export const tally = writable(0)
+export const problems = writable([])
+
+export const valid = derived([bits, num_problems], ([$bits, $num_problems]) => (
+    ($bits || DEFAULT_BITS) <= MAX_BITS
+    && ($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)
+))
+