77 lines
2.1 KiB
Svelte
77 lines
2.1 KiB
Svelte
<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>
|