1 files changed, 61 insertions, 0 deletions
diff --git a/card.html b/card.html
new file mode 100644
index 0000000..4d09e75
--- /dev/null
+++ b/card.html
@@ -0,0 +1,61 @@
+<style>
+form[name=card] > p { visibility: hidden }
+form[name=card].answering > p, form[name=card].answered > p { visibility: initial }
+form[name=card].answering > p:nth-of-type(4) { visibility: hidden }
+form[name=card].answered > p:nth-of-type(1) { visibility: hidden }
+</style>
+
+<form name=card onsubmit="return false">
+<p>
+<button name=buzz>Answer</button>
+<p>
+<output name=question></output>
+<p>
+<output name=answer></output>
+<p>
+<input type=submit name=0 value="Totally blanked">
+<input type=submit name=1 value="Vaguely remembered">
+<input type=submit name=2 value="Should have remembered">
+<input type=submit name=3 value="Remembered, but was hard">
+<input type=submit name=4 value="Remembered, but hesitated">
+<input type=submit name=5 value="Remembered perfectly">
+</form>
+
+<script>
+async function ask({question, answer}, speed=250) {
+  let f = document.forms.card,
+      q = f.question,
+      a = f.answer,
+      b = f.buzz,
+      words = question.split(" "),
+      answered = false
+
+  f.classList.remove("answered")
+  f.classList.add("answering")
+  a.value = ""
+  b.onclick = e => answered = true
+
+  q.value = words[0]
+  for (let word of words.slice(1)) {
+    if (answered) {
+      q.value = question
+      break
+    }
+    await sleep(speed)
+    q.value += " " + word
+  }
+  await sleep(speed)
+
+  a.value = answer
+  f.classList.remove("answering")
+  f.classList.add("answered")
+
+  let grade = await new Promise(r =>
+    f.onsubmit = e => (e.preventDefault(), r(+e.submitter.name)))
+
+  f.classList.remove("answered")
+  a.value = ""
+
+  return grade
+}
+</script>