blob: 53e157418ddab28ac83d5f484812fcd397c995a2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<style>
form[name=card] button[name=buzz] { display: none }
form[name=card].answering button[name=buzz] { display: initial }
form[name=card] input { display: none }
form[name=card].answered input { display: initial }
form[name=card] output { display: none }
form[name=card]:is(.answering, .answered) output[name=question] { display: initial }
form[name=card].answered output[name=answer] { display: initial }
</style>
<form name=card onsubmit="return false">
<p>
<button name=buzz>Answer</button>
<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">
<p>
<output name=question></output>
<p>
<output name=answer></output>
</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,
proced_answer = 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 && !proced_answer) {
q.value += " 💡"
proced_answer = true
}
if (!answered)
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>
|
