46 lines
956 B
Svelte
46 lines
956 B
Svelte
|
<script lang="ts">
|
||
|
|
interface Props {
|
||
|
|
promptText: string;
|
||
|
|
correctAnswers: string[];
|
||
|
|
}
|
||
|
|
|
||
|
|
let { promptText, correctAnswers }: Props = $props();
|
||
|
|
|
||
|
|
let mode: 'guess' | 'reveal' = 'reveal';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section class="flashcard">
|
||
|
|
<div class="prompt-text">
|
||
|
|
<p class="prompt-text__text">{promptText}</p>
|
||
|
|
</div>
|
||
|
|
<div class="answer-text">
|
||
|
|
<label for="answer" class="label">Answer</label>
|
||
|
|
<input type="text" id="answer" class="input" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if mode === 'reveal'}
|
||
|
|
<div class="correct-answers">
|
||
|
|
<p class="correct-answers__label">Correct Answers:</p>
|
||
|
|
<ul class="correct-answers__list">
|
||
|
|
{#each correctAnswers as answer}
|
||
|
|
<li class="correct-answers__item">{answer}</li>
|
||
|
|
{/each}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.flashcard {
|
||
|
|
padding: var(--space-1);
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
place-items: center;
|
||
|
|
max-width: 500px;
|
||
|
|
border: 1px solid var(--colour-grey-300);
|
||
|
|
}
|
||
|
|
|
||
|
|
.prompt-text {
|
||
|
|
}
|
||
|
|
</style>
|