✨ Add quiz settings dialog with toggle for question shuffling

src/lib/Toggle.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let checked = false;
+	export let label = '';
+	export let icon: any = undefined;
+</script>
+
+<label class="flex items-center gap-4 cursor-pointer">
+	{#if icon}
+		<div class="w-6 h-6">
+			<svelte:component this={icon} />
+		</div>
+	{/if}
+	<div class="flex items-center">
+		<input type="checkbox" bind:checked class="sr-only peer" on:change />
+		<div
+			class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-thw-200 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-thw-500"
+		></div>
+		{#if label}
+			<span class="ms-3">{label}</span>
+		{/if}
+	</div>
+</label>

src/lib/quiz/QuizSettingsDialog.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Dialog from '$lib/Dialog.svelte';
+	import Button from '$lib/Button.svelte';
+	import Toggle from '$lib/Toggle.svelte';
+	import shuffleQuiz from '$lib/shared/stores/shuffleQuiz';
+
+	export let onClose: () => void = () => {};
+</script>
+
+<Dialog title="Quiz Einstellungen">
+	<div slot="content" class="flex flex-col gap-4">
+		<div class="text-sm text-gray-600">
+			Hier kannst du einstellen, wie die Fragen angezeigt werden sollen.
+		</div>
+		<Toggle bind:checked={$shuffleQuiz} label="Fragen in zufälliger Reihenfolge anzeigen" />
+	</div>
+	<div slot="footer" class="flex flex-row justify-end w-full">
+		<Button click={onClose}>Schließen</Button>
+	</div>
+</Dialog>

src/routes/(main)/quiz/[type]/[questionId]/+page.svelte

@@ -11,6 +11,7 @@
 	import AnswerButton from '$lib/quiz/AnswerButton.svelte';
 	import ProgressBar from '$lib/quiz/ProgressBar.svelte';
 	import QuizHead from '$lib/quiz/QuizHead.svelte';
+	import QuizSettingsDialog from '$lib/quiz/QuizSettingsDialog.svelte';
 	import shuffleQuiz from '$lib/shared/stores/shuffleQuiz';
 	import { randomInt, shuffle } from '$lib/utils';
 	import type { AfterNavigate } from '@sveltejs/kit';
@@ -85,6 +86,12 @@
 		}
 	}
 
+	let showSettings = false;
+
+	function openQuizSettings() {
+		showSettings = true;
+	}
+
 	afterNavigate(async (navigation: AfterNavigate) => {
 		setTimeout(() => {
 			focusQuestionText();
@@ -107,7 +114,12 @@
 				<div class="-mx-4 -mt-4 w-screen">
 					<ProgressBar progress={(question.number - 1) / questionCount} />
 				</div>
-				<div class="text-sm mt-4">Frage {question.number} von {questionCount}</div>
+				<div class="text-sm mt-4 flex flex-row justify-between">
+					<div>Frage {question.number} von {questionCount}</div>
+					<button class="underline hover:text-thw" on:click={openQuizSettings}>
+						Einstellungen
+					</button>
+				</div>
 				<h1
 					bind:this={questionTextEl}
 					class="text-3xl text-center text-thw outline-none font-bold break-words"
@@ -153,3 +165,7 @@
 		</div>
 	</div>
 </div>
+
+{#if showSettings}
+	<QuizSettingsDialog onClose={() => (showSettings = false)} />
+{/if}