From 0e3d7c4a00ac22633197078f5bf25d52a7ca3a29 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka-myblock@e.email>
Date: Sat, 13 Aug 2022 21:18:01 +0200
Subject: [PATCH] :sparkles: Improved public view for quizzes

---
 frontend/src/hooks.ts                     |  7 +-
 frontend/src/lib/collapsible.svelte       | 18 +++--
 frontend/src/routes/view/[quiz_id].svelte | 87 ++++++++++++-----------
 3 files changed, 63 insertions(+), 49 deletions(-)

diff --git a/frontend/src/hooks.ts b/frontend/src/hooks.ts
index 622b086..e7439b2 100644
--- a/frontend/src/hooks.ts
+++ b/frontend/src/hooks.ts
@@ -41,7 +41,12 @@ export const handle: Handle = async ({ event, resolve }) => {
 			})
 		).text();
 		const resp = await resolve(event);
-		resp.headers.set('Set-Cookie', res.headers.get('set-cookie'));
+		try {
+			resp.headers.set('Set-Cookie', res.headers.get('set-cookie'));
+		} catch {
+			console.log('Cannot mutate immutable header');
+		}
+
 		return resp;
 	} else {
 		event.locals.email = null;
diff --git a/frontend/src/lib/collapsible.svelte b/frontend/src/lib/collapsible.svelte
index 5d30c34..6d4068e 100644
--- a/frontend/src/lib/collapsible.svelte
+++ b/frontend/src/lib/collapsible.svelte
@@ -10,20 +10,26 @@
 </script>
 
 <div>
-	<h3 class="bg-white dark:bg-slate-800 m-0">
+	<h3 class="bg-transparent m-0">
 		<button
 			aria-expanded={expanded}
 			on:click={() => (expanded = !expanded)}
-			class="bg-white dark:bg-slate-800 flex justify-between w-full border-none m-0 p-2"
+			class="bg-white dark:bg-gray-700 flex justify-between w-full border-none m-0 p-2 rounded-t-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition"
+			class:rounded-b-lg={!expanded}
 			>{headerText}
-			<svg viewBox="0 0 20 20" fill="none" class="my-auto">
-				<path class="vert" d="M10 1V19" stroke="black" stroke-width="2" />
-				<path d="M1 10L19 10" stroke="black" stroke-width="2" />
+			<svg
+				viewBox="0 0 20 20"
+				fill="none"
+				class="my-auto fill-black dark:fill-white"
+				stroke="currentColor"
+			>
+				<path class="vert" d="M10 1V19" stroke-width="2" stroke="currentColor" />
+				<path d="M1 10L19 10" stroke-width="2" stroke="currentColor" />
 			</svg>
 		</button>
 	</h3>
 
-	<div class="border-b-1 border-gray-500" class:hidden={!expanded}>
+	<div class:hidden={!expanded}>
 		<slot />
 	</div>
 </div>
diff --git a/frontend/src/routes/view/[quiz_id].svelte b/frontend/src/routes/view/[quiz_id].svelte
index eb73455..58cfb9f 100644
--- a/frontend/src/routes/view/[quiz_id].svelte
+++ b/frontend/src/routes/view/[quiz_id].svelte
@@ -4,7 +4,9 @@
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
 <script lang="ts" context="module">
-	export async function load({ params, fetch, session }) {
+	import type { Load } from '@sveltejs/kit';
+
+	export const load: Load = async ({ params, fetch, session }) => {
 		const { quiz_id } = params;
 		const res = await fetch(`/api/v1/quiz/get/public/${quiz_id}`);
 		if (res.status === 404 || res.status === 400) {
@@ -24,7 +26,7 @@
 				status: 500
 			};
 		}
-	}
+	};
 </script>
 
 <script lang="ts">
@@ -130,13 +132,13 @@
 	{#each quiz.questions as question, index_question}
 		<div class="px-4 py-1">
 			<CollapsSection headerText={question.question}>
-				<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2">
-					<h1 class="text-3xl m-1">{$t('words.question')} {index_question + 1}</h1>
+				<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}: {question.question}
+					</h3>
 
 					<!--					<label class='m-1 flex flex-row gap-2 w-3/5'>-->
-					<p class="text-black w-full bg-inherit text-black dark:text-gray-200">
-						{$t('words.question')}: {question.question}
-					</p>
+
 					<!--					</label>-->
 					{#if question.image}
 						<span>
@@ -144,44 +146,45 @@
 							<img class="pl-8" src={question.image} alt="Not provided" />
 						</span>
 					{/if}
-					<span class="m-1 flex flex-row gap-2 w-3/5 flex-nowrap whitespace-nowrap">
-						{$t('editor.time_in_seconds')}:
-						{question.time}
-					</span>
+					<p
+						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"
+							><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"
+							/></svg
+						>
+						<span class="text-lg">{question.time}s</span>
+					</p>
 					{#if question.type === QuizQuestionType.ABCD}
-						{#each question.answers as answer, index_answer}
-							<div
-								class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2 m-1"
-							>
-								<h1 class="text-3xl m-1">
-									{$t('words.answer')}
-									{index_answer + 1}
-								</h1>
-								<p class="m-1">
-									{$t('words.answer')}: {index_answer + 1}
-									{$t('words.question')}: {index_question + 1}
-								</p>
-								<p>
-									{$t('words.answer')}
-									: {quiz.questions[index_question].answers[index_answer].answer}
-								</p>
-								<label
-									class="m-1 flex flex-row gap-2 w-2/6 flex-nowrap whitespace-nowrap"
+						<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"
+									class:bg-green-500={answer.right}
+									class:bg-red-500={!answer.right}
 								>
-									<input
-										type="checkbox"
-										bind:checked={answer.right}
-										class="text-black w-fit"
-										disabled
-									/>
-									<span class="w-fit">{$t('editor.right_or_true?')}</span>
-								</label>
-							</div>
-						{/each}
+									<h4 class="text-center">
+										{quiz.questions[index_question].answers[index_answer]
+											.answer}
+									</h4>
+								</div>
+							{/each}
+						</div>
 					{:else if question.type === QuizQuestionType.RANGE}
-						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.
+						<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.
+						</p>
 					{/if}
 				</div>
 			</CollapsSection>