From 6788b32131e6f593d44de0a7f106516312c9cc27 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 18 Jan 2023 20:34:37 +0100
Subject: [PATCH] BROKEN quick save

---
 classquiz/socket_server/__init__.py           |   1 +
 frontend/src/lib/dashboard/main_slider.svelte |  12 ++
 .../src/lib/editor/OrderEditorPart.svelte     |   2 +-
 frontend/src/lib/practice/question.svelte     | 128 ++++++++++++++----
 .../src/routes/view/[quiz_id]/+page.svelte    |  10 ++
 5 files changed, 128 insertions(+), 25 deletions(-)

diff --git a/classquiz/socket_server/__init__.py b/classquiz/socket_server/__init__.py
index ba566d8..04c235d 100644
--- a/classquiz/socket_server/__init__.py
+++ b/classquiz/socket_server/__init__.py
@@ -322,6 +322,7 @@ async def submit_answer(sid: str, data: dict):
             print(data.dict()["complex_answer"], correct_answers)
             if correct_answers == data.dict()["complex_answer"]:
                 answer_right = True
+        # TODO Set data.answer to a real value for export
 
     elif game_data.questions[int(float(data.question_index))].type == QuizQuestionType.TEXT:
         answer_right = False
diff --git a/frontend/src/lib/dashboard/main_slider.svelte b/frontend/src/lib/dashboard/main_slider.svelte
index fbe0e87..810d9dc 100644
--- a/frontend/src/lib/dashboard/main_slider.svelte
+++ b/frontend/src/lib/dashboard/main_slider.svelte
@@ -371,6 +371,18 @@
 													</div>
 												{/each}
 											</div>
+										{:else if question.type === QuizQuestionType.ORDER}
+											<ul class="flex flex-col gap-4 m-4 p-6">
+												{#each question.answers as answer}
+													<li
+														class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300"
+													>
+														<h4 class="text-center">
+															{answer.answer}
+														</h4>
+													</li>
+												{/each}
+											</ul>
 										{:else if question.type === QuizQuestionType.SLIDE}
 											<div
 												use:viewport
diff --git a/frontend/src/lib/editor/OrderEditorPart.svelte b/frontend/src/lib/editor/OrderEditorPart.svelte
index 1ff551f..b87cdfb 100644
--- a/frontend/src/lib/editor/OrderEditorPart.svelte
+++ b/frontend/src/lib/editor/OrderEditorPart.svelte
@@ -56,7 +56,7 @@
 	<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
+				animate:flip={{ duration: 200 }}
 				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"
 			>
diff --git a/frontend/src/lib/practice/question.svelte b/frontend/src/lib/practice/question.svelte
index 9b22577..8fa3749 100644
--- a/frontend/src/lib/practice/question.svelte
+++ b/frontend/src/lib/practice/question.svelte
@@ -3,12 +3,13 @@
   - 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">
+<script lang='ts'>
 	import type { Question } from '$lib/quiz_types';
 	import { fly } from 'svelte/transition';
 	import { getLocalization } from '$lib/i18n';
 	import { QuizQuestionType } from '$lib/quiz_types';
 	import Spinner from '$lib/Spinner.svelte';
+	import { flip } from 'svelte/animate';
 
 	export let question: Question;
 
@@ -41,20 +42,29 @@
 
 	let text_input;
 	timer(question.time);
+
+
+	const swapArrayElements = (arr, a: number, b: number) => {
+		let _arr = [...arr];
+		let temp = _arr[a];
+		_arr[a] = _arr[b];
+		_arr[b] = temp;
+		return _arr;
+	};
 </script>
 
-<div class="w-full px-6 lg:px-20 h-[80vh] absolute" in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
-	<h1 class="text-3xl text-center">{@html question.question}</h1>
+<div class='w-full px-6 lg:px-20 h-[80vh] absolute' in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
+	<h1 class='text-3xl text-center'>{@html question.question}</h1>
 	{#if question.image !== null}
 		<div>
 			<img
 				src={question.image}
-				class="max-h-[40vh] object-cover mx-auto mb-8 w-auto"
-				alt="Content for Question"
+				class='max-h-[40vh] object-cover mx-auto mb-8 w-auto'
+				alt='Content for Question'
 			/>
 		</div>
 	{/if}
-	<p class="text-center">{timer_res}</p>
+	<p class='text-center'>{timer_res}</p>
 	{#if question.type === QuizQuestionType.ABCD}
 		{#if show_results}
 			<div>
@@ -65,8 +75,8 @@
 						class:bg-red-500={!question.answers[i].right}
 						class:text-xl={i === selected_answer}
 						class:underline={i === selected_answer}
-						class="p-2 rounded-lg flex justify-center w-full transition my-5 text-black"
-						>{answer.answer}</button
+						class='p-2 rounded-lg flex justify-center w-full transition my-5 text-black'
+					>{answer.answer}</button
 					>
 				{/each}
 			</div>
@@ -75,7 +85,7 @@
 				{#each question.answers as answer, i}
 					<button
 						disabled={selected_answer !== undefined || timer_res === '0'}
-						class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
+						class='p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black'
 						on:click={() => {
 							selected_answer = i;
 							timer_res = '0';
@@ -84,7 +94,7 @@
 				{/each}
 				{#if timer_res === '0'}
 					<button
-						class="bg-orange-500 p-2 rounded-lg flex justify-center w-full transition my-5 text-black"
+						class='bg-orange-500 p-2 rounded-lg flex justify-center w-full transition my-5 text-black'
 						on:click={() => {
 							show_results = true;
 						}}>{$t('admin_page.get_results')}</button
@@ -97,7 +107,7 @@
 			{#await import('svelte-range-slider-pips')}
 				<Spinner />
 			{:then c}
-				<div class="grayscale pointer-events-none w-full">
+				<div class='grayscale pointer-events-none w-full'>
 					<svelte:component
 						this={c.default}
 						bind:values={slider_values}
@@ -105,7 +115,7 @@
 						bind:max={question.answers.max}
 						pips
 						float
-						all="label"
+						all='label'
 					/>
 				</div>
 			{/await}
@@ -121,18 +131,18 @@
 						bind:max={question.answers.max}
 						pips
 						float
-						all="label"
+						all='label'
 					/>
 				</div>
-				<div class="flex justify-center">
+				<div class='flex justify-center'>
 					<button
-						class="w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition"
+						class='w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition'
 						disabled={selected_answer !== undefined}
 						on:click={() => {
 							selected_answer = slider_value[0];
 							timer_res = '0';
 						}}
-						>{$t('words.submit')}
+					>{$t('words.submit')}
 					</button>
 				</div>
 			{/await}
@@ -141,7 +151,7 @@
 		{#each question.answers as answer, i}
 			<button
 				disabled={selected_answer !== undefined || timer_res === '0'}
-				class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
+				class='p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black'
 				on:click={() => {
 					selected_answer = i;
 					timer_res = '0';
@@ -155,7 +165,7 @@
 		{#await import('$lib/play/admin/slide.svelte')}
 			<Spinner my={false} />
 		{:then c}
-			<div class="max-h-[90%] max-w-[90%]">
+			<div class='max-h-[90%] max-w-[90%]'>
 				<svelte:component this={c.default} bind:question />
 			</div>
 		{/await}
@@ -163,23 +173,23 @@
 		{#if timer_res === '0'}
 			{#each question.answers as answer, i}
 				<div
-					class="p-2 rounded-lg flex justify-center w-full transition bg-gray-200 my-5 text-black"
+					class='p-2 rounded-lg flex justify-center w-full transition bg-gray-200 my-5 text-black'
 				>
 					{answer.answer}
 				</div>
 			{/each}
 		{:else}
-			<div class="flex justify-center mt-2">
+			<div class='flex justify-center mt-2'>
 				<input
-					type="text"
+					type='text'
 					bind:value={text_input}
-					class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center"
+					class='bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center'
 				/>
 			</div>
-			<div class="flex justify-center">
+			<div class='flex justify-center'>
 				<button
 					disabled={!text_input}
-					class="w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition"
+					class='w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition'
 					on:click={() => {
 						selected_answer = text_input;
 						timer_res = '0';
@@ -187,5 +197,75 @@
 				>
 			</div>
 		{/if}
+		<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>
 	{/if}
 </div>
diff --git a/frontend/src/routes/view/[quiz_id]/+page.svelte b/frontend/src/routes/view/[quiz_id]/+page.svelte
index ebb0666..b9fd687 100644
--- a/frontend/src/routes/view/[quiz_id]/+page.svelte
+++ b/frontend/src/routes/view/[quiz_id]/+page.svelte
@@ -218,6 +218,16 @@
 							and {question.answers.max_correct} are correct, where numbers between {question
 								.answers.min} and {question.answers.max} can be selected.
 						</p>
+					{:else if question.type === QuizQuestionType.ORDER}
+						<ul class="flex flex-col gap-4 m-4 p-6">
+							{#each question.answers as answer}
+								<li class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300">
+									<h4 class="text-center">
+										{answer.answer}
+									</h4>
+								</li>
+							{/each}
+						</ul>
 					{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
 						<div class="grid grid-cols-2 gap-4 m-4 p-6">
 							{#each question.answers as answer, index_answer}