✨ 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>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let progress: number;
|
||||
export let text: string;
|
||||
export let color: string;
|
||||
let angle = 360 * progress;
|
||||
|
||||
$: angle = 360 * progress;
|
||||
$: console.log(angle);
|
||||
|
||||
// Adapt the logic according to the approach
|
||||
let background = `radial-gradient(white 50%, transparent 51%),
|
||||
conic-gradient(transparent 0deg ${angle}deg, gainsboro ${angle}deg 360deg),
|
||||
conic-gradient(green 0deg, green 90deg, green 180deg, green);`;
|
||||
|
||||
$: background = `radial-gradient(white 50%, transparent 51%),
|
||||
conic-gradient(transparent 0deg ${angle}deg, gainsboro ${angle}deg 360deg),
|
||||
conic-gradient(${color} 0deg, ${color} 90deg, ${color} 180deg, ${color});`;
|
||||
|
||||
$: cssVarStyles = `--background:${background}`;
|
||||
</script>
|
||||
|
||||
<div id="progress-circle" style={cssVarStyles} class="transition-all text-4xl">{text}</div>
|
||||
|
||||
<style>
|
||||
#progress-circle {
|
||||
background: var(--background);
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
transition: all 500ms ease-in;
|
||||
will-change: transform;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,27 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
|
||||
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.16, written by Peter Selinger 2001-2019
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M2345 4799 c-123 -28 -281 -109 -400 -207 -180 -147 -461 -492 -640
|
||||
-787 -43 -71 -84 -137 -91 -145 -19 -24 -231 -387 -359 -615 -64 -115 -134
|
||||
-237 -155 -270 -84 -134 -350 -635 -350 -659 0 -3 -16 -40 -36 -83 -66 -142
|
||||
-85 -187 -119 -278 -48 -130 -83 -251 -100 -346 -19 -109 -19 -317 0 -409 63
|
||||
-302 296 -519 677 -634 144 -43 251 -62 463 -81 94 -9 230 -22 303 -30 193
|
||||
-21 1737 -21 1995 0 332 27 538 62 730 126 276 90 474 244 571 443 63 130 76
|
||||
193 76 377 0 252 -49 426 -229 828 -133 294 -247 511 -436 826 -59 99 -128
|
||||
216 -152 260 -25 44 -76 130 -113 190 -102 168 -230 384 -263 445 -112 205
|
||||
-438 640 -554 740 -16 14 -58 50 -94 81 -125 110 -276 192 -414 224 -66 16
|
||||
-247 18 -310 4z m33 -805 c99 -49 199 -159 338 -369 63 -95 194 -310 194 -318
|
||||
0 -5 98 -177 110 -192 28 -36 195 -356 235 -450 49 -117 85 -254 85 -326 0
|
||||
-53 -25 -132 -54 -172 -102 -139 -434 -186 -1201 -173 -442 7 -627 31 -752 95
|
||||
-106 54 -153 130 -153 250 0 40 7 101 16 134 38 148 198 486 319 672 17 28 49
|
||||
81 70 120 159 292 320 530 432 640 117 114 247 146 361 89z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 807 B After Width: | Height: | Size: 1.5 KiB |
@@ -1,12 +1,49 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
|
||||
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.16, written by Peter Selinger 2001-2019
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M2410 4863 c-448 -27 -898 -195 -1281 -477 -142 -105 -402 -369 -503
|
||||
-511 -227 -320 -372 -675 -433 -1060 -26 -159 -25 -567 0 -720 43 -258 108
|
||||
-467 212 -683 56 -116 166 -307 184 -322 4 -3 24 -30 45 -60 121 -171 352
|
||||
-402 518 -520 358 -252 719 -395 1128 -446 152 -19 457 -18 607 1 405 53 811
|
||||
216 1124 451 247 185 471 427 615 664 67 111 74 123 104 189 43 90 53 140 48
|
||||
230 -8 138 -78 240 -208 303 -57 28 -75 32 -150 32 -76 1 -93 -3 -158 -33 -82
|
||||
-39 -142 -97 -181 -177 -39 -80 -134 -226 -206 -318 -162 -208 -426 -402 -690
|
||||
-508 -74 -29 -289 -85 -378 -97 -101 -14 -353 -14 -454 0 -88 12 -253 55 -359
|
||||
93 -310 112 -619 356 -799 631 -21 33 -49 76 -61 95 -20 30 -53 99 -109 225
|
||||
-23 52 -62 186 -85 290 -26 120 -38 398 -21 515 46 332 168 616 372 866 129
|
||||
158 351 337 534 431 261 133 597 199 890 174 379 -33 730 -188 1000 -444 155
|
||||
-146 259 -284 356 -471 54 -104 117 -166 208 -201 62 -25 78 -27 158 -23 67 4
|
||||
100 11 138 31 79 40 131 91 167 165 31 63 33 73 33 172 l0 105 -51 105 c-103
|
||||
208 -281 447 -470 630 -124 119 -145 137 -262 221 -454 329 -1007 487 -1582
|
||||
452z"/>
|
||||
<path d="M2350 4015 c-191 -30 -337 -78 -507 -165 -90 -47 -250 -152 -273
|
||||
-179 -3 -4 -29 -26 -57 -50 -107 -88 -273 -306 -340 -447 -46 -96 -49 -174
|
||||
-10 -249 46 -91 109 -128 217 -128 106 -1 173 46 240 168 199 359 547 568 945
|
||||
568 265 -1 478 -75 685 -239 250 -199 400 -513 400 -838 0 -219 -74 -454 -193
|
||||
-615 -161 -217 -371 -366 -606 -427 -167 -43 -386 -43 -556 0 -113 29 -279
|
||||
107 -358 168 -125 97 -255 245 -310 353 -45 89 -82 131 -142 160 -49 24 -64
|
||||
27 -125 23 -117 -9 -196 -78 -220 -192 -19 -92 24 -204 141 -367 29 -41 57
|
||||
-79 63 -86 6 -6 31 -36 56 -65 24 -29 79 -84 121 -122 492 -438 1200 -527
|
||||
1779 -223 89 47 220 133 265 174 11 10 41 36 66 58 45 39 131 132 192 206 39
|
||||
48 162 255 183 309 9 25 20 50 25 55 18 25 71 222 89 330 30 192 33 266 15
|
||||
419 -39 335 -148 594 -354 849 -238 293 -620 502 -1014 556 -104 14 -311 12
|
||||
-417 -4z"/>
|
||||
<path d="M2394 3420 c-205 -37 -407 -147 -545 -298 -186 -204 -270 -439 -256
|
||||
-721 7 -147 33 -249 97 -378 190 -386 606 -598 1035 -528 167 27 300 85 441
|
||||
191 112 85 235 238 274 342 25 65 25 86 1 139 -33 72 -137 107 -208 70 -37
|
||||
-20 -62 -49 -104 -121 -43 -74 -148 -180 -223 -225 -31 -18 -96 -47 -144 -64
|
||||
-165 -56 -361 -36 -523 56 -79 44 -193 154 -238 230 -168 285 -110 638 140
|
||||
848 68 57 109 82 179 108 153 56 260 64 392 31 86 -22 185 -65 233 -102 61
|
||||
-46 154 -147 184 -199 58 -101 106 -139 174 -139 85 0 151 68 151 153 0 63
|
||||
-32 129 -111 234 -126 168 -298 286 -508 348 -76 23 -113 28 -240 31 -82 1
|
||||
-173 -1 -201 -6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 807 B After Width: | Height: | Size: 2.9 KiB |
@@ -1,12 +1,75 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
|
||||
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.16, written by Peter Selinger 2001-2019
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M1272 4522 c-20 -20 -49 -117 -81 -269 -10 -50 -22 -96 -25 -101 -31
|
||||
-51 -49 -635 -24 -810 16 -115 18 -116 191 -69 73 19 171 43 217 52 47 9 92
|
||||
20 101 24 8 5 67 14 130 21 194 20 171 8 255 123 92 124 221 274 304 352 97
|
||||
91 130 127 130 140 0 38 -209 194 -363 271 -39 20 -74 40 -77 44 -8 11 -59 36
|
||||
-146 70 -44 18 -101 42 -129 54 -91 42 -369 116 -432 116 -19 0 -41 -8 -51
|
||||
-18z"/>
|
||||
<path d="M3495 4511 c-142 -36 -253 -70 -285 -87 -14 -7 -70 -32 -125 -54 -55
|
||||
-23 -116 -51 -136 -64 -19 -13 -62 -37 -95 -54 -72 -36 -238 -148 -305 -204
|
||||
-28 -24 -49 -50 -49 -61 0 -11 23 -41 53 -69 158 -147 264 -265 382 -425 85
|
||||
-115 61 -104 263 -124 67 -7 122 -16 122 -20 0 -4 26 -11 58 -15 31 -4 122
|
||||
-25 202 -47 172 -47 212 -54 227 -35 55 65 46 767 -11 941 -8 23 -20 69 -26
|
||||
102 -19 96 -48 196 -65 221 -21 32 -67 31 -210 -5z"/>
|
||||
<path d="M2429 3622 c-100 -65 -320 -246 -333 -272 -12 -27 0 -50 25 -50 35 0
|
||||
242 40 265 51 32 16 174 5 314 -25 159 -33 180 -33 180 -3 0 13 -6 30 -12 39
|
||||
-25 30 -279 234 -332 265 -30 18 -77 16 -107 -5z"/>
|
||||
<path d="M1885 3243 c-11 -3 -24 -9 -30 -13 -5 -4 -59 -24 -120 -45 -110 -38
|
||||
-223 -91 -257 -122 -23 -20 -23 -67 -3 -233 21 -173 34 -232 55 -260 29 -38
|
||||
50 -17 86 86 61 175 92 253 110 277 36 46 126 152 176 206 69 76 62 124 -17
|
||||
104z"/>
|
||||
<path d="M3027 3244 c-17 -18 -5 -56 31 -92 20 -21 55 -60 76 -87 22 -28 45
|
||||
-54 51 -60 33 -28 85 -110 100 -157 10 -29 24 -64 31 -78 7 -14 25 -64 39
|
||||
-112 27 -92 42 -113 73 -104 25 8 35 50 62 245 28 217 27 243 -11 275 -17 14
|
||||
-35 26 -41 26 -6 0 -19 6 -27 14 -9 8 -74 35 -146 60 -71 26 -137 50 -146 55
|
||||
-24 14 -83 23 -92 15z"/>
|
||||
<path d="M997 3171 c-48 -22 -93 -43 -100 -49 -6 -5 -50 -30 -97 -54 -199
|
||||
-105 -442 -288 -610 -459 -73 -74 -100 -114 -100 -148 0 -53 154 -208 400
|
||||
-403 169 -133 570 -348 651 -348 27 0 46 32 58 100 20 105 71 290 95 345 13
|
||||
27 29 68 36 90 7 22 16 45 20 50 4 6 11 21 15 35 4 14 19 48 32 77 l25 51 -56
|
||||
139 c-31 76 -63 150 -71 165 -18 35 -68 216 -90 328 -10 47 -21 93 -26 103
|
||||
-16 29 -83 21 -182 -22z"/>
|
||||
<path d="M3793 3196 c-6 -8 -19 -52 -28 -97 -19 -101 -85 -342 -96 -349 -4 -3
|
||||
-21 -39 -37 -80 -17 -41 -42 -104 -56 -140 l-26 -64 44 -106 c24 -58 49 -122
|
||||
57 -142 7 -21 16 -38 20 -38 4 0 9 -10 12 -22 2 -13 18 -70 35 -128 17 -58 39
|
||||
-145 48 -195 10 -49 23 -96 30 -102 18 -19 61 -16 123 8 72 27 341 170 341
|
||||
180 0 5 5 9 10 9 40 0 303 200 467 355 125 118 152 170 119 233 -20 39 -266
|
||||
271 -338 320 -13 9 -43 33 -67 54 -24 21 -48 38 -54 38 -5 0 -38 20 -74 45
|
||||
-61 43 -229 138 -318 179 -116 55 -188 69 -212 42z"/>
|
||||
<path d="M2419 2667 c-62 -23 -111 -71 -127 -125 -27 -88 -3 -187 54 -230 16
|
||||
-12 35 -27 43 -33 34 -29 179 -29 189 0 2 6 10 11 17 11 20 0 71 64 85 106 17
|
||||
51 7 140 -20 187 -43 73 -160 114 -241 84z"/>
|
||||
<path d="M1529 2362 c-19 -22 -33 -92 -54 -262 -22 -180 -20 -214 10 -238 13
|
||||
-11 39 -25 57 -32 18 -7 40 -19 48 -25 16 -13 34 -20 184 -71 112 -38 153 -42
|
||||
163 -17 8 20 -6 43 -86 135 -35 40 -81 93 -102 118 -39 45 -69 115 -134 310
|
||||
-34 101 -54 120 -86 82z"/>
|
||||
<path d="M3376 2338 c-8 -24 -20 -61 -27 -83 -20 -66 -84 -221 -104 -252 -20
|
||||
-30 -108 -135 -181 -217 -45 -50 -55 -80 -29 -89 46 -18 411 119 460 173 16
|
||||
18 17 31 11 117 -13 184 -47 371 -70 385 -26 18 -45 7 -60 -34z"/>
|
||||
<path d="M3725 1694 c-39 -20 -319 -90 -420 -104 -44 -7 -89 -15 -100 -20 -11
|
||||
-5 -50 -11 -86 -14 -36 -3 -77 -10 -90 -16 -13 -6 -55 -54 -94 -107 -104 -142
|
||||
-290 -349 -369 -408 -61 -47 -70 -89 -29 -124 51 -45 87 -72 128 -98 22 -15
|
||||
64 -42 94 -62 100 -66 328 -180 424 -211 33 -11 65 -24 71 -29 35 -27 330
|
||||
-101 406 -101 61 0 59 -3 105 172 68 254 87 402 88 673 2 248 -12 399 -39 443
|
||||
-17 26 -47 28 -89 6z"/>
|
||||
<path d="M1146 1658 c-10 -16 -18 -76 -27 -208 -10 -160 -9 -211 5 -370 10
|
||||
-102 24 -214 31 -250 54 -253 99 -412 122 -435 21 -22 81 -18 196 11 99 25
|
||||
247 73 284 93 10 5 63 28 118 51 54 23 117 53 140 67 22 13 72 44 112 66 130
|
||||
75 254 163 324 229 31 30 23 57 -33 110 -184 174 -283 279 -361 383 -105 140
|
||||
-100 136 -212 146 -55 5 -122 13 -150 19 -27 5 -90 17 -140 26 -49 8 -142 29
|
||||
-205 46 -161 44 -185 46 -204 16z"/>
|
||||
<path d="M2815 1654 c-295 -62 -345 -64 -542 -24 -221 46 -237 8 -58 -134 68
|
||||
-55 90 -71 197 -148 61 -45 92 -47 139 -13 19 14 55 40 80 58 57 39 160 120
|
||||
211 166 73 64 59 113 -27 95z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 807 B After Width: | Height: | Size: 4.5 KiB |
@@ -1,12 +1,44 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
|
||||
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
|
||||
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M2175 4799 c-430 -40 -450 -45 -515 -116 -151 -163 -352 -455 -465
|
||||
-675 -82 -159 -75 -178 48 -129 375 149 747 226 1146 237 447 13 857 -53 1262
|
||||
-201 191 -71 194 -71 193 -24 -3 97 -365 650 -531 812 -54 52 -80 57 -518 97
|
||||
-128 12 -489 11 -620 -1z"/>
|
||||
<path d="M953 3759 c-195 -103 -397 -234 -558 -363 -156 -124 -184 -154 -200
|
||||
-211 -30 -109 -65 -506 -65 -745 0 -167 27 -519 50 -664 15 -98 30 -125 95
|
||||
-181 32 -28 74 -64 94 -81 61 -54 288 -211 400 -278 216 -130 304 -166 317
|
||||
-133 2 7 -15 65 -39 128 -181 472 -255 972 -217 1469 13 175 44 362 91 560 34
|
||||
144 64 238 126 399 24 63 41 121 39 128 -9 23 -52 14 -133 -28z"/>
|
||||
<path d="M3906 3791 c-4 -6 13 -64 37 -129 155 -406 226 -787 227 -1212 0
|
||||
-432 -73 -821 -231 -1237 -22 -57 -36 -109 -33 -115 13 -21 80 3 213 78 180
|
||||
101 350 215 493 331 188 152 187 151 213 364 29 247 40 552 27 797 -13 234
|
||||
-34 446 -53 514 -14 52 -49 90 -195 207 -147 119 -302 222 -488 327 -133 74
|
||||
-197 97 -210 75z"/>
|
||||
<path d="M2374 3598 c-119 -84 -256 -225 -341 -350 -123 -180 -123 -217 -1
|
||||
-178 40 12 123 34 183 47 216 48 510 31 725 -42 97 -33 110 -32 110 3 0 25
|
||||
-58 129 -123 222 -65 93 -262 274 -368 338 -58 35 -86 29 -185 -40z"/>
|
||||
<path d="M1775 2963 c-176 -109 -326 -247 -432 -397 -46 -65 -63 -97 -63 -121
|
||||
0 -70 203 -310 360 -427 151 -112 232 -149 246 -114 3 8 -8 62 -25 118 -50
|
||||
166 -64 257 -64 423 0 164 20 295 68 434 14 41 25 85 25 98 0 35 -45 30 -115
|
||||
-14z"/>
|
||||
<path d="M3104 2986 c-3 -8 8 -56 24 -108 40 -122 72 -318 72 -432 0 -113 -33
|
||||
-311 -72 -434 -16 -52 -27 -100 -24 -108 10 -26 53 -14 138 39 173 109 288
|
||||
218 410 388 78 109 78 127 -2 234 -133 177 -249 284 -423 391 -73 45 -113 55
|
||||
-123 30z"/>
|
||||
<path d="M2910 1824 c-109 -36 -231 -58 -385 -69 -129 -9 -376 28 -500 75 -14
|
||||
5 -40 10 -56 10 -23 0 -29 -4 -29 -21 0 -44 110 -209 219 -330 93 -103 302
|
||||
-259 346 -259 22 0 151 86 216 145 108 97 214 231 308 387 25 41 25 92 1 95
|
||||
-8 0 -62 -14 -120 -33z"/>
|
||||
<path d="M1147 1033 c-14 -14 -6 -46 34 -126 116 -230 321 -528 492 -713 55
|
||||
-60 113 -71 502 -99 309 -22 553 -16 926 24 175 19 182 23 333 211 152 187
|
||||
332 469 403 629 21 47 22 56 10 69 -13 12 -25 10 -98 -18 -482 -187 -954 -261
|
||||
-1469 -231 -347 21 -666 90 -998 218 -121 46 -125 47 -135 36z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 807 B After Width: | Height: | Size: 2.5 KiB |
@@ -10,6 +10,7 @@
|
||||
import Spinner from '../Spinner.svelte';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import { kahoot_icons } from './kahoot_mode_assets/kahoot_icons';
|
||||
import CircularTimer from '$lib/play/circular_progress.svelte';
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
@@ -66,13 +67,21 @@
|
||||
}
|
||||
};
|
||||
$: set_answer_if_not_set_range(timer_res);
|
||||
let circular_prgoress = 0;
|
||||
$: {
|
||||
try {
|
||||
circular_prgoress = 1 - ((100 / question.time) * parseInt(timer_res)) / 100;
|
||||
} catch {}
|
||||
}
|
||||
</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 class="mx-auto my-2">
|
||||
<CircularTimer bind:text={timer_res} bind:progress={circular_prgoress} color="#ef4444" />
|
||||
</div>
|
||||
</div>
|
||||
{#if question.image !== null}
|
||||
<div>
|
||||
@@ -100,7 +109,7 @@
|
||||
<div class="grid grid-cols-2 gap-2 w-full p-4">
|
||||
{#each question.answers as answer, i}
|
||||
<button
|
||||
class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60"
|
||||
class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60 p-3"
|
||||
style="background-color: {answer.color ?? '#B45309'}"
|
||||
disabled={selected_answer !== undefined}
|
||||
on:click={() => selectAnswer(answer.answer)}
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
<svelte:window on:beforeunload={confirmUnload} />
|
||||
<svelte:head>
|
||||
<title>ClassQuiz - Play</title>
|
||||
{#if gameData !== undefined}
|
||||
{#if gameData !== undefined && game_mode !== 'kahoot'}
|
||||
{#each gameData.questions as question}
|
||||
{#if question.image !== undefined}
|
||||
<link rel="preload" as="image" href={question.image} />
|
||||
|
||||
Reference in New Issue
Block a user