✨ Closes #184 and closes #174

frontend/src/lib/admin.svelte

@@ -193,7 +193,7 @@
 							style="background-color: {answer.color ?? '#B45309'}"
 							class:opacity-50={!answer.right &&
 								timer_res === '0' &&
-								quiz_data.questions[selected_question].type !==
+								quiz_data.questions[selected_question].type ===
 									QuizQuestionType.ABCD}
 						>
 							<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />

frontend/src/lib/play/question.svelte

@@ -98,15 +98,20 @@
 	$: console.log(slider_value, 'values');
 </script>
 
-<div class="flex flex-col justify-center w-screen h-1/6">
+<div class="h-screen w-screen">
-	<h1 class="text-6xl text-center text-black dark:text-white">
+	<div class="flex flex-col justify-center w-screen h-1/6">
+		<h1 class="text-3xl text-center text-black dark:text-white mt-2">
 			{@html question.question}
 		</h1>
 		<div class="mx-auto my-2">
-		<CircularTimer bind:text={timer_res} bind:progress={circular_prgoress} color="#ef4444" />
+			<CircularTimer
+				bind:text={timer_res}
+				bind:progress={circular_prgoress}
+				color="#ef4444"
+			/>
 		</div>
-</div>
+	</div>
-{#if question.image !== null && game_mode !== 'kahoot'}
+	{#if question.image !== null && game_mode !== 'kahoot'}
 		<div>
 			<img
 				src={question.image}
@@ -114,8 +119,8 @@
 				alt="Content for Question"
 			/>
 		</div>
-{/if}
+	{/if}
-{#if timer_res !== '0'}
+	{#if timer_res !== '0'}
 		{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
 			{#if game_mode === 'normal'}
 				<div class="grid grid-cols-2 gap-2 w-full p-4">
@@ -129,10 +134,10 @@
 					{/each}
 				</div>
 			{:else if game_mode === 'kahoot'}
-			<div class="grid grid-cols-2 gap-2 w-full p-4">
+				<div class="grid grid-cols-2 gap-2 w-full p-4 h-5/6">
 					{#each question.answers as answer, i}
 						<button
-						class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60 p-3"
+							class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3"
 							style="background-color: {answer.color ?? '#B45309'}"
 							disabled={selected_answer !== undefined}
 							on:click={() => selectAnswer(answer.answer)}
@@ -169,7 +174,7 @@
 				</div>
 			{/await}
 		{/if}
-{:else if question.type === QuizQuestionType.ABCD}
+	{:else if question.type === QuizQuestionType.ABCD}
 		{#if solution === undefined}
 			<Spinner />
 		{:else}
@@ -179,25 +184,27 @@
 						<button
 							class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-green-600"
 							disabled
-						class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
+							class:opacity-30={answer.answer !== selected_answer}
+							>{answer.answer}</button
 						>
 					{:else}
 						<button
 							class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-red-500"
 							disabled
-						class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
+							class:opacity-30={answer.answer !== selected_answer}
+							>{answer.answer}</button
 						>
 					{/if}
 				{/each}
 			</div>
 		{/if}
-{:else if question.type === QuizQuestionType.RANGE}
+	{:else if question.type === QuizQuestionType.RANGE}
 		{#if solution === undefined}
 			<Spinner />
 		{:else}
 			<p class="text-center">
-			Every number between {solution.answers.min_correct} and {solution.answers.max_correct} was
+				Every number between {solution.answers.min_correct} and {solution.answers
-			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}
@@ -212,4 +219,5 @@
 		<svelte:component this={c.default} bind:data={question_results}
 						  bind:question={quiz_data.questions[selected_question]} />
 	{/await}-->
-{/if}
+	{/if}
+</div>