Mawoka
89 lines
2.1 KiB
Svelte
89 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import type { Question } from '../../app';
|
|
import { socket } from '$lib/socket';
|
|
|
|
export let question: Question;
|
|
export let question_index: string | number;
|
|
|
|
if (typeof question_index === 'string') {
|
|
question_index = parseInt(question_index);
|
|
} else {
|
|
throw new Error('question_index must be a string or number');
|
|
}
|
|
|
|
let timer_res = question.time;
|
|
let selected_answer: string;
|
|
|
|
// Stop the timer if the question is answered
|
|
const timer = (time: string) => {
|
|
let seconds = Number(time);
|
|
let timer_interval = setInterval(() => {
|
|
if (timer_res === '0') {
|
|
clearInterval(timer_interval);
|
|
return;
|
|
} else {
|
|
seconds--;
|
|
}
|
|
|
|
timer_res = seconds.toString();
|
|
}, 1000);
|
|
};
|
|
console.log(selected_answer);
|
|
|
|
timer(question.time);
|
|
|
|
const selectAnswer = (answer: string) => {
|
|
selected_answer = answer;
|
|
//timer_res = '0';
|
|
socket.emit('submit_answer', {
|
|
question_index: question_index,
|
|
answer: answer
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<div class="flex flex-col justify-center w-screen h-1/6">
|
|
<h1 class="text-6xl text-center">
|
|
{question.question}
|
|
</h1>
|
|
<span class="text-center py-2 text-lg">{timer_res}</span>
|
|
</div>
|
|
{#if question.image !== null}
|
|
<div>
|
|
<img
|
|
src={question.image}
|
|
class="h-2/5 object-cover mx-auto mb-8"
|
|
alt="Content for Question"
|
|
/>
|
|
</div>
|
|
{/if}
|
|
{#if timer_res !== '0'}
|
|
<div class="flex flex-wrap">
|
|
{#each question.answers as answer}
|
|
<button
|
|
class="w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white"
|
|
disabled={selected_answer !== undefined}
|
|
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
|
|
>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="flex flex-wrap">
|
|
{#each question.answers as answer}
|
|
{#if answer.right}
|
|
<button
|
|
class="w-1/2 text-3xl bg-green-600 border border-white"
|
|
disabled
|
|
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
|
|
>
|
|
{:else}
|
|
<button
|
|
class="w-1/2 text-3xl bg-red-500 border border-white"
|
|
disabled
|
|
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
|
|
>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{/if}
|