✨ Improved question-type selection and fixed bug where Check Choice and ABCD were inverted

frontend/src/lib/editor.svelte

@@ -57,6 +57,8 @@
 	let edit_id;
 	let confirm_to_leave = true;
 
+	$: console.log('data', data);
+
 	const getEditID = async () => {
 		let res;
 		if (quiz_id === null) {

frontend/src/lib/editor/ABCDEditorPart.svelte

@@ -16,8 +16,6 @@
 
 	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
 
-	console.log(get_foreground_color(default_colors[0]));
-
 	export let selected_question: number;
 	export let check_choice = false;
 	export let data: EditorData;
@@ -43,9 +41,8 @@
 		};
 	};
 	$: save_colors(data);
-	data.questions[selected_question].type = check_choice
-		? QuizQuestionType.ABCD
-		: QuizQuestionType.CHECK;
+	data.questions[selected_question].type =
+		check_choice === true ? QuizQuestionType.CHECK : QuizQuestionType.ABCD;
 </script>
 
 <div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-4 w-full px-10">
@@ -97,7 +94,6 @@
 					type="button"
 					on:click={() => {
 						answer.right = !answer.right;
-						console.log(answer.right);
 					}}
 				>
 					{#if answer.right}

frontend/src/lib/editor/AddNewQuestionPopup.svelte

@@ -0,0 +1,115 @@
+<!--
+  - 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 { Answers, Question } from '$lib/quiz_types';
+	import { QuizQuestionType } from '$lib/quiz_types';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { getLocalization } from '$lib/i18n';
+
+	export let questions: Question[];
+	export let open: boolean;
+
+	const { t } = getLocalization();
+	onMount(() => {
+		document.body.addEventListener('keydown', close_start_game_if_esc_is_pressed);
+	});
+	const close_start_game_if_esc_is_pressed = (key: KeyboardEvent) => {
+		if (key.code === 'Escape') {
+			open = false;
+		}
+	};
+	const on_parent_click = (e: Event) => {
+		if (e.target === e.currentTarget) {
+			open = false;
+		}
+	};
+
+	const question_types: {
+		name: string;
+		description: string;
+		answers: Answers;
+		type: QuizQuestionType;
+	}[] = [
+		{
+			name: 'Multiple Choice',
+			description: '',
+			answers: [],
+			type: QuizQuestionType.ABCD
+		},
+		{
+			name: 'Voting',
+			description: '',
+			answers: [],
+			type: QuizQuestionType.VOTING
+		},
+		{
+			name: 'Check Choice',
+			description: '',
+			answers: [],
+			type: QuizQuestionType.CHECK
+		},
+		{
+			name: 'Order',
+			description: '',
+			answers: [],
+			type: QuizQuestionType.ORDER
+		},
+		{
+			name: 'Text',
+			description: '',
+			answers: [],
+			type: QuizQuestionType.TEXT
+		},
+		{
+			name: 'Range',
+			description: '',
+			answers: {
+				max: 10,
+				min: 0,
+				max_correct: 7,
+				min_correct: 3
+			},
+			type: QuizQuestionType.RANGE
+		}
+	];
+
+	const add_question = (index: number) => {
+		const empty_question: Question = {
+			type: question_types[index].type,
+			time: '20',
+			question: '',
+			image: undefined,
+			answers: question_types[index].answers
+		};
+		questions = [...questions, { ...empty_question }];
+		open = false;
+	};
+</script>
+
+<div
+	class="fixed top-0 left-0 w-screen h-screen flex bg-black z-50 bg-opacity-50"
+	on:click={on_parent_click}
+	transition:fade|local={{ duration: 100 }}
+>
+	<div class="m-auto w-2/3 h-5/6 rounded shadow-2xl bg-white dark:bg-gray-600 p-6">
+		<h1 class="text-center text-3xl mb-6">{$t('quiztivity.editor.select_page_type')}</h1>
+		<div class="grid grid-cols-4 gap-4 overflow-y-scroll">
+			{#each question_types as qt, i}
+				<div class="rounded p-6 border-[#B07156] border">
+					<button
+						class="text-xl text-black dark:text-white"
+						on:click={() => {
+							add_question(i);
+						}}>{qt.name}</button
+					>
+					<p class="text-sm">{qt.description}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>

frontend/src/lib/editor/MediaComponent.svelte

@@ -17,15 +17,11 @@
 			return;
 		}
 		const res = await fetch(`/api/v1/storage/info/${src}`);
-		console.log('Headers', res.headers);
 		const fileType = res.headers.get('Content-Type');
-		console.log(fileType, 'fileType');
 		if (fileType.includes('video')) {
-			console.log('Setting type to video');
 			type = 'video';
 		} else {
 			type = 'img';
-			console.log(res);
 			const data = await fetch(`/api/v1/storage/download/${src}`);
 			return {
 				data: URL.createObjectURL(await data.blob()),

frontend/src/lib/editor/RangeSelectorEditorPart.svelte

@@ -14,6 +14,7 @@
 			min_correct: 3
 		};
 	}
+
 	/*
 	const correct_numbers = (data: number[]) => {
 		console.log(data, data[1] <= data[0])

frontend/src/lib/editor/TextEditorPart.svelte

@@ -80,7 +80,6 @@
 					type="button"
 					on:click={() => {
 						answer.case_sensitive = !answer.case_sensitive;
-						console.log(answer.case_sensitive);
 					}}
 				>
 					{#if answer.case_sensitive}

frontend/src/lib/editor/card.svelte

@@ -54,13 +54,22 @@
 
 	const update_image_url = () => {
 		image_url = data.questions[selected_question].image;
-		console.log('updated!');
 	};
 	$: {
 		update_image_url();
 		selected_question;
 		data.questions;
 	}
+
+	const type_to_name = {
+		RANGE: $t('words.range'),
+		ABCD: $t('words.multiple_choice'),
+		VOTING: $t('words.voting'),
+		TEXT: $t('words.text'),
+		ORDER: $t('words.order'),
+		CHECK: $t('words.check_choice')
+	};
+
 	/*
     if (typeof data.questions[selected_question].type !== QuizQuestionType) {
         console.log(data.questions[selected_question].type !== QuizQuestionType.ABCD || data.questions[selected_question].type !== QuizQuestionType.RANGE)
@@ -183,21 +192,10 @@
 					</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}>{$t('words.range')}</option>
-						<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>
-						<option value={QuizQuestionType.CHECK}>{$t('words.check_choice')}</option>
-					</select>
+					<p>{type_to_name[String(data.questions[selected_question].type)]}</p>
 				</div>
 				<div class="flex justify-center py-10 w-full">
-					{#if type === QuizQuestionType.ABCD || QuizQuestionType.CHECK}
+					{#if type === QuizQuestionType.ABCD || type === QuizQuestionType.CHECK}
 						{#await import('$lib/editor/ABCDEditorPart.svelte')}
 							<Spinner my_20={false} />
 						{:then c}
@@ -209,6 +207,7 @@
 							/>
 						{/await}
 					{:else if type === QuizQuestionType.RANGE}
+						<p>Range</p>
 						<RangeEditor bind:selected_question bind:data />
 					{:else if type === QuizQuestionType.VOTING}
 						{#await import('$lib/editor/VotingEditorPart.svelte')}

frontend/src/lib/editor/sidebar.svelte

@@ -10,6 +10,8 @@
 	import { ABCDQuestionSchema, dataSchema } from '../yupSchemas';
 	import { createTippy } from 'svelte-tippy';
 	import { getLocalization } from '$lib/i18n';
+	import AddNewQuestionPopup from '$lib/editor/AddNewQuestionPopup.svelte';
+
 	const { t } = getLocalization();
 
 	export let data: EditorData;
@@ -22,13 +24,7 @@
 	});
 	let arr_of_cards = Array(data.questions.length);
 	let propertyCard;
-	const empty_question: Question = {
-		question: '',
-		time: '20',
-		image: '',
-		answers: [],
-		type: QuizQuestionType.ABCD
-	};
+	let add_new_question_popup_open = false;
 
 	const empy_slide: Question = {
 		type: QuizQuestionType.SLIDE,
@@ -51,10 +47,10 @@
 		}
 	};
 	/*	onMount(() => {
-			propertyCard.scrollIntoView({
-				behavior: 'smooth'
-			});
-		});*/
+            propertyCard.scrollIntoView({
+                behavior: 'smooth'
+            });
+        });*/
 </script>
 
 <div class="h-screen border-r-2 pt-6 px-6 overflow-scroll">
@@ -205,7 +201,7 @@
 						class="h-10 border rounded-lg"
 						alt="Not available"
 						use:tippy={{
-							content: `<img src='/api/v1/storage/download/${question.image}' alt='Not available' class='rounded'>`,
+							content: `<img src="/api/v1/storage/download/${question.image}" alt="Not available" class="rounded">`,
 							allowHTML: true
 						}}
 					/>
@@ -281,7 +277,7 @@
 			type="button"
 			class="h-full flex justify-center w-full dark:text-black flex-col border-r border-black"
 			on:click={() => {
-				data.questions = [...data.questions, { ...empty_question }];
+				add_new_question_popup_open = true;
 			}}
 		>
 			<span class="w-full text-center">{$t('words.question')}</span>
@@ -325,3 +321,6 @@
 		</button>
 	</div>
 </div>
+{#if add_new_question_popup_open}
+	<AddNewQuestionPopup bind:questions={data.questions} bind:open={add_new_question_popup_open} />
+{/if}

frontend/src/lib/editor/slide.svelte

@@ -84,7 +84,6 @@
 				fill: '#ff000d'
 			});
 		}
-		console.log(canvas.export.toJson());
 	};
 
 	$: {
@@ -146,7 +145,6 @@
 							interactive: false
 						}*/
 		});
-		console.log(data.answers);
 		if (data.answers) {
 			if (typeof data.answers === 'string') {
 				canvas.import.json(JSON.parse(data.answers));

frontend/src/lib/editor/slides/edit_menu.svelte

@@ -15,7 +15,6 @@
 
 	const set_available_modifiers = () => {
 		available_modifiers = [];
-		console.log(selected_el, 'sel_el');
 		if (!selected_el) {
 			return;
 		}
@@ -43,19 +42,16 @@
 
 	const change_color = (e: Event) => {
 		if (available_modifiers.includes('text_color')) {
-			console.log('text color');
 			selected_el.updateText({
 				fill: e.target.value
 			});
 		} else if (available_modifiers.includes('fill_color')) {
-			console.log('fill color');
 			selected_el.update({ fill: e.target.value });
 		}
 		opened_dropdown = null;
 	};
 
 	const change_fontsize = (e: Event) => {
-		console.log(selected_el.node.children[1].attrs.fontSize);
 		selected_el.updateText({
 			fontSize: e.target.value
 		});

frontend/src/lib/editor/slides/types/circle.svelte

@@ -10,7 +10,6 @@
 	if (!data) {
 		data = '#ed333b';
 	}
-	$: console.log(data);
 </script>
 
 <div class="rounded-full w-full h-full flex justify-center p-2" style="background-color: {data}">

frontend/src/lib/editor/slides/types/rectangle.svelte

@@ -10,7 +10,6 @@
 	if (!data) {
 		data = '#ed333b';
 	}
-	$: console.log(data);
 </script>
 
 <div class="w-full h-full flex justify-center p-2" style="background-color: {data}">

frontend/src/lib/editor/uploader.svelte

@@ -85,7 +85,6 @@
 		} else {
 			data.questions[selected_question].image = image_id;
 		}
-		console.log(selected_question, data);
 
 		modalOpen = false;
 		selected_type = null;
@@ -109,7 +108,6 @@
 			'popup=true,toolbar=false,menubar=false,location=false,'
 		);
 		video_popup.addEventListener('beforeunload', () => {
-			console.log('Unloaded');
 			video_popup = undefined;
 		});
 	};

frontend/src/lib/inline-editor.svelte

@@ -73,7 +73,6 @@
 		})
 			.then((newEditor) => {
 				editor = newEditor;
-				console.log(editor);
 				editor.setData(text);
 				editor.model.document.on('change:data', () => {
 					triggerChange();

frontend/src/lib/quiz_types.ts

@@ -58,15 +58,17 @@ export interface Question {
 	question: string;
 	type?: QuizQuestionType;
 	image?: string;
-	answers:
-		| Answer[]
-		| RangeQuizAnswer
-		| VotingAnswer[]
-		| string
-		| TextQuizAnswer[]
-		| OrderQuizAnswer[];
+	answers: Answers;
 }
 
+export type Answers =
+	| Answer[]
+	| RangeQuizAnswer
+	| VotingAnswer[]
+	| string
+	| TextQuizAnswer[]
+	| OrderQuizAnswer[];
+
 export interface Answer {
 	right: boolean;
 	answer: string;

frontend/src/routes/edit/+page.svelte

@@ -38,7 +38,6 @@
 
 	export let data;
 	let { quiz_id } = data;
-	console.log(quiz_id);
 	let quiz_data: Data;
 
 	const get_quiz = async (): Promise<void> => {