LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mawoka
2022-06-24 17:34:03 +02:00
parent c19e362aaf
commit ffee61fde3
14 changed files with 375 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/__layout.svelte
-3
View File
@@ -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
+41 -167
View File
@@ -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,84 +129,39 @@
{: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>
<ul>
{#if players.length > 0}
{#each players as player}
<li>
<span>{player.username} </span>
<button>{$t('words.kick')}</button>
</li>
{/each}
{/if}
</ul>
<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>
<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>
<!-- <button>{$t('words.kick')}</button>-->
</li>
{/each}
{/if}
</ul>
</div>
{#if players.length > 0}
<button
id="startGame"
on:click={() => {
socket.emit('start_game', '');
game_started = true;
}}
>{$t('admin_page.start_game')}
</button>
<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', '');
game_started = true;
}}
>{$t('admin_page.start_game')}
</button>
</div>
{/if}
{:else}
{#if timer_res === undefined}
<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}
<SomeAdminScreen bind:final_results bind:game_pin bind:game_token bind:quiz_data />
{/if}
<a
on:click|preventDefault={request_answer_export}
href="#"
frontend/src/routes/overview.svelte
+3 -5
View File
@@ -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 -->
Looks like you don't have any quizzes. Wanna change that? Click the "Create"-button,
or import a quiz from KAHOOT!
{$t('overview_page.no_quizzes')}
</p>
{/if}
</div>
frontend/src/routes/play.svelte
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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')}