✨ Added ABCD-Question to Quiztivities

frontend/src/lib/quiztivity/components/abcd/play.svelte

@@ -0,0 +1,37 @@
+<!--
+  - 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">{answer.answer}</span>
+			</button>
+		{/each}
+	</div>
+</div>