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

✨ Added scoreboard

Browse Source
This commit is contained in:
Mawoka
2022-09-25 12:22:50 +02:00
parent 0de3a87406
commit 2e6b5ad63c
8 changed files with 209 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/admin.svelte
+12 -45
View File
@@ -12,6 +12,7 @@
import { QuizQuestionType } from '$lib/quiz_types';
import { kahoot_icons } from './play/kahoot_mode_assets/kahoot_icons';
import CircularTimer from '$lib/play/circular_progress.svelte';
import Spinner from '$lib/Spinner.svelte';
export let game_token: string;
export let quiz_data: QuizData;
@@ -26,7 +27,7 @@
let shown_question_now: number;
let final_results_clicked = false;
console.log(quiz_data);
let player_scores = {};
export const set_question_number = (q_number: number) => {
question_results = null;
@@ -143,7 +144,7 @@
{/if}
{/if}
<div class:mt-28={game_mode === 'kahoot'} class="w-full h-full">
{#if timer_res !== undefined && !final_results_clicked}
{#if timer_res !== undefined && !final_results_clicked && !question_results}
<div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center">
{quiz_data.questions[selected_question].question}
@@ -205,49 +206,15 @@
</div>
{/if}
{: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>
{#await import('$lib/play/admin/results.svelte')}
<Spinner />
{:then c}
<svelte:component
this={c.default}
bind:data={player_scores}
bind:new_data={question_results}
/>
{/await}
{/if}
{:else if timer_res !== undefined}
{#if game_mode === 'normal'}
frontend/src/lib/helpers.ts
+4
View File
@@ -14,3 +14,7 @@ export const invertColor = (hexTripletColor: string): string => {
color = '#' + color; // prepend #
return color;
};
export const calculate_score = (q_time: number, time_taken: number): number => {
return q_time / time_taken;
};
frontend/src/lib/play/admin/results.svelte
+109
View File
@@ -0,0 +1,109 @@
<!--
- 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 { flip } from 'svelte/animate';
import { fly } from 'svelte/transition';
import { onMount } from 'svelte';
export let data;
export let new_data: Array<{
username: string;
answer: string;
right: boolean;
time_taken: number;
score: number;
}>;
function sortObjectbyValue(obj) {
const ret = {};
Object.keys(obj)
.sort((a, b) => obj[b] - obj[a])
.forEach((s) => (ret[s] = obj[s]));
return ret;
}
// let data_by_username = {};
let score_by_username = {};
for (const i of new_data) {
/* data_by_username[i.username] = {
answer: i.answer,
right: i.right,
time_taken: i.time_taken,
score: i.score
};*/
score_by_username[i.username] = i.score;
}
let player_names;
if (JSON.stringify(data) === '{}') {
for (const i of new_data) {
data[i.username] = 0;
}
}
$: data = sortObjectbyValue(data);
$: player_names = Object.keys(data);
let show_new_score_clicked = false;
const show_new_score = () => {
// for (let i = 0; i++; i < player_names.length) {
// console.log(data)
for (const i of player_names) {
data[i] = score_by_username[i] + data[i];
}
show_new_score_clicked = true;
setTimeout(() => {
data = data;
}, 800);
// console.log(data)
};
onMount(() => {
setTimeout(show_new_score, 1000);
});
// https://svelte.dev/repl/96a58afdea2248a5b7e489160ffba887?version=3.44.2
</script>
<main>
<button on:click={show_new_score}>Show new Score</button>
<div class="flex justify-center">
<div>
<table class="table-auto text-xl">
<tr>
<th class="p-2 border-r border-r-black border-b-2 border-b-black">Name</th>
<th class="p-2 border-b-2 border-b-black">Points</th>
{#if show_new_score_clicked}
<th in:fly={{ x: 300 }} class="p-2 border-b-2 border-b-black"
>Points added</th
>
{/if}
</tr>
{#each player_names as player, i (player)}
<tr animate:flip>
<td class:hidden={i > 3} class="p-2 border-r border-r-black">{player}</td>
<td class:hidden={i > 3} class="p-2">{data[player]}</td>
{#if show_new_score_clicked}
<td
in:fly={{ x: 300 }}
class:hidden={i > 3}
class="p-2"
class:text-red-600={score_by_username[player] === 0}
>
+{score_by_username[player]}
</td>
{/if}
</tr>
{/each}
</table>
</div>
</div>
</main>
frontend/src/lib/play/join.svelte
+1 -1
View File
@@ -15,7 +15,7 @@
export let game_pin: string;
export let game_mode;
let username = '';
export let username;
let hcaptchaSitekey = import.meta.env.VITE_HCAPTCHA;
let hcaptcha = {
frontend/src/lib/play/question.svelte
+1 -1
View File
@@ -103,7 +103,7 @@
<CircularTimer bind:text={timer_res} bind:progress={circular_prgoress} color="#ef4444" />
</div>
</div>
{#if question.image !== null}
{#if question.image !== null && game_mode !== 'kahoot'}
<div>
<img
src={question.image}
frontend/src/lib/play/results_kahoot.svelte
+54
View File
@@ -0,0 +1,54 @@
<!--
- 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">
export let scores;
export let question_results: Array<{
username: string;
answer: string;
right: boolean;
time_taken: number;
score: number;
}>;
function sortObjectbyValue(obj) {
const ret = {};
Object.keys(obj)
.sort((a, b) => obj[b] - obj[a])
.forEach((s) => (ret[s] = obj[s]));
return ret;
}
export let username;
let score_by_username = {};
if (JSON.stringify(scores) === '{}') {
for (const i of question_results) {
scores[i.username] = 0;
}
}
for (const i of question_results) {
score_by_username[i.username] = i.score;
}
$: scores = sortObjectbyValue(scores);
for (const i of Object.keys(scores)) {
scores[i] = score_by_username[i] + scores[i];
}
</script>
<div>
<div class="flex justify-center h-screen">
<div class="m-auto flex flex-col">
<p class="p-4 bg-black bg-opacity-40 rounded-lg text-2xl">
+{score_by_username[username]}
</p>
<p>Total score: {scores[username]}</p>
</div>
</div>
</div>