✨ Improved button colors
This commit is contained in:
Mawoka
@@ -7,3 +7,4 @@ node_modules/
|
||||
*.rdb
|
||||
survey.json
|
||||
.coverage
|
||||
export_deta.py
|
||||
|
||||
Generated
+5838
-4225
File diff suppressed because it is too large
Load Diff
@@ -13,6 +13,7 @@
|
||||
import { kahoot_icons } from './play/kahoot_mode_assets/kahoot_icons';
|
||||
import CircularTimer from '$lib/play/circular_progress.svelte';
|
||||
import Spinner from '$lib/Spinner.svelte';
|
||||
import { get_foreground_color } from '$lib/helpers';
|
||||
|
||||
export let game_token: string;
|
||||
export let quiz_data: QuizData;
|
||||
@@ -20,6 +21,7 @@
|
||||
export let bg_color;
|
||||
|
||||
const { t } = getLocalization();
|
||||
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||
|
||||
let question_results = null;
|
||||
export let final_results: Array<null> | Array<Array<PlayerAnswer>> = [null];
|
||||
@@ -233,16 +235,26 @@
|
||||
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto 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'}"
|
||||
class="rounded-lg h-fit flex border-2 border-black"
|
||||
style="background-color: {answer.color ?? default_colors[i]};"
|
||||
class:opacity-50={!answer.right &&
|
||||
timer_res === '0' &&
|
||||
quiz_data.questions[selected_question].type ===
|
||||
QuizQuestionType.ABCD}
|
||||
>
|
||||
<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 text-black"
|
||||
>{answer.answer}</span
|
||||
<img
|
||||
class="w-14 inline-block pl-4"
|
||||
alt="icon"
|
||||
style="color: {get_foreground_color(
|
||||
answer.color ?? default_colors[i]
|
||||
)}"
|
||||
src={kahoot_icons[i]}
|
||||
/>
|
||||
<span
|
||||
class="text-center text-2xl px-2 py-4 w-full"
|
||||
style="color: {get_foreground_color(
|
||||
answer.color ?? default_colors[i]
|
||||
)}">{answer.answer}</span
|
||||
>
|
||||
<span class="pl-4 w-10" />
|
||||
</div>
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
{#if captcha_selected}
|
||||
<div class="flex justify-center mt-2" in:fade>
|
||||
<p class="w-1/3">
|
||||
{$t("start_game.captcha_message")}
|
||||
{$t('start_game.captcha_message')}
|
||||
</p>
|
||||
<!-- Todo: Add translation -->
|
||||
</div>
|
||||
@@ -119,9 +119,9 @@
|
||||
selected_game_mode = 'kahoot';
|
||||
}}
|
||||
>
|
||||
<h2 class="text-center text-2xl">{$t("words.normal")}</h2>
|
||||
<h2 class="text-center text-2xl">{$t('words.normal')}</h2>
|
||||
<p>
|
||||
{$t("start_game.normal_mode_description")}
|
||||
{$t('start_game.normal_mode_description')}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
@@ -131,14 +131,14 @@
|
||||
selected_game_mode = 'normal';
|
||||
}}
|
||||
>
|
||||
<h2 class="text-center text-2xl">{$t("start_game.old_school_mode")}</h2>
|
||||
<h2 class="text-center text-2xl">{$t('start_game.old_school_mode')}</h2>
|
||||
<p>
|
||||
{$t("start_game.old_school_mode_description")}
|
||||
{$t('start_game.old_school_mode_description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center items-center my-auto">
|
||||
<label class="mr-4">{$t("result_page.custom_field")}</label>
|
||||
<label class="mr-4">{$t('result_page.custom_field')}</label>
|
||||
<input
|
||||
bind:value={custom_field}
|
||||
class="rounded-lg p-2 outline-none placeholder:italic"
|
||||
@@ -185,7 +185,7 @@
|
||||
{#if loading}
|
||||
<Spinner my_20={false} />
|
||||
{:else}
|
||||
{$t("start_game.start_game")}
|
||||
{$t('start_game.start_game')}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -9,9 +9,14 @@
|
||||
import { reach } from 'yup';
|
||||
import { ABCDQuestionSchema } from '$lib/yupSchemas';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import { get_foreground_color } from '$lib/helpers';
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||
|
||||
console.log(get_foreground_color(default_colors[0]));
|
||||
|
||||
export let selected_question: number;
|
||||
export let data: EditorData;
|
||||
if (!Array.isArray(data.questions[selected_question].answers)) {
|
||||
@@ -29,10 +34,9 @@
|
||||
};
|
||||
|
||||
const get_empty_answer = (i: number): Answer => {
|
||||
const color = localStorage.getItem(`quiz_color:${i}:${data.title}`);
|
||||
return {
|
||||
answer: '',
|
||||
color: color,
|
||||
color: default_colors[i],
|
||||
right: false
|
||||
};
|
||||
};
|
||||
@@ -79,7 +83,9 @@
|
||||
bind:value={answer.answer}
|
||||
type="text"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent"
|
||||
style="background-color: {answer.color ?? 'transparent'}"
|
||||
style="background-color: {answer.color}; color: {get_foreground_color(
|
||||
answer.color
|
||||
)}"
|
||||
placeholder={$t('editor.empty')}
|
||||
/>
|
||||
<button
|
||||
@@ -126,7 +132,7 @@
|
||||
type="color"
|
||||
bind:value={answer.color}
|
||||
on:contextmenu|preventDefault={() => {
|
||||
answer.color = null;
|
||||
answer.color = default_colors[index];
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -4,18 +4,16 @@
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { EditorData, VotingAnswer } from '../quiz_types';
|
||||
import type { EditorData } from '../quiz_types';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { reach } from 'yup';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import { VotingQuestionSchema } from '$lib/yupSchemas';
|
||||
import { get_foreground_color } from '$lib/helpers';
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
const empty_answer: VotingAnswer = {
|
||||
answer: '',
|
||||
image: undefined
|
||||
};
|
||||
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||
export let selected_question: number;
|
||||
export let data: EditorData;
|
||||
|
||||
@@ -30,12 +28,12 @@
|
||||
} catch {}
|
||||
|
||||
/*console.log(data.questions[selected_question].answers, 'moIn!', data.questions[selected_question].answers.length);
|
||||
onMount(() => {
|
||||
for (let i = 0; i < data.questions[selected_question].answers; i++) {
|
||||
console.log(data.questions[selected_question].answers[i], 'iterate');
|
||||
data.questions[selected_question].answers[i].right = undefined;
|
||||
}
|
||||
});*/
|
||||
onMount(() => {
|
||||
for (let i = 0; i < data.questions[selected_question].answers; i++) {
|
||||
console.log(data.questions[selected_question].answers[i], 'iterate');
|
||||
data.questions[selected_question].answers[i].right = undefined;
|
||||
}
|
||||
});*/
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 w-full px-10">
|
||||
@@ -78,7 +76,8 @@
|
||||
bind:value={answer.answer}
|
||||
type="text"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg"
|
||||
style="background-color: {answer.color ?? 'transparent'}"
|
||||
style="background-color: {answer.color ??
|
||||
'transparent'}; color: {get_foreground_color(answer.color)}"
|
||||
placeholder={$t('editor.empty')}
|
||||
/>
|
||||
<input
|
||||
@@ -86,7 +85,7 @@
|
||||
type="color"
|
||||
bind:value={answer.color}
|
||||
on:contextmenu|preventDefault={() => {
|
||||
answer.color = null;
|
||||
answer.color = default_colors[index];
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -100,7 +99,13 @@
|
||||
on:click={() => {
|
||||
data.questions[selected_question].answers = [
|
||||
...data.questions[selected_question].answers,
|
||||
{ ...empty_answer }
|
||||
{
|
||||
...{
|
||||
answer: '',
|
||||
image: undefined,
|
||||
color: default_colors[data.questions[selected_question].answers.length]
|
||||
}
|
||||
}
|
||||
];
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -18,3 +18,39 @@ export const invertColor = (hexTripletColor: string): string => {
|
||||
export const calculate_score = (q_time: number, time_taken: number): number => {
|
||||
return q_time / time_taken;
|
||||
};
|
||||
|
||||
export type RGB = [number, number, number];
|
||||
export const getContrast = (foregroundColor: RGB, backgroundColor: RGB) => {
|
||||
const foregroundLuminance = getLuminance(foregroundColor);
|
||||
const backgroundLuminance = getLuminance(backgroundColor);
|
||||
return backgroundLuminance < foregroundLuminance
|
||||
? (backgroundLuminance + 0.05) / (foregroundLuminance + 0.05)
|
||||
: (foregroundLuminance + 0.05) / (backgroundLuminance + 0.05);
|
||||
};
|
||||
|
||||
export const getLuminance = (rgb: RGB): number => {
|
||||
const [r, g, b] = rgb.map((v) => {
|
||||
v /= 255;
|
||||
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
|
||||
});
|
||||
return r * 0.2126 + g * 0.7152 + b * 0.0722;
|
||||
};
|
||||
|
||||
export const getRgbColorFromHex = (hex: string): RGB => {
|
||||
hex = hex.slice(1);
|
||||
const value = parseInt(hex, 16);
|
||||
const r = (value >> 16) & 255;
|
||||
const g = (value >> 8) & 255;
|
||||
const b = value & 255;
|
||||
|
||||
return [r, g, b] as RGB;
|
||||
};
|
||||
|
||||
export const get_foreground_color = (bg_color: string): 'black' | 'white' => {
|
||||
const bg_rgb = getRgbColorFromHex(bg_color);
|
||||
const white_rgb: RGB = [255, 255, 255];
|
||||
const black_rgb: RGB = [0, 0, 0];
|
||||
const black_contrast = getContrast(black_rgb, bg_rgb);
|
||||
const white_contrast = getContrast(white_rgb, bg_rgb);
|
||||
return black_contrast < white_contrast ? 'black' : 'white';
|
||||
};
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -138,6 +139,7 @@
|
||||
}
|
||||
};
|
||||
$: console.log(slider_value, 'values');
|
||||
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
|
||||
</script>
|
||||
|
||||
<div class="h-screen w-screen">
|
||||
@@ -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]}
|
||||
/>
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
import Editor from '$lib/editor.svelte';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import { navbarVisible } from '$lib/stores';
|
||||
import { QuizQuestionType } from '$lib/quiz_types';
|
||||
import type { Question } from '$lib/quiz_types';
|
||||
|
||||
navbarVisible.set(false);
|
||||
@@ -36,12 +35,12 @@
|
||||
public: false,
|
||||
title: '',
|
||||
questions: [
|
||||
{
|
||||
/* {
|
||||
type: QuizQuestionType.ABCD,
|
||||
question: '',
|
||||
time: '20',
|
||||
answers: [{ right: false, answer: '' }]
|
||||
}
|
||||
}*/
|
||||
]
|
||||
};
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user