blob: da01e5db4c9eb1b774321b21334af03f118d4f3c (
plain) (
blame)
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
|
<script lang="ts">
export let riddle: string;
export let answer: string;
export let onComplete: () => void;
export let hint: string | undefined = undefined;
let userInput = '';
const checkAnswer = () => {
if (userInput.toLowerCase() === answer.toLowerCase()) {
setTimeout(onComplete, 500);
} else {
setTimeout(() => (userInput = ''), 500);
}
};
</script>
<div class="container">
<p class="big-text">{riddle}</p>
<input bind:value={userInput} onkeyup={(e) => e.key === 'Enter' && checkAnswer()} />
<button onclick={checkAnswer}>Submit</button>
{#if hint}
<br />
<p class="opaque">Hint: {hint}</p>
{/if}
</div>
|