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

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>
-					<span>with {winners[winners_arr[2]]} out of {quiz_data.questions.length}</span>
+					{$t('play_page.3rd place')}: <span class="underline">{winners_arr[2]}</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,62 +23,58 @@
 <!-- Path: frontend/src/lib/play/show_results.svelte -->
 
 <div>
-	<h2>Results</h2>
-	<div class="flex flex-col mx-auto">
-		<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
-			<div class="inline-block py-2 min-w-full sm:px-6 lg:px-8">
-				<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
-								</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
-								</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
-								</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
-										class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
-									>
-										{answer.answer}
-									</td>
-									<td
-										class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
-									>
-										{data_store[answer.answer]}
-									</td>
-									<td
-										class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
-									>
-										{#if answer.right}
-											✅
-										{:else}
-											❌
-										{/if}
-									</td>
-								</tr>{/each}
-						</tbody>
-					</table>
-				</div>
-			</div>
+	<h2 class="text-center text-3xl mb-8">{$t('words.result', { count: 2 })}</h2>
+	<div class="w-screen 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="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"
+						>
+							{$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"
+						>
+							{$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"
+						>
+							{$t('words.correct')}
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#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
+								class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
+							>
+								{answer.answer}
+							</td>
+							<td
+								class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
+							>
+								{data_store[answer.answer]}
+							</td>
+							<td
+								class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
+							>
+								{#if answer.right}
+									✅
+								{:else}
+									❌
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
 		</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
-});