LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Added Kahoot!-Mode

Browse Source
This commit is contained in:
Mawoka
2022-09-17 22:32:18 +02:00
parent 4f2478c8e5
commit 1651cd7b2c
16 changed files with 161 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/admin.svelte
+19 -1
View File
@@ -9,9 +9,12 @@
import { get_question_title } from '$lib/admin.ts';
import type { PlayerAnswer } from '$lib/admin.ts';
import { socket } from './socket';
import { QuizQuestionType } from '$lib/quiz_types';
import { kahoot_icons } from './play/kahoot_mode_assets/kahoot_icons';
export let game_token: string;
export let quiz_data: QuizData;
export let game_mode;
const { t } = getLocalization();
@@ -84,11 +87,26 @@
<div>
<img
src={quiz_data.questions[selected_question].image}
class="h-2/5 object-cover mx-auto mb-8"
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}
</div>
{/if}
{/if}
{/if}
<br />
{#if timer_res === '0'}
frontend/src/lib/dashboard/main_slider.svelte
+7 -2
View File
@@ -11,8 +11,9 @@
import { Pagination, EffectCoverflow, Keyboard, Mousewheel, Navigation } from 'swiper';
import { QuizQuestionType } from '$lib/quiz_types.js';
import { getLocalization } from '../i18n';
import { start_game } from './start_game';
import StartGamePopup from './start_game.svelte';
let start_game = null;
const { t } = getLocalization();
export let quizzes;
@@ -149,7 +150,7 @@
>
<button
on:click={() => {
start_game(quiz.id);
start_game = quiz.id;
}}
class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
>
@@ -248,3 +249,7 @@
{/each}
</Swiper>
</div>
{#if start_game !== null}
<StartGamePopup bind:quiz_id={start_game} />
{/if}
frontend/src/lib/dashboard/start_game_background.svg
+8
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

frontend/src/lib/editor/ABCDEditorPart.svelte
-1
View File
@@ -9,7 +9,6 @@
import { reach } from 'yup';
import { ABCDQuestionSchema } from '$lib/yupSchemas';
import { getLocalization } from '$lib/i18n';
import { invertColor } from '$lib/helpers';
const { t } = getLocalization();
frontend/src/lib/play/join.svelte
+4 -1
View File
@@ -13,6 +13,7 @@
const { t } = getLocalization();
export let game_pin: string;
export let game_mode;
let username = '';
let hcaptchaSitekey = import.meta.env.VITE_HCAPTCHA;
@@ -54,8 +55,10 @@
let captcha_resp: string;
const res = await fetch(`/api/v1/quiz/play/check_captcha/${game_pin}`);
let captcha_enabled;
const json = await res.json();
game_mode = json.game_mode;
if (res.status === 200) {
captcha_enabled = (await res.json()).enabled;
captcha_enabled = json.enabled;
}
if (res.status === 404) {
alertModal.set({
frontend/src/lib/play/kahoot_mode_assets/0.svg
+12
View File
@@ -0,0 +1,12 @@
<!--
- 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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 807 B

frontend/src/lib/play/kahoot_mode_assets/1.svg
+12
View File
@@ -0,0 +1,12 @@
<!--
- 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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 807 B

frontend/src/lib/play/kahoot_mode_assets/2.svg
+12
View File
@@ -0,0 +1,12 @@
<!--
- 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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 807 B

frontend/src/lib/play/kahoot_mode_assets/3.svg
+12
View File
@@ -0,0 +1,12 @@
<!--
- 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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 807 B

frontend/src/lib/play/kahoot_mode_assets/kahoot_icons.ts
+12
View File
@@ -0,0 +1,12 @@
/*
* 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/.
*/
import KahootModeIcon0 from '$lib/play/kahoot_mode_assets/0.svg';
import KahootModeIcon1 from '$lib/play/kahoot_mode_assets/1.svg';
import KahootModeIcon2 from '$lib/play/kahoot_mode_assets/2.svg';
import KahootModeIcon3 from '$lib/play/kahoot_mode_assets/3.svg';
export const kahoot_icons = [KahootModeIcon0, KahootModeIcon1, KahootModeIcon2, KahootModeIcon3];
frontend/src/lib/play/question.svelte
+29 -11
View File
@@ -9,11 +9,12 @@
import { socket } from '$lib/socket';
import Spinner from '../Spinner.svelte';
import { getLocalization } from '$lib/i18n';
import { invertColor } from '$lib/helpers';
import { kahoot_icons } from './kahoot_mode_assets/kahoot_icons';
const { t } = getLocalization();
export let question: Question;
export let game_mode;
export let question_index: string | number;
if (typeof question_index === 'string') {
@@ -84,16 +85,33 @@
{/if}
{#if timer_res !== '0'}
{#if question.type === QuizQuestionType.ABCD}
<div class="flex flex-wrap">
{#each question.answers as answer}
<button
class="w-1/2 text-3xl my-2 disabled:opacity-60 border border-white"
style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
>
{/each}
</div>
{#if game_mode === 'normal'}
<div class="flex flex-wrap">
{#each question.answers as answer}
<button
class="w-1/2 text-3xl my-2 disabled:opacity-60 border border-white"
style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
>
{/each}
</div>
{:else if game_mode === 'kahoot'}
<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"
style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}
>
<img class="w-10 inline-block" alt="Icon" src={kahoot_icons[i]} />
</button>
{/each}
</div>
{:else}
<p>Error</p>
{/if}
{:else if question.type === QuizQuestionType.RANGE}
{#await import('svelte-range-slider-pips')}
<Spinner />