✨ Added report-link

frontend/src/lib/i18n/locales/de.json

@@ -84,7 +84,8 @@
 		"image": "Bild",
 		"settings": "Einstellungen",
 		"repeat_password": "Passwort wiederholen",
-		"overview": "Übersicht"
+		"overview": "Übersicht",
+		"report": "Melden"
 	},
 	"editor": {
 		"time_in_seconds": "Zeit in Sekunden",

frontend/src/lib/i18n/locales/en.json

@@ -84,7 +84,8 @@
 		"image": "Image",
 		"settings": "Settings",
 		"repeat_password": "Repeat password",
-		"overview": "Overview"
+		"overview": "Overview",
+		"report": "Report"
 	},
 	"editor": {
 		"time_in_seconds": "Time in seconds",

frontend/src/lib/i18n/locales/fr.json

@@ -53,7 +53,8 @@
 		"title": "titre",
 		"settings": "Paramètres",
 		"repeat_password": "Répéter le mot de passe",
-		"overview": "Vue d'ensemble"
+		"overview": "Vue d'ensemble",
+		"report": ""
 	},
 	"index_page": {
 		"slogan": "La plateforme de quiz open-source !",

frontend/src/routes/view/[quiz_id].svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang='ts' context='module'>
 	export async function load({ params, fetch, session }) {
 		const { quiz_id } = params;
 		const res = await fetch(`/api/v1/quiz/get/public/${quiz_id}`);
@@ -22,7 +22,7 @@
 	}
 </script>
 
-<script lang="ts">
+<script lang='ts'>
 	import { getLocalization } from '$lib/i18n';
 	import CollapsSection from '$lib/collapsible.svelte';
 	import { createTippy } from 'svelte-tippy';
@@ -81,15 +81,15 @@
 </script>
 
 <div>
-	<h1 class="text-4xl text-center">{quiz.title}</h1>
+	<h1 class='text-4xl text-center'>{quiz.title}</h1>
-	<div class="text-center">
+	<div class='text-center'>
 		<p>{quiz.description}</p>
 	</div>
 
-	<div class="flex justify-center m-8">
+	<div class='flex justify-center m-8'>
 		{#if logged_in}
 			<button
-				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+				class='px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
 				on:click={() => {
 					startGame(quiz.id);
 				}}
@@ -98,40 +98,46 @@
 			</button>
 		{:else}
 			<button
-				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none cursor-not-allowed opacity-50"
+				class='px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none cursor-not-allowed opacity-50'
 				use:tippy={{ content: 'You need to be logged in to start a game' }}
 			>
 				{$t('words.start')}
 			</button>
 		{/if}
+
+	</div>
+	<div class='flex justify-center'>
+		<a href='mailto:report@mawoka.eu?subject=Report quiz {quiz.id}' class='text-sm underline'>
+			{$t('words.report')}
+		</a>
 	</div>
 	{#each quiz.questions as question, index_question}
-		<div class="px-4 py-1">
+		<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">
+				<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>
+					<h1 class='text-3xl m-1'>{$t('words.question')} {index_question + 1}</h1>
 
 					<!--					<label class='m-1 flex flex-row gap-2 w-3/5'>-->
-					<p class="text-black w-full bg-inherit">
+					<p class='text-black w-full bg-inherit'>
 						{$t('words.question')}: {question.question}
 					</p>
 					<!--					</label>-->
 					{#if question.image}
 						<span>
 							{$t('words.image')}:
-							<img class="pl-8" src={question.image} alt="Not provided" />
+							<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">
+					<span class='m-1 flex flex-row gap-2 w-3/5 flex-nowrap whitespace-nowrap'>
 						{$t('editor.time_in_seconds')}:
 						<p>{question.time}</p>
 					</span>
 					{#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"
+							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>
+							<h1 class='text-3xl m-1'>{$t('words.answer')} {index_answer + 1}</h1>
-							<p class="m-1">
+							<p class='m-1'>
 								{$t('words.answer')}: {index_answer + 1}
 								{$t('words.question')}: {index_question + 1}
 							</p>
@@ -140,15 +146,15 @@
 								: {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"
+								class='m-1 flex flex-row gap-2 w-2/6 flex-nowrap whitespace-nowrap'
 							>
 								<input
-									type="checkbox"
+									type='checkbox'
 									bind:checked={answer.right}
-									class="text-black w-fit"
+									class='text-black w-fit'
 									disabled
 								/>
-								<span class="w-fit">{$t('editor.right_or_true?')}</span>
+								<span class='w-fit'>{$t('editor.right_or_true?')}</span>
 							</label>
 						</div>
 					{/each}