Merge pull request #193 from mawoka-myblock/slides

classquiz/db/models.py

@@ -112,13 +112,22 @@ class QuizQuestionType(str, Enum):
     ABCD = "ABCD"
     RANGE = "RANGE"
     VOTING = "VOTING"
+    SLIDE = "SLIDE"
+
+
+class SlideElementTypes(str, Enum):
+    TEXT = "TEXT"
+    HEADLINE = "HEADLINE"
+    IMAGE = "IMAGE"
+    RECTANGLE = "RECTANGLE"
+    CIRCLE = "CIRCLE"
 
 
 class QuizQuestion(BaseModel):
     question: str
     time: str  # in Secs
     type: None | QuizQuestionType = QuizQuestionType.ABCD
-    answers: list[ABCDQuizAnswer] | RangeQuizAnswer | list[VotingQuizAnswer]
+    answers: list[ABCDQuizAnswer] | RangeQuizAnswer | list[VotingQuizAnswer] | str
     image: str | None = None
 
     @validator("answers")
@@ -129,6 +138,8 @@ class QuizQuestion(BaseModel):
             raise ValueError("Answer must be from type RangeQuizAnswer if type is RANGE")
         if values["type"] == QuizQuestionType.VOTING and type(v[0]) != VotingQuizAnswer:
             raise ValueError("Answer must be from type VotingQuizAnswer if type is VOTING")
+        if values["type"] == QuizQuestionType.SLIDE and type(v[0]) != str:
+            raise ValueError("Answer must be from type SlideElement if type is SLIDE")
         return v
 
 

classquiz/socket_server/__init__.py

@@ -230,6 +230,8 @@ async def set_question_number(sid, data: str):
         await redis.set(f"game:{session['game_pin']}", game_data.json())
         await redis.set(f"game:{session['game_pin']}:current_time", datetime.now().isoformat())
         temp_return = game_data.dict(include={"questions"})["questions"][int(float(data))]
+        if game_data.questions[int(float(data))].type == QuizQuestionType.SLIDE:
+            return
         if game_data.questions[int(float(data))].type == QuizQuestionType.VOTING:
             for i in range(len(temp_return["answers"])):
                 temp_return["answers"][i] = VotingQuizAnswer(**temp_return["answers"][i])

frontend/package.json

@@ -65,6 +65,7 @@
 		"luxon": "^3.1.1",
 		"mapbox-gl": "^2.11.0",
 		"minisearch": "^5.1.0",
+		"pikaso": "^2.7.4",
 		"plausible-tracker": "^0.3.8",
 		"postcss": "^8.4.19",
 		"postcss-import": "^14.1.0",

frontend/pnpm-lock.yaml

@@ -53,6 +53,7 @@ specifiers:
     luxon: ^3.1.1
     mapbox-gl: ^2.11.0
     minisearch: ^5.1.0
+    pikaso: ^2.7.4
     plausible-tracker: ^0.3.8
     postcss: ^8.4.19
     postcss-import: ^14.1.0
@@ -132,6 +133,7 @@ devDependencies:
     luxon: 3.1.1
     mapbox-gl: 2.11.1
     minisearch: 5.1.0
+    pikaso: 2.7.4
     plausible-tracker: 0.3.8
     postcss: 8.4.20
     postcss-import: 14.1.0_postcss@8.4.20
@@ -3433,6 +3435,13 @@ packages:
         engines: { node: '>=6' }
         dev: true
 
+    /konva/8.3.14:
+        resolution:
+            {
+                integrity: sha512-6I/TZppgY3Frs//AvZ87YVQLFxLywitb8wLS3qMM+Ih9e4QcB5Yy8br6eq7DdUzxPdbsYTz1FQBHzNxs08M1Tw==
+            }
+        dev: true
+
     /levn/0.4.1:
         resolution:
             {
@@ -3982,6 +3991,17 @@ packages:
         engines: { node: '>=0.10.0' }
         dev: true
 
+    /pikaso/2.7.4:
+        resolution:
+            {
+                integrity: sha512-30nqF5+xBUIBKiHHfDfjA3oZChjirN3AmhfWb456iUvTpMY2D51PKjGHfgF2SoQP5Jad7i4Zv+wrQAp7BhcNmQ==
+            }
+        dependencies:
+            deepmerge: 4.2.2
+            konva: 8.3.14
+            typescript: 4.7.4
+        dev: true
+
     /plausible-tracker/0.3.8:
         resolution:
             {

frontend/src/lib/admin.svelte

@@ -27,16 +27,21 @@
 	let timer_res: string;
 	let shown_question_now: number;
 	let final_results_clicked = false;
+	let timer_interval;
 
 	export let player_scores;
 
 	export const set_question_number = (q_number: number) => {
+		timer_res = '0';
+		clearInterval(timer_interval);
+		// setTimeout(() => {
 		question_results = null;
 		socket.emit('set_question_number', q_number.toString());
 		shown_question_now = q_number;
 		timer_res = quiz_data.questions[q_number].time;
 		selected_question = selected_question + 1;
 		timer(timer_res);
+		// }, 1000);
 	};
 	const get_question_results = () => {
 		socket.emit('get_question_results', {
@@ -53,6 +58,7 @@
 	const get_final_results = () => {
 		socket.emit('get_final_results', {});
 		final_results_clicked = true;
+		timer_res = '0';
 	};
 
 	socket.on('final_results', (data) => {
@@ -75,7 +81,7 @@
 
 	const timer = (time: string) => {
 		let seconds = Number(time);
-		let timer_interval = setInterval(() => {
+		timer_interval = setInterval(() => {
 			if (timer_res === '0') {
 				clearInterval(timer_interval);
 				// socket.emit('show_solutions', {});
@@ -87,14 +93,14 @@
 			timer_res = seconds.toString();
 		}, 1000);
 	};
-	let circular_prgoress = 0;
+	let circular_progress = 0;
 	$: {
 		try {
-			circular_prgoress =
+			circular_progress =
 				1 -
 				((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100;
 		} catch {
-			circular_prgoress = 0;
+			circular_progress = 0;
 		}
 	}
 </script>
@@ -109,7 +115,7 @@
 		/{quiz_data.questions.length}
 	</p>
 	<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
-		{#if selected_question + 1 === quiz_data.questions.length && timer_res === '0' && question_results !== null}
+		{#if selected_question + 1 === quiz_data.questions.length && ((timer_res === '0' && question_results !== null) || quiz_data?.questions?.[selected_question]?.type === QuizQuestionType.SLIDE)}
 			{#if JSON.stringify(final_results) === JSON.stringify([null])}
 				<button on:click={get_final_results} class="admin-button"
 					>Get final results
@@ -126,12 +132,34 @@
 				</button>
 			{/if}
 			{#if question_results === null && selected_question !== -1}
-				<button on:click={get_question_results} class="admin-button">Show results </button>
+				{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
+					<button
+						on:click={() => {
+							set_question_number(selected_question + 1);
+						}}
+						class="admin-button"
+						>Next Question ({selected_question + 2})
+					</button>
+				{:else}
+					<button on:click={get_question_results} class="admin-button"
+						>Show results</button
+					>
+				{/if}
 			{/if}
 		{:else if selected_question !== -1}
+			{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
+				<button
+					on:click={() => {
+						set_question_number(selected_question + 1);
+					}}
+					class="admin-button"
+					>Next Question ({selected_question + 2})
+				</button>
+			{:else}
 				<button on:click={show_solutions} class="admin-button"
 					>Stop time and show solutions
 				</button>
+			{/if}
 		{:else}
 			<!--				<button
 				on:click={() => {
@@ -153,6 +181,16 @@
 
 <div class="w-full h-full pt-28">
 	{#if timer_res !== undefined && !final_results_clicked && !question_results}
+		{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
+			{#await import('$lib/play/admin/slide.svelte')}
+				<Spinner my_20={false} />
+			{:then c}
+				<svelte:component
+					this={c.default}
+					bind:question={quiz_data.questions[selected_question]}
+				/>
+			{/await}
+		{:else}
 			<div class="flex flex-col justify-center w-screen h-1/6">
 				<h1 class="text-6xl text-center">
 					{@html quiz_data.questions[selected_question].question}
@@ -161,7 +199,7 @@
 				<div class="mx-auto my-2">
 					<CircularTimer
 						bind:text={timer_res}
-					bind:progress={circular_prgoress}
+						bind:progress={circular_progress}
 						color="#ef4444"
 					/>
 				</div>
@@ -183,7 +221,8 @@
 							style="background-color: {answer.color ?? '#B45309'}"
 							class:opacity-50={!answer.right &&
 								timer_res === '0' &&
-							quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
+								quiz_data.questions[selected_question].type ===
+									QuizQuestionType.ABCD}
 						>
 							<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
 							<span class="text-center text-2xl px-2 py-4 w-full text-black"
@@ -195,8 +234,9 @@
 				</div>
 			{/if}
 		{/if}
+	{/if}
 	<br />
-	{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])}
+	{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify( [null] ) && quiz_data.questions[selected_question].type !== QuizQuestionType.SLIDE}
 		{#if question_results === null}{:else if question_results === undefined}
 			{#if !final_results_clicked}
 				<div class="w-full flex justify-center">

frontend/src/lib/dashboard/main_slider.svelte

@@ -15,6 +15,7 @@
 	import StartGamePopup from './start_game.svelte';
 	import { onMount } from 'svelte';
 	import viewport from './useViewportAction.js';
+	import Spinner from '$lib/Spinner.svelte';
 
 	let copy_toast_open = false;
 	let start_game = null;
@@ -350,6 +351,28 @@
 													</div>
 												{/each}
 											</div>
+										{:else if question.type === QuizQuestionType.SLIDE}
+											<div
+												use:viewport
+												on:enterViewport={() => {
+													visibleImages[i][q] = true;
+												}}
+												on:exitViewport={() => {
+													visibleImages[i][q] = false;
+												}}
+												class="flex justify-center align-middle items-center"
+											>
+												{#await import('$lib/play/admin/slide.svelte')}
+													<Spinner my={false} />
+												{:then c}
+													<div class="max-h-[50%] max-w-[60%]">
+														<svelte:component
+															this={c.default}
+															bind:question
+														/>
+													</div>
+												{/await}
+											</div>
 										{/if}
 									</div>
 								</SwiperSlide>

frontend/src/lib/editor.svelte

@@ -37,11 +37,13 @@
 	}
 
 	const validateInput = async (data: EditorData) => {
+		// console.log("input", data)
 		try {
 			await dataSchema.validate(data, { abortEarly: false });
 			schemaInvalid = false;
 			yupErrorMessage = '';
 		} catch (err) {
+			console.log('erro!', err.errors);
 			schemaInvalid = true;
 			yupErrorMessage = err.errors ? err.errors[0] : '';
 		}

frontend/src/lib/editor/card.svelte

@@ -51,9 +51,9 @@
 	 */
 </script>
 
-<div class="w-full h-full pb-20 px-20">
+<div class="w-full max-h-full pb-20 px-20 h-full">
 	<div class="rounded-lg bg-white w-full h-full border-gray-500 drop-shadow-2xl dark:bg-gray-700">
-		<div class="h-fit bg-gray-300 rounded-t-lg dark:bg-gray-500">
+		<div class="h-12 bg-gray-300 rounded-t-lg dark:bg-gray-500">
 			<div class="flex align-middle p-4 gap-3">
 				<span
 					class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-red-400 transition"
@@ -66,6 +66,13 @@
 				/>
 			</div>
 		</div>
+		{#if data.questions[selected_question].type === QuizQuestionType.SLIDE}
+			{#await import('./slide.svelte')}
+				<Spinner my_20={false} />
+			{:then c}
+				<svelte:component this={c.default} bind:data={data.questions[selected_question]} />
+			{/await}
+		{:else}
 			<div class="flex flex-col">
 				<div class="flex justify-center pt-10 w-full">
 					{#await import('$lib/inline-editor.svelte')}
@@ -73,9 +80,10 @@
 					{:then c}
 						<div
 							class="rounded-lg placeholder:italic placeholder:font-normal dark:bg-gray-500"
-						class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
+							class:bg-yellow-500={!reach(
-							data.questions[selected_question].question
+								dataSchema,
-						)}
+								'questions[].question'
+							).isValidSync(data.questions[selected_question].question)}
 						>
 							<svelte:component
 								this={c.default}
@@ -172,7 +180,10 @@
 						{/await}
 					{/if}
 				</div>
-			<p class="italic text-center mt-auto pt-4">{$t('editor_page.right_click_to_delete')}</p>
+				<p class="italic text-center mt-auto pt-4">
+					{$t('editor_page.right_click_to_delete')}
+				</p>
 			</div>
+		{/if}
 	</div>
 </div>

frontend/src/lib/editor/sidebar.svelte

@@ -28,6 +28,14 @@
 		type: QuizQuestionType.ABCD
 	};
 
+	const empy_slide: Question = {
+		type: QuizQuestionType.SLIDE,
+		time: '120',
+		question: 'Slide',
+		image: undefined,
+		answers: ''
+	};
+
 	const setSelectedQuestion = (index: number): void => {
 		selected_question = index;
 		if (index === -1) {
@@ -242,15 +250,39 @@
 		</div>
 	{/each}
 	<div
-		class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600"
+		class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 grid grid-cols-2"
 	>
 		<button
 			type="button"
-			class="h-full flex justify-center w-full dark:text-black"
+			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 }];
 			}}
 		>
+			Question
+			<svg
+				class="h-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="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/>
+			</svg>
+		</button>
+		<button
+			type="button"
+			class="h-full flex justify-center w-full dark:text-black flex-col"
+			on:click={() => {
+				data.questions = [...data.questions, { ...empy_slide }];
+			}}
+		>
+			Slide
 			<svg
 				class="h-full"
 				fill="none"

frontend/src/lib/editor/slide.svelte

@@ -0,0 +1,245 @@
+<!--
+  - 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 { Question } from '$lib/quiz_types';
+	import { ElementTypes, QuizQuestionType } from '$lib/quiz_types';
+	import ElementSelection from './slides/element_selection.svelte';
+	import SettingsMenu from './slides/settings_menu.svelte';
+	import { onMount } from 'svelte';
+	import Pikaso from 'pikaso';
+	import EditMenu from './slides/edit_menu.svelte';
+	import type { Konva, ShapeModel } from 'pikaso';
+	import { browser } from '$app/environment';
+
+	export let data: Question = {
+		type: QuizQuestionType.SLIDE,
+		time: '120',
+		question: '',
+		image: undefined,
+		answers: ''
+	};
+	let selected_element = undefined;
+	let canvas_el: HTMLDivElement | undefined;
+	let canvas: Pikaso;
+	let selected_el: null | ShapeModel<Konva.Shape | Konva.Group, Konva.ShapeConfig> = null;
+
+	let elements_binds: Array<HTMLElement> | undefined = [];
+	let main_el: undefined | HTMLElement;
+	let settings_menu_open = false;
+
+	const set_correct_height = new ResizeObserver((e) => {
+		for (const i of e) {
+			const id = parseInt(i.target.getAttribute('el_id'));
+			data.answers[id].width = i.contentRect.width / main_el.offsetWidth;
+			data.answers[id].height = i.contentRect.height / main_el.offsetHeight;
+		}
+	});
+
+	let darkMode = false;
+	if (browser) {
+		darkMode =
+			localStorage.theme === 'dark' ||
+			(!('theme' in localStorage) &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches);
+	}
+	const add_text_field = () => {
+		if (selected_element === ElementTypes.Text) {
+			canvas.shapes.label.insert({
+				container: {
+					x: 40,
+					y: 40
+				},
+				text: {
+					text: 'Text',
+					fontSize: 20
+				}
+			});
+		} else if (selected_element === ElementTypes.Headline) {
+			canvas.shapes.label.insert({
+				container: {
+					x: 40,
+					y: 40
+				},
+				text: {
+					text: 'Headline',
+					fontSize: 35
+				}
+			});
+		} else if (selected_element === ElementTypes.Circle) {
+			canvas.shapes.circle.insert({
+				x: 40,
+				y: 40,
+				radius: 50,
+				fill: '#ff000d'
+			});
+		} else if (selected_element === ElementTypes.Rectangle) {
+			canvas.shapes.rect.insert({
+				x: 40,
+				y: 40,
+				width: 50,
+				height: 50,
+				fill: '#ff000d'
+			});
+		}
+		console.log(canvas.export.toJson());
+	};
+
+	$: {
+		if (selected_element) {
+			add_text_field();
+		}
+	}
+	const assign_resize_handlers = () => {
+		for (let i = 0; i < elements_binds.length; i++) {
+			set_correct_height.observe(elements_binds[i]);
+		}
+	};
+
+	/*	if (data.answers.length !== 0) {
+			for (let i = 0; i < data.answers.length; i++) {
+				data.answers[i].width = data.answers[i].width * main_el.offsetWidth;
+				data.answers[i].height = data.answers[i].height * main_el.offsetHeight;
+			}
+		}*/
+
+	$: {
+		elements_binds;
+		assign_resize_handlers();
+	}
+
+	onMount(() => {
+		/*		setTimeout(() => {
+					for (let i = 0; i < data.answers.length; i++) {
+						elements_binds[i].style.height = `${
+							data.answers[i].height * main_el.offsetHeight
+						}px`;
+						elements_binds[i].style.width = `${data.answers[i].width * main_el.offsetWidth}px`;
+					}
+				}, 200);*/
+		canvas = new Pikaso({
+			container: canvas_el,
+			snapToGrid: {},
+			/*			transformer: {
+							borderStroke: "#00ff00",
+							anchorStroke: "#00ff00"
+						},
+						cropper: {
+							transformer: {
+								borderStroke: "#00ff00",
+								// anchorFill: "#00ff00",
+								anchorStroke: "#00ff00"
+							},
+							guides: {
+								color: "#00ff00"
+							}
+						},*/
+			selection: {
+				transformer: {
+					borderStroke: darkMode ? '#fff' : '#000000',
+					anchorStroke: darkMode ? '#fff' : '#000000'
+				}
+			}
+			/*			selection: {
+							interactive: false
+						}*/
+		});
+		console.log(data.answers);
+		if (data.answers) {
+			if (typeof data.answers === 'string') {
+				canvas.import.json(JSON.parse(data.answers));
+			}
+		}
+		canvas.on('*', () => {
+			data.answers = JSON.stringify(canvas.export.toJson());
+		});
+		canvas.on('selection:change', (data) => {
+			/*			data.shapes[0].update({fill: "#ffffff"})
+						console.log(data.shapes[0])*/
+			// console.log(canvas.board.shapes)
+			if (data.shapes.length > 0) {
+				selected_el = data.shapes[0];
+			} else {
+				selected_el = null;
+			}
+		});
+	});
+</script>
+
+<div class="flex h-full relative w-full" bind:this={main_el}>
+	<div class="absolute top-0 left-0 grid grid-cols-6 w-full">
+		<div class="flex flex-col pl-2 rounded-t-lg z-40 pt-2">
+			<button
+				class="mr-auto"
+				on:click={() => {
+					settings_menu_open = !settings_menu_open;
+				}}
+				type="button"
+			>
+				<svg
+					class="w-6 h-6"
+					stroke-width="2"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					color="currentColor"
+				>
+					<path
+						d="M12 15a3 3 0 100-6 3 3 0 000 6z"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+			{#if settings_menu_open}
+				<SettingsMenu bind:time={data.time} bind:title={data.question} />
+			{/if}
+		</div>
+		<div class="col-start-2 col-end-6 transition bg-transparent pt-2">
+			<EditMenu bind:selected_el />
+		</div>
+
+		<div class="flex flex-col pr-2 rounded-t-lg z-40 pt-2">
+			<button
+				class="ml-auto"
+				on:click={() => {
+					selected_element = selected_element === null ? undefined : null;
+				}}
+				type="button"
+				class:add-button={selected_element === null}
+			>
+				<svg
+					class="w-6 h-6"
+					stroke-width="2"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					color="currentColor"
+				>
+					<path
+						d="M9 12h3m3 0h-3m0 0V9m0 3v3M21 3.6v16.8a.6.6 0 01-.6.6H3.6a.6.6 0 01-.6-.6V3.6a.6.6 0 01.6-.6h16.8a.6.6 0 01.6.6z"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+			{#if selected_element === null}
+				<ElementSelection bind:selected_element />
+			{/if}
+		</div>
+	</div>
+	<div bind:this={canvas_el} class="w-full h-full block" />
+</div>

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

@@ -0,0 +1,205 @@
+<!--
+  - 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 { Konva, ShapeModel } from 'pikaso';
+	import { fade } from 'svelte/transition';
+
+	export let selected_el: null | ShapeModel<Konva.Shape | Konva.Group, Konva.ShapeConfig>;
+
+	let opened_dropdown = null;
+
+	let available_modifiers: Array<string> = [];
+
+	const set_available_modifiers = () => {
+		available_modifiers = [];
+		console.log(selected_el, 'sel_el');
+		if (!selected_el) {
+			return;
+		}
+		switch (selected_el.type) {
+			case 'label':
+				available_modifiers.push('font_size', 'text_color');
+				break;
+			case 'circle' || 'rectangle':
+				available_modifiers.push('fill_color');
+		}
+	};
+
+	$: {
+		selected_el;
+		set_available_modifiers();
+	}
+
+	const toggle_switch = (el: string) => {
+		if (opened_dropdown) {
+			opened_dropdown = null;
+		} else {
+			opened_dropdown = el;
+		}
+	};
+
+	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
+		});
+	};
+
+	$: if (!selected_el) {
+		opened_dropdown = null;
+	}
+</script>
+
+<div class="flex flex-row justify-evenly z-40">
+	<div>
+		<button
+			type="button"
+			class="disabled:opacity-50 transition"
+			disabled={!(
+				available_modifiers.includes('fill_color') ||
+				available_modifiers.includes('text_color')
+			)}
+			on:click={() => {
+				toggle_switch('color');
+			}}
+		>
+			<!-- iconoir/color-picker -->
+			<svg
+				class="w-6 h-6"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				color="currentColor"
+			>
+				<path
+					d="M7 13.161l5.464-5.464a1 1 0 011.415 0l2.12 2.12a1 1 0 010 1.415l-1.928 1.929m-7.071 0l-2.172 2.172a.999.999 0 00-.218.327l-1.028 2.496c-.508 1.233.725 2.466 1.958 1.959l2.497-1.028c.122-.05.233-.125.326-.218l5.708-5.708m-7.071 0h7.071M13.878 3.454l2.121 2.121m4.243 4.243l-2.121-2.121m-2.122-2.122l1.414-1.414a1 1 0 011.415 0l.707.707a1 1 0 010 1.414L18.12 7.697m-2.122-2.122l2.122 2.122"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+		{#if opened_dropdown === 'color'}
+			<div
+				class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
+				transition:fade={{ duration: 100 }}
+			>
+				<input type="color" on:change={change_color} />
+			</div>
+		{/if}
+	</div>
+	<div>
+		<button
+			type="button"
+			class="disabled:opacity-50 transition"
+			on:click={() => {
+				toggle_switch('font_size');
+			}}
+			disabled={!available_modifiers.includes('font_size')}
+		>
+			<!-- iconoir/font-size -->
+			<svg
+				class="w-6 h-6"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				color="currentColor"
+			>
+				<path
+					d="M18 21V11m0 10l-2-2.5m2 2.5l2-2.5M18 11l-2 2m2-2l2 2M9 5v12m0 0H7m2 0h2M15 7V5H3v2"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+		{#if opened_dropdown === 'font_size'}
+			<div
+				class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
+				transition:fade={{ duration: 100 }}
+			>
+				<input
+					type="range"
+					on:change={change_fontsize}
+					value={selected_el?.node?.children?.[1]?.attrs?.fontSize}
+					min="10"
+					max="250"
+				/>
+			</div>
+		{/if}
+	</div>
+	<div class="flex flex-row gap-2">
+		<button
+			type="button"
+			class="disabled:opacity-50 transition"
+			on:click={() => {
+				selected_el.update({ zIndex: selected_el.node.getZIndex() + 1 });
+			}}
+			disabled={!selected_el}
+		>
+			<!-- iconoir/priority-up -->
+			<svg
+				class="w-6 h-6"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				color="currentColor"
+			>
+				<path
+					d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 7l4 4m-4-4l-4 4.167M12 7v9"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+		<button
+			type="button"
+			class="disabled:opacity-50 transition"
+			on:click={() => {
+				selected_el.update({ zIndex: selected_el.node.getZIndex() - 1 });
+			}}
+			disabled={!selected_el}
+		>
+			<!-- iconoir/priority-down -->
+			<svg
+				class="w-6 h-6"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				color="currentColor"
+			>
+				<path
+					d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 16l4-4m-4 4l-4-4.167M12 16V7"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,93 @@
+<!--
+  - 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 { ElementTypes } from '$lib/quiz_types';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+
+	export let selected_element;
+	const keybinding_list = {
+		t: ElementTypes.Text,
+		h: ElementTypes.Headline,
+		r: ElementTypes.Rectangle,
+		c: ElementTypes.Circle
+		// "i": ElementTypes.Image
+	};
+
+	const keypress_listener = (key: KeyboardEvent) => {
+		if (selected_element !== null) {
+			return;
+		}
+		const sel_type = keybinding_list[key.key];
+		if (sel_type) {
+			selected_element = sel_type;
+		} else if (key.code === 'Escape') {
+			selected_element = undefined;
+		}
+	};
+
+	onMount(() => {
+		document.body.addEventListener('keydown', keypress_listener);
+	});
+	const element_list: Array<{
+		name: string;
+		description: string;
+		type: ElementTypes;
+		icon: string | undefined;
+		shortcut: string;
+	}> = [
+		{
+			name: 'Headline',
+			description: 'A bold text for headlines',
+			type: ElementTypes.Headline,
+			icon: undefined,
+			shortcut: 'h'
+		},
+		{
+			name: 'Text',
+			description: 'Smaller longer text',
+			type: ElementTypes.Text,
+			icon: undefined,
+			shortcut: 't'
+		},
+		{
+			name: 'Rectangle',
+			description: 'Just a rectangle',
+			type: ElementTypes.Rectangle,
+			icon: undefined,
+			shortcut: 'r'
+		},
+		{
+			name: 'Circle',
+			description: 'Just a circle',
+			type: ElementTypes.Circle,
+			icon: undefined,
+			shortcut: 'c'
+		}
+	];
+</script>
+
+<div
+	class="bg-white m-auto rounded-lg shadow-lg p-4 flex flex-col dark:bg-gray-600 h-fit"
+	transition:fade={{ duration: 100 }}
+>
+	<ul>
+		{#each element_list as el}
+			<li
+				class="flex flex-row mt-4 w-full bg-gray-200 shadow-xl rounded-lg p-2 hover:bg-gray-300 hover:shadow-2xl hover:cursor-pointer transition dark:bg-gray-800"
+				on:click={() => {
+					selected_element = el.type;
+				}}
+			>
+				<div class="flex flex-col">
+					<h3 class="text-xl">{el.name}</h3>
+					<p>{el.description}</p>
+				</div>
+				<kbd class="my-auto ml-auto">{el.shortcut}</kbd>
+			</li>
+		{/each}
+	</ul>
+</div>

frontend/src/lib/editor/slides/icons/x-circle.svg

@@ -0,0 +1,8 @@
+<!--
+  - 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/.
+  -->
+
+<!-- heroicons/x-circle -->
+<svg 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"></path></svg>

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

@@ -0,0 +1,39 @@
+<!--
+  - 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 { fade } from 'svelte/transition';
+
+	export let title;
+	export let time;
+	let time_local = 120;
+	/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]*/
+	$: time = String(time_local);
+	if (time) {
+		time_local = parseInt(time);
+	}
+</script>
+
+<div
+	class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex"
+	transition:fade={{ duration: 100 }}
+>
+	<label class="w-fit">
+		Time
+		<input
+			bind:value={time}
+			type="number"
+			class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 outline-none"
+		/>
+	</label>
+	<label class="w-fit">
+		Title
+		<input
+			bind:value={title}
+			type="text"
+			class="bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 transition outline-none"
+		/>
+	</label>
+</div>

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

@@ -0,0 +1,20 @@
+<!--
+  - 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">
+	export let data: string;
+	export let editor = true;
+
+	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}">
+	{#if editor}
+		<input type="color" bind:value={data} class="m-auto hover:cursor-pointer" />
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+<!--
+  - 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">
+	export let data;
+	export let editor = true;
+</script>
+
+{#if editor}
+	<input
+		bind:value={data}
+		type="text"
+		class="w-full h-full dark:text-black text-center text-3xl min-h-fit"
+	/>
+{:else}
+	<h2 class="w-full h-full text-center text-3xl min-h-fit">
+		{data}
+	</h2>
+{/if}

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

@@ -0,0 +1,20 @@
+<!--
+  - 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">
+	export let data: string;
+	export let editor = true;
+
+	if (!data) {
+		data = '#ed333b';
+	}
+	$: console.log(data);
+</script>
+
+<div class="w-full h-full flex justify-center p-2" style="background-color: {data}">
+	{#if editor}
+		<input type="color" bind:value={data} class="m-auto hover:cursor-pointer" />
+	{/if}
+</div>

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

@@ -0,0 +1,15 @@
+<!--
+  - 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">
+	export let data;
+	export let editor = true;
+</script>
+
+{#if editor}
+	<textarea bind:value={data} class="w-full h-full dark:text-black resize-none" />
+{:else}
+	<p>{data}</p>
+{/if}

frontend/src/lib/play/admin/slide.svelte

@@ -0,0 +1,40 @@
+<!--
+  - 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 { Question } from '$lib/quiz_types';
+	import { onMount } from 'svelte';
+	import Pikaso from 'pikaso';
+
+	export let question: Question;
+
+	let canvas_el: HTMLDivElement | undefined;
+	let canvas: Pikaso;
+	let img_src = '';
+
+	onMount(() => {
+		canvas = new Pikaso({
+			container: canvas_el,
+			snapToGrid: {},
+			selection: {
+				interactive: false
+			}
+		});
+		if (typeof question.answers === 'string') {
+			const data = JSON.parse(question.answers);
+			canvas.import.json(data);
+			img_src = canvas.export.toImage();
+		}
+	});
+</script>
+
+<div class="w-full h-full">
+	<div class="hidden">
+		<div bind:this={canvas_el} class="w-full h-full block" />
+	</div>
+	<div class="w-full h-full flex justify-center">
+		<img src={img_src} />
+	</div>
+</div>

frontend/src/lib/practice/question.svelte

@@ -150,5 +150,13 @@
 		{#if timer_res === '0'}
 			<p>No correct answers, since this is a poll-question</p>
 		{/if}
+	{:else if question.type === QuizQuestionType.SLIDE}
+		{#await import('$lib/play/admin/slide.svelte')}
+			<Spinner my={false} />
+		{:then c}
+			<div class="max-h-[90%] max-w-[90%]">
+				<svelte:component this={c.default} bind:question />
+			</div>
+		{/await}
 	{/if}
 </div>

frontend/src/lib/quiz_types.ts

@@ -4,6 +4,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+export enum ElementTypes {
+	Text = 'TEXT', // eslint-disable-line no-unused-vars
+	Headline = 'HEADLINE', // eslint-disable-line no-unused-vars
+	Image = 'IMAGE', // eslint-disable-line no-unused-vars
+	Rectangle = 'RECTANGLE', // eslint-disable-line no-unused-vars
+	Circle = 'CIRCLE' // eslint-disable-line no-unused-vars
+}
+
 export interface QuizData {
 	title: string;
 	description: string;
@@ -19,7 +27,8 @@ export interface QuizData {
 export enum QuizQuestionType {
 	ABCD = 'ABCD', // eslint-disable-line no-unused-vars
 	RANGE = 'RANGE', // eslint-disable-line no-unused-vars
-	VOTING = 'VOTING' // eslint-disable-line no-unused-vars
+	VOTING = 'VOTING', // eslint-disable-line no-unused-vars
+	SLIDE = 'SLIDE' // eslint-disable-line no-unused-vars
 }
 
 export interface RangeQuizAnswer {
@@ -34,7 +43,7 @@ export interface Question {
 	question: string;
 	type?: QuizQuestionType;
 	image?: string;
-	answers: Answer[] | RangeQuizAnswer | VotingAnswer[];
+	answers: Answer[] | RangeQuizAnswer | VotingAnswer[] | string;
 }
 
 export interface Answer {
@@ -42,6 +51,7 @@ export interface Answer {
 	answer: string;
 	color?: string;
 }
+
 export interface VotingAnswer {
 	answer: string;
 	image?: string;

frontend/src/lib/yupSchemas.ts

@@ -34,6 +34,18 @@ export const RangeQuestionSchema = yup.object({
 	min_correct: yup.number(),
 	max_correct: yup.number()
 });
+
+export const SlideQuestionSchema = yup.array().of(
+	yup.object({
+		type: yup.string().required(),
+		x: yup.number(),
+		y: yup.number(),
+		height: yup.number(),
+		width: yup.number(),
+		data: yup.string().optional(),
+		id: yup.number().required()
+	})
+);
 export const dataSchema = yup.object({
 	public: yup.boolean().required(),
 	type: yup.string(),
@@ -63,12 +75,23 @@ export const dataSchema = yup.object({
 					.lowercase(),
 				answers: yup.lazy((v) => {
 					if (Array.isArray(v)) {
+						try {
 							if (typeof v[0].right === 'boolean') {
+								// console.log('ABCDQuestionSchema');
 								return ABCDQuestionSchema;
-						} else {
+							} else if (v[0].answer !== undefined) {
+								// console.log('VotingQuestionSchema');
 								return VotingQuestionSchema;
+							} else {
+								// console.log('SlideQuestionSchema');
+								return yup.string().required();
+							}
+						} catch {
+							// console.log('SlideQuestionSchema');
+							return yup.string().required();
 						}
 					} else {
+						// console.log('RangeQuestionSchema');
 						return RangeQuestionSchema;
 					}
 				})

frontend/src/routes/view/[quiz_id]/+page.svelte

@@ -11,6 +11,7 @@
 	import { QuizQuestionType } from '$lib/quiz_types.js';
 	import StartGamePopup from '$lib/dashboard/start_game.svelte';
 	import { onMount } from 'svelte';
+	import Spinner from '$lib/Spinner.svelte';
 
 	const tippy = createTippy({
 		arrow: true,
@@ -228,6 +229,14 @@
 								</div>
 							{/each}
 						</div>
+					{:else if question.type === QuizQuestionType.SLIDE}
+						{#await import('$lib/play/admin/slide.svelte')}
+							<Spinner my={false} />
+						{:then c}
+							<div class="max-h-[90%] max-w-[90%]">
+								<svelte:component this={c.default} bind:question />
+							</div>
+						{/await}
 					{/if}
 				</div>
 			</CollapsSection>