Added Audio Questions

src/lib/AudioMultipleChoiceQuestionComponent.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import AudioPlayerComponent from "./AudioPlayerComponent.svelte";
+    import type { AudioMultipleChoiceQuestion } from "./games/games";
+
+    const path = "/sounds/";
+
+    interface Props {
+        question: AudioMultipleChoiceQuestion;
+        showAnswer: boolean;
+        showQuestion: boolean;
+        showPlayer: boolean;
+        [key: string]: unknown;
+    }
+
+    let { question, showAnswer, showQuestion, showPlayer }: Props = $props();
+
+    function shuffle<T>(array: T[]) {
+        let currentIndex = array.length;
+
+        // While there remain elements to shuffle...
+        while (currentIndex != 0) {
+            // Pick a remaining element...
+            let randomIndex = Math.floor(Math.random() * currentIndex);
+            currentIndex--;
+
+            // And swap it with the current element.
+            [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+        }
+    }
+
+    const answer = question.data.choices[0];
+
+    let _choices = [...question.data.choices];
+    shuffle(_choices);
+</script>
+
+<div class="mb-4 flex grow flex-col items-center text-6xl">
+    {#if showQuestion}
+        <div class="flex grow-1 items-center">
+            <div class="text-center">{question.data.question}</div>
+        </div>
+    {/if}
+    {#if showPlayer}
+        <div class="flex w-full flex-col justify-center">
+            <AudioPlayerComponent src={path + question.data.audio} />
+        </div>
+    {/if}
+    {#if showQuestion}
+        <div class="flex w-full grow-1 flex-wrap items-center justify-around gap-2">
+            {#each _choices as choice}
+                <div class="choiceCard {showAnswer && choice === answer ? 'answer' : ''}">
+                    {choice}
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .choiceCard {
+        border: 1px solid black;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        padding: 32px;
+        /* font-size: larger;
+        font-weight: bold;
+        cursor: pointer; */
+    }
+
+    .answer {
+        background-color: rgb(87, 255, 87);
+        box-shadow: 0 0 20px 5px rgb(87, 255, 87);
+        border: 1px solid rgb(50, 141, 50);
+    }
+</style>