✨ Added new range-answer type

frontend/src/lib/editor/ABCDEditorPart.svelte

@@ -0,0 +1,97 @@
+<!--
+  - 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 type { EditorData, Answer } from '../quiz_types';
+	import { fade } from 'svelte/transition';
+	import { reach } from 'yup';
+	import { ABCDQuestionSchema } from '$lib/yupSchemas';
+
+	const empty_answer: Answer = {
+		right: false,
+		answer: ''
+	};
+
+	export let selected_question: number;
+	export let data: EditorData;
+</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 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 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"
+			type="button"
+			in:fade={{ duration: 150 }}
+			on:click={() => {
+				data.questions[selected_question].answers = [
+					...data.questions[selected_question].answers,
+					{ ...empty_answer }
+				];
+			}}
+		>
+			<span class="italic text-center">Add an answer</span>
+		</button>
+	{/if}
+</div>

frontend/src/lib/editor/RangeSelectorEditorPart.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { EditorData } from '../quiz_types';
+	import Spinner from '../Spinner.svelte';
+
+	export let selected_question: number;
+	export let data: EditorData;
+
+	let question = data.questions[selected_question];
+	if (question.answers.max === undefined || question.answers.min_correct === undefined) {
+		question.answers = {
+			max: 10,
+			min: 0,
+			max_correct: 7,
+			min_correct: 3
+		};
+	}
+
+	let answer = question.answers;
+	let range_arr = [answer.min_correct, answer.max_correct];
+	$: data.questions[selected_question].answers.min_correct = range_arr[0];
+	$: data.questions[selected_question].answers.max_correct = range_arr[1];
+	$: data.questions[selected_question].answers.min =
+		data.questions[selected_question].answers.min === null
+			? 0
+			: data.questions[selected_question].answers.min;
+	$: data.questions[selected_question].answers.max =
+		data.questions[selected_question].answers.max === null
+			? 0
+			: data.questions[selected_question].answers.max;
+	$: console.log(data.questions[selected_question].answers.min);
+
+	function sleep(ms) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+</script>
+
+<div class="w-full mx-8">
+	<div class="flex justify-center">
+		<div class="grid grid-cols-2 gap-4">
+			<input
+				type="number"
+				class="w-16 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1"
+				bind:value={data.questions[selected_question].answers.min}
+			/>
+			<input
+				type="number"
+				class="w-16 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1"
+				bind:value={data.questions[selected_question].answers.max}
+			/>
+		</div>
+	</div>
+	<div class="w-full">
+		<!--		<RangeSlider bind:value={range_arr} bind:min={answer.min} bind:max={answer.max} range={true} slider={lol} /> -->
+
+		{#await import('svelte-range-slider-pips')}
+			<Spinner />
+		{:then c}
+			{#await sleep(100)}
+				<Spinner />
+			{:then _}
+				<svelte:component
+					this={c.default}
+					bind:values={range_arr}
+					bind:min={data.questions[selected_question].answers.min}
+					bind:max={data.questions[selected_question].answers.max}
+					pips
+					float
+					all="label"
+					range
+				/>
+			{/await}
+		{/await}
+	</div>
+</div>

frontend/src/lib/editor/card.svelte

@@ -4,11 +4,12 @@
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
 <script lang="ts">
-	import type { EditorData, Answer } from '$lib/quiz_types';
+	import type { EditorData } from '$lib/quiz_types';
+	import { QuizQuestionType } from '$lib/quiz_types';
+	import RangeEditor from '$lib/editor/RangeSelectorEditorPart.svelte';
 	import { reach } from 'yup';
 	import { dataSchema } from '$lib/yupSchemas';
 	import Spinner from '../Spinner.svelte';
-	import { fade } from 'svelte/transition';
 	import { mint } from '$lib/hashcash';
 	import { createTippy } from 'svelte-tippy';
 	import 'tippy.js/animations/perspective-subtle.css';
@@ -25,10 +26,7 @@
 	export let edit_id: string;
 	export let pow_data;
 	let pow_salt: string;
-	const empty_answer: Answer = {
-		right: false,
-		answer: ''
-	};
+
 	let uppyOpen = false;
 
 	const computePOW = async (salt: string) => {
@@ -60,6 +58,13 @@
 		}
 	};
 	$: correctTimeInput(data.questions[selected_question].time);
+	/*
+	if (typeof data.questions[selected_question].type !== QuizQuestionType) {
+		console.log(data.questions[selected_question].type !== QuizQuestionType.ABCD || data.questions[selected_question].type !== QuizQuestionType.RANGE)
+		data.questions[selected_question].type = QuizQuestionType.ABCD;
+	}
+	 */
+	console.log(data.questions[selected_question].type, 'moin');
 </script>
 
 <div class="w-full h-full pb-20 px-20">
@@ -149,88 +154,26 @@
 					/>
 				</div>
 			</div>
-
+			<div class="flex justify-center pt-10">
+				<select
+					class="p-2 rounded-lg bg-gray-800 focus:ring-2 ring-blue-600 text-white"
+					name="Answer-Type"
+					bind:value={data.questions[selected_question].type}
+				>
+					<option value={QuizQuestionType.RANGE}>Range</option>
+					<option value={QuizQuestionType.ABCD}>Multiple-Choice</option>
+				</select>
+			</div>
 			<div class="flex justify-center pt-10 w-full">
-				<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(
-								dataSchema,
-								'questions[].answers[].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 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 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"
-							type="button"
-							in:fade={{ duration: 150 }}
-							on:click={() => {
-								data.questions[selected_question].answers = [
-									...data.questions[selected_question].answers,
-									{ ...empty_answer }
-								];
-							}}
-						>
-							<span class="italic text-center">Add an answer</span>
-						</button>
-					{/if}
-				</div>
+				{#if data.questions[selected_question].type === QuizQuestionType.ABCD}
+					{#await import('$lib/editor/ABCDEditorPart.svelte')}
+						<Spinner />
+					{:then c}
+						<svelte:component this={c.default} bind:data bind:selected_question />
+					{/await}
+				{:else if data.questions[selected_question].type === QuizQuestionType.RANGE}
+					<RangeEditor bind:selected_question bind:data />
+				{/if}
 			</div>
 			<p class="italic text-center mt-auto pt-4">Right-click on an answer to delete it!</p>
 		</div>

frontend/src/lib/editor/sidebar.svelte

@@ -5,16 +5,16 @@
   -->
 <script lang="ts">
 	import type { EditorData, Question } from '../quiz_types';
+	import { QuizQuestionType } from '$lib/quiz_types';
 	import { reach } from 'yup';
-	import { dataSchema } from '../yupSchemas';
-
-	export let data: EditorData;
-	export let selected_question = -1;
-
+	import { ABCDQuestionSchema, dataSchema } from '../yupSchemas';
 	import { createTippy } from 'svelte-tippy';
 	import 'tippy.js/animations/perspective-subtle.css';
 	import 'tippy.js/dist/tippy.css';
 
+	export let data: EditorData;
+	export let selected_question = -1;
+
 	const tippy = createTippy({
 		arrow: true,
 		animation: 'perspective-subtle',
@@ -26,7 +26,8 @@
 		question: '',
 		time: '20',
 		image: '',
-		answers: []
+		answers: [],
+		type: QuizQuestionType.ABCD
 	};
 
 	const setSelectedQuestion = (index: number): void => {
@@ -178,25 +179,30 @@
 					/>
 				</div>
 			{/if}
-			<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"
-						class:bg-green-500={answer.right}
-						class:bg-red-500={!answer.right}
-						class:bg-yellow-500={!reach(
-							dataSchema,
-							'questions[].answers[].answer'
-						).isValidSync(answer.answer)}
-						use:tippy={{ content: answer.answer === '' ? 'Empty...' : answer.answer }}
-						>{#if answer.answer === ''}
-							<i>Empty...</i>
-						{:else}
-							{answer.answer}
-						{/if}</span
-					>
-				{/each}
-			</div>
+			{#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"
+							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}
+				</div>
+			{:else}
+				<p>Hi!</p>
+			{/if}
 		</div>
 	{/each}
 	<div

frontend/src/lib/editor/uploader.svelte

@@ -47,7 +47,7 @@
 	const props = {
 		inline: true,
 		restrictions: {
-			maxFileSize: 2000,
+			maxFileSize: 2_000_000,
 			maxNumberOfFiles: 1,
 			allowedFileTypes: ['.gif', '.jpg', '.jpeg', '.png', '.svg', '.webp']
 		}