✨ Closes #208
This commit is contained in:
Mawoka
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
|
||||
SPDX-License-Identifier: MPL-2.0
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
<script lang='ts'>
|
||||
import type { Question } from '$lib/quiz_types';
|
||||
import { QuizQuestionType } from '$lib/quiz_types';
|
||||
import { socket } from '$lib/socket';
|
||||
@@ -120,12 +120,12 @@ SPDX-License-Identifier: MPL-2.0
|
||||
return _arr;
|
||||
};
|
||||
$: set_answer_if_not_set_range(timer_res);
|
||||
let circular_prgoress = 0;
|
||||
let circular_progress = 0;
|
||||
$: {
|
||||
try {
|
||||
circular_prgoress = 1 - ((100 / question.time) * parseInt(timer_res)) / 100;
|
||||
circular_progress = 1 - ((100 / question.time) * parseInt(timer_res)) / 100;
|
||||
} catch {
|
||||
circular_prgoress = 0;
|
||||
circular_progress = 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,22 +144,22 @@ SPDX-License-Identifier: MPL-2.0
|
||||
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||
</script>
|
||||
|
||||
<div class="h-screen w-screen">
|
||||
<div class='h-screen w-screen'>
|
||||
{#if game_mode === 'normal'}
|
||||
<div
|
||||
class="flex flex-col justify-start"
|
||||
class='flex flex-col justify-start'
|
||||
style="height: {question.image ? '33.333333' : '16.666667'}%"
|
||||
>
|
||||
<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}
|
||||
</h1>
|
||||
{#if question.image !== null && game_mode !== 'kahoot'}
|
||||
<div class="max-h-full">
|
||||
<div class='max-h-full'>
|
||||
<MediaComponent
|
||||
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>
|
||||
{/if}
|
||||
@@ -167,84 +167,94 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{/if}
|
||||
{#if timer_res !== '0'}
|
||||
{#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
|
||||
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
|
||||
bind:text={timer_res}
|
||||
bind:progress={circular_prgoress}
|
||||
color="#ef4444"
|
||||
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}
|
||||
<button
|
||||
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black"
|
||||
style="background-color: {answer.color ??
|
||||
class='rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black'
|
||||
style='background-color: {answer.color ??
|
||||
default_colors[i]}; color: {get_foreground_color(
|
||||
answer.color ?? default_colors[i]
|
||||
)}"
|
||||
)}'
|
||||
disabled={selected_answer !== undefined}
|
||||
on:click={() => selectAnswer(answer.answer)}
|
||||
>
|
||||
{#if game_mode === 'kahoot'}
|
||||
<img
|
||||
class="h-2/3 inline-block m-auto"
|
||||
alt="Icon"
|
||||
class='h-2/3 inline-block m-auto'
|
||||
alt='Icon'
|
||||
src={kahoot_icons[i]}
|
||||
/>
|
||||
{:else}
|
||||
<p class="m-auto">{answer.answer}</p>
|
||||
<p class='m-auto'>{answer.answer}</p>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{: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')}
|
||||
<Spinner />
|
||||
{: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
|
||||
this={c.default}
|
||||
bind:values={slider_value}
|
||||
bind:min={question.answers.min}
|
||||
bind:max={question.answers.max}
|
||||
id="pips-slider"
|
||||
id='pips-slider'
|
||||
pips
|
||||
float
|
||||
all="label"
|
||||
all='label'
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class="w-1/2">
|
||||
<div class='flex justify-center'>
|
||||
<div class='w-1/2'>
|
||||
<BrownButton
|
||||
disabled={selected_answer !== undefined}
|
||||
on:click={() => selectAnswer(slider_value[0])}
|
||||
>{$t('words.submit')}
|
||||
>{$t('words.submit')}
|
||||
</BrownButton>
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
{:else if question.type === QuizQuestionType.TEXT}
|
||||
<div class="flex justify-center">
|
||||
<p class="text-black dark:text-white">Enter your answer</p>
|
||||
<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 justify-center mt-10'>
|
||||
<p class='text-black dark:text-white'>Enter your answer</p>
|
||||
</div>
|
||||
<div class="flex justify-center m-2">
|
||||
<div class='flex justify-center m-2'>
|
||||
<input
|
||||
type="text"
|
||||
type='text'
|
||||
bind:value={text_input}
|
||||
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 class="flex justify-center mt-2">
|
||||
<div class="w-1/3">
|
||||
<div class='flex justify-center mt-2'>
|
||||
<div class='w-1/3'>
|
||||
<BrownButton
|
||||
type="button"
|
||||
type='button'
|
||||
disabled={selected_answer}
|
||||
on:click={() => {
|
||||
selectAnswer(text_input);
|
||||
@@ -258,9 +268,9 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#if solution === undefined}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<p class="text-center">
|
||||
<p class='text-center'>
|
||||
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}
|
||||
correct
|
||||
{:else}
|
||||
@@ -272,10 +282,15 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<!-- {#if solution === undefined}
|
||||
<Spinner />
|
||||
{: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)}
|
||||
<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 }}
|
||||
style="background-color: {answer.color ?? '#b07156'}"
|
||||
>
|
||||
@@ -283,59 +298,59 @@ SPDX-License-Identifier: MPL-2.0
|
||||
on:click={() => {
|
||||
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"
|
||||
type="button"
|
||||
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'
|
||||
disabled={i === 0 || selected_answer}
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
class='w-8 h-8'
|
||||
stroke-width='2'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
color='currentColor'
|
||||
>
|
||||
<path
|
||||
d="M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d='M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5'
|
||||
stroke='currentColor'
|
||||
stroke-width='2'
|
||||
stroke-linecap='round'
|
||||
stroke-linejoin='round'
|
||||
/>
|
||||
</svg>
|
||||
</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
|
||||
on:click={() => {
|
||||
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"
|
||||
type="button"
|
||||
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'
|
||||
disabled={i === question.answers.length - 1 || selected_answer}
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
class='w-8 h-8'
|
||||
stroke-width='2'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
color='currentColor'
|
||||
>
|
||||
<path
|
||||
d="M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d='M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3'
|
||||
stroke='currentColor'
|
||||
stroke-width='2'
|
||||
stroke-linecap='round'
|
||||
stroke-linejoin='round'
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="w-full mt-2">
|
||||
<div class='w-full mt-2'>
|
||||
<BrownButton
|
||||
type="button"
|
||||
type='button'
|
||||
disabled={selected_answer}
|
||||
on:click={() => {
|
||||
select_complex_answer(question.answers);
|
||||
@@ -353,13 +368,15 @@ SPDX-License-Identifier: MPL-2.0
|
||||
bind:question
|
||||
bind:selected_answer
|
||||
bind:game_mode
|
||||
{timer_res}
|
||||
{circular_progress}
|
||||
/>
|
||||
<div class="flex justify-center h-[5%]">
|
||||
<div class="w-1/2">
|
||||
<div class='flex justify-center h-[5%]'>
|
||||
<div class='w-1/2'>
|
||||
<BrownButton
|
||||
disabled={!selected_answer}
|
||||
on:click={() => selectAnswer(selected_answer)}
|
||||
>{$t('words.submit')}
|
||||
>{$t('words.submit')}
|
||||
</BrownButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,15 +4,20 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
|
||||
SPDX-License-Identifier: MPL-2.0
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
<script lang='ts'>
|
||||
import type { Question } from '$lib/quiz_types';
|
||||
import { get_foreground_color } from '$lib/helpers';
|
||||
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';
|
||||
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||
export let question: Question;
|
||||
export let selected_answer = '';
|
||||
export let game_mode;
|
||||
|
||||
export let timer_res
|
||||
|
||||
export let circular_progress
|
||||
let _selected_answers = [false, false, false, false];
|
||||
|
||||
const selectAnswer = (i: number) => {
|
||||
@@ -28,7 +33,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="w-full h-[95%]">
|
||||
<div class='w-full h-[95%]'>
|
||||
<!--
|
||||
<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"
|
||||
@@ -40,23 +45,33 @@ SPDX-License-Identifier: MPL-2.0
|
||||
/>
|
||||
</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}
|
||||
<button
|
||||
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 ??
|
||||
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 ??
|
||||
default_colors[i]}; color: {get_foreground_color(
|
||||
answer.color ?? default_colors[i]
|
||||
)}"
|
||||
)}'
|
||||
on:click={() => selectAnswer(i)}
|
||||
class:opacity-100={_selected_answers[i]}
|
||||
class:opacity-50={!_selected_answers[i]}
|
||||
>
|
||||
{#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}
|
||||
<p class="m-auto">{answer.answer}</p>
|
||||
<p class='m-auto'>{answer.answer}</p>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user