From 12ec2ebf946ff0b92f116a5a2d21400d9d0560d4 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 17 Aug 2022 21:30:53 +0200
Subject: [PATCH] :bug: Fixed crash where switched from Range to Multiple
 Choice

---
 frontend/src/lib/editor/ABCDEditorPart.svelte | 124 ++++++++++--------
 frontend/src/lib/editor/sidebar.svelte        |  39 +++---
 2 files changed, 87 insertions(+), 76 deletions(-)

diff --git a/frontend/src/lib/editor/ABCDEditorPart.svelte b/frontend/src/lib/editor/ABCDEditorPart.svelte
index 8ab7414..f847cd8 100644
--- a/frontend/src/lib/editor/ABCDEditorPart.svelte
+++ b/frontend/src/lib/editor/ABCDEditorPart.svelte
@@ -19,72 +19,80 @@
 
 	export let selected_question: number;
 	export let data: EditorData;
+	console.log(
+		data.questions[selected_question].answers,
+		Array.isArray(data.questions[selected_question].answers)
+	);
 	if (!Array.isArray(data.questions[selected_question].answers)) {
 		data.questions[selected_question].answers = [];
 	}
 </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 Array.isArray(data.questions[selected_question].answers)}
+		{#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
+				)}
 			>
-				{#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}
+				<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}
 	{#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"
diff --git a/frontend/src/lib/editor/sidebar.svelte b/frontend/src/lib/editor/sidebar.svelte
index da75243..690471f 100644
--- a/frontend/src/lib/editor/sidebar.svelte
+++ b/frontend/src/lib/editor/sidebar.svelte
@@ -179,24 +179,27 @@
 			{/if}
 			{#if question.type === QuizQuestionType.ABCD}
 				<div class="grid grid-cols-2 gap-2">
-					{#each question.answers as answer}
-						<span
-							class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700"
-							class:bg-green-500={answer.right}
-							class:bg-red-500={!answer.right}
-							class:bg-yellow-500={!reach(ABCDQuestionSchema, 'answer').isValidSync(
-								answer.answer
-							)}
-							use:tippy={{
-								content: answer.answer === '' ? 'Empty...' : answer.answer
-							}}
-							>{#if answer.answer === ''}
-								<i>Empty...</i>
-							{:else}
-								{answer.answer}
-							{/if}</span
-						>
-					{/each}
+					{#if Array.isArray(question.answers)}
+						{#each question.answers as answer}
+							<span
+								class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700"
+								class:bg-green-500={answer.right}
+								class:bg-red-500={!answer.right}
+								class:bg-yellow-500={!reach(
+									ABCDQuestionSchema,
+									'answer'
+								).isValidSync(answer.answer)}
+								use:tippy={{
+									content: answer.answer === '' ? 'Empty...' : answer.answer
+								}}
+								>{#if answer.answer === ''}
+									<i>Empty...</i>
+								{:else}
+									{answer.answer}
+								{/if}</span
+							>
+						{/each}
+					{/if}
 				</div>
 			{:else if question.type === QuizQuestionType.RANGE}
 				<p class="text-center text-sm p-0.5">