✨ Half-Working order-answers
This commit is contained in:
Mawoka
@@ -0,0 +1,181 @@
|
||||
<!--
|
||||
- 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 { getLocalization } from '$lib/i18n';
|
||||
import type { EditorData, OrderQuizAnswer } from '$lib/quiz_types';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
export let selected_question: number;
|
||||
export let data: EditorData;
|
||||
|
||||
let parent_el: HTMLDivElement;
|
||||
|
||||
const swapArrayElements = (arr: OrderQuizAnswer[], a: number, b: number): Array<any> => {
|
||||
let _arr = [...arr];
|
||||
let temp = _arr[a];
|
||||
_arr[a] = _arr[b];
|
||||
_arr[b] = temp;
|
||||
return _arr;
|
||||
};
|
||||
|
||||
const move_item = (up: boolean, index: number) => {
|
||||
if (up) {
|
||||
data.questions[selected_question].answers = swapArrayElements(
|
||||
data.questions[selected_question].answers,
|
||||
index,
|
||||
index - 1
|
||||
);
|
||||
} else {
|
||||
data.questions[selected_question].answers = swapArrayElements(
|
||||
data.questions[selected_question].answers,
|
||||
index,
|
||||
index + 1
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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,
|
||||
color: data.questions[selected_question].answers[i].color ?? undefined,
|
||||
id: [i]
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class="flex flex-col w-full px-8" bind:this={parent_el}>
|
||||
{#each data.questions[selected_question].answers as answer, i (answer.id)}
|
||||
<div
|
||||
animate:flip
|
||||
out:fade={{ duration: 150 }}
|
||||
class="p-4 rounded-lg flex justify-center w-full transition relative border border-gray-600 flex-row gap-4 m-2"
|
||||
>
|
||||
<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(i, 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>
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
move_item(true, i);
|
||||
}}
|
||||
class="disabled:opacity-50 transition"
|
||||
type="button"
|
||||
disabled={i === 0}
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
move_item(false, i);
|
||||
}}
|
||||
class="disabled:opacity-50 transition"
|
||||
type="button"
|
||||
disabled={i === data.questions[selected_question].answers.length - 1}
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
bind:value={answer.answer}
|
||||
type="text"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent"
|
||||
style="background-color: {answer.color ?? 'transparent'}"
|
||||
placeholder="Empty..."
|
||||
/>
|
||||
<input
|
||||
class="rounded-lg p-1 border-black border"
|
||||
type="color"
|
||||
bind:value={answer.color}
|
||||
on:contextmenu|preventDefault={() => {
|
||||
answer.color = null;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="px-8 flex w-full">
|
||||
{#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 m-2 w-full"
|
||||
type="button"
|
||||
in:fade={{ duration: 150 }}
|
||||
on:click={() => {
|
||||
data.questions[selected_question].answers = [
|
||||
...data.questions[selected_question].answers,
|
||||
{
|
||||
...{
|
||||
answer: '',
|
||||
color: undefined,
|
||||
id: data.questions[selected_question].answers.length
|
||||
}
|
||||
}
|
||||
];
|
||||
}}
|
||||
>
|
||||
<span class="italic text-center">{$t('editor_page.add_an_answer')}</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,6 +183,7 @@
|
||||
<option value={QuizQuestionType.ABCD}>{$t('words.multiple_choice')}</option>
|
||||
<option value={QuizQuestionType.VOTING}>{$t('words.voting')}</option>
|
||||
<option value={QuizQuestionType.TEXT}>{$t('words.text')}</option>
|
||||
<option value={QuizQuestionType.ORDER}>{$t('words.order')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-center py-10 w-full">
|
||||
@@ -206,6 +207,12 @@
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data bind:selected_question />
|
||||
{/await}
|
||||
{:else if data.questions[selected_question].type === QuizQuestionType.ORDER}
|
||||
{#await import('$lib/editor/OrderEditorPart.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data bind:selected_question />
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user