✨ Added new Question-Type: TextAnswers!

2022-12-29 16:16:09 +01:00
parent 1633d56299
commit 7614420d0c
10 changed files with 257 additions and 39 deletions
@@ -0,0 +1,136 @@
+<!--
+  - 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 { fade } from 'svelte/transition';
+	import type { EditorData, TextQuizAnswer } from '$lib/quiz_types';
+	import { getLocalization } from '$lib/i18n';
+	import { reach } from 'yup';
+	import { TextQuestionSchema } from '$lib/yupSchemas';
+
+	export let selected_question: number;
+	export let data: EditorData;
+
+	const { t } = getLocalization();
+
+	if (!Array.isArray(data.questions[selected_question].answers)) {
+		data.questions[selected_question].answers = [];
+	}
+
+	for (let i = 0; i < data.questions[selected_question].answers.length; i++) {
+		data.questions[selected_question].answers[i] = {
+			answer: data.questions[selected_question].answers[i].answer,
+			case_sensitive: false
+		};
+	}
+
+	const get_empty_answer = (): TextQuizAnswer => {
+		return {
+			answer: '',
+			case_sensitive: false
+		};
+	};
+</script>
+
+<div class="grid grid-cols-2 gap-4 w-full px-10">
+	{#if Array.isArray(data.questions[selected_question].answers)}
+		{#each data.questions[selected_question].answers as answer, index}
+			<div
+				out:fade={{ duration: 150 }}
+				class="p-4 rounded-lg flex justify-center w-full transition relative"
+				class:dark:bg-gray-500={answer.answer}
+				class:bg-gray-300={answer.answer}
+				class:bg-yellow-500={!reach(TextQuestionSchema, 'answer').isValidSync(
+					answer.answer
+				)}
+			>
+				<button
+					class="rounded-full absolute -top-2 -right-2 opacity-70 hover:opacity-100 transition"
+					type="button"
+					on:click={() => {
+						data.questions[selected_question].answers.splice(index, 1);
+						data.questions[selected_question].answers =
+							data.questions[selected_question].answers;
+					}}
+				>
+					<svg
+						class="w-6 h-6 bg-red-500 rounded-full"
+						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>
+				</button>
+				<input
+					bind:value={answer.answer}
+					type="text"
+					class="border-b-2 border-dotted w-5/6 text-center rounded-lg"
+					placeholder="Empty..."
+				/>
+				<button
+					type="button"
+					on:click={() => {
+						answer.case_sensitive = !answer.case_sensitive;
+						console.log(answer.case_sensitive);
+					}}
+				>
+					{#if answer.case_sensitive}
+						<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}
+	{#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,
+					{ ...get_empty_answer() }
+				];
+			}}
+		>
+			<span class="italic text-center">{$t('editor_page.add_an_answer')}</span>
+		</button>
+	{/if}
+</div>