🔀 Merged ClassQuizController
This commit is contained in:
Mawoka
@@ -5,6 +5,9 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
export let data;
|
||||
export let username;
|
||||
@@ -53,8 +56,11 @@
|
||||
style="font-size: {player_count_or_five - i / 2}rem"
|
||||
class="text-center"
|
||||
>
|
||||
{i + 1}
|
||||
: {player} with {data[player]} points
|
||||
{$t('play_page.final_result_rank', {
|
||||
place: i + 1,
|
||||
username: player,
|
||||
points: data[player]
|
||||
})}
|
||||
</p>
|
||||
{/if}
|
||||
{/each}
|
||||
@@ -62,7 +68,7 @@
|
||||
{#if data[username]}
|
||||
<div class="fixed bottom-0 left-0 flex justify-center w-full mb-6">
|
||||
<div class="mx-auto p-2 border-[#B07156] border-4 rounded">
|
||||
<p>Your score: <b>{data[username]}</b></p>
|
||||
<p>{$t('play_page.your_score', { score: data[username] })}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -38,7 +38,13 @@
|
||||
<div class="grid grid-cols-3 mt-12">
|
||||
<div class="flex justify-center">
|
||||
<p class="m-auto text-2xl">
|
||||
Join at <b>{window.location.host}/play</b> and enter <b>{game_pin}</b>.
|
||||
{$t('play_page.join_description', {
|
||||
url:
|
||||
window.location.host === 'classquiz.de'
|
||||
? 'cquiz.de'
|
||||
: `${window.location.host}/play`,
|
||||
pin: game_pin
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
@@ -49,7 +55,7 @@
|
||||
{#if cqc_code}
|
||||
<div class="m-auto">
|
||||
<div class="flex-col flex justify-center">
|
||||
<p class="mx-auto">Join by entering the following code</p>
|
||||
<p class="mx-auto">{$t('play_page.join_by_entering_code')}</p>
|
||||
<ControllerCodeDisplay code={cqc_code} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
import { flip } from 'svelte/animate';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { onMount } from 'svelte';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
const { t } = getLocalization();
|
||||
|
||||
export let data;
|
||||
|
||||
@@ -91,11 +93,13 @@
|
||||
<div>
|
||||
<table class="table-auto text-xl">
|
||||
<tr>
|
||||
<th class="p-2 border-r border-r-black border-b-2 border-b-black">Name</th>
|
||||
<th class="p-2 border-b-2 border-b-black">Points</th>
|
||||
<th class="p-2 border-r border-r-black border-b-2 border-b-black"
|
||||
>{$t('words.name')}</th
|
||||
>
|
||||
<th class="p-2 border-b-2 border-b-black">{$t('words.point', { count: 2 })}</th>
|
||||
{#if show_new_score_clicked}
|
||||
<th in:fly={{ x: 300 }} class="p-2 border-b-2 border-b-black"
|
||||
>Points added
|
||||
>{$t('play_page.points_added')}
|
||||
</th>
|
||||
{/if}
|
||||
</tr>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import * as Sentry from '@sentry/browser';
|
||||
import { alertModal } from '../stores';
|
||||
// import { alertModal } from '../stores';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import Cookies from 'js-cookie';
|
||||
import BrownButton from '$lib/components/buttons/brown.svelte';
|
||||
@@ -33,6 +33,7 @@
|
||||
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
prefetch_username();
|
||||
hcaptcha = window.hcaptcha;
|
||||
if (hcaptcha.render) {
|
||||
hcaptchaWidgetID = hcaptcha.render('hcaptcha', {
|
||||
@@ -54,6 +55,15 @@
|
||||
}
|
||||
});
|
||||
|
||||
const prefetch_username = async () => {
|
||||
const res = await fetch('/api/v1/users/me');
|
||||
if (res.status !== 200) {
|
||||
return;
|
||||
}
|
||||
const json = await res.json();
|
||||
username = json.username;
|
||||
};
|
||||
|
||||
const set_game_pin = async () => {
|
||||
let process_var;
|
||||
try {
|
||||
@@ -72,20 +82,22 @@
|
||||
custom_field = json.custom_field;
|
||||
}
|
||||
if (res.status === 404) {
|
||||
alertModal.set({
|
||||
open: true,
|
||||
title: 'Game not found',
|
||||
body: 'The game pin you entered seems invalid.'
|
||||
});
|
||||
/* alertModal.set({
|
||||
open: true,
|
||||
title: 'Game not found',
|
||||
body: 'The game pin you entered seems invalid.'
|
||||
});*/
|
||||
alert('Game not found');
|
||||
game_pin = '';
|
||||
return;
|
||||
}
|
||||
if (res.status !== 200) {
|
||||
alertModal.set({
|
||||
open: true,
|
||||
body: `Unknown error with response-code ${res.status}`,
|
||||
title: 'Unknown Error'
|
||||
});
|
||||
/* alertModal.set({
|
||||
open: true,
|
||||
body: `Unknown error with response-code ${res.status}`,
|
||||
title: 'Unknown Error'
|
||||
});*/
|
||||
alert('Unknown error');
|
||||
return;
|
||||
}
|
||||
};
|
||||
@@ -122,16 +134,13 @@
|
||||
if (import.meta.env.VITE_SENTRY !== null) {
|
||||
Sentry.captureException(e);
|
||||
}
|
||||
alertModal.set({
|
||||
open: true,
|
||||
body: "The captcha failed, which is normal, but most of the time it's fixed by reloading!",
|
||||
title: 'Captcha failed'
|
||||
});
|
||||
alertModal.subscribe((data) => {
|
||||
if (!data.open) {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
/* alertModal.set({
|
||||
open: true,
|
||||
body: "The captcha failed, which is normal, but most of the time it's fixed by reloading!",
|
||||
title: 'Captcha failed'
|
||||
});*/
|
||||
alert('Captcha failed!');
|
||||
window.location.reload();
|
||||
}
|
||||
} else if (import.meta.env.VITE_RECAPTCHA) {
|
||||
// eslint-disable-next-line no-undef
|
||||
|
||||
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="666.667" height="666.667" preserveAspectRatio="xMidYMid meet" version="1.0" viewBox="0 0 500 500"><metadata>Created by potrace 1.16, written by Peter Selinger 2001-2019</metadata><g fill="#000" 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" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="666.667" height="666.667" preserveAspectRatio="xMidYMid meet" version="1.0" viewBox="0 0 500 500"><metadata>Created by potrace 1.16, written by Peter Selinger 2001-2019</metadata><g fill="currentColor" 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" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"/></g></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="666.667" height="666.667" preserveAspectRatio="xMidYMid meet" version="1.0" viewBox="0 0 500 500"><metadata>Created by potrace 1.16, written by Peter Selinger 2001-2019</metadata><g fill="#000" 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" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"/><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" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"/><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" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="666.667" height="666.667" preserveAspectRatio="xMidYMid meet" version="1.0" viewBox="0 0 500 500"><metadata>Created by potrace 1.16, written by Peter Selinger 2001-2019</metadata><g fill="currentColor" 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" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"/><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" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"/><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" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"/></g></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
@@ -8,7 +8,7 @@
|
||||
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">
|
||||
fill="currentColor" 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
|
||||
|
||||
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
@@ -6,7 +6,7 @@
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
fill="currentColor" 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
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
@@ -13,6 +13,7 @@
|
||||
import CircularTimer from '$lib/play/circular_progress.svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import BrownButton from '$lib/components/buttons/brown.svelte';
|
||||
import { get_foreground_color } from '../helpers';
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
@@ -31,10 +32,10 @@
|
||||
}
|
||||
|
||||
/* if (typeof question_index === 'string') {
|
||||
question_index = parseInt(question_index);
|
||||
} else {
|
||||
throw new Error('question_index must be a string or number');
|
||||
}*/
|
||||
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;
|
||||
@@ -138,6 +139,7 @@
|
||||
}
|
||||
};
|
||||
$: console.log(slider_value, 'values');
|
||||
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||
</script>
|
||||
|
||||
<div class="h-screen w-screen">
|
||||
@@ -152,7 +154,7 @@
|
||||
{#if question.image !== null && game_mode !== 'kahoot'}
|
||||
<div class="max-h-full">
|
||||
<img
|
||||
src={question.image}
|
||||
src="/api/v1/storage/download/{question.image}"
|
||||
class="object-cover mx-auto mb-8 max-h-[90%]"
|
||||
alt="Content for Question"
|
||||
/>
|
||||
@@ -176,14 +178,17 @@
|
||||
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
|
||||
{#each question.answers as answer, i}
|
||||
<button
|
||||
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3"
|
||||
style="background-color: {answer.color ?? '#B07156'}"
|
||||
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black"
|
||||
style="background-color: {answer.color ??
|
||||
default_colors[i]}; color: {get_foreground_color(
|
||||
answer.color ?? default_colors[i]
|
||||
)}"
|
||||
disabled={selected_answer !== undefined}
|
||||
on:click={() => selectAnswer(answer.answer)}
|
||||
>
|
||||
{#if game_mode === 'kahoot'}
|
||||
<img
|
||||
class="w-10 inline-block m-auto"
|
||||
class="h-2/3 inline-block m-auto"
|
||||
alt="Icon"
|
||||
src={kahoot_icons[i]}
|
||||
/>
|
||||
@@ -246,30 +251,6 @@
|
||||
</BrownButton>
|
||||
</div>
|
||||
</div>
|
||||
{:else if question.type === QuizQuestionType.ABCD}
|
||||
{#if solution === undefined}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 gap-2 w-full p-4">
|
||||
{#each solution.answers as answer}
|
||||
{#if answer.right}
|
||||
<button
|
||||
class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-green-600"
|
||||
disabled
|
||||
class:opacity-30={answer.answer !== selected_answer}
|
||||
>{answer.answer}</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-red-500"
|
||||
disabled
|
||||
class:opacity-30={answer.answer !== selected_answer}
|
||||
>{answer.answer}</button
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{:else if question.type === QuizQuestionType.RANGE}
|
||||
{#if solution === undefined}
|
||||
<Spinner />
|
||||
@@ -286,8 +267,8 @@
|
||||
{/if}
|
||||
{:else if question.type === QuizQuestionType.ORDER}
|
||||
<!-- {#if solution === undefined}
|
||||
<Spinner />
|
||||
{:else}-->
|
||||
<Spinner />
|
||||
{:else}-->
|
||||
<div class="flex flex-col w-full h-full gap-4 px-4 py-6">
|
||||
{#each question.answers as answer, i (answer.id)}
|
||||
<div
|
||||
@@ -360,14 +341,34 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--{/if}-->
|
||||
{:else if question.type === QuizQuestionType.CHECK}
|
||||
{#await import('./questions/check.svelte')}
|
||||
<Spinner />
|
||||
{:then c}
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:question
|
||||
bind:selected_answer
|
||||
bind:game_mode
|
||||
/>
|
||||
<div class="flex justify-center h-[5%]">
|
||||
<div class="w-1/2">
|
||||
<BrownButton
|
||||
disabled={!selected_answer}
|
||||
on:click={() => selectAnswer(selected_answer)}
|
||||
>{$t('words.submit')}
|
||||
</BrownButton>
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
|
||||
<!--{:else if question.type === QuizQuestionType.VOTING}
|
||||
{#await import('$lib/play/admin/voting_results.svelte')}
|
||||
<Spinner />
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data={question_results}
|
||||
bind:question={quiz_data.questions[selected_question]} />
|
||||
{/await}-->
|
||||
{#await import('$lib/play/admin/voting_results.svelte')}
|
||||
<Spinner />
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data={question_results}
|
||||
bind:question={quiz_data.questions[selected_question]} />
|
||||
{/await}-->
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
<!--
|
||||
- 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">
|
||||
import type { Question } from '$lib/quiz_types';
|
||||
import { get_foreground_color } from '$lib/helpers';
|
||||
import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons';
|
||||
// import CircularTimer from '$lib/play/circular_progress.svelte';
|
||||
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||
export let question: Question;
|
||||
export let selected_answer = '';
|
||||
export let game_mode;
|
||||
let _selected_answers = [false, false, false, false];
|
||||
|
||||
const selectAnswer = (i: number) => {
|
||||
_selected_answers[i] = !_selected_answers[i];
|
||||
selected_answer = '';
|
||||
for (let i = 0; i < _selected_answers.length; i++) {
|
||||
if (_selected_answers[i]) {
|
||||
selected_answer += String(i);
|
||||
}
|
||||
}
|
||||
selected_answer = selected_answer;
|
||||
console.log(_selected_answers, selected_answer);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="w-full h-[95%]">
|
||||
<!--
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-50"
|
||||
>
|
||||
<CircularTimer
|
||||
bind:text={timer_res}
|
||||
bind:progress={circular_prgoress}
|
||||
color="#ef4444"
|
||||
/>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
|
||||
{#each question.answers as answer, i}
|
||||
<button
|
||||
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black transition-all"
|
||||
style="background-color: {answer.color ??
|
||||
default_colors[i]}; color: {get_foreground_color(
|
||||
answer.color ?? default_colors[i]
|
||||
)}"
|
||||
on:click={() => selectAnswer(i)}
|
||||
class:opacity-100={_selected_answers[i]}
|
||||
class:opacity-50={!_selected_answers[i]}
|
||||
>
|
||||
{#if game_mode === 'kahoot'}
|
||||
<img class="h-2/3 inline-block m-auto" alt="Icon" src={kahoot_icons[i]} />
|
||||
{:else}
|
||||
<p class="m-auto">{answer.answer}</p>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -15,7 +15,11 @@
|
||||
{#if cover_image}
|
||||
<div class="flex justify-center align-middle items-center">
|
||||
<div class="h-[30vh] m-auto w-auto mt-12">
|
||||
<img class="max-h-full max-w-full block" src={cover_image} alt="Not provided" />
|
||||
<img
|
||||
class="max-h-full max-w-full block"
|
||||
src="/api/v1/storage/download/{cover_image}"
|
||||
alt="Not provided"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user