From 5774dc20b7806c8a9e1b47675ed637a0204d720c Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Sat, 21 Oct 2023 22:18:13 +0200
Subject: [PATCH] Formatted code

---
 .../lib/play/admin/game_not_started.svelte    |   6 +-
 frontend/src/lib/play/question.svelte         | 153 +++++++------
 frontend/src/lib/play/questions/check.svelte  |  29 +--
 .../src/routes/view/[quiz_id]/+page.svelte    | 211 +++++++++---------
 4 files changed, 195 insertions(+), 204 deletions(-)

diff --git a/frontend/src/lib/play/admin/game_not_started.svelte b/frontend/src/lib/play/admin/game_not_started.svelte
index f911246..fc61142 100644
--- a/frontend/src/lib/play/admin/game_not_started.svelte
+++ b/frontend/src/lib/play/admin/game_not_started.svelte
@@ -9,14 +9,14 @@ SPDX-License-Identifier: MPL-2.0
 	import ControllerCodeDisplay from '$lib/components/controller/code.svelte';
 	import { getLocalization } from '$lib/i18n';
 	import GrayButton from '$lib/components/buttons/gray.svelte';
-	import {fade} from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 
 	export let game_pin: string;
 	export let players;
 	export let socket;
 	export let cqc_code: string;
 
-	let fullscreen_open = false
+	let fullscreen_open = false;
 	const { t } = getLocalization();
 	let play_music = false;
 
@@ -52,7 +52,7 @@ SPDX-License-Identifier: MPL-2.0
 			</p>
 		</div>
 		<img
-			on:click={() => fullscreen_open = true}
+			on:click={() => (fullscreen_open = true)}
 			alt="QR code to join the game"
 			src="/api/v1/utils/qr/{game_pin}"
 			class="block mx-auto w-1/2 dark:bg-white shadow-2xl rounded hover:cursor-pointer"
diff --git a/frontend/src/lib/play/question.svelte b/frontend/src/lib/play/question.svelte
index 2821496..59a8cbc 100644
--- a/frontend/src/lib/play/question.svelte
+++ b/frontend/src/lib/play/question.svelte
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang='ts'>
+<script lang="ts">
 	import type { Question } from '$lib/quiz_types';
 	import { QuizQuestionType } from '$lib/quiz_types';
 	import { socket } from '$lib/socket';
@@ -144,22 +144,22 @@ SPDX-License-Identifier: MPL-2.0
 	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
 </script>
 
-<div class='h-screen w-screen'>
+<div class="h-screen w-screen">
 	{#if game_mode === 'normal'}
 		<div
-			class='flex flex-col justify-start'
+			class="flex flex-col justify-start"
 			style="height: {question.image ? '33.333333' : '16.666667'}%"
 		>
 			<h1
-				class='lg:text-2xl text-lg text-center text-black dark:text-white mt-2 break-normal mb-2'
+				class="lg:text-2xl text-lg text-center text-black dark:text-white mt-2 break-normal mb-2"
 			>
 				{@html question.question}
 			</h1>
 			{#if question.image !== null && game_mode !== 'kahoot'}
-				<div class='max-h-full'>
+				<div class="max-h-full">
 					<MediaComponent
 						src={question.image}
-						css_classes='object-cover mx-auto mb-8 max-h-[90%]'
+						css_classes="object-cover mx-auto mb-8 max-h-[90%]"
 					/>
 				</div>
 			{/if}
@@ -167,36 +167,36 @@ SPDX-License-Identifier: MPL-2.0
 	{/if}
 	{#if timer_res !== '0'}
 		{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
-			<div class='w-full relative h-full' style='height: {get_div_height()}%'>
+			<div class="w-full relative h-full" style="height: {get_div_height()}%">
 				<div
-					class='absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40'
+					class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40"
 				>
 					<CircularTimer
 						bind:text={timer_res}
 						bind:progress={circular_progress}
-						color='#ef4444'
+						color="#ef4444"
 					/>
 				</div>
 
-				<div class='grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full'>
+				<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
 					{#each question.answers as answer, i}
 						<button
-							class='rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black'
-							style='background-color: {answer.color ??
+							class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black"
+							style="background-color: {answer.color ??
 								default_colors[i]}; color: {get_foreground_color(
 								answer.color ?? default_colors[i]
-							)}'
+							)}"
 							disabled={selected_answer !== undefined}
 							on:click={() => selectAnswer(answer.answer)}
 						>
 							{#if game_mode === 'kahoot'}
 								<img
-									class='h-2/3 inline-block m-auto'
-									alt='Icon'
+									class="h-2/3 inline-block m-auto"
+									alt="Icon"
 									src={kahoot_icons[i]}
 								/>
 							{:else}
-								<p class='m-auto'>{answer.answer}</p>
+								<p class="m-auto">{answer.answer}</p>
 							{/if}
 						</button>
 					{/each}
@@ -204,57 +204,55 @@ SPDX-License-Identifier: MPL-2.0
 			</div>
 		{:else if question.type === QuizQuestionType.RANGE}
 			<span
-							class='fixed top-0 bg-red-500 h-8 transition-all'
-							style='width: {(100 / parseInt(question.time)) *
-			parseInt(timer_res)}vw'
-						/>
+				class="fixed top-0 bg-red-500 h-8 transition-all"
+				style="width: {(100 / parseInt(question.time)) * parseInt(timer_res)}vw"
+			/>
 			{#await import('svelte-range-slider-pips')}
 				<Spinner />
 			{:then c}
-				<div class:pointer-events-none={selected_answer !== undefined} class='mt-24'>
+				<div class:pointer-events-none={selected_answer !== undefined} class="mt-24">
 					<svelte:component
 						this={c.default}
 						bind:values={slider_value}
 						bind:min={question.answers.min}
 						bind:max={question.answers.max}
-						id='pips-slider'
+						id="pips-slider"
 						pips
 						float
-						all='label'
+						all="label"
 					/>
 				</div>
-				<div class='flex justify-center'>
-					<div class='w-1/2'>
+				<div class="flex justify-center">
+					<div class="w-1/2">
 						<BrownButton
 							disabled={selected_answer !== undefined}
 							on:click={() => selectAnswer(slider_value[0])}
-						>{$t('words.submit')}
+							>{$t('words.submit')}
 						</BrownButton>
 					</div>
 				</div>
 			{/await}
 		{:else if question.type === QuizQuestionType.TEXT}
-						<span
-							class='fixed top-0 bg-red-500 h-8 transition-all'
-							style='width: {(100 / parseInt(question.time)) *
-			parseInt(timer_res)}vw'
-						/>
-			<div class='flex justify-center mt-10'>
-				<p class='text-black dark:text-white'>Enter your answer</p>
+			<span
+				class="fixed top-0 bg-red-500 h-8 transition-all"
+				style="width: {(100 / parseInt(question.time)) * parseInt(timer_res)}vw"
+			/>
+			<div class="flex justify-center mt-10">
+				<p class="text-black dark:text-white">Enter your answer</p>
 			</div>
-			<div class='flex justify-center m-2'>
+			<div class="flex justify-center m-2">
 				<input
-					type='text'
+					type="text"
 					bind:value={text_input}
 					disabled={selected_answer}
-					class='bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed'
+					class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed"
 				/>
 			</div>
 
-			<div class='flex justify-center mt-2'>
-				<div class='w-1/3'>
+			<div class="flex justify-center mt-2">
+				<div class="w-1/3">
 					<BrownButton
-						type='button'
+						type="button"
 						disabled={selected_answer}
 						on:click={() => {
 							selectAnswer(text_input);
@@ -268,9 +266,9 @@ SPDX-License-Identifier: MPL-2.0
 			{#if solution === undefined}
 				<Spinner />
 			{:else}
-				<p class='text-center'>
+				<p class="text-center">
 					Every number between {solution.answers.min_correct} and {solution.answers
-					.max_correct} was correct. You got {selected_answer}, so you have been
+						.max_correct} was correct. You got {selected_answer}, so you have been
 					{#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
 						correct
 					{:else}
@@ -283,14 +281,13 @@ SPDX-License-Identifier: MPL-2.0
                             <Spinner />
                         {:else}-->
 			<span
-				class='fixed top-0 bg-red-500 h-8 transition-all'
-				style='width: {(100 / parseInt(question.time)) *
-			parseInt(timer_res)}vw'
+				class="fixed top-0 bg-red-500 h-8 transition-all"
+				style="width: {(100 / parseInt(question.time)) * parseInt(timer_res)}vw"
 			/>
-			<div class='flex flex-col w-full h-full gap-4 px-4 py-6 mt-10'>
+			<div class="flex flex-col w-full h-full gap-4 px-4 py-6 mt-10">
 				{#each question.answers as answer, i (answer.id)}
 					<div
-						class='w-full h-fit flex-row rounded-lg p-2 align-middle'
+						class="w-full h-fit flex-row rounded-lg p-2 align-middle"
 						animate:flip={{ duration: 100 }}
 						style="background-color: {answer.color ?? '#b07156'}"
 					>
@@ -298,59 +295,59 @@ SPDX-License-Identifier: MPL-2.0
 							on:click={() => {
 								question.answers = swapArrayElements(question.answers, i, i - 1);
 							}}
-							class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
-							type='button'
+							class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
+							type="button"
 							disabled={i === 0 || selected_answer}
 						>
 							<svg
-								class='w-8 h-8'
-								stroke-width='2'
-								viewBox='0 0 24 24'
-								fill='none'
-								xmlns='http://www.w3.org/2000/svg'
-								color='currentColor'
+								class="w-8 h-8"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+								color="currentColor"
 							>
 								<path
-									d='M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5'
-									stroke='currentColor'
-									stroke-width='2'
-									stroke-linecap='round'
-									stroke-linejoin='round'
+									d="M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
 								/>
 							</svg>
 						</button>
-						<p class='w-full text-center p-2 text-2xl'>{answer.answer}</p>
+						<p class="w-full text-center p-2 text-2xl">{answer.answer}</p>
 
 						<button
 							on:click={() => {
 								question.answers = swapArrayElements(question.answers, i, i + 1);
 							}}
-							class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
-							type='button'
+							class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
+							type="button"
 							disabled={i === question.answers.length - 1 || selected_answer}
 						>
 							<svg
-								class='w-8 h-8'
-								stroke-width='2'
-								viewBox='0 0 24 24'
-								fill='none'
-								xmlns='http://www.w3.org/2000/svg'
-								color='currentColor'
+								class="w-8 h-8"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+								color="currentColor"
 							>
 								<path
-									d='M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3'
-									stroke='currentColor'
-									stroke-width='2'
-									stroke-linecap='round'
-									stroke-linejoin='round'
+									d="M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
 								/>
 							</svg>
 						</button>
 					</div>
 				{/each}
-				<div class='w-full mt-2'>
+				<div class="w-full mt-2">
 					<BrownButton
-						type='button'
+						type="button"
 						disabled={selected_answer}
 						on:click={() => {
 							select_complex_answer(question.answers);
@@ -371,12 +368,12 @@ SPDX-License-Identifier: MPL-2.0
 					{timer_res}
 					{circular_progress}
 				/>
-				<div class='flex justify-center h-[5%]'>
-					<div class='w-1/2'>
+				<div class="flex justify-center h-[5%]">
+					<div class="w-1/2">
 						<BrownButton
 							disabled={!selected_answer}
 							on:click={() => selectAnswer(selected_answer)}
-						>{$t('words.submit')}
+							>{$t('words.submit')}
 						</BrownButton>
 					</div>
 				</div>
diff --git a/frontend/src/lib/play/questions/check.svelte b/frontend/src/lib/play/questions/check.svelte
index 917671e..39fa7f5 100644
--- a/frontend/src/lib/play/questions/check.svelte
+++ b/frontend/src/lib/play/questions/check.svelte
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang='ts'>
+<script lang="ts">
 	import type { Question } from '$lib/quiz_types';
 	import { get_foreground_color } from '$lib/helpers';
 	import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons';
@@ -15,9 +15,9 @@ SPDX-License-Identifier: MPL-2.0
 	export let selected_answer = '';
 	export let game_mode;
 
-	export let timer_res
+	export let timer_res;
 
-	export let circular_progress
+	export let circular_progress;
 	let _selected_answers = [false, false, false, false];
 
 	const selectAnswer = (i: number) => {
@@ -33,7 +33,7 @@ SPDX-License-Identifier: MPL-2.0
 	};
 </script>
 
-<div class='w-full h-[95%]'>
+<div class="w-full h-[95%]">
 	<!--
         <div
             class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-50"
@@ -46,32 +46,27 @@ SPDX-License-Identifier: MPL-2.0
         </div>
     -->
 	<div
-		class='absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40'
+		class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40"
 	>
-		<CircularTimer
-			bind:text={timer_res}
-			bind:progress={circular_progress}
-			color='#ef4444'
-		/>
+		<CircularTimer bind:text={timer_res} bind:progress={circular_progress} color="#ef4444" />
 	</div>
 
-
-	<div class='grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full'>
+	<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
 		{#each question.answers as answer, i}
 			<button
-				class='rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black transition-all'
-				style='background-color: {answer.color ??
+				class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black transition-all"
+				style="background-color: {answer.color ??
 					default_colors[i]}; color: {get_foreground_color(
 					answer.color ?? default_colors[i]
-				)}'
+				)}"
 				on:click={() => selectAnswer(i)}
 				class:opacity-100={_selected_answers[i]}
 				class:opacity-50={!_selected_answers[i]}
 			>
 				{#if game_mode === 'kahoot'}
-					<img class='h-2/3 inline-block m-auto' alt='Icon' src={kahoot_icons[i]} />
+					<img class="h-2/3 inline-block m-auto" alt="Icon" src={kahoot_icons[i]} />
 				{:else}
-					<p class='m-auto'>{answer.answer}</p>
+					<p class="m-auto">{answer.answer}</p>
 				{/if}
 			</button>
 		{/each}
diff --git a/frontend/src/routes/view/[quiz_id]/+page.svelte b/frontend/src/routes/view/[quiz_id]/+page.svelte
index dd4b123..1cdd03a 100644
--- a/frontend/src/routes/view/[quiz_id]/+page.svelte
+++ b/frontend/src/routes/view/[quiz_id]/+page.svelte
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang='ts'>
+<script lang="ts">
 	import { getLocalization } from '$lib/i18n';
 	import CollapsSection from '$lib/collapsible.svelte';
 	import { createTippy } from 'svelte-tippy';
@@ -79,48 +79,48 @@ SPDX-License-Identifier: MPL-2.0
 </svelte:head>
 
 <div>
-	<h1 class='text-4xl text-center'>{@html quiz.title}</h1>
-	<div class='text-center'>
+	<h1 class="text-4xl text-center">{@html quiz.title}</h1>
+	<div class="text-center">
 		<p>{@html quiz.description}</p>
 	</div>
-	<p class='text-center'>
+	<p class="text-center">
 		{$t('view_quiz_page.made_by')}
-		<a href='/user/{quiz.user_id.id}' class='underline'>@{quiz.user_id.username}</a>
+		<a href="/user/{quiz.user_id.id}" class="underline">@{quiz.user_id.username}</a>
 	</p>
 	{#if quiz.cover_image}
-		<div class='flex justify-center align-middle items-center'>
-			<div class='h-[15vh] m-auto w-auto my-3'>
+		<div class="flex justify-center align-middle items-center">
+			<div class="h-[15vh] m-auto w-auto my-3">
 				<img
-					class='max-h-full max-w-full block'
-					src='/api/v1/storage/download/{quiz.cover_image}'
-					alt='Not provided'
+					class="max-h-full max-w-full block"
+					src="/api/v1/storage/download/{quiz.cover_image}"
+					alt="Not provided"
 				/>
 			</div>
 		</div>
 	{/if}
-	<div class='text-center text-sm pt-1 mb-4'>
+	<div class="text-center text-sm pt-1 mb-4">
 		<ImportedOrNot imported={quiz.imported_from_kahoot} />
 	</div>
-	<div class='flex justify-center mb-2 flex-row gap-2'>
+	<div class="flex justify-center mb-2 flex-row gap-2">
 		<RatingComponent bind:quiz />
 		{#if mod_view}
 			<ModComponent autoReturn={auto_return} quiz_id={quiz.id} />
 		{/if}
 	</div>
-	<div class='flex flex-col justify-center'>
-		<div class='mx-auto flex flex-col gap-2 justify-center w-fit'>
+	<div class="flex flex-col justify-center">
+		<div class="mx-auto flex flex-col gap-2 justify-center w-fit">
 			{#if quiz.imported_from_kahoot && quiz.kahoot_id}
-				<div class='w-full'>
+				<div class="w-full">
 					<GrayButton
-						href='https://create.kahoot.it/details/{quiz.kahoot_id}'
-						target='_blank'
+						href="https://create.kahoot.it/details/{quiz.kahoot_id}"
+						target="_blank"
 					>
 						{$t('view_quiz_page.view_on_kahoot')}
 					</GrayButton>
 				</div>
 			{/if}
 			{#if logged_in}
-				<div class='w-full'>
+				<div class="w-full">
 					<GrayButton
 						on:click={() => {
 							start_game = quiz.id;
@@ -129,76 +129,76 @@ SPDX-License-Identifier: MPL-2.0
 					>
 						<!-- heroicons/legacy-outline/Play -->
 						<svg
-							class='w-5 h-5'
-							aria-hidden='true'
-							fill='none'
-							stroke='currentColor'
-							stroke-width='2'
-							viewBox='0 0 24 24'
-							xmlns='http://www.w3.org/2000/svg'
+							class="w-5 h-5"
+							aria-hidden="true"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
 						>
 							<path
-								d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'
-								stroke-linecap='round'
-								stroke-linejoin='round'
+								d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+								stroke-linecap="round"
+								stroke-linejoin="round"
 							/>
 							<path
-								d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
-								stroke-linecap='round'
-								stroke-linejoin='round'
+								d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								stroke-linecap="round"
+								stroke-linejoin="round"
 							/>
 						</svg>
 					</GrayButton>
 				</div>
 			{:else}
 				<div use:tippy={{ content: 'You need to be logged in to start a game' }}>
-					<div class='w-full'>
+					<div class="w-full">
 						<GrayButton disabled={true} flex={true}>
 							<!-- heroicons/legacy-outline/Play -->
 							<svg
-								class='w-5 h-5'
-								aria-hidden='true'
-								fill='none'
-								stroke='currentColor'
-								stroke-width='2'
-								viewBox='0 0 24 24'
-								xmlns='http://www.w3.org/2000/svg'
+								class="w-5 h-5"
+								aria-hidden="true"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
 							>
 								<path
-									d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'
-									stroke-linecap='round'
-									stroke-linejoin='round'
+									d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+									stroke-linecap="round"
+									stroke-linejoin="round"
 								/>
 								<path
-									d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
-									stroke-linecap='round'
-									stroke-linejoin='round'
+									d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									stroke-linecap="round"
+									stroke-linejoin="round"
 								/>
 							</svg>
 						</GrayButton>
 					</div>
 				</div>
 			{/if}
-			<div class='w-full'>
-				<GrayButton href='/practice?quiz_id={quiz.id}'>
+			<div class="w-full">
+				<GrayButton href="/practice?quiz_id={quiz.id}">
 					{$t('words.practice')}
 				</GrayButton>
 			</div>
-			<div class='w-full'>
+			<div class="w-full">
 				{#if logged_in}
-					<GrayButton flex={true} href='/api/v1/eximport/{quiz.id}'>
+					<GrayButton flex={true} href="/api/v1/eximport/{quiz.id}">
 						<svg
-							class='w-5 h-5 inline-block'
-							fill='none'
-							stroke='currentColor'
-							viewBox='0 0 24 24'
-							xmlns='http://www.w3.org/2000/svg'
+							class="w-5 h-5 inline-block"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
 						>
 							<path
-								stroke-linecap='round'
-								stroke-linejoin='round'
-								stroke-width='2'
-								d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
 							/>
 						</svg>
 						{$t('words.download')}
@@ -207,17 +207,17 @@ SPDX-License-Identifier: MPL-2.0
 					<div use:tippy={{ content: 'You need to be logged in to download a game' }}>
 						<GrayButton disabled={true} flex={true}>
 							<svg
-								class='w-5 h-5 inline-block'
-								fill='none'
-								stroke='currentColor'
-								viewBox='0 0 24 24'
-								xmlns='http://www.w3.org/2000/svg'
+								class="w-5 h-5 inline-block"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
 							>
 								<path
-									stroke-linecap='round'
-									stroke-linejoin='round'
-									stroke-width='2'
-									d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
 								/>
 							</svg>
 							{$t('words.download')}
@@ -226,10 +226,10 @@ SPDX-License-Identifier: MPL-2.0
 				{/if}
 			</div>
 		</div>
-		<div class='flex justify-center'>
+		<div class="flex justify-center">
 			<a
-				href='mailto:report@mawoka.eu?subject=Report quiz {quiz.id}'
-				class='text-sm underline'
+				href="mailto:report@mawoka.eu?subject=Report quiz {quiz.id}"
+				class="text-sm underline"
 			>
 				{$t('words.report')}
 			</a>
@@ -237,10 +237,10 @@ SPDX-License-Identifier: MPL-2.0
 	</div>
 
 	{#each quiz.questions as question, index_question}
-		<div class='px-4 py-1'>
+		<div class="px-4 py-1">
 			<CollapsSection headerText={question.question} expanded={auto_expand}>
-				<div class='grid grid-cols-1 gap-2 rounded-b-lg bg-white dark:bg-gray-700 -mt-1'>
-					<h3 class='text-3xl m-1 text-center'>
+				<div class="grid grid-cols-1 gap-2 rounded-b-lg bg-white dark:bg-gray-700 -mt-1">
+					<h3 class="text-3xl m-1 text-center">
 						{index_question + 1}: {@html question.question}
 					</h3>
 
@@ -250,47 +250,46 @@ SPDX-License-Identifier: MPL-2.0
 					{#if question.image}
 						<span>
 							<MediaComponent
-								css_classes='mx-auto'
+								css_classes="mx-auto"
 								src={question.image}
 								muted={true}
 							/>
 						</span>
 					{/if}
 					<p
-						class='m-1 flex flex-row gap-2 flex-nowrap whitespace-nowrap w-full justify-center'
+						class="m-1 flex flex-row gap-2 flex-nowrap whitespace-nowrap w-full justify-center"
 					>
 						<svg
-							class='w-8 h-8 inline-block'
-							fill='none'
-							stroke='currentColor'
-							viewBox='0 0 24 24'
-							xmlns='http://www.w3.org/2000/svg'
+							class="w-8 h-8 inline-block"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
 						>
 							<path
-								stroke-linecap='round'
-								stroke-linejoin='round'
-								stroke-width='2'
-								d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
 							/>
 						</svg>
-						<span class='text-lg'>{question.time}s</span>
+						<span class="text-lg">{question.time}s</span>
 					</p>
 					{#if question.type === QuizQuestionType.ABCD || question.type === undefined || question.type === QuizQuestionType.CHECK}
-						<div class='grid grid-cols-2 gap-4 m-4 p-6'>
+						<div class="grid grid-cols-2 gap-4 m-4 p-6">
 							{#each question.answers as answer, index_answer}
 								<div
-									class='p-1 rounded-lg py-4 shadow-xl'
-									style='background-color: {answer.color ??
-								default_colors[index_answer]}; color: {get_foreground_color(
-								answer.color ?? default_colors[index_answer]
-
-							)}'
-													class:shadow-blue-500={answer.right &&
-						question.type !== QuizQuestionType.VOTING}
-					class:shadow-yellow-500={!answer.right &&
-						question.type !== QuizQuestionType.VOTING}
+									class="p-1 rounded-lg py-4 shadow-xl"
+									style="background-color: {answer.color ??
+										default_colors[index_answer]}; color: {get_foreground_color(
+										answer.color ?? default_colors[index_answer]
+									)}"
+									class:shadow-blue-500={answer.right &&
+										question.type !== QuizQuestionType.VOTING}
+									class:shadow-yellow-500={!answer.right &&
+										question.type !== QuizQuestionType.VOTING}
 								>
-									<h4 class='text-center'>
+									<h4 class="text-center">
 										{quiz.questions[index_question].answers[index_answer]
 											.answer}
 									</h4>
@@ -298,26 +297,26 @@ SPDX-License-Identifier: MPL-2.0
 							{/each}
 						</div>
 					{:else if question.type === QuizQuestionType.RANGE}
-						<p class='m-1 text-center'>
+						<p class="m-1 text-center">
 							All numbers between {question.answers.min_correct}
 							and {question.answers.max_correct} are correct, where numbers between {question
-							.answers.min} and {question.answers.max} can be selected.
+								.answers.min} and {question.answers.max} can be selected.
 						</p>
 					{:else if question.type === QuizQuestionType.ORDER}
-						<ul class='flex flex-col gap-4 m-4 p-6'>
+						<ul class="flex flex-col gap-4 m-4 p-6">
 							{#each question.answers as answer}
-								<li class='p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300'>
-									<h4 class='text-center'>
+								<li class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300">
+									<h4 class="text-center">
 										{answer.answer}
 									</h4>
 								</li>
 							{/each}
 						</ul>
 					{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
-						<div class='grid grid-cols-2 gap-4 m-4 p-6'>
+						<div class="grid grid-cols-2 gap-4 m-4 p-6">
 							{#each question.answers as answer, index_answer}
-								<div class='p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300'>
-									<h4 class='text-center'>
+								<div class="p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300">
+									<h4 class="text-center">
 										{quiz.questions[index_question].answers[index_answer]
 											.answer}
 									</h4>
@@ -328,7 +327,7 @@ SPDX-License-Identifier: MPL-2.0
 						{#await import('$lib/play/admin/slide.svelte')}
 							<Spinner my={false} />
 						{:then c}
-							<div class='max-h-[90%] max-w-[90%]'>
+							<div class="max-h-[90%] max-w-[90%]">
 								<svelte:component this={c.default} bind:question />
 							</div>
 						{/await}