Added Image with Multiple CHoice

2025-09-11 20:24:52 +02:00
parent 8ce77c1250
commit c1b44c081a
7 changed files with 141 additions and 47 deletions
--- a/src/lib/ImageMultipleChoiceQuestionComponent.svelte
+++ b/src/lib/ImageMultipleChoiceQuestionComponent.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import type { ImageMultipleChoiceQuestion } from "./games/games";
+
+    const path = "/images/";
+
+    interface Props {
+        question: ImageMultipleChoiceQuestion;
+        showAnswer: boolean;
+        showQuestion: boolean;
+        isBuzzed: boolean;
+        [key: string]: unknown;
+    }
+
+    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]];
+        }
+    }
+
+    let { question, showAnswer, showQuestion, isBuzzed }: Props = $props();
+
+    const answer = question.data.choices[0];
+
+    let _choices = [...question.data.choices];
+    shuffle(_choices);
+</script>
+
+<div class="mb-4 flex w-full grow flex-col items-center gap-2 text-6xl">
+    {#if showQuestion}
+        <div class="flex grow items-center">
+            <div class="text-center">{question.data.question}</div>
+        </div>
+        <div class="container grow-6">
+            <img
+                src={path + question.data.image}
+                alt={path + question.data.image}
+                class={isBuzzed ? "blurry" : ""}
+            />
+        </div>
+        <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 ? 'choice-answer' : ''}">
+                    {choice}
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .container {
+        position: relative;
+    }
+
+    .container > img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        max-height: 100%;
+        max-width: 100%;
+        display: block;
+        transform: translate(-50%, -50%);
+    }
+
+    .blurry {
+        filter: blur(60px);
+    }
+</style>