Files
classquiz-ai/frontend/src/lib/quiztivity/components/abcd/play.svelte
T
2023-06-15 18:46:37 +02:00

38 lines
960 B
Svelte

<!--
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<script lang="ts">
import type { Abcd } from '$lib/quiztivity/types';
export let data: Abcd | undefined;
let selected_answer: number | undefined;
const select_answer = (i: number) => {
selected_answer = i;
console.log(data);
};
</script>
<div>
<h1 class="text-center text-4xl">{data.question}</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 m-4 gap-4">
{#each data.answers as answer, i}
<button
class="rounded p-6 bg-gray-700 flex transition-all"
on:click={() => {
select_answer(i);
}}
class:opacity-50={selected_answer !== undefined && !answer.correct}
class:text-2xl={selected_answer === i}
>
<span class="m-auto text-white">{answer.answer}</span>
</button>
{/each}
</div>
</div>