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

♻️ Cleaned admin-game code up

Browse Source
This commit is contained in:
Mawoka
2023-09-18 20:45:07 +02:00
parent 85d162eba0
commit 1b5b5e31ac
9 changed files with 288 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/admin/controls.svelte
+104
View File
@@ -0,0 +1,104 @@
<!--
SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0
-->
<script lang="ts">
import { QuizQuestionType } from '$lib/quiz_types';
import type { QuizData } from '$lib/quiz_types';
import type { Socket } from 'socket.io-client';
import { getLocalization } from '$lib/i18n';
export let bg_color: string;
export let selected_question: number;
export let quiz_data: QuizData;
export let timer_res: string;
export let final_results;
export let socket: Socket;
export let game_token: string;
export let question_results;
export let shown_question_now: number;
const { t } = getLocalization();
const set_question_number = (q_number: number) => {
socket.emit('set_question_number', q_number.toString());
};
const get_question_results = () => {
socket.emit('get_question_results', {
game_id: game_token,
question_number: shown_question_now
});
};
const show_solutions = () => {
socket.emit('show_solutions', {});
timer_res = '0';
};
const get_final_results = () => {
socket.emit('get_final_results', {});
};
</script>
<div
class="fixed top-0 w-full h-10 z-20 grid grid-cols-2"
style="background: {bg_color ? bg_color : 'transparent'}"
class:text-black={bg_color}
>
<p class="mr-auto ml-0 col-start-1 col-end-1">
{selected_question === -1 ? '0' : selected_question + 1}
/{quiz_data.questions.length}
</p>
<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
{#if selected_question + 1 === quiz_data.questions.length && ((timer_res === '0' && question_results !== null) || quiz_data?.questions?.[selected_question]?.type === QuizQuestionType.SLIDE)}
{#if JSON.stringify(final_results) === JSON.stringify([null])}
<button on:click={get_final_results} class="admin-button"
>{$t('admin_page.get_final_results')}
</button>
{/if}
{:else if timer_res === '0' || selected_question === -1}
{#if (selected_question + 1 !== quiz_data.questions.length && question_results !== null) || selected_question === -1}
<button
on:click={() => {
set_question_number(selected_question + 1);
}}
class="admin-button"
>{$t('admin_page.next_question', { question: selected_question + 2 })}
</button>
{/if}
{#if question_results === null && selected_question !== -1}
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
<button
on:click={() => {
set_question_number(selected_question + 1);
}}
class="admin-button"
>{$t('admin_page.next_question', { question: selected_question + 2 })}
</button>
{:else}
<button on:click={get_question_results} class="admin-button"
>{$t('admin_page.show_results')}
</button>
{/if}
{/if}
{:else if selected_question !== -1}
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
<button
on:click={() => {
set_question_number(selected_question + 1);
}}
class="admin-button"
>{$t('admin_page.next_question', { question: selected_question + 2 })}
</button>
{:else}
<button on:click={show_solutions} class="admin-button"
>{$t('admin_page.stop_time_and_solutions')}
</button>
{/if}
{/if}
</div>
</div>
frontend/src/lib/play/admin/question.svelte
+109
View File
@@ -0,0 +1,109 @@
<!--
SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0
-->
<script lang="ts">
import { QuizQuestionType } from '$lib/quiz_types';
import type { QuizData } from '$lib/quiz_types';
import { get_foreground_color } from '$lib/helpers.js';
import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons.js';
import CircularTimer from '$lib/play/circular_progress.svelte';
import MediaComponent from '$lib/editor/MediaComponent.svelte';
import { getLocalization } from '$lib/i18n';
export let quiz_data: QuizData;
export let selected_question: number;
export let timer_res: string;
export let answer_count: number;
export let default_colors: string[];
const { t } = getLocalization();
let circular_progress = 0;
$: {
try {
circular_progress =
1 -
((100 / parseInt(quiz_data.questions[selected_question].time)) *
parseInt(timer_res)) /
100;
} catch {
circular_progress = 0;
}
}
</script>
<div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center">
{@html quiz_data.questions[selected_question].question}
</h1>
<!-- <span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
<div class="grid grid-cols-3 my-2">
<span />
<div class="m-auto">
<CircularTimer
bind:text={timer_res}
bind:progress={circular_progress}
color="#ef4444"
/>
</div>
<p class="m-auto text-3xl">
{$t('admin_page.answers_submitted', { answer_count: answer_count })}
</p>
</div>
</div>
{#if quiz_data.questions[selected_question].image !== null}
<div class="flex w-full">
<MediaComponent
src={quiz_data.questions[selected_question].image}
muted={false}
css_classes="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
/>
</div>
{/if}
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING || quiz_data.questions[selected_question].type === QuizQuestionType.CHECK}
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4">
{#each quiz_data.questions[selected_question].answers as answer, i}
<div
class="rounded-lg h-fit flex border-2 border-black"
style="background-color: {answer.color ?? default_colors[i]};"
class:opacity-50={!answer.right &&
timer_res === '0' &&
quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
>
<img
class="w-14 inline-block pl-4"
alt="icon"
style="color: {get_foreground_color(answer.color ?? default_colors[i])}"
src={kahoot_icons[i]}
/>
<span
class="text-center text-2xl px-2 py-4 w-full"
style="color: {get_foreground_color(answer.color ?? default_colors[i])}"
>{answer.answer}</span
>
<span class="pl-4 w-10" />
</div>
{/each}
</div>
{:else if quiz_data.questions[selected_question].type === QuizQuestionType.TEXT}
{#if timer_res === '0'}
<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 bg-[#B07156]">
<span class="text-center text-2xl px-2 py-4 w-full text-black"
>{answer.answer}</span
>
<span class="pl-4 w-10" />
</div>
{/each}
</div>
{:else}
<div class="flex justify-center">
<p class="text-2xl">{$t('admin_page.enter_answer_into_field')}</p>
</div>
{/if}
{/if}