✨ Added new range-answer type

2022-07-09 23:02:59 +02:00
parent 10a2adb57e
commit 54e13077f7
24 changed files with 566 additions and 206 deletions
@@ -0,0 +1,97 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	import type { EditorData, Answer } from '../quiz_types';
+	import { fade } from 'svelte/transition';
+	import { reach } from 'yup';
+	import { ABCDQuestionSchema } from '$lib/yupSchemas';
+
+	const empty_answer: Answer = {
+		right: false,
+		answer: ''
+	};
+
+	export let selected_question: number;
+	export let data: EditorData;
+</script>
+
+<div class="grid grid-cols-2 gap-4 w-full px-10">
+	{#each data.questions[selected_question].answers as answer, index}
+		<div
+			on:contextmenu|preventDefault={() => {
+				data.questions[selected_question].answers.splice(index, 1);
+				data.questions[selected_question].answers =
+					data.questions[selected_question].answers;
+			}}
+			out:fade={{ duration: 150 }}
+			class="p-4 rounded-lg flex justify-center w-full transition"
+			class:bg-red-500={!answer.right}
+			class:bg-green-500={answer.right}
+			class:bg-yellow-500={!reach(ABCDQuestionSchema, 'answer').isValidSync(answer.answer)}
+		>
+			<input
+				bind:value={answer.answer}
+				type="text"
+				class="bg-transparent border-b-2 border-dotted w-5/6 text-center"
+				placeholder="Empty..."
+			/>
+			<button
+				type="button"
+				on:click={() => {
+					answer.right = !answer.right;
+					console.log(answer.right);
+				}}
+			>
+				{#if answer.right}
+					<svg
+						class="w-6 h-6 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				{:else}
+					<svg
+						class="w-6 h-6 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				{/if}
+			</button>
+		</div>
+	{/each}
+	{#if data.questions[selected_question].answers.length < 4}
+		<button
+			class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600"
+			type="button"
+			in:fade={{ duration: 150 }}
+			on:click={() => {
+				data.questions[selected_question].answers = [
+					...data.questions[selected_question].answers,
+					{ ...empty_answer }
+				];
+			}}
+		>
+			<span class="italic text-center">Add an answer</span>
+		</button>
+	{/if}
+</div>