📈 Added plausible events

2022-03-30 19:46:52 +02:00
parent ce2a5dd7a8
commit f1e2ce0ff2
12 changed files with 4514 additions and 3433 deletions
@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
 	import { getLocalization } from '$lib/i18n';

 	const { t } = getLocalization();
@@ -22,7 +22,6 @@
 		answer: string;
 	}

-
 	export let data: Data;
 	export let submit_button_text = 'Create';
 	let imgur_links_valid = false;
@@ -60,78 +59,86 @@
 	};
 </script>

-<label class='pl-2'>
-	<input type='checkbox' class='w-fit' bind:checked={data.public} />
+<label class="pl-2">
+	<input type="checkbox" class="w-fit" bind:checked={data.public} />
 	{$t('words.public')}?
 </label>
-<label class='pl-2'>
+<label class="pl-2">
 	{$t('words.title')}:
-	<input type='text' placeholder={$t('words.title')} bind:value={data.title}
-		   class='text-black w-3/5 bg-inherit border-dotted border-b-2 border-black' />
-
+	<input
+		type="text"
+		placeholder={$t('words.title')}
+		bind:value={data.title}
+		class="text-black w-3/5 bg-inherit border-dotted border-b-2 border-black"
+	/>
 </label>
-<label class='pl-2'>
+<label class="pl-2">
 	{$t('words.description')}:
-	<textarea placeholder={$t('words.description')} bind:value={data.description} class='text-black w-3/5' />
-
+	<textarea
+		placeholder={$t('words.description')}
+		bind:value={data.description}
+		class="text-black w-3/5"
+	/>
 </label>
 {#each data.questions as question, index_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="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>

-		<label class='m-1'>
+		<label class="m-1">
 			{$t('words.question')}:
 			<input
-				type='text'
+				type="text"
 				placeholder={$t('words.question')}
 				bind:value={question.question}
-				class='text-black w-3/5 bg-inherit border-dotted border-b-2 border-black'
+				class="text-black w-3/5 bg-inherit border-dotted border-b-2 border-black"
 			/>
-
 		</label>
-		<label class='m-1'>
+		<label class="m-1">
 			{$t('words.image')}:
 			<input
-				type='text'
-				placeholder='https://i.imgur.com/kSPCidY.png'
+				type="text"
+				placeholder="https://i.imgur.com/kSPCidY.png"
 				bind:value={question.image}
-				class='text-black w-3/5 bg-inherit border-dotted border-b-2 border-black'
-
+				class="text-black w-3/5 bg-inherit border-dotted border-b-2 border-black"
 			/>
-
 		</label>
-		<label class='m-1'>
+		<label class="m-1">
 			{$t('editor.time_in_seconds')}:
-			<input type='text' placeholder='20' bind:value={question.time}
-				   class='text-black w-3/5 bg-inherit border-dotted border-b-2 border-black' />
-
+			<input
+				type="text"
+				placeholder="20"
+				bind:value={question.time}
+				class="text-black w-3/5 bg-inherit border-dotted border-b-2 border-black"
+			/>
 		</label>
 		{#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>
-				<label class=' m-1'>
+			<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>
+				<label class=" m-1">
 					{$t('words.answer')}:
 					<input
-						type='text'
+						type="text"
 						placeholder={$t('words.answer')}
 						bind:value={data.questions[index_question].answers[index_answer].answer}
-						class='text-black w-3/5 bg-inherit border-dotted border-b-2 border-black'
+						class="text-black w-3/5 bg-inherit border-dotted border-b-2 border-black"
 					/>
-
 				</label>
-				<label class='m-1'>
-					<input type='checkbox' bind:checked={answer.right} class='text-black' />
+				<label class="m-1">
+					<input type="checkbox" bind:checked={answer.right} class="text-black" />
 					{$t('editor.right_or_true?')}
 				</label>

-
 				<button
-					class='text-left border-yellow-500 border-2 w-fit m-1'
-					type='button'
+					class="text-left border-yellow-500 border-2 w-fit m-1"
+					type="button"
 					on:click={() => {
 						data.questions[index_question].answers.splice(index_answer, 1);
-						data.questions[index_question].answers = data.questions[index_question].answers
+						data.questions[index_question].answers =
+							data.questions[index_question].answers;
 					}}
 				>
 					{$t('editor.delete_answer')}
@@ -139,23 +146,23 @@
 			</div>
 		{/each}
 		<button
-			class='text-left border-green-500 border-2 w-fit m-1'
-			type='button'
+			class="text-left border-green-500 border-2 w-fit m-1"
+			type="button"
 			on:click={() => {
-						data.questions[index_question].answers = [
-							...data.questions[index_question].answers,
-							{ ...empty_answer }
-						];
-					}}
+				data.questions[index_question].answers = [
+					...data.questions[index_question].answers,
+					{ ...empty_answer }
+				];
+			}}
 		>
 			{$t('editor.add_new_answer')}
 		</button>
 		<button
-			class='text-left border-red-500 border-2 w-fit m-1'
-			type='button'
+			class="text-left border-red-500 border-2 w-fit m-1"
+			type="button"
 			on:click={() => {
 				data.questions.splice(index_question, 1);
-				data.questions = data.questions
+				data.questions = data.questions;
 			}}
 		>
 			{$t('editor.delete_question')}
@@ -163,18 +170,21 @@
 	</div>
 {/each}
 <button
-	class='text-left'
-	type='button'
+	class="text-left"
+	type="button"
 	on:click={() => {
-				data.questions = [...data.questions, { ...empty_question }];
-			}}
+		data.questions = [...data.questions, { ...empty_question }];
+	}}
 >
 	{$t('editor.add_new_question')}
 </button>
 {#if imgur_links_valid}
-	<p class='text-blue-600 text-xl text-center w-fit mx-auto'>
+	<p class="text-blue-600 text-xl text-center w-fit mx-auto">
 		Not all links are imgur-links! <!-- TODO: Add translation -->
 	</p>
 {/if}
-<button type='submit' class='text-xl disabled:cursor-not-allowed disabled:border disabled:border-red-500 w-fit mx-auto'
-		disabled={imgur_links_valid}>{submit_button_text}</button>
+<button
+	type="submit"
+	class="text-xl disabled:cursor-not-allowed disabled:border disabled:border-red-500 w-fit mx-auto"
+	disabled={imgur_links_valid}>{submit_button_text}</button
+>