✨ Added Kahoot!-Mode

classquiz/db/models.py

@@ -158,6 +158,7 @@ class PlayGame(BaseModel):
     started: bool = False
     captcha_enabled: bool = False
     cover_image: str | None
+    game_mode: str | None
 
 
 class GamePlayer(BaseModel):

classquiz/routers/quiz.py

@@ -90,7 +90,9 @@ async def get_public_quiz(quiz_id: str):
 
 
 @router.post("/start/{quiz_id}")
-async def start_quiz(quiz_id: str, captcha_enabled: bool = True, user: User = Depends(get_current_user)):
+async def start_quiz(
+    quiz_id: str, game_mode: str, captcha_enabled: bool = True, user: User = Depends(get_current_user)
+):
     try:
         quiz_id = uuid.UUID(quiz_id)
     except ValueError:
@@ -110,6 +112,7 @@ async def start_quiz(quiz_id: str, captcha_enabled: bool = True, user: User = De
         description=quiz.description,
         captcha_enabled=captcha_enabled,
         cover_image=quiz.cover_image,
+        game_mode=game_mode,
     )
     await redis.set(f"game:{str(game.game_pin)}", (game.json()), ex=18000)
     return {**quiz.dict(exclude={"id"}), **game.dict(exclude={"questions"})}
@@ -117,6 +120,7 @@ async def start_quiz(quiz_id: str, captcha_enabled: bool = True, user: User = De
 
 class CheckIfCaptchaEnabledResponse(BaseModel):
     enabled: bool
+    game_mode: str | None
 
 
 @router.get("/play/check_captcha/{game_pin}", response_model=CheckIfCaptchaEnabledResponse)
@@ -124,10 +128,11 @@ async def check_if_captcha_enabled(game_pin: str):
     game = await redis.get(f"game:{game_pin}")
     if game is None:
         return JSONResponse(status_code=404, content={"detail": "game not found"})
-    try:
+    game = PlayGame.parse_raw(game)
-        return CheckIfCaptchaEnabledResponse(**{"enabled": json.loads(game)["captcha_enabled"]})
+    if game.captcha_enabled:
-    except (KeyError, TypeError):
+        return CheckIfCaptchaEnabledResponse(enabled=True, game_mode=game.game_mode)
-        return CheckIfCaptchaEnabledResponse(**{"enabled": True})
+    else:
+        return CheckIfCaptchaEnabledResponse(enabled=False, game_mode=game.game_mode)
 
 
 @router.get("/join/{game_pin}", deprecated=True)

frontend/src/lib/admin.svelte

@@ -9,9 +9,12 @@
 	import { get_question_title } from '$lib/admin.ts';
 	import type { PlayerAnswer } from '$lib/admin.ts';
 	import { socket } from './socket';
+	import { QuizQuestionType } from '$lib/quiz_types';
+	import { kahoot_icons } from './play/kahoot_mode_assets/kahoot_icons';
 
 	export let game_token: string;
 	export let quiz_data: QuizData;
+	export let game_mode;
 
 	const { t } = getLocalization();
 
@@ -84,11 +87,26 @@
 		<div>
 			<img
 				src={quiz_data.questions[selected_question].image}
-				class="h-2/5 object-cover mx-auto mb-8"
+				class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
 				alt="Content for Question"
 			/>
 		</div>
 	{/if}
+	{#if game_mode === 'kahoot'}
+		{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
+			<div class="grid grid-cols-2 gap-2 w-full p-4">
+				{#each quiz_data.questions[selected_question].answers as answer, i}
+					<div
+						class="rounded-lg h-fit flex align-middle"
+						style="background-color: {answer.color ?? '#B45309'}"
+					>
+						<img class="w-10 inline-block" alt="icon" src={kahoot_icons[i]} />
+						<span class="text-center text-2xl px-2 py-4">{answer.answer}</span>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/if}
 {/if}
 <br />
 {#if timer_res === '0'}

frontend/src/lib/dashboard/main_slider.svelte

@@ -11,8 +11,9 @@
 	import { Pagination, EffectCoverflow, Keyboard, Mousewheel, Navigation } from 'swiper';
 	import { QuizQuestionType } from '$lib/quiz_types.js';
 	import { getLocalization } from '../i18n';
-	import { start_game } from './start_game';
+	import StartGamePopup from './start_game.svelte';
 
+	let start_game = null;
 	const { t } = getLocalization();
 	export let quizzes;
 
@@ -149,7 +150,7 @@
 										>
 										<button
 											on:click={() => {
-												start_game(quiz.id);
+												start_game = quiz.id;
 											}}
 											class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
 										>
@@ -248,3 +249,7 @@
 		{/each}
 	</Swiper>
 </div>
+
+{#if start_game !== null}
+	<StartGamePopup bind:quiz_id={start_game} />
+{/if}

frontend/src/lib/editor/ABCDEditorPart.svelte

@@ -9,7 +9,6 @@
 	import { reach } from 'yup';
 	import { ABCDQuestionSchema } from '$lib/yupSchemas';
 	import { getLocalization } from '$lib/i18n';
-	import { invertColor } from '$lib/helpers';
 
 	const { t } = getLocalization();
 

frontend/src/lib/play/join.svelte

@@ -13,6 +13,7 @@
 
 	const { t } = getLocalization();
 	export let game_pin: string;
+	export let game_mode;
 
 	let username = '';
 	let hcaptchaSitekey = import.meta.env.VITE_HCAPTCHA;
@@ -54,8 +55,10 @@
 		let captcha_resp: string;
 		const res = await fetch(`/api/v1/quiz/play/check_captcha/${game_pin}`);
 		let captcha_enabled;
+		const json = await res.json();
+		game_mode = json.game_mode;
 		if (res.status === 200) {
-			captcha_enabled = (await res.json()).enabled;
+			captcha_enabled = json.enabled;
 		}
 		if (res.status === 404) {
 			alertModal.set({

frontend/src/lib/play/kahoot_mode_assets/0.svg

@@ -0,0 +1,12 @@
+<!--
+  - 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/.
+  -->
+
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
+    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
+</svg>

frontend/src/lib/play/kahoot_mode_assets/1.svg

@@ -0,0 +1,12 @@
+<!--
+  - 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/.
+  -->
+
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
+    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
+</svg>

frontend/src/lib/play/kahoot_mode_assets/2.svg

@@ -0,0 +1,12 @@
+<!--
+  - 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/.
+  -->
+
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
+    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
+</svg>

frontend/src/lib/play/kahoot_mode_assets/3.svg

@@ -0,0 +1,12 @@
+<!--
+  - 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/.
+  -->
+
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
+    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
+</svg>

frontend/src/lib/play/kahoot_mode_assets/kahoot_icons.ts

@@ -0,0 +1,12 @@
+/*
+ * 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/.
+ */
+
+import KahootModeIcon0 from '$lib/play/kahoot_mode_assets/0.svg';
+import KahootModeIcon1 from '$lib/play/kahoot_mode_assets/1.svg';
+import KahootModeIcon2 from '$lib/play/kahoot_mode_assets/2.svg';
+import KahootModeIcon3 from '$lib/play/kahoot_mode_assets/3.svg';
+
+export const kahoot_icons = [KahootModeIcon0, KahootModeIcon1, KahootModeIcon2, KahootModeIcon3];

frontend/src/lib/play/question.svelte

@@ -9,11 +9,12 @@
 	import { socket } from '$lib/socket';
 	import Spinner from '../Spinner.svelte';
 	import { getLocalization } from '$lib/i18n';
-	import { invertColor } from '$lib/helpers';
+	import { kahoot_icons } from './kahoot_mode_assets/kahoot_icons';
 
 	const { t } = getLocalization();
 
 	export let question: Question;
+	export let game_mode;
 	export let question_index: string | number;
 
 	if (typeof question_index === 'string') {
@@ -84,16 +85,33 @@
 {/if}
 {#if timer_res !== '0'}
 	{#if question.type === QuizQuestionType.ABCD}
-		<div class="flex flex-wrap">
+		{#if game_mode === 'normal'}
-			{#each question.answers as answer}
+			<div class="flex flex-wrap">
-				<button
+				{#each question.answers as answer}
-					class="w-1/2 text-3xl my-2 disabled:opacity-60 border border-white"
+					<button
-					style="background-color: {answer.color ?? '#B45309'}"
+						class="w-1/2 text-3xl my-2 disabled:opacity-60 border border-white"
-					disabled={selected_answer !== undefined}
+						style="background-color: {answer.color ?? '#B45309'}"
-					on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
+						disabled={selected_answer !== undefined}
-				>
+						on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
-			{/each}
+					>
-		</div>
+				{/each}
+			</div>
+		{:else if game_mode === 'kahoot'}
+			<div class="grid grid-cols-2 gap-2 w-full p-4">
+				{#each question.answers as answer, i}
+					<button
+						class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60"
+						style="background-color: {answer.color ?? '#B45309'}"
+						disabled={selected_answer !== undefined}
+						on:click={() => selectAnswer(answer.answer)}
+					>
+						<img class="w-10 inline-block" alt="Icon" src={kahoot_icons[i]} />
+					</button>
+				{/each}
+			</div>
+		{:else}
+			<p>Error</p>
+		{/if}
 	{:else if question.type === QuizQuestionType.RANGE}
 		{#await import('svelte-range-slider-pips')}
 			<Spinner />

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

@@ -12,6 +12,7 @@
 	import type { PlayerAnswer, Player } from '$lib/admin.ts';
 	import SomeAdminScreen from '$lib/admin.svelte';
 	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
 
 	navbarVisible.set(false);
 
@@ -22,6 +23,7 @@
 	// 	game_pin: '66190765'
 	// };
 	export let data;
+	let game_mode;
 	let { game_pin, auto_connect, game_token } = data;
 
 	let players: Array<Player> = [];
@@ -35,15 +37,21 @@
 	let dataexport_download_a;
 	let warnToLeave = true;
 
-	const connect = () => {
+	const connect = async () => {
 		socket.emit('register_as_admin', {
 			game_pin: game_pin,
 			game_id: game_token
 		});
+		const res = await fetch(`/api/v1/quiz/play/check_captcha/${game_pin}`);
+		const json = await res.json();
+		game_mode = json.game_mode;
 	};
-	if (auto_connect) {
+	onMount(() => {
-		connect();
+		if (auto_connect) {
-	}
+			connect();
+		}
+	});
+
 	socket.on('registered_as_admin', (data) => {
 		quiz_data = JSON.parse(data['game']);
 		console.log(quiz_data);
@@ -152,7 +160,13 @@
 		</div>
 	{/if}
 {:else}
-	<SomeAdminScreen bind:final_results bind:game_pin bind:game_token bind:quiz_data />
+	<SomeAdminScreen
+		bind:final_results
+		bind:game_pin
+		bind:game_token
+		bind:quiz_data
+		bind:game_mode
+	/>
 {/if}
 
 <a

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

@@ -22,6 +22,7 @@
 		started: boolean;
 	}
 
+	let game_mode;
 	let final_results: Array<null> | Array<Array<PlayerAnswer>> = [null];
 
 	interface PlayerAnswer {
@@ -118,7 +119,7 @@
 </svelte:head>
 <div>
 	{#if !gameMeta.started && gameData === undefined}
-		<JoinGame {game_pin} />
+		<JoinGame {game_pin} bind:game_mode />
 	{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
 		<ShowEndScreen bind:final_results bind:quiz_data={gameData} />
 	{:else if gameData !== undefined && question_index === ''}
@@ -130,6 +131,7 @@
 	{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
 		{#key unique}
 			<Question
+				bind:game_mode
 				bind:question={gameData.questions[parseInt(question_index)]}
 				bind:question_index
 			/>

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

@@ -9,7 +9,7 @@
 	import { createTippy } from 'svelte-tippy';
 	import ImportedOrNot from '$lib/view_quiz/imported_or_not.svelte';
 	import { QuizQuestionType } from '$lib/quiz_types.js';
-	import { start_game } from '$lib/dashboard/start_game';
+	import { start_game } from '../../../lib/dashboard/start_game.svelte';
 
 	const tippy = createTippy({
 		arrow: true,