✨ Big update to the admin-screen and smaller bug-fixes

classquiz/routers/editor.py

@@ -154,13 +154,12 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
             mark_image_for_deletion(question.image, i, old_quiz_data)
         else:
             raise HTTPException(status_code=400, detail="Image URL(s) aren't valid!")
-    print(images_to_delete)
     if session_data.edit:
         quiz = old_quiz_data
         meilisearch.index(settings.meilisearch_index).update_documents([await get_meili_data(quiz)])
-        if quiz.public and not quiz_input.public:
+        if not quiz_input.public:
             meilisearch.index(settings.meilisearch_index).delete_document(str(quiz.id))
-        if not quiz.public and quiz_input.public:
+        else:
             meilisearch.index(settings.meilisearch_index).add_documents([await get_meili_data(quiz)])
         quiz.title = quiz_input.title
         quiz.public = quiz_input.public

frontend/src/app.html

@@ -6,6 +6,12 @@
 		<!--		<link rel="icon" href="%sveltekit.assets%/favicon.png" />-->
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="prefetch" href="https://sugar.mawoka.eu.org/" />
+		<script
+			async=""
+			defer=""
+			data-domain="classquiz.mawoka.eu"
+			src="https://sugar.mawoka.eu.org/js/plausible.hash.outbound-links.js"
+		></script>
 		<script>
 			window.plausible =
 				window.plausible ||

frontend/src/lib/admin.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import type { QuizData } from '$lib/quiz_types';
+	import { getLocalization } from '$lib/i18n';
+	import { get_question_title, getWinnersSorted } from '$lib/admin.ts';
+	import type { PlayerAnswer } from '$lib/admin.ts';
+	import { socket } from './socket';
+
+	export let game_token: string;
+	export let quiz_data: QuizData;
+
+	const { t } = getLocalization();
+
+	let question_results = null;
+	export let final_results: Array<null> | Array<Array<PlayerAnswer>> = [null];
+	let selected_question = -1;
+	let timer_res: string;
+	let shown_question_now: number;
+	let final_results_clicked = false;
+
+	console.log(quiz_data);
+
+	const set_question_number = (q_number: number) => {
+		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 += 1;
+		timer(timer_res);
+	};
+	const get_question_results = () => {
+		socket.emit('get_question_results', {
+			game_id: game_token,
+			question_number: shown_question_now
+		});
+		timer_res = '0';
+	};
+
+	const get_final_results = () => {
+		socket.emit('get_final_results', {});
+		final_results_clicked = true;
+	};
+
+	socket.on('final_results', (data) => {
+		// data = JSON.parse(data);
+		final_results = data;
+
+		console.log(getWinnersSorted(quiz_data, final_results));
+	});
+
+	socket.on('question_results', (data) => {
+		question_results = JSON.parse(data);
+	});
+
+	const timer = (time: string) => {
+		let seconds = Number(time);
+		let timer_interval = setInterval(() => {
+			if (timer_res === '0') {
+				clearInterval(timer_interval);
+				return;
+			} else {
+				seconds--;
+			}
+
+			timer_res = seconds.toString();
+		}, 1000);
+	};
+</script>
+
+{#if timer_res === undefined}
+	<span>Select a question to start!</span>
+{:else if !final_results_clicked}
+	<div class="w-full flex justify-center">
+		<span>{$t('admin_page.time_left')}: {timer_res}</span>
+	</div>
+{/if}
+<br />
+{#if timer_res === '0'}
+	{#if question_results === null}
+		<div class="w-full flex justify-center">
+			<button
+				on:click={get_question_results}
+				id="GetQuestionResults"
+				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+				>{$t('admin_page.get_results')}</button
+			>
+		</div>
+	{:else}
+		<div class="w-full flex justify-center">
+			<div class="relative overflow-x-auto shadow-md rounded-lg">
+				<table class="w-fit text-sm text-left text-gray-500 dark:text-gray-400">
+					<thead
+						class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
+					>
+						<tr>
+							<th scope="col" class="px-6 py-3">
+								{$t('words.username')}
+							</th>
+							<th scope="col" class="px-6 py-3">
+								{$t('words.answer')}
+							</th>
+							<th scope="col" class="px-6 py-3">
+								{$t('words.correct')}?
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each question_results as result}
+							<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+								<th
+									scope="row"
+									class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+								>
+									{result.username}
+								</th>
+								<td class="px-6 py-4">
+									{result.answer}
+								</td>
+								<td class="px-6 py-4">
+									{#if result.right}
+										✅
+									{:else}
+										❌
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	{/if}
+{:else if timer_res !== undefined}
+	<div class="w-full flex justify-center">
+		<button
+			on:click={get_question_results}
+			id="GetQuestionResultsAndStopTime"
+			class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+			>{$t('admin_page.get_results_and_stop_time')}</button
+		>
+	</div>
+{/if}
+<br />
+{#if get_question_title(selected_question + 1, quiz_data) !== '' && selected_question + 1 !== 0}
+	<div class="w-full flex justify-center">
+		<button
+			class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+			disabled={!(timer_res === undefined || timer_res === '0')}
+			id="SetQuestionNumber"
+			on:click={() => {
+				set_question_number(selected_question + 1);
+			}}
+			>{$t('admin_page.show_next_question')}: {get_question_title(
+				selected_question + 1,
+				quiz_data
+			)}</button
+		>
+	</div>
+{:else if selected_question + 1 === 0}
+	<div class="w-full flex justify-center">
+		<button
+			on:click={() => {
+				set_question_number(0);
+			}}
+			class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{$t('admin_page.start_by_showing_first_question')}
+		</button>
+	</div>
+{:else if final_results_clicked === false}
+	<div class="w-screen flex justify-center">
+		<button
+			on:click={get_final_results}
+			class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+			>{$t('admin_page.get_final_results')}</button
+		>
+	</div>
+{/if}

frontend/src/lib/admin.ts

@@ -0,0 +1,56 @@
+import type { QuizData } from '$lib/quiz_types';
+
+export const get_question_title = (q_number: number, quiz_data: QuizData): string => {
+	if (q_number - 1 === quiz_data.questions.length) {
+		return;
+	}
+	try {
+		return quiz_data.questions[q_number].question;
+	} catch (e) {
+		return '';
+	}
+};
+
+export const getWinnersSorted = (
+	quiz_data: QuizData,
+	final_results: Array<null> | Array<Array<PlayerAnswer>>
+) => {
+	const winners = {};
+	const q_count = quiz_data.questions.length;
+	for (let i = 0; i < q_count; i++) {
+		const q_res = final_results[i];
+		if (q_res === null) {
+			continue;
+		}
+		for (let j = 0; j < q_res.length; j++) {
+			const res = q_res[j];
+			if (res['right']) {
+				if (winners[res['username']] === undefined) {
+					winners[res['username']] = 0;
+				}
+				winners[res['username']] += 1;
+			}
+		}
+	}
+
+	function sortObjectbyValue(obj) {
+		const asc = false;
+		const ret = {};
+		Object.keys(obj)
+			.sort((a, b) => obj[asc ? a : b] - obj[asc ? b : a])
+			.forEach((s) => (ret[s] = obj[s]));
+		return ret;
+	}
+
+	return sortObjectbyValue(winners);
+};
+
+export interface Player {
+	username: string;
+}
+
+export interface PlayerAnswer {
+	username: string;
+	answer: string;
+	right: string;
+}

frontend/src/lib/hashcash.ts

@@ -1,5 +1,4 @@
 import { DateTime } from 'luxon';
-import { plausible } from '$lib/stores';
 
 const gen_salt = (l: number): string => {
 	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -47,6 +46,7 @@ export const mint = async (
 		counter += 1;
 	}
 	const t2 = performance.now();
-	plausible.trackEvent('Hashcash', { props: { ms_taken: t2 - t1 } });
+	// eslint-disable-next-line no-undef
+	plausible('Hashcash', { props: { ms_taken: t2 - t1 } });
 	return `${challenge}:${result}`;
 };

frontend/src/lib/i18n/locales/en.json

@@ -13,7 +13,8 @@
     },
     "overview_page": {
         "created_at": "Created at",
-        "question_count": "Question count"
+        "question_count": "Question count",
+        "no_quizzes": "Looks like you don't have any quizzes. Wanna change that? Click the \"Create\"-button, or import a quiz from KAHOOT!"
     },
     "edit_page": {
         "success_update_title": "Successfully updated quiz!",
@@ -92,7 +93,11 @@
         "screenshot": "Screenshot",
         "screenshot_plural": "Screenshots",
         "browser": "Browser",
-        "view": "View"
+        "view": "View",
+        "correct": "Correct",
+        "result": "",
+        "result_plural": "",
+        "count": ""
     },
     "editor": {
         "time_in_seconds": "Time in seconds",
@@ -114,7 +119,9 @@
         "get_results": "Get results",
         "get_results_and_stop_time": "Get results and stop time",
         "get_final_results": "Get final results",
-        "export_results": "Export results"
+        "export_results": "Export results",
+        "show_next_question": "Show next question",
+        "start_by_showing_first_question": "Start by showing the first question!"
     },
     "password_reset_page": {
         "reset_password": "Reset password"
@@ -134,5 +141,12 @@
     },
     "search_page": {
         "at_least_3_characters": "Enter at least 3 characters..."
+    },
+    "play_page": {
+        "end_sentence": "That's it! This was the quiz.",
+        "1st_place": "1st Place",
+        "2nd_place": "2nd Place",
+        "3rd place": "3rd Place",
+        "with_out_of": "with {{correct_questions}} out of {{total_question_count}}"
     }
 }

frontend/src/lib/play/end.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import type { QuizData } from '$lib/quiz_types';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	export let quiz_data: QuizData;
 	export let final_results: Array<null> | Array<Array<PlayerAnswer>>;
@@ -46,19 +49,19 @@
 </script>
 
 <div>
-	<h1 class="mx-auto text-center text-6xl mt-8">That's it! This was the quiz.</h1>
+	<h1 class="mx-auto text-center text-6xl mt-8">{$t('play_page.end_sentence')}</h1>
 
 	<div class="flex mx-auto w-fit flex-col pt-8 gap-2">
 		<div>
 			<p class="text-3xl text-center">
-				1st Place: <span class="underline">{winners_arr[0]}</span>
+				{$t('play_page.1st_place')}: <span class="underline">{winners_arr[0]}</span>
 				<span>with {winners[winners_arr[0]]} out of {quiz_data.questions.length}</span>
 			</p>
 		</div>
 		{#if winners_arr.length >= 2}
 			<div>
 				<p class="text-2xl text-center">
-					2nd Place: <span class="underline">{winners_arr[1]}</span>
+					{$t('play_page.2nd_place')}: <span class="underline">{winners_arr[1]}</span>
 					<span>with {winners[winners_arr[1]]} out of {quiz_data.questions.length}</span>
 				</p>
 			</div>
@@ -66,8 +69,13 @@
 		{#if winners_arr.length >= 3}
 			<div>
 				<p class="text-xl text-center">
-					3rd Place: <span class="underline">{winners_arr[2]}</span>
+					{$t('play_page.3rd place')}: <span class="underline">{winners_arr[2]}</span>
-					<span>with {winners[winners_arr[2]]} out of {quiz_data.questions.length}</span>
+					<span>
+						{$t('play_page.with_out_of', {
+							correct_questions: winners[winners_arr[2]],
+							total_question_count: quiz_data.questions.length
+						})}
+					</span>
 				</p>
 			</div>
 		{/if}

frontend/src/lib/play/show_results.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { Answer, QuizData } from '$lib/quiz_types';
+	import { getLocalization } from '$lib/i18n';
 
+	const { t } = getLocalization();
 	export let results: Array<Answer>;
 	export let game_data: QuizData;
 	export let question_index: string;
@@ -14,8 +16,6 @@
 	for (let i = 0; i < results.length; i++) {
 		data_store[results[i].answer] += 1;
 	}
-
-	console.log(data_store);
 </script>
 
 <!-- Show the results from the results object -->
@@ -23,36 +23,33 @@
 <!-- Path: frontend/src/lib/play/show_results.svelte -->
 
 <div>
-	<h2>Results</h2>
+	<h2 class="text-center text-3xl mb-8">{$t('words.result', { count: 2 })}</h2>
-	<div class="flex flex-col mx-auto">
+	<div class="w-screen flex justify-center">
-		<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
+		<div class="relative overflow-x-auto shadow-md rounded-lg">
-			<div class="inline-block py-2 min-w-full sm:px-6 lg:px-8">
+			<table class="w-fit text-sm text-left text-gray-500 dark:text-gray-400">
-				<div class="overflow-hidden shadow-md sm:rounded-lg">
-					<table class="min-w-full">
 				<thead class="bg-gray-50 dark:bg-gray-700">
 					<tr>
 						<th
 							scope="col"
 							class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 						>
-									Answer
+							{$t('words.answer')}
 						</th>
 						<th
 							scope="col"
 							class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 						>
-									Count
+							{$t('words.count')}
 						</th>
 						<th
 							scope="col"
 							class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 						>
-									Right
+							{$t('words.correct')}
 						</th>
 					</tr>
 				</thead>
 				<tbody>
-							<!-- Product 1 -->
 					{#each game_data.questions[parseInt(question_index)].answers as answer}
 						<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
 							<td
@@ -74,11 +71,10 @@
 									❌
 								{/if}
 							</td>
-								</tr>{/each}
+						</tr>
+					{/each}
 				</tbody>
 			</table>
 		</div>
 	</div>
-		</div>
-	</div>
 </div>

frontend/src/lib/stores.ts

@@ -8,7 +8,6 @@ export const alertModal = writable({ open: false, title: '', body: '' });
 
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import Plausible from 'plausible-tracker';
 
 const URLSearchParamsToObject = (params: URLSearchParams) => {
 	const obj = {};
@@ -42,9 +41,3 @@ export const createQueryParamsStore = (key: string) => {
 		}
 	};
 };
-
-export const plausible = Plausible({
-	domain: 'classquiz.mawoka.eu',
-	apiHost: 'https://sugar.mawoka.eu.org',
-	trackLocalhost: true
-});

frontend/src/routes/__layout.svelte

@@ -18,7 +18,6 @@
 	import { initLocalizationContext } from '$lib/i18n';
 	import { browser } from '$app/env';
 	import Alert from '$lib/modals/alert.svelte';
-	import { plausible } from '$lib/stores';
 
 	/*	afterNavigate(() => {
 		if (browser) {
@@ -33,8 +32,6 @@
 	});*/
 
 	if (browser) {
-		plausible.enableAutoPageviews();
-		plausible.enableAutoOutboundTracking();
 		pathname.set(window.location.pathname);
 		if (
 			localStorage.theme === 'dark' ||

frontend/src/routes/admin.svelte

@@ -28,6 +28,8 @@
 	import { socket } from '$lib/socket';
 	import { getLocalization } from '$lib/i18n';
 	import { navbarVisible } from '$lib/stores';
+	import type { PlayerAnswer, Player } from '$lib/admin.ts';
+	import SomeAdminScreen from '$lib/admin.svelte';
 
 	navbarVisible.set(false);
 
@@ -41,16 +43,6 @@
 	export let auto_connect: boolean;
 	export let game_token: string;
 
-	interface Player {
-		username: string;
-	}
-
-	interface PlayerAnswer {
-		username: string;
-		answer: string;
-		right: string;
-	}
-
 	let players: Array<Player> = [];
 	let errorMessage = '';
 	let game_started = false;
@@ -59,12 +51,9 @@
 	let question_results = null;
 	let final_results: Array<null> | Array<Array<PlayerAnswer>> = [null];
 	let success = false;
-	let selected_question = -1;
-	let timer_res: string;
 	let dataexport_download_a;
 	let warnToLeave = true;
 
-	let shown_question_now: number;
 	const connect = () => {
 		socket.emit('register_as_admin', {
 			game_pin: game_pin,
@@ -85,53 +74,6 @@
 	socket.on('already_registered_as_admin', () => {
 		errorMessage = $t('admin_page.already_registered_as_admin');
 	});
-	const set_question_number = (q_number: number) => {
-		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 += 1;
-		timer(timer_res);
-	};
-
-	const get_question_results = () => {
-		socket.emit('get_question_results', {
-			game_id: game_token,
-			question_number: shown_question_now
-		});
-		timer_res = '0';
-	};
-
-	const getWinnersSorted = () => {
-		let winners = {};
-		let q_count = quiz_data.questions.length;
-		for (let i = 0; i < q_count; i++) {
-			let q_res = final_results[i];
-			if (q_res === null) {
-				continue;
-			}
-			for (let j = 0; j < q_res.length; j++) {
-				let res = q_res[j];
-				if (res['right']) {
-					if (winners[res['username']] === undefined) {
-						winners[res['username']] = 0;
-					}
-					winners[res['username']] += 1;
-				}
-			}
-		}
-
-		function sortObjectbyValue(obj) {
-			const asc = false;
-			const ret = {};
-			Object.keys(obj)
-				.sort((a, b) => obj[asc ? a : b] - obj[asc ? b : a])
-				.forEach((s) => (ret[s] = obj[s]));
-			return ret;
-		}
-
-		return sortObjectbyValue(winners);
-	};
 
 	socket.on('question_results', (data) => {
 		try {
@@ -149,30 +91,6 @@
 		warnToLeave = true;
 	});
 
-	const get_final_results = () => {
-		socket.emit('get_final_results', {});
-	};
-
-	socket.on('final_results', (data) => {
-		// data = JSON.parse(data);
-		final_results = data;
-
-		console.log(getWinnersSorted());
-	});
-
-	const timer = (time: string) => {
-		let seconds = Number(time);
-		let timer_interval = setInterval(() => {
-			if (timer_res === '0') {
-				clearInterval(timer_interval);
-				return;
-			} else {
-				seconds--;
-			}
-
-			timer_res = seconds.toString();
-		}, 1000);
-	};
 	const confirmUnload = () => {
 		if (warnToLeave) {
 			event.preventDefault();
@@ -180,16 +98,6 @@
 		}
 	};
 
-	const get_question_title = (q_number: number): string => {
-		if (q_number - 1 === quiz_data.questions.length) {
-			return;
-		}
-		try {
-			return quiz_data.questions[q_number].question;
-		} catch (e) {
-			return '';
-		}
-	};
 	const request_answer_export = async () => {
 		await socket.emit('get_export_token');
 	};
@@ -199,7 +107,18 @@
 <svelte:head>
 	<title>ClassQuiz - Host</title>
 </svelte:head>
-
+{#if JSON.stringify(final_results) !== JSON.stringify([null])}
+	<div class="w-screen flex justify-center mt-8">
+		<button
+			on:click={request_answer_export}
+			class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+			>{$t('admin_page.export_results')}</button
+		>
+	</div>
+	{#await import('$lib/play/end.svelte') then c}
+		<svelte:component this={c.default} bind:final_results bind:quiz_data />
+	{/await}
+{/if}
 {#if !success}
 	<input placeholder="game id" bind:value={game_token} />
 	<input placeholder="game pin" bind:value={game_pin} />
@@ -210,22 +129,26 @@
 {:else if !game_started}
 	<img
 		alt="QR code to join the game"
-		src="/api/v1/utils/qr/{quiz_data.game_pin}?ref=qr"
+		src="/api/v1/utils/qr/{quiz_data.game_pin}"
 		class="block mx-auto w-1/6"
 	/>
-	<p class="text-3xl text-center">{$t('words.pin')}: {quiz_data.game_pin}</p>
+	<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>
-	<ul>
+	<div class="flex justify-center w-full mt-4">
+		<ul class="list-disc pl-8">
 			{#if players.length > 0}
 				{#each players as player}
 					<li>
-					<span>{player.username} </span>
+						<span>{player.username}</span>
-					<button>{$t('words.kick')}</button>
+						<!--					<button>{$t('words.kick')}</button>-->
 					</li>
 				{/each}
 			{/if}
 		</ul>
+	</div>
 	{#if players.length > 0}
+		<div class="flex justify-center w-full mt-4">
 			<button
+				class="ml-4 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
 				id="startGame"
 				on:click={() => {
 					socket.emit('start_game', '');
@@ -233,61 +156,12 @@
 				}}
 				>{$t('admin_page.start_game')}
 			</button>
+		</div>
 	{/if}
 {:else}
-	{#if timer_res === undefined}
+	<SomeAdminScreen bind:final_results bind:game_pin bind:game_token bind:quiz_data />
-		<span>Select a question to start!</span>
-	{:else}
-		<span>{$t('admin_page.time_left')}: {timer_res}</span>
-	{/if}
-	<br />
-	{#if timer_res === '0'}
-		{#if question_results === null}
-			<button on:click={get_question_results} id="GetQuestionResults"
-				>{$t('admin_page.get_results')}</button
-			>
-			<br />
-		{:else}
-			<br />
-			<ul>
-				{#each question_results as result}
-					<li>{result.username} - {result.answer} - {result.right}</li>
-				{/each}
-			</ul>
-		{/if}
-	{:else if timer_res !== undefined}
-		<button on:click={get_question_results} id="GetQuestionResultsAndStopTime"
-			>{$t('admin_page.get_results_and_stop_time')}</button
-		>
-	{/if}
-	<br />
-	<!--{#each quiz_data.questions as { question }, index}
-		<button
-			on:click={() => {
-				set_question_number(index);
-			}}>{index}: {question}</button
-		>
-		<br />
-	{/each}-->
-	{#if get_question_title(selected_question + 1) !== ''}
-		<button
-			disabled={!(timer_res === undefined || timer_res === '0')}
-			id="SetQuestionNumber"
-			on:click={() => {
-				set_question_number(selected_question + 1);
-			}}>{selected_question + 1}: {get_question_title(selected_question + 1)}</button
-		>
-		<br />
-	{:else}
-		<button on:click={get_final_results}>{$t('admin_page.get_final_results')}</button>
-	{/if}
-{/if}
-{#if JSON.stringify(final_results) !== JSON.stringify([null])}
-	<button on:click={request_answer_export}>{$t('admin_page.export_results')}</button>
-	{#await import('$lib/play/end.svelte') then c}
-		<svelte:component this={c.default} bind:final_results bind:quiz_data />
-	{/await}
 {/if}
+
 <a
 	on:click|preventDefault={request_answer_export}
 	href="#"

frontend/src/routes/overview.svelte

@@ -19,7 +19,7 @@
 	import { DateTime } from 'luxon';
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
-	import { alertModal, navbarVisible, signedIn, plausible } from '$lib/stores';
+	import { alertModal, navbarVisible, signedIn } from '$lib/stores';
 
 	interface QuizData {
 		id: string;
@@ -71,7 +71,7 @@
 		}
 		const data = await res.json();
 		// eslint-disable-next-line no-undef
-		plausible.trackEvent('Started Game', { props: { quiz_id: id } });
+		plausible('Started Game', { props: { quiz_id: id } });
 		window.location.replace(`/admin?token=${data.game_id}&pin=${data.game_pin}&connect=1`);
 	};
 
@@ -250,9 +250,7 @@
 				</div>
 			{:else}
 				<p>
-					<!-- TODO: Add translation -->
+					{$t('overview_page.no_quizzes')}
-					Looks like you don't have any quizzes. Wanna change that? Click the "Create"-button,
-					or import a quiz from KAHOOT!
 				</p>
 			{/if}
 		</div>

frontend/src/routes/play.svelte

@@ -21,7 +21,7 @@
 	import ShowTitle from '$lib/play/title.svelte';
 	import Question from '$lib/play/question.svelte';
 	import ShowResults from '$lib/play/show_results.svelte';
-	import { navbarVisible, plausible } from '$lib/stores';
+	import { navbarVisible } from '$lib/stores';
 	import ShowEndScreen from '$lib/play/end.svelte';
 
 	// Exports
@@ -66,7 +66,7 @@
 		console.log('joined_game', data);
 		gameData = JSON.parse(data);
 		// eslint-disable-next-line no-undef
-		plausible.trackEvent('Joined Game', { props: { quiz_id: gameData.quiz_id } });
+		plausible('Joined Game', { props: { quiz_id: gameData.quiz_id } });
 	});
 
 	socket.on('game_not_found', () => {

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

@@ -28,7 +28,6 @@
 	import { createTippy } from 'svelte-tippy';
 	import 'tippy.js/animations/perspective-subtle.css';
 	import 'tippy.js/dist/tippy.css';
-	import { plausible } from '$lib/stores';
 
 	const tippy = createTippy({
 		arrow: true,
@@ -80,7 +79,7 @@
 		}
 		const data = await res.json();
 		// eslint-disable-next-line no-undef
-		plausible.trackEvent('Started Game', { props: { quiz_id: id } });
+		plausible('Started Game', { props: { quiz_id: id } });
 		window.location.replace(`/admin?token=${data.game_id}&pin=${data.game_pin}&connect=1`);
 	};
 </script>
@@ -159,6 +158,7 @@
 		{:else}
 			<button
 				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none cursor-not-allowed opacity-50"
+				disabled
 				use:tippy={{ content: 'You need to be logged in to start a game' }}
 			>
 				{$t('words.start')}