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

Formatted code

Browse Source
This commit is contained in:
Mawoka
2023-10-21 22:18:13 +02:00
parent 91c74bbb87
commit 5774dc20b7
4 changed files with 195 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/admin/game_not_started.svelte
+3 -3
View File
@@ -9,14 +9,14 @@ SPDX-License-Identifier: MPL-2.0
import ControllerCodeDisplay from '$lib/components/controller/code.svelte';
import { getLocalization } from '$lib/i18n';
import GrayButton from '$lib/components/buttons/gray.svelte';
import {fade} from 'svelte/transition';
import { fade } from 'svelte/transition';
export let game_pin: string;
export let players;
export let socket;
export let cqc_code: string;
let fullscreen_open = false
let fullscreen_open = false;
const { t } = getLocalization();
let play_music = false;
@@ -52,7 +52,7 @@ SPDX-License-Identifier: MPL-2.0
</p>
</div>
<img
on:click={() => fullscreen_open = true}
on:click={() => (fullscreen_open = true)}
alt="QR code to join the game"
src="/api/v1/utils/qr/{game_pin}"
class="block mx-auto w-1/2 dark:bg-white shadow-2xl rounded hover:cursor-pointer"
frontend/src/lib/play/question.svelte
+75 -78
View File
@@ -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';
@@ -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,36 +167,36 @@ 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_progress}
color='#ef4444'
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}
@@ -204,57 +204,55 @@ SPDX-License-Identifier: MPL-2.0
</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'
/>
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-24'>
<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}
<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>
<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);
@@ -268,9 +266,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}
@@ -283,14 +281,13 @@ SPDX-License-Identifier: MPL-2.0
<Spinner />
{:else}-->
<span
class='fixed top-0 bg-red-500 h-8 transition-all'
style='width: {(100 / parseInt(question.time)) *
parseInt(timer_res)}vw'
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'>
<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'}"
>
@@ -298,59 +295,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);
@@ -371,12 +368,12 @@ SPDX-License-Identifier: MPL-2.0
{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>
frontend/src/lib/play/questions/check.svelte
+12 -17
View File
@@ -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 { get_foreground_color } from '$lib/helpers';
import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons';
@@ -15,9 +15,9 @@ SPDX-License-Identifier: MPL-2.0
export let selected_answer = '';
export let game_mode;
export let timer_res
export let timer_res;
export let circular_progress
export let circular_progress;
let _selected_answers = [false, false, false, false];
const selectAnswer = (i: number) => {
@@ -33,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"
@@ -46,32 +46,27 @@ 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'
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'
/>
<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}
frontend/src/routes/view/[quiz_id]/+page.svelte
+105 -106
View File
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0
-->
<script lang='ts'>
<script lang="ts">
import { getLocalization } from '$lib/i18n';
import CollapsSection from '$lib/collapsible.svelte';
import { createTippy } from 'svelte-tippy';
@@ -79,48 +79,48 @@ SPDX-License-Identifier: MPL-2.0
</svelte:head>
<div>
<h1 class='text-4xl text-center'>{@html quiz.title}</h1>
<div class='text-center'>
<h1 class="text-4xl text-center">{@html quiz.title}</h1>
<div class="text-center">
<p>{@html quiz.description}</p>
</div>
<p class='text-center'>
<p class="text-center">
{$t('view_quiz_page.made_by')}
<a href='/user/{quiz.user_id.id}' class='underline'>@{quiz.user_id.username}</a>
<a href="/user/{quiz.user_id.id}" class="underline">@{quiz.user_id.username}</a>
</p>
{#if quiz.cover_image}
<div class='flex justify-center align-middle items-center'>
<div class='h-[15vh] m-auto w-auto my-3'>
<div class="flex justify-center align-middle items-center">
<div class="h-[15vh] m-auto w-auto my-3">
<img
class='max-h-full max-w-full block'
src='/api/v1/storage/download/{quiz.cover_image}'
alt='Not provided'
class="max-h-full max-w-full block"
src="/api/v1/storage/download/{quiz.cover_image}"
alt="Not provided"
/>
</div>
</div>
{/if}
<div class='text-center text-sm pt-1 mb-4'>
<div class="text-center text-sm pt-1 mb-4">
<ImportedOrNot imported={quiz.imported_from_kahoot} />
</div>
<div class='flex justify-center mb-2 flex-row gap-2'>
<div class="flex justify-center mb-2 flex-row gap-2">
<RatingComponent bind:quiz />
{#if mod_view}
<ModComponent autoReturn={auto_return} quiz_id={quiz.id} />
{/if}
</div>
<div class='flex flex-col justify-center'>
<div class='mx-auto flex flex-col gap-2 justify-center w-fit'>
<div class="flex flex-col justify-center">
<div class="mx-auto flex flex-col gap-2 justify-center w-fit">
{#if quiz.imported_from_kahoot && quiz.kahoot_id}
<div class='w-full'>
<div class="w-full">
<GrayButton
href='https://create.kahoot.it/details/{quiz.kahoot_id}'
target='_blank'
href="https://create.kahoot.it/details/{quiz.kahoot_id}"
target="_blank"
>
{$t('view_quiz_page.view_on_kahoot')}
</GrayButton>
</div>
{/if}
{#if logged_in}
<div class='w-full'>
<div class="w-full">
<GrayButton
on:click={() => {
start_game = quiz.id;
@@ -129,76 +129,76 @@ SPDX-License-Identifier: MPL-2.0
>
<!-- heroicons/legacy-outline/Play -->
<svg
class='w-5 h-5'
aria-hidden='true'
fill='none'
stroke='currentColor'
stroke-width='2'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
class="w-5 h-5"
aria-hidden="true"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'
stroke-linecap='round'
stroke-linejoin='round'
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
stroke-linecap='round'
stroke-linejoin='round'
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</GrayButton>
</div>
{:else}
<div use:tippy={{ content: 'You need to be logged in to start a game' }}>
<div class='w-full'>
<div class="w-full">
<GrayButton disabled={true} flex={true}>
<!-- heroicons/legacy-outline/Play -->
<svg
class='w-5 h-5'
aria-hidden='true'
fill='none'
stroke='currentColor'
stroke-width='2'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
class="w-5 h-5"
aria-hidden="true"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'
stroke-linecap='round'
stroke-linejoin='round'
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
stroke-linecap='round'
stroke-linejoin='round'
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</GrayButton>
</div>
</div>
{/if}
<div class='w-full'>
<GrayButton href='/practice?quiz_id={quiz.id}'>
<div class="w-full">
<GrayButton href="/practice?quiz_id={quiz.id}">
{$t('words.practice')}
</GrayButton>
</div>
<div class='w-full'>
<div class="w-full">
{#if logged_in}
<GrayButton flex={true} href='/api/v1/eximport/{quiz.id}'>
<GrayButton flex={true} href="/api/v1/eximport/{quiz.id}">
<svg
class='w-5 h-5 inline-block'
fill='none'
stroke='currentColor'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
class="w-5 h-5 inline-block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='2'
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
{$t('words.download')}
@@ -207,17 +207,17 @@ SPDX-License-Identifier: MPL-2.0
<div use:tippy={{ content: 'You need to be logged in to download a game' }}>
<GrayButton disabled={true} flex={true}>
<svg
class='w-5 h-5 inline-block'
fill='none'
stroke='currentColor'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
class="w-5 h-5 inline-block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='2'
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
{$t('words.download')}
@@ -226,10 +226,10 @@ SPDX-License-Identifier: MPL-2.0
{/if}
</div>
</div>
<div class='flex justify-center'>
<div class="flex justify-center">
<a
href='mailto:report@mawoka.eu?subject=Report quiz {quiz.id}'
class='text-sm underline'
href="mailto:report@mawoka.eu?subject=Report quiz {quiz.id}"
class="text-sm underline"
>
{$t('words.report')}
</a>
@@ -237,10 +237,10 @@ SPDX-License-Identifier: MPL-2.0
</div>
{#each quiz.questions as question, index_question}
<div class='px-4 py-1'>
<div class="px-4 py-1">
<CollapsSection headerText={question.question} expanded={auto_expand}>
<div class='grid grid-cols-1 gap-2 rounded-b-lg bg-white dark:bg-gray-700 -mt-1'>
<h3 class='text-3xl m-1 text-center'>
<div class="grid grid-cols-1 gap-2 rounded-b-lg bg-white dark:bg-gray-700 -mt-1">
<h3 class="text-3xl m-1 text-center">
{index_question + 1}: {@html question.question}
</h3>
@@ -250,47 +250,46 @@ SPDX-License-Identifier: MPL-2.0
{#if question.image}
<span>
<MediaComponent
css_classes='mx-auto'
css_classes="mx-auto"
src={question.image}
muted={true}
/>
</span>
{/if}
<p
class='m-1 flex flex-row gap-2 flex-nowrap whitespace-nowrap w-full justify-center'
class="m-1 flex flex-row gap-2 flex-nowrap whitespace-nowrap w-full justify-center"
>
<svg
class='w-8 h-8 inline-block'
fill='none'
stroke='currentColor'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
class="w-8 h-8 inline-block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='2'
d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span class='text-lg'>{question.time}s</span>
<span class="text-lg">{question.time}s</span>
</p>
{#if question.type === QuizQuestionType.ABCD || question.type === undefined || question.type === QuizQuestionType.CHECK}
<div class='grid grid-cols-2 gap-4 m-4 p-6'>
<div class="grid grid-cols-2 gap-4 m-4 p-6">
{#each question.answers as answer, index_answer}
<div
class='p-1 rounded-lg py-4 shadow-xl'
style='background-color: {answer.color ??
default_colors[index_answer]}; color: {get_foreground_color(
answer.color ?? default_colors[index_answer]
)}'
class:shadow-blue-500={answer.right &&
question.type !== QuizQuestionType.VOTING}
class:shadow-yellow-500={!answer.right &&
question.type !== QuizQuestionType.VOTING}
class="p-1 rounded-lg py-4 shadow-xl"
style="background-color: {answer.color ??
default_colors[index_answer]}; color: {get_foreground_color(
answer.color ?? default_colors[index_answer]
)}"
class:shadow-blue-500={answer.right &&
question.type !== QuizQuestionType.VOTING}
class:shadow-yellow-500={!answer.right &&
question.type !== QuizQuestionType.VOTING}
>
<h4 class='text-center'>
<h4 class="text-center">
{quiz.questions[index_question].answers[index_answer]
.answer}
</h4>
@@ -298,26 +297,26 @@ SPDX-License-Identifier: MPL-2.0
{/each}
</div>
{:else if question.type === QuizQuestionType.RANGE}
<p class='m-1 text-center'>
<p class="m-1 text-center">
All numbers between {question.answers.min_correct}
and {question.answers.max_correct} are correct, where numbers between {question
.answers.min} and {question.answers.max} can be selected.
.answers.min} and {question.answers.max} can be selected.
</p>
{:else if question.type === QuizQuestionType.ORDER}
<ul class='flex flex-col gap-4 m-4 p-6'>
<ul class="flex flex-col gap-4 m-4 p-6">
{#each question.answers as answer}
<li class='p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300'>
<h4 class='text-center'>
<li class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300">
<h4 class="text-center">
{answer.answer}
</h4>
</li>
{/each}
</ul>
{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
<div class='grid grid-cols-2 gap-4 m-4 p-6'>
<div class="grid grid-cols-2 gap-4 m-4 p-6">
{#each question.answers as answer, index_answer}
<div class='p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300'>
<h4 class='text-center'>
<div class="p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300">
<h4 class="text-center">
{quiz.questions[index_question].answers[index_answer]
.answer}
</h4>
@@ -328,7 +327,7 @@ SPDX-License-Identifier: MPL-2.0
{#await import('$lib/play/admin/slide.svelte')}
<Spinner my={false} />
{:then c}
<div class='max-h-[90%] max-w-[90%]'>
<div class="max-h-[90%] max-w-[90%]">
<svelte:component this={c.default} bind:question />
</div>
{/await}