blob: a4927f01c5fb3f3ea8e0809e3fc42ce6594091f6 (
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} on:keyup={(e) => e.key === 'Enter' && checkAnswer()} />
<button on:click={checkAnswer}>Submit</button>
{#if hint}
<br />
<p class="opaque">Hint: {hint}</p>
{/if}
</div>
|