|
|
|
@@ -1,4 +1,4 @@
|
|
|
|
|
<script lang="ts" context="module">
|
|
|
|
|
<script lang='ts' context='module'>
|
|
|
|
|
export async function load({ params, fetch, session }) {
|
|
|
|
|
const { quiz_id } = params;
|
|
|
|
|
const res = await fetch(`/api/v1/quiz/get/public/${quiz_id}`);
|
|
|
|
@@ -22,7 +22,7 @@
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
<script lang='ts'>
|
|
|
|
|
import { getLocalization } from '$lib/i18n';
|
|
|
|
|
import CollapsSection from '$lib/collapsible.svelte';
|
|
|
|
|
import { createTippy } from 'svelte-tippy';
|
|
|
|
@@ -81,15 +81,15 @@
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h1 class="text-4xl text-center">{quiz.title}</h1>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
<h1 class='text-4xl text-center'>{quiz.title}</h1>
|
|
|
|
|
<div class='text-center'>
|
|
|
|
|
<p>{quiz.description}</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center m-8">
|
|
|
|
|
<div class='flex justify-center m-8'>
|
|
|
|
|
{#if logged_in}
|
|
|
|
|
<button
|
|
|
|
|
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
|
|
|
class='px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
|
|
|
|
|
on:click={() => {
|
|
|
|
|
startGame(quiz.id);
|
|
|
|
|
}}
|
|
|
|
@@ -98,40 +98,46 @@
|
|
|
|
|
</button>
|
|
|
|
|
{:else}
|
|
|
|
|
<button
|
|
|
|
|
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none cursor-not-allowed opacity-50"
|
|
|
|
|
class='px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none cursor-not-allowed opacity-50'
|
|
|
|
|
use:tippy={{ content: 'You need to be logged in to start a game' }}
|
|
|
|
|
>
|
|
|
|
|
{$t('words.start')}
|
|
|
|
|
</button>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class='flex justify-center'>
|
|
|
|
|
<a href='mailto:report@mawoka.eu?subject=Report quiz {quiz.id}' class='text-sm underline'>
|
|
|
|
|
{$t('words.report')}
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
{#each quiz.questions as question, index_question}
|
|
|
|
|
<div class="px-4 py-1">
|
|
|
|
|
<div class='px-4 py-1'>
|
|
|
|
|
<CollapsSection headerText={question.question}>
|
|
|
|
|
<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2">
|
|
|
|
|
<h1 class="text-3xl m-1">{$t('words.question')} {index_question + 1}</h1>
|
|
|
|
|
<div class='ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2'>
|
|
|
|
|
<h1 class='text-3xl m-1'>{$t('words.question')} {index_question + 1}</h1>
|
|
|
|
|
|
|
|
|
|
<!-- <label class='m-1 flex flex-row gap-2 w-3/5'>-->
|
|
|
|
|
<p class="text-black w-full bg-inherit">
|
|
|
|
|
<p class='text-black w-full bg-inherit'>
|
|
|
|
|
{$t('words.question')}: {question.question}
|
|
|
|
|
</p>
|
|
|
|
|
<!-- </label>-->
|
|
|
|
|
{#if question.image}
|
|
|
|
|
<span>
|
|
|
|
|
{$t('words.image')}:
|
|
|
|
|
<img class="pl-8" src={question.image} alt="Not provided" />
|
|
|
|
|
<img class='pl-8' src={question.image} alt='Not provided' />
|
|
|
|
|
</span>
|
|
|
|
|
{/if}
|
|
|
|
|
<span class="m-1 flex flex-row gap-2 w-3/5 flex-nowrap whitespace-nowrap">
|
|
|
|
|
<span class='m-1 flex flex-row gap-2 w-3/5 flex-nowrap whitespace-nowrap'>
|
|
|
|
|
{$t('editor.time_in_seconds')}:
|
|
|
|
|
<p>{question.time}</p>
|
|
|
|
|
</span>
|
|
|
|
|
{#each question.answers as answer, index_answer}
|
|
|
|
|
<div
|
|
|
|
|
class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2 m-1"
|
|
|
|
|
class='ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2 m-1'
|
|
|
|
|
>
|
|
|
|
|
<h1 class="text-3xl m-1">{$t('words.answer')} {index_answer + 1}</h1>
|
|
|
|
|
<p class="m-1">
|
|
|
|
|
<h1 class='text-3xl m-1'>{$t('words.answer')} {index_answer + 1}</h1>
|
|
|
|
|
<p class='m-1'>
|
|
|
|
|
{$t('words.answer')}: {index_answer + 1}
|
|
|
|
|
{$t('words.question')}: {index_question + 1}
|
|
|
|
|
</p>
|
|
|
|
@@ -140,15 +146,15 @@
|
|
|
|
|
: {quiz.questions[index_question].answers[index_answer].answer}
|
|
|
|
|
</p>
|
|
|
|
|
<label
|
|
|
|
|
class="m-1 flex flex-row gap-2 w-2/6 flex-nowrap whitespace-nowrap"
|
|
|
|
|
class='m-1 flex flex-row gap-2 w-2/6 flex-nowrap whitespace-nowrap'
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
type='checkbox'
|
|
|
|
|
bind:checked={answer.right}
|
|
|
|
|
class="text-black w-fit"
|
|
|
|
|
class='text-black w-fit'
|
|
|
|
|
disabled
|
|
|
|
|
/>
|
|
|
|
|
<span class="w-fit">{$t('editor.right_or_true?')}</span>
|
|
|
|
|
<span class='w-fit'>{$t('editor.right_or_true?')}</span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
{/each}
|
|
|
|
|