🐛 Fixed crash where switched from Range to Multiple Choice

This commit is contained in:
Mawoka
2022-08-17 21:30:53 +02:00
parent 81eb4f01c4
commit 12ec2ebf94
2 changed files with 87 additions and 76 deletions
+66 -58
View File
@@ -19,72 +19,80 @@
export let selected_question: number; export let selected_question: number;
export let data: EditorData; 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)) { if (!Array.isArray(data.questions[selected_question].answers)) {
data.questions[selected_question].answers = []; data.questions[selected_question].answers = [];
} }
</script> </script>
<div class="grid grid-cols-2 gap-4 w-full px-10"> <div class="grid grid-cols-2 gap-4 w-full px-10">
{#each data.questions[selected_question].answers as answer, index} {#if Array.isArray(data.questions[selected_question].answers)}
<div {#each data.questions[selected_question].answers as answer, index}
on:contextmenu|preventDefault={() => { <div
data.questions[selected_question].answers.splice(index, 1); on:contextmenu|preventDefault={() => {
data.questions[selected_question].answers = data.questions[selected_question].answers.splice(index, 1);
data.questions[selected_question].answers; 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);
}} }}
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} <input
<svg bind:value={answer.answer}
class="w-6 h-6 inline-block" type="text"
fill="none" class="bg-transparent border-b-2 border-dotted w-5/6 text-center"
stroke="currentColor" placeholder="Empty..."
viewBox="0 0 24 24" />
xmlns="http://www.w3.org/2000/svg" <button
> type="button"
<path on:click={() => {
stroke-linecap="round" answer.right = !answer.right;
stroke-linejoin="round" console.log(answer.right);
stroke-width="2" }}
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" >
/> {#if answer.right}
</svg> <svg
{:else} class="w-6 h-6 inline-block"
<svg fill="none"
class="w-6 h-6 inline-block" stroke="currentColor"
fill="none" viewBox="0 0 24 24"
stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" >
xmlns="http://www.w3.org/2000/svg" <path
> stroke-linecap="round"
<path stroke-linejoin="round"
stroke-linecap="round" stroke-width="2"
stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
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>
/> {:else}
</svg> <svg
{/if} class="w-6 h-6 inline-block"
</button> fill="none"
</div> stroke="currentColor"
{/each} 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} {#if data.questions[selected_question].answers.length < 4}
<button <button
class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600" class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600"
+21 -18
View File
@@ -179,24 +179,27 @@
{/if} {/if}
{#if question.type === QuizQuestionType.ABCD} {#if question.type === QuizQuestionType.ABCD}
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
{#each question.answers as answer} {#if Array.isArray(question.answers)}
<span {#each question.answers as answer}
class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700" <span
class:bg-green-500={answer.right} class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700"
class:bg-red-500={!answer.right} class:bg-green-500={answer.right}
class:bg-yellow-500={!reach(ABCDQuestionSchema, 'answer').isValidSync( class:bg-red-500={!answer.right}
answer.answer class:bg-yellow-500={!reach(
)} ABCDQuestionSchema,
use:tippy={{ 'answer'
content: answer.answer === '' ? 'Empty...' : answer.answer ).isValidSync(answer.answer)}
}} use:tippy={{
>{#if answer.answer === ''} content: answer.answer === '' ? 'Empty...' : answer.answer
<i>Empty...</i> }}
{:else} >{#if answer.answer === ''}
{answer.answer} <i>Empty...</i>
{/if}</span {:else}
> {answer.answer}
{/each} {/if}</span
>
{/each}
{/if}
</div> </div>
{:else if question.type === QuizQuestionType.RANGE} {:else if question.type === QuizQuestionType.RANGE}
<p class="text-center text-sm p-0.5"> <p class="text-center text-sm p-0.5">