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

✨ Closes #208

Browse Source
This commit is contained in:
Mawoka
2023-10-21 22:17:40 +02:00
parent 2079b3feb3
commit 91c74bbb87
2 changed files with 110 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/question.svelte
+87 -70
View File
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0 SPDX-License-Identifier: MPL-2.0
--> -->
<script lang="ts"> <script lang='ts'>
import type { Question } from '$lib/quiz_types'; import type { Question } from '$lib/quiz_types';
import { QuizQuestionType } from '$lib/quiz_types'; import { QuizQuestionType } from '$lib/quiz_types';
import { socket } from '$lib/socket'; import { socket } from '$lib/socket';
@@ -120,12 +120,12 @@ SPDX-License-Identifier: MPL-2.0
return _arr; return _arr;
}; };
$: set_answer_if_not_set_range(timer_res); $: set_answer_if_not_set_range(timer_res);
let circular_prgoress = 0; let circular_progress = 0;
$: { $: {
try { try {
circular_prgoress = 1 - ((100 / question.time) * parseInt(timer_res)) / 100; circular_progress = 1 - ((100 / question.time) * parseInt(timer_res)) / 100;
} catch { } catch {
circular_prgoress = 0; circular_progress = 0;
} }
} }
@@ -144,22 +144,22 @@ SPDX-License-Identifier: MPL-2.0
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58']; const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
</script> </script>
<div class="h-screen w-screen"> <div class='h-screen w-screen'>
{#if game_mode === 'normal'} {#if game_mode === 'normal'}
<div <div
class="flex flex-col justify-start" class='flex flex-col justify-start'
style="height: {question.image ? '33.333333' : '16.666667'}%" style="height: {question.image ? '33.333333' : '16.666667'}%"
> >
<h1 <h1
class="lg:text-2xl text-lg text-center text-black dark:text-white mt-2 break-normal mb-2" class='lg:text-2xl text-lg text-center text-black dark:text-white mt-2 break-normal mb-2'
> >
{@html question.question} {@html question.question}
</h1> </h1>
{#if question.image !== null && game_mode !== 'kahoot'} {#if question.image !== null && game_mode !== 'kahoot'}
<div class="max-h-full"> <div class='max-h-full'>
<MediaComponent <MediaComponent
src={question.image} src={question.image}
css_classes="object-cover mx-auto mb-8 max-h-[90%]" css_classes='object-cover mx-auto mb-8 max-h-[90%]'
/> />
</div> </div>
{/if} {/if}
@@ -167,84 +167,94 @@ SPDX-License-Identifier: MPL-2.0
{/if} {/if}
{#if timer_res !== '0'} {#if timer_res !== '0'}
{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING} {#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
<div class="w-full relative h-full" style="height: {get_div_height()}%"> <div class='w-full relative h-full' style='height: {get_div_height()}%'>
<div <div
class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40" class='absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40'
> >
<CircularTimer <CircularTimer
bind:text={timer_res} bind:text={timer_res}
bind:progress={circular_prgoress} bind:progress={circular_progress}
color="#ef4444" color='#ef4444'
/> />
</div> </div>
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full"> <div class='grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full'>
{#each question.answers as answer, i} {#each question.answers as answer, i}
<button <button
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black" class='rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black'
style="background-color: {answer.color ?? style='background-color: {answer.color ??
default_colors[i]}; color: {get_foreground_color( default_colors[i]}; color: {get_foreground_color(
answer.color ?? default_colors[i] answer.color ?? default_colors[i]
)}" )}'
disabled={selected_answer !== undefined} disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)} on:click={() => selectAnswer(answer.answer)}
> >
{#if game_mode === 'kahoot'} {#if game_mode === 'kahoot'}
<img <img
class="h-2/3 inline-block m-auto" class='h-2/3 inline-block m-auto'
alt="Icon" alt='Icon'
src={kahoot_icons[i]} src={kahoot_icons[i]}
/> />
{:else} {:else}
<p class="m-auto">{answer.answer}</p> <p class='m-auto'>{answer.answer}</p>
{/if} {/if}
</button> </button>
{/each} {/each}
</div> </div>
</div> </div>
{:else if question.type === QuizQuestionType.RANGE} {:else if question.type === QuizQuestionType.RANGE}
<span
class='fixed top-0 bg-red-500 h-8 transition-all'
style='width: {(100 / parseInt(question.time)) *
parseInt(timer_res)}vw'
/>
{#await import('svelte-range-slider-pips')} {#await import('svelte-range-slider-pips')}
<Spinner /> <Spinner />
{:then c} {:then c}
<div class:pointer-events-none={selected_answer !== undefined} class="mt-14"> <div class:pointer-events-none={selected_answer !== undefined} class='mt-24'>
<svelte:component <svelte:component
this={c.default} this={c.default}
bind:values={slider_value} bind:values={slider_value}
bind:min={question.answers.min} bind:min={question.answers.min}
bind:max={question.answers.max} bind:max={question.answers.max}
id="pips-slider" id='pips-slider'
pips pips
float float
all="label" all='label'
/> />
</div> </div>
<div class="flex justify-center"> <div class='flex justify-center'>
<div class="w-1/2"> <div class='w-1/2'>
<BrownButton <BrownButton
disabled={selected_answer !== undefined} disabled={selected_answer !== undefined}
on:click={() => selectAnswer(slider_value[0])} on:click={() => selectAnswer(slider_value[0])}
>{$t('words.submit')} >{$t('words.submit')}
</BrownButton> </BrownButton>
</div> </div>
</div> </div>
{/await} {/await}
{:else if question.type === QuizQuestionType.TEXT} {:else if question.type === QuizQuestionType.TEXT}
<div class="flex justify-center"> <span
<p class="text-black dark:text-white">Enter your answer</p> class='fixed top-0 bg-red-500 h-8 transition-all'
style='width: {(100 / parseInt(question.time)) *
parseInt(timer_res)}vw'
/>
<div class='flex justify-center mt-10'>
<p class='text-black dark:text-white'>Enter your answer</p>
</div> </div>
<div class="flex justify-center m-2"> <div class='flex justify-center m-2'>
<input <input
type="text" type='text'
bind:value={text_input} bind:value={text_input}
disabled={selected_answer} disabled={selected_answer}
class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed" class='bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed'
/> />
</div> </div>
<div class="flex justify-center mt-2"> <div class='flex justify-center mt-2'>
<div class="w-1/3"> <div class='w-1/3'>
<BrownButton <BrownButton
type="button" type='button'
disabled={selected_answer} disabled={selected_answer}
on:click={() => { on:click={() => {
selectAnswer(text_input); selectAnswer(text_input);
@@ -258,9 +268,9 @@ SPDX-License-Identifier: MPL-2.0
{#if solution === undefined} {#if solution === undefined}
<Spinner /> <Spinner />
{:else} {:else}
<p class="text-center"> <p class='text-center'>
Every number between {solution.answers.min_correct} and {solution.answers Every number between {solution.answers.min_correct} and {solution.answers
.max_correct} was correct. You got {selected_answer}, so you have been .max_correct} was correct. You got {selected_answer}, so you have been
{#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct} {#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
correct correct
{:else} {:else}
@@ -272,10 +282,15 @@ SPDX-License-Identifier: MPL-2.0
<!-- {#if solution === undefined} <!-- {#if solution === undefined}
<Spinner /> <Spinner />
{:else}--> {:else}-->
<div class="flex flex-col w-full h-full gap-4 px-4 py-6"> <span
class='fixed top-0 bg-red-500 h-8 transition-all'
style='width: {(100 / parseInt(question.time)) *
parseInt(timer_res)}vw'
/>
<div class='flex flex-col w-full h-full gap-4 px-4 py-6 mt-10'>
{#each question.answers as answer, i (answer.id)} {#each question.answers as answer, i (answer.id)}
<div <div
class="w-full h-fit flex-row rounded-lg p-2 align-middle" class='w-full h-fit flex-row rounded-lg p-2 align-middle'
animate:flip={{ duration: 100 }} animate:flip={{ duration: 100 }}
style="background-color: {answer.color ?? '#b07156'}" style="background-color: {answer.color ?? '#b07156'}"
> >
@@ -283,59 +298,59 @@ SPDX-License-Identifier: MPL-2.0
on:click={() => { on:click={() => {
question.answers = swapArrayElements(question.answers, i, i - 1); question.answers = swapArrayElements(question.answers, i, i - 1);
}} }}
class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition" class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
type="button" type='button'
disabled={i === 0 || selected_answer} disabled={i === 0 || selected_answer}
> >
<svg <svg
class="w-8 h-8" class='w-8 h-8'
stroke-width="2" stroke-width='2'
viewBox="0 0 24 24" viewBox='0 0 24 24'
fill="none" fill='none'
xmlns="http://www.w3.org/2000/svg" xmlns='http://www.w3.org/2000/svg'
color="currentColor" color='currentColor'
> >
<path <path
d="M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5" d='M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5'
stroke="currentColor" stroke='currentColor'
stroke-width="2" stroke-width='2'
stroke-linecap="round" stroke-linecap='round'
stroke-linejoin="round" stroke-linejoin='round'
/> />
</svg> </svg>
</button> </button>
<p class="w-full text-center p-2 text-2xl">{answer.answer}</p> <p class='w-full text-center p-2 text-2xl'>{answer.answer}</p>
<button <button
on:click={() => { on:click={() => {
question.answers = swapArrayElements(question.answers, i, i + 1); question.answers = swapArrayElements(question.answers, i, i + 1);
}} }}
class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition" class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
type="button" type='button'
disabled={i === question.answers.length - 1 || selected_answer} disabled={i === question.answers.length - 1 || selected_answer}
> >
<svg <svg
class="w-8 h-8" class='w-8 h-8'
stroke-width="2" stroke-width='2'
viewBox="0 0 24 24" viewBox='0 0 24 24'
fill="none" fill='none'
xmlns="http://www.w3.org/2000/svg" xmlns='http://www.w3.org/2000/svg'
color="currentColor" color='currentColor'
> >
<path <path
d="M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3" d='M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3'
stroke="currentColor" stroke='currentColor'
stroke-width="2" stroke-width='2'
stroke-linecap="round" stroke-linecap='round'
stroke-linejoin="round" stroke-linejoin='round'
/> />
</svg> </svg>
</button> </button>
</div> </div>
{/each} {/each}
<div class="w-full mt-2"> <div class='w-full mt-2'>
<BrownButton <BrownButton
type="button" type='button'
disabled={selected_answer} disabled={selected_answer}
on:click={() => { on:click={() => {
select_complex_answer(question.answers); select_complex_answer(question.answers);
@@ -353,13 +368,15 @@ SPDX-License-Identifier: MPL-2.0
bind:question bind:question
bind:selected_answer bind:selected_answer
bind:game_mode bind:game_mode
{timer_res}
{circular_progress}
/> />
<div class="flex justify-center h-[5%]"> <div class='flex justify-center h-[5%]'>
<div class="w-1/2"> <div class='w-1/2'>
<BrownButton <BrownButton
disabled={!selected_answer} disabled={!selected_answer}
on:click={() => selectAnswer(selected_answer)} on:click={() => selectAnswer(selected_answer)}
>{$t('words.submit')} >{$t('words.submit')}
</BrownButton> </BrownButton>
</div> </div>
</div> </div>
frontend/src/lib/play/questions/check.svelte
+23 -8
View File
@@ -4,15 +4,20 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0 SPDX-License-Identifier: MPL-2.0
--> -->
<script lang="ts"> <script lang='ts'>
import type { Question } from '$lib/quiz_types'; import type { Question } from '$lib/quiz_types';
import { get_foreground_color } from '$lib/helpers'; import { get_foreground_color } from '$lib/helpers';
import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons'; import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons';
import CircularTimer from '$lib/play/circular_progress.svelte';
// import CircularTimer from '$lib/play/circular_progress.svelte'; // import CircularTimer from '$lib/play/circular_progress.svelte';
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58']; const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
export let question: Question; export let question: Question;
export let selected_answer = ''; export let selected_answer = '';
export let game_mode; export let game_mode;
export let timer_res
export let circular_progress
let _selected_answers = [false, false, false, false]; let _selected_answers = [false, false, false, false];
const selectAnswer = (i: number) => { const selectAnswer = (i: number) => {
@@ -28,7 +33,7 @@ SPDX-License-Identifier: MPL-2.0
}; };
</script> </script>
<div class="w-full h-[95%]"> <div class='w-full h-[95%]'>
<!-- <!--
<div <div
class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-50" class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-50"
@@ -40,23 +45,33 @@ SPDX-License-Identifier: MPL-2.0
/> />
</div> </div>
--> -->
<div
class='absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40'
>
<CircularTimer
bind:text={timer_res}
bind:progress={circular_progress}
color='#ef4444'
/>
</div>
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
<div class='grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full'>
{#each question.answers as answer, i} {#each question.answers as answer, i}
<button <button
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black transition-all" class='rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black transition-all'
style="background-color: {answer.color ?? style='background-color: {answer.color ??
default_colors[i]}; color: {get_foreground_color( default_colors[i]}; color: {get_foreground_color(
answer.color ?? default_colors[i] answer.color ?? default_colors[i]
)}" )}'
on:click={() => selectAnswer(i)} on:click={() => selectAnswer(i)}
class:opacity-100={_selected_answers[i]} class:opacity-100={_selected_answers[i]}
class:opacity-50={!_selected_answers[i]} class:opacity-50={!_selected_answers[i]}
> >
{#if game_mode === 'kahoot'} {#if game_mode === 'kahoot'}
<img class="h-2/3 inline-block m-auto" alt="Icon" src={kahoot_icons[i]} /> <img class='h-2/3 inline-block m-auto' alt='Icon' src={kahoot_icons[i]} />
{:else} {:else}
<p class="m-auto">{answer.answer}</p> <p class='m-auto'>{answer.answer}</p>
{/if} {/if}
</button> </button>
{/each} {/each}