✨ New timer, kahoot-like-mode icons and more small improvements
This commit is contained in:
Mawoka
+195
-134
@@ -11,6 +11,7 @@
|
||||
import { socket } from './socket';
|
||||
import { QuizQuestionType } from '$lib/quiz_types';
|
||||
import { kahoot_icons } from './play/kahoot_mode_assets/kahoot_icons';
|
||||
import CircularTimer from '$lib/play/circular_progress.svelte';
|
||||
|
||||
export let game_token: string;
|
||||
export let quiz_data: QuizData;
|
||||
@@ -27,7 +28,7 @@
|
||||
|
||||
console.log(quiz_data);
|
||||
|
||||
const set_question_number = (q_number: number) => {
|
||||
export const set_question_number = (q_number: number) => {
|
||||
question_results = null;
|
||||
socket.emit('set_question_number', q_number.toString());
|
||||
shown_question_now = q_number;
|
||||
@@ -74,145 +75,205 @@
|
||||
timer_res = seconds.toString();
|
||||
}, 1000);
|
||||
};
|
||||
let circular_prgoress = 0;
|
||||
$: {
|
||||
try {
|
||||
circular_prgoress =
|
||||
1 -
|
||||
((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100;
|
||||
} catch {}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if timer_res !== undefined && !final_results_clicked}
|
||||
<div class="flex flex-col justify-center w-screen h-1/6">
|
||||
<h1 class="text-6xl text-center">
|
||||
{quiz_data.questions[selected_question].question}
|
||||
</h1>
|
||||
<span class="text-center py-2 text-lg">{$t('admin_page.time_left')}: {timer_res}</span>
|
||||
</div>
|
||||
{#if quiz_data.questions[selected_question].image !== null}
|
||||
<div>
|
||||
<img
|
||||
src={quiz_data.questions[selected_question].image}
|
||||
class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
|
||||
alt="Content for Question"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if game_mode === 'kahoot'}
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
|
||||
<div class="grid grid-cols-2 gap-2 w-full p-4">
|
||||
{#each quiz_data.questions[selected_question].answers as answer, i}
|
||||
<div
|
||||
class="rounded-lg h-fit flex align-middle"
|
||||
style="background-color: {answer.color ?? '#B45309'}"
|
||||
>
|
||||
<img class="w-10 inline-block" alt="icon" src={kahoot_icons[i]} />
|
||||
<span class="text-center text-2xl px-2 py-4">{answer.answer}</span>
|
||||
</div>
|
||||
{/each}
|
||||
{#if game_mode === 'kahoot'}
|
||||
<div class="fixed top-0 w-full h-14 bg-transparent z-20 grid grid-cols-3">
|
||||
<p class="mr-auto ml-0 col-start-1 col-end-1">
|
||||
{selected_question === -1 ? '0' : selected_question + 1}
|
||||
/{quiz_data.questions.length}
|
||||
</p>
|
||||
{#if selected_question >= 0}
|
||||
<div class="flex justify-center flex-col my-auto col-start-2 col-end-2">
|
||||
<h2 class="text-center">{quiz_data.questions[selected_question].question}</h2>
|
||||
<p class="w-full text-center">{timer_res}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
<br />
|
||||
{#if timer_res === '0'}
|
||||
{#if question_results === null}
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
|
||||
<button
|
||||
on:click={get_question_results}
|
||||
id="GetQuestionResults"
|
||||
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"
|
||||
>{$t('admin_page.get_results')}</button
|
||||
>
|
||||
on:click={() => {
|
||||
set_question_number(selected_question + 1);
|
||||
}}
|
||||
>Next Question ({selected_question + 2}
|
||||
)
|
||||
</button>
|
||||
</div>
|
||||
{:else if question_results === undefined}
|
||||
{#if !final_results_clicked}
|
||||
<div class="w-full flex justify-center">
|
||||
<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
|
||||
</div>
|
||||
{#if timer_res !== '0' && selected_question >= 0}
|
||||
<span
|
||||
class="fixed top-0 bg-red-500 h-10 transition-all mt-14"
|
||||
style="width: {(100 / quiz_data.questions[selected_question].time) *
|
||||
parseInt(timer_res)}vw"
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class:mt-28={game_mode === 'kahoot'} class="w-full h-full">
|
||||
{#if timer_res !== undefined && !final_results_clicked}
|
||||
<div class="flex flex-col justify-center w-screen h-1/6">
|
||||
<h1 class="text-6xl text-center">
|
||||
{quiz_data.questions[selected_question].question}
|
||||
</h1>
|
||||
<!-- <span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
|
||||
<div class="mx-auto my-2">
|
||||
<CircularTimer
|
||||
bind:text={timer_res}
|
||||
bind:progress={circular_prgoress}
|
||||
color="#ef4444"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if quiz_data.questions[selected_question].image !== null}
|
||||
<div>
|
||||
<img
|
||||
src={quiz_data.questions[selected_question].image}
|
||||
class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
|
||||
alt="Content for Question"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="relative overflow-x-auto shadow-md rounded-lg">
|
||||
<table class="w-fit text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<thead
|
||||
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
|
||||
>
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
{$t('words.username')}
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
{$t('words.answer')}
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
{$t('words.correct')}?
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each question_results as result}
|
||||
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
||||
<th
|
||||
scope="row"
|
||||
class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
|
||||
>
|
||||
{result.username}
|
||||
</th>
|
||||
<td class="px-6 py-4">
|
||||
{result.answer}
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
{#if result.right}
|
||||
✅
|
||||
{:else}
|
||||
❌
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{#if game_mode === 'kahoot'}
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
|
||||
<div class="grid grid-cols-2 gap-2 w-full p-4">
|
||||
{#each quiz_data.questions[selected_question].answers as answer, i}
|
||||
<div
|
||||
class="rounded-lg h-fit flex"
|
||||
style="background-color: {answer.color ?? '#B45309'}"
|
||||
>
|
||||
<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
|
||||
<span class="text-center text-2xl px-2 py-4 w-full"
|
||||
>{answer.answer}</span
|
||||
>
|
||||
<span class="pl-4 w-10" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
{:else if timer_res !== undefined}
|
||||
<div class="w-full flex justify-center">
|
||||
<button
|
||||
on:click={get_question_results}
|
||||
id="GetQuestionResultsAndStopTime"
|
||||
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"
|
||||
>{$t('admin_page.get_results_and_stop_time')}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
<br />
|
||||
{#if get_question_title(selected_question + 1, quiz_data) !== '' && selected_question + 1 !== 0}
|
||||
<div class="w-full flex justify-center">
|
||||
<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"
|
||||
disabled={!(timer_res === undefined || timer_res === '0')}
|
||||
id="SetQuestionNumber"
|
||||
on:click={() => {
|
||||
set_question_number(selected_question + 1);
|
||||
}}
|
||||
>{$t('admin_page.show_next_question')}: {get_question_title(
|
||||
selected_question + 1,
|
||||
quiz_data
|
||||
)}</button
|
||||
>
|
||||
</div>
|
||||
{:else if selected_question + 1 === 0}
|
||||
<div class="w-full flex justify-center">
|
||||
<button
|
||||
on:click={() => {
|
||||
set_question_number(0);
|
||||
}}
|
||||
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"
|
||||
>
|
||||
{$t('admin_page.start_by_showing_first_question')}
|
||||
</button>
|
||||
</div>
|
||||
{:else if final_results_clicked === false}
|
||||
<div class="w-screen flex justify-center">
|
||||
<button
|
||||
on:click={get_final_results}
|
||||
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"
|
||||
>{$t('admin_page.get_final_results')}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
<br />
|
||||
{#if timer_res === '0'}
|
||||
{#if question_results === null}
|
||||
{#if game_mode === 'normal'}
|
||||
<div class="w-full flex justify-center">
|
||||
<button
|
||||
on:click={get_question_results}
|
||||
id="GetQuestionResults"
|
||||
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"
|
||||
>{$t('admin_page.get_results')}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if question_results === undefined}
|
||||
{#if !final_results_clicked}
|
||||
<div class="w-full flex justify-center">
|
||||
<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="relative overflow-x-auto shadow-md rounded-lg">
|
||||
<table class="w-fit text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<thead
|
||||
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
|
||||
>
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
{$t('words.username')}
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
{$t('words.answer')}
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3">
|
||||
{$t('words.correct')}?
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each question_results as result}
|
||||
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
||||
<th
|
||||
scope="row"
|
||||
class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
|
||||
>
|
||||
{result.username}
|
||||
</th>
|
||||
<td class="px-6 py-4">
|
||||
{result.answer}
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
{#if result.right}
|
||||
✅
|
||||
{:else}
|
||||
❌
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if timer_res !== undefined}
|
||||
{#if game_mode === 'normal'}
|
||||
<div class="w-full flex justify-center">
|
||||
<button
|
||||
on:click={get_question_results}
|
||||
id="GetQuestionResultsAndStopTime"
|
||||
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"
|
||||
>{$t('admin_page.get_results_and_stop_time')}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
<br />
|
||||
{#if get_question_title(selected_question + 1, quiz_data) !== '' && selected_question + 1 !== 0}
|
||||
{#if game_mode === 'normal'}
|
||||
<div class="w-full flex justify-center">
|
||||
<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"
|
||||
disabled={!(timer_res === undefined || timer_res === '0')}
|
||||
id="SetQuestionNumber"
|
||||
on:click={() => {
|
||||
set_question_number(selected_question + 1);
|
||||
}}
|
||||
>{$t('admin_page.show_next_question')}: {get_question_title(
|
||||
selected_question + 1,
|
||||
quiz_data
|
||||
)}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if selected_question + 1 === 0}
|
||||
{#if game_mode === 'normal'}
|
||||
<div class="w-full flex justify-center">
|
||||
<button
|
||||
on:click={() => {
|
||||
set_question_number(0);
|
||||
}}
|
||||
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"
|
||||
>
|
||||
{$t('admin_page.start_by_showing_first_question')}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if final_results_clicked === false}
|
||||
{#if game_mode === 'normal'}
|
||||
<div class="w-screen flex justify-center">
|
||||
<button
|
||||
on:click={get_final_results}
|
||||
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"
|
||||
>{$t('admin_page.get_final_results')}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user