✨ Closes #138
This commit is contained in:
Mawoka
@@ -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 { getLocalization } from '$lib/i18n';
|
import { getLocalization } from '$lib/i18n';
|
||||||
import CollapsSection from '$lib/collapsible.svelte';
|
import CollapsSection from '$lib/collapsible.svelte';
|
||||||
import { createTippy } from 'svelte-tippy';
|
import { createTippy } from 'svelte-tippy';
|
||||||
@@ -18,6 +18,9 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
import RatingComponent from '$lib/view_quiz/RatingComponent.svelte';
|
import RatingComponent from '$lib/view_quiz/RatingComponent.svelte';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import ModComponent from './ModComponent.svelte';
|
import ModComponent from './ModComponent.svelte';
|
||||||
|
import { get_foreground_color } from '$lib/helpers.ts';
|
||||||
|
|
||||||
|
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||||
|
|
||||||
const tippy = createTippy({
|
const tippy = createTippy({
|
||||||
arrow: true,
|
arrow: true,
|
||||||
@@ -76,48 +79,48 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-4xl text-center">{@html quiz.title}</h1>
|
<h1 class='text-4xl text-center'>{@html quiz.title}</h1>
|
||||||
<div class="text-center">
|
<div class='text-center'>
|
||||||
<p>{@html quiz.description}</p>
|
<p>{@html quiz.description}</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-center">
|
<p class='text-center'>
|
||||||
{$t('view_quiz_page.made_by')}
|
{$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>
|
</p>
|
||||||
{#if quiz.cover_image}
|
{#if quiz.cover_image}
|
||||||
<div class="flex justify-center align-middle items-center">
|
<div class='flex justify-center align-middle items-center'>
|
||||||
<div class="h-[15vh] m-auto w-auto my-3">
|
<div class='h-[15vh] m-auto w-auto my-3'>
|
||||||
<img
|
<img
|
||||||
class="max-h-full max-w-full block"
|
class='max-h-full max-w-full block'
|
||||||
src="/api/v1/storage/download/{quiz.cover_image}"
|
src='/api/v1/storage/download/{quiz.cover_image}'
|
||||||
alt="Not provided"
|
alt='Not provided'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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} />
|
<ImportedOrNot imported={quiz.imported_from_kahoot} />
|
||||||
</div>
|
</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 />
|
<RatingComponent bind:quiz />
|
||||||
{#if mod_view}
|
{#if mod_view}
|
||||||
<ModComponent autoReturn={auto_return} quiz_id={quiz.id} />
|
<ModComponent autoReturn={auto_return} quiz_id={quiz.id} />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-center">
|
<div class='flex flex-col justify-center'>
|
||||||
<div class="mx-auto flex flex-col gap-2 justify-center w-fit">
|
<div class='mx-auto flex flex-col gap-2 justify-center w-fit'>
|
||||||
{#if quiz.imported_from_kahoot && quiz.kahoot_id}
|
{#if quiz.imported_from_kahoot && quiz.kahoot_id}
|
||||||
<div class="w-full">
|
<div class='w-full'>
|
||||||
<GrayButton
|
<GrayButton
|
||||||
href="https://create.kahoot.it/details/{quiz.kahoot_id}"
|
href='https://create.kahoot.it/details/{quiz.kahoot_id}'
|
||||||
target="_blank"
|
target='_blank'
|
||||||
>
|
>
|
||||||
{$t('view_quiz_page.view_on_kahoot')}
|
{$t('view_quiz_page.view_on_kahoot')}
|
||||||
</GrayButton>
|
</GrayButton>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if logged_in}
|
{#if logged_in}
|
||||||
<div class="w-full">
|
<div class='w-full'>
|
||||||
<GrayButton
|
<GrayButton
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
start_game = quiz.id;
|
start_game = quiz.id;
|
||||||
@@ -126,76 +129,76 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
>
|
>
|
||||||
<!-- heroicons/legacy-outline/Play -->
|
<!-- heroicons/legacy-outline/Play -->
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5"
|
class='w-5 h-5'
|
||||||
aria-hidden="true"
|
aria-hidden='true'
|
||||||
fill="none"
|
fill='none'
|
||||||
stroke="currentColor"
|
stroke='currentColor'
|
||||||
stroke-width="2"
|
stroke-width='2'
|
||||||
viewBox="0 0 24 24"
|
viewBox='0 0 24 24'
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
>
|
>
|
||||||
<path
|
<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"
|
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-linecap='round'
|
||||||
stroke-linejoin="round"
|
stroke-linejoin='round'
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
|
||||||
stroke-linecap="round"
|
stroke-linecap='round'
|
||||||
stroke-linejoin="round"
|
stroke-linejoin='round'
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</GrayButton>
|
</GrayButton>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div use:tippy={{ content: 'You need to be logged in to start a game' }}>
|
<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}>
|
<GrayButton disabled={true} flex={true}>
|
||||||
<!-- heroicons/legacy-outline/Play -->
|
<!-- heroicons/legacy-outline/Play -->
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5"
|
class='w-5 h-5'
|
||||||
aria-hidden="true"
|
aria-hidden='true'
|
||||||
fill="none"
|
fill='none'
|
||||||
stroke="currentColor"
|
stroke='currentColor'
|
||||||
stroke-width="2"
|
stroke-width='2'
|
||||||
viewBox="0 0 24 24"
|
viewBox='0 0 24 24'
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
>
|
>
|
||||||
<path
|
<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"
|
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-linecap='round'
|
||||||
stroke-linejoin="round"
|
stroke-linejoin='round'
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
|
||||||
stroke-linecap="round"
|
stroke-linecap='round'
|
||||||
stroke-linejoin="round"
|
stroke-linejoin='round'
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</GrayButton>
|
</GrayButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="w-full">
|
<div class='w-full'>
|
||||||
<GrayButton href="/practice?quiz_id={quiz.id}">
|
<GrayButton href='/practice?quiz_id={quiz.id}'>
|
||||||
{$t('words.practice')}
|
{$t('words.practice')}
|
||||||
</GrayButton>
|
</GrayButton>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class='w-full'>
|
||||||
{#if logged_in}
|
{#if logged_in}
|
||||||
<GrayButton flex={true} href="/api/v1/eximport/{quiz.id}">
|
<GrayButton flex={true} href='/api/v1/eximport/{quiz.id}'>
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5 inline-block"
|
class='w-5 h-5 inline-block'
|
||||||
fill="none"
|
fill='none'
|
||||||
stroke="currentColor"
|
stroke='currentColor'
|
||||||
viewBox="0 0 24 24"
|
viewBox='0 0 24 24'
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap='round'
|
||||||
stroke-linejoin="round"
|
stroke-linejoin='round'
|
||||||
stroke-width="2"
|
stroke-width='2'
|
||||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
{$t('words.download')}
|
{$t('words.download')}
|
||||||
@@ -204,17 +207,17 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
<div use:tippy={{ content: 'You need to be logged in to download a game' }}>
|
<div use:tippy={{ content: 'You need to be logged in to download a game' }}>
|
||||||
<GrayButton disabled={true} flex={true}>
|
<GrayButton disabled={true} flex={true}>
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5 inline-block"
|
class='w-5 h-5 inline-block'
|
||||||
fill="none"
|
fill='none'
|
||||||
stroke="currentColor"
|
stroke='currentColor'
|
||||||
viewBox="0 0 24 24"
|
viewBox='0 0 24 24'
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap='round'
|
||||||
stroke-linejoin="round"
|
stroke-linejoin='round'
|
||||||
stroke-width="2"
|
stroke-width='2'
|
||||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
{$t('words.download')}
|
{$t('words.download')}
|
||||||
@@ -223,10 +226,10 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-center">
|
<div class='flex justify-center'>
|
||||||
<a
|
<a
|
||||||
href="mailto:report@mawoka.eu?subject=Report quiz {quiz.id}"
|
href='mailto:report@mawoka.eu?subject=Report quiz {quiz.id}'
|
||||||
class="text-sm underline"
|
class='text-sm underline'
|
||||||
>
|
>
|
||||||
{$t('words.report')}
|
{$t('words.report')}
|
||||||
</a>
|
</a>
|
||||||
@@ -234,10 +237,10 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#each quiz.questions as question, index_question}
|
{#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}>
|
<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">
|
<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">
|
<h3 class='text-3xl m-1 text-center'>
|
||||||
{index_question + 1}: {@html question.question}
|
{index_question + 1}: {@html question.question}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
@@ -247,41 +250,47 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
{#if question.image}
|
{#if question.image}
|
||||||
<span>
|
<span>
|
||||||
<MediaComponent
|
<MediaComponent
|
||||||
css_classes="mx-auto"
|
css_classes='mx-auto'
|
||||||
src={question.image}
|
src={question.image}
|
||||||
alt="Not provided"
|
|
||||||
muted={true}
|
muted={true}
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
<p
|
<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
|
<svg
|
||||||
class="w-8 h-8 inline-block"
|
class='w-8 h-8 inline-block'
|
||||||
fill="none"
|
fill='none'
|
||||||
stroke="currentColor"
|
stroke='currentColor'
|
||||||
viewBox="0 0 24 24"
|
viewBox='0 0 24 24'
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap='round'
|
||||||
stroke-linejoin="round"
|
stroke-linejoin='round'
|
||||||
stroke-width="2"
|
stroke-width='2'
|
||||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="text-lg">{question.time}s</span>
|
<span class='text-lg'>{question.time}s</span>
|
||||||
</p>
|
</p>
|
||||||
{#if question.type === QuizQuestionType.ABCD || question.type === undefined || question.type === QuizQuestionType.CHECK}
|
{#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}
|
{#each question.answers as answer, index_answer}
|
||||||
<div
|
<div
|
||||||
class="p-1 rounded-lg py-4"
|
class='p-1 rounded-lg py-4 shadow-xl'
|
||||||
class:bg-green-500={answer.right}
|
style='background-color: {answer.color ??
|
||||||
class:bg-red-500={!answer.right}
|
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]
|
{quiz.questions[index_question].answers[index_answer]
|
||||||
.answer}
|
.answer}
|
||||||
</h4>
|
</h4>
|
||||||
@@ -289,26 +298,26 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{:else if question.type === QuizQuestionType.RANGE}
|
{: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}
|
All numbers between {question.answers.min_correct}
|
||||||
and {question.answers.max_correct} are correct, where numbers between {question
|
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>
|
</p>
|
||||||
{:else if question.type === QuizQuestionType.ORDER}
|
{: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}
|
{#each question.answers as answer}
|
||||||
<li class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300">
|
<li class='p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300'>
|
||||||
<h4 class="text-center">
|
<h4 class='text-center'>
|
||||||
{answer.answer}
|
{answer.answer}
|
||||||
</h4>
|
</h4>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
|
{: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}
|
{#each question.answers as answer, index_answer}
|
||||||
<div class="p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300">
|
<div class='p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300'>
|
||||||
<h4 class="text-center">
|
<h4 class='text-center'>
|
||||||
{quiz.questions[index_question].answers[index_answer]
|
{quiz.questions[index_question].answers[index_answer]
|
||||||
.answer}
|
.answer}
|
||||||
</h4>
|
</h4>
|
||||||
@@ -319,7 +328,7 @@ SPDX-License-Identifier: MPL-2.0
|
|||||||
{#await import('$lib/play/admin/slide.svelte')}
|
{#await import('$lib/play/admin/slide.svelte')}
|
||||||
<Spinner my={false} />
|
<Spinner my={false} />
|
||||||
{:then c}
|
{: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 />
|
<svelte:component this={c.default} bind:question />
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
{/await}
|
||||||
|
|||||||
Reference in New Issue
Block a user