✨ Slides kinda working

classquiz/db/models.py

@@ -140,7 +140,6 @@ class QuizQuestion(BaseModel):
 
     @validator("answers")
     def answers_not_none_if_abcd_type(cls, v, values):
-        print(values)
         if values["type"] == QuizQuestionType.ABCD and type(v[0]) != ABCDQuizAnswer:
             raise ValueError("Answers can't be none if type is ABCD")
         if values["type"] == QuizQuestionType.RANGE and type(v) != RangeQuizAnswer:

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/src/lib/admin.svelte

@@ -87,14 +87,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>
@@ -153,6 +153,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 +171,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 +193,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 +206,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/editor/slide.svelte

@@ -187,7 +187,7 @@
 						</svg>
 					</button>-->
 				{#if el.type === ElementTypes.Text}
-					<TextElement bind:text={el.data} />
+					<TextElement bind:data={el.data} />
 				{:else if el.type === ElementTypes.Headline}
 					<HeadlineElement bind:data={el.data} />
 				{/if}

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

@@ -5,10 +5,17 @@
   -->
 <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/text.svelte

@@ -4,13 +4,12 @@
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
 <script lang="ts">
-	export let text;
+	export let data;
+	export let editor = true;
 </script>
 
-<!--
-  - 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/.
-  -->
-
-<textarea bind:value={text} class="w-full h-full dark:text-black resize-none" />
+{#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,42 @@
+<!--
+  - 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 TextElement from '$lib/editor/slides/types/text.svelte';
+	import HeadlineElement from '$lib/editor/slides/types/headline.svelte';
+	import { ElementTypes } from '$lib/quiz_types.js';
+	import { draggable } from '@neodrag/svelte';
+
+	export let question: Question;
+
+	let main_el: HTMLElement | undefined;
+</script>
+
+<div class="w-full min-h-[calc(100vh-8rem)]" bind:this={main_el}>
+	{#if main_el}
+		{#each question.answers as el, i}
+			<div
+				use:draggable={{
+					bounds: 'parent',
+					handle: '.drag',
+					disabled: true,
+					defaultPosition: {
+						x: el.x * main_el.offsetWidth,
+						y: el.y * main_el.offsetHeight
+					}
+				}}
+				style="height: {el.height * main_el.offsetHeight}px; width: {el.width *
+					main_el.offsetWidth}px"
+			>
+				{#if el.type === ElementTypes.Text}
+					<TextElement bind:data={el.data} editor={false} />
+				{:else if el.type === ElementTypes.Headline}
+					<HeadlineElement bind:data={el.data} editor={false} />
+				{/if}
+			</div>
+		{/each}
+	{/if}
+</div>