✨ Half-Working order-answers

frontend/src/lib/editor/OrderEditorPart.svelte

@@ -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>

frontend/src/lib/editor/card.svelte

@@ -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>

frontend/src/lib/play/question.svelte

@@ -11,6 +11,7 @@
 	import { getLocalization } from '$lib/i18n';
 	import { kahoot_icons } from './kahoot_mode_assets/kahoot_icons';
 	import CircularTimer from '$lib/play/circular_progress.svelte';
+	import { flip } from 'svelte/animate';
 
 	const { t } = getLocalization();
 
@@ -72,6 +73,18 @@
 		});
 	};
 
+	const select_complex_answer = (data) => {
+		const new_array = [];
+		for (let i = 0; i < data.length; i++) {
+			new_array.push({ answer: data[i].answer });
+		}
+		socket.emit('submit_answer', {
+			question_index: question_index,
+			answer: 'a',
+			complex_answer: new_array
+		});
+	};
+
 	let text_input = '';
 
 	let slider_value = [0];
@@ -87,6 +100,20 @@
 			selectAnswer(selected_answer);
 		}
 	};
+
+	if (question.type === QuizQuestionType.ORDER) {
+		for (let i = 0; i < question.answers.length; i++) {
+			question.answers[i] = { ...question.answers[i], id: i };
+		}
+	}
+
+	const swapArrayElements = (arr, a: number, b: number) => {
+		let _arr = [...arr];
+		let temp = _arr[a];
+		_arr[a] = _arr[b];
+		_arr[b] = temp;
+		return _arr;
+	};
 	$: set_answer_if_not_set_range(timer_res);
 	let circular_prgoress = 0;
 	$: {
@@ -213,45 +240,122 @@
 					{$t('words.submit')}
 				</button>
 			</div>
-		{/if}
-	{:else if question.type === QuizQuestionType.ABCD}
-		{#if solution === undefined}
-			<Spinner />
-		{:else}
-			<div class="grid grid-cols-2 gap-2 w-full p-4">
-				{#each solution.answers as answer}
-					{#if answer.right}
-						<button
-							class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-green-600"
-							disabled
-							class:opacity-30={answer.answer !== selected_answer}
-							>{answer.answer}</button
-						>
+		{:else if question.type === QuizQuestionType.ABCD}
+			{#if solution === undefined}
+				<Spinner />
+			{:else}
+				<div class="grid grid-cols-2 gap-2 w-full p-4">
+					{#each solution.answers as answer}
+						{#if answer.right}
+							<button
+								class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-green-600"
+								disabled
+								class:opacity-30={answer.answer !== selected_answer}
+								>{answer.answer}</button
+							>
+						{:else}
+							<button
+								class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-red-500"
+								disabled
+								class:opacity-30={answer.answer !== selected_answer}
+								>{answer.answer}</button
+							>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+		{:else if question.type === QuizQuestionType.RANGE}
+			{#if solution === undefined}
+				<Spinner />
+			{:else}
+				<p class="text-center">
+					Every number between {solution.answers.min_correct} and {solution.answers
+						.max_correct} was correct. You got {selected_answer}, so you have been
+					{#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
+						correct
 					{:else}
-						<button
-							class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-red-500"
-							disabled
-							class:opacity-30={answer.answer !== selected_answer}
-							>{answer.answer}</button
-						>
+						wrong.
 					{/if}
+				</p>
+			{/if}
+		{:else if question.type === QuizQuestionType.ORDER}
+			<!--			{#if solution === undefined}
+							<Spinner />
+						{:else}-->
+			<div class="flex flex-col w-full h-full gap-4 px-4 py-6">
+				{#each question.answers as answer, i (answer.id)}
+					<div
+						class="w-full h-fit flex-row rounded-lg p-2 align-middle"
+						animate:flip={{ duration: 100 }}
+						style="background-color: {answer.color ?? '#b07156'}"
+					>
+						<button
+							on:click={() => {
+								question.answers = swapArrayElements(question.answers, i, i - 1);
+							}}
+							class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 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>
+						<p class="w-full text-center p-2 text-2xl">{answer.answer}</p>
+
+						<button
+							on:click={() => {
+								question.answers = swapArrayElements(question.answers, i, i + 1);
+							}}
+							class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
+							type="button"
+							disabled={i === 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>
 				{/each}
+				<button
+					class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition w-full"
+					type="button"
+					on:click={() => {
+						select_complex_answer(question.answers);
+					}}
+				>
+					{$t('words.submit')}
+				</button>
 			</div>
+			<!--{/if}-->
 		{/if}
-	{:else if question.type === QuizQuestionType.RANGE}
-		{#if solution === undefined}
-			<Spinner />
-		{:else}
-			<p class="text-center">
-				Every number between {solution.answers.min_correct} and {solution.answers
-					.max_correct} was correct. You got {selected_answer}, so you have been
-				{#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
-					correct
-				{:else}
-					wrong.
-				{/if}
-			</p>
-		{/if}
+
 		<!--{:else if question.type === QuizQuestionType.VOTING}
 	{#await import('$lib/play/admin/voting_results.svelte')}
 		<Spinner />

frontend/src/lib/quiz_types.ts

@@ -30,7 +30,8 @@ export enum QuizQuestionType {
 	RANGE = 'RANGE', // eslint-disable-line no-unused-vars
 	VOTING = 'VOTING', // eslint-disable-line no-unused-vars
 	SLIDE = 'SLIDE', // eslint-disable-line no-unused-vars
-	TEXT = 'TEXT' // eslint-disable-line no-unused-vars
+	TEXT = 'TEXT', // eslint-disable-line no-unused-vars
+	ORDER = 'ORDER' // eslint-disable-line no-unused-vars
 }
 
 export interface RangeQuizAnswer {
@@ -45,12 +46,24 @@ export interface TextQuizAnswer {
 	case_sensitive: boolean;
 }
 
+export interface OrderQuizAnswer {
+	answer: string;
+	color?: string;
+	id?: number;
+}
+
 export interface Question {
 	time: string;
 	question: string;
 	type?: QuizQuestionType;
 	image?: string;
-	answers: Answer[] | RangeQuizAnswer | VotingAnswer[] | string | TextQuizAnswer[];
+	answers:
+		| Answer[]
+		| RangeQuizAnswer
+		| VotingAnswer[]
+		| string
+		| TextQuizAnswer[]
+		| OrderQuizAnswer[];
 }
 
 export interface Answer {

frontend/src/lib/yupSchemas.ts

@@ -81,11 +81,15 @@ export const dataSchema = yup.object({
 						} else if (typeof v[0].case_sensitive === 'boolean') {
 							console.log('TextQuestionSchema');
 							return TextQuestionSchema;
+						} else if (v[0].id !== undefined) {
+							console.log('OrderQuestionSchema');
+							return VotingQuestionSchema;
 						} else if (v[0].answer !== undefined) {
 							console.log('VotingQuestionSchema');
 							return VotingQuestionSchema;
 						}
 					} else if (typeof v === 'string' || v instanceof String) {
+						console.log('StringQuestionSchema');
 						return yup.string().required("The slide mustn't be empty").nullable();
 					} else {
 						console.log('RangeQuestionSchema');