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
classquiz/db/models.py
+1
View File
@@ -158,6 +158,7 @@ class PlayGame(BaseModel):
started: bool = False
captcha_enabled: bool = False
cover_image: str | None
game_mode: str | None
class GamePlayer(BaseModel):
classquiz/routers/quiz.py
+10 -5
View File
@@ -90,7 +90,9 @@ async def get_public_quiz(quiz_id: str):
@router.post("/start/{quiz_id}")
async def start_quiz(quiz_id: str, captcha_enabled: bool = True, user: User = Depends(get_current_user)):
async def start_quiz(
quiz_id: str, game_mode: str, captcha_enabled: bool = True, user: User = Depends(get_current_user)
):
try:
quiz_id = uuid.UUID(quiz_id)
except ValueError:
@@ -110,6 +112,7 @@ async def start_quiz(quiz_id: str, captcha_enabled: bool = True, user: User = De
description=quiz.description,
captcha_enabled=captcha_enabled,
cover_image=quiz.cover_image,
game_mode=game_mode,
)
await redis.set(f"game:{str(game.game_pin)}", (game.json()), ex=18000)
return {**quiz.dict(exclude={"id"}), **game.dict(exclude={"questions"})}
@@ -117,6 +120,7 @@ async def start_quiz(quiz_id: str, captcha_enabled: bool = True, user: User = De
class CheckIfCaptchaEnabledResponse(BaseModel):
enabled: bool
game_mode: str | None
@router.get("/play/check_captcha/{game_pin}", response_model=CheckIfCaptchaEnabledResponse)
@@ -124,10 +128,11 @@ async def check_if_captcha_enabled(game_pin: str):
game = await redis.get(f"game:{game_pin}")
if game is None:
return JSONResponse(status_code=404, content={"detail": "game not found"})
try:
return CheckIfCaptchaEnabledResponse(**{"enabled": json.loads(game)["captcha_enabled"]})
except (KeyError, TypeError):
return CheckIfCaptchaEnabledResponse(**{"enabled": True})
game = PlayGame.parse_raw(game)
if game.captcha_enabled:
return CheckIfCaptchaEnabledResponse(enabled=True, game_mode=game.game_mode)
else:
return CheckIfCaptchaEnabledResponse(enabled=False, game_mode=game.game_mode)
@router.get("/join/{game_pin}", deprecated=True)
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 />
frontend/src/routes/admin/+page.svelte
+19 -5
View File
@@ -12,6 +12,7 @@
import type { PlayerAnswer, Player } from '$lib/admin.ts';
import SomeAdminScreen from '$lib/admin.svelte';
import { browser } from '$app/environment';
import { onMount } from 'svelte';
navbarVisible.set(false);
@@ -22,6 +23,7 @@
// game_pin: '66190765'
// };
export let data;
let game_mode;
let { game_pin, auto_connect, game_token } = data;
let players: Array<Player> = [];
@@ -35,15 +37,21 @@
let dataexport_download_a;
let warnToLeave = true;
const connect = () => {
const connect = async () => {
socket.emit('register_as_admin', {
game_pin: game_pin,
game_id: game_token
});
const res = await fetch(`/api/v1/quiz/play/check_captcha/${game_pin}`);
const json = await res.json();
game_mode = json.game_mode;
};
if (auto_connect) {
connect();
}
onMount(() => {
if (auto_connect) {
connect();
}
});
socket.on('registered_as_admin', (data) => {
quiz_data = JSON.parse(data['game']);
console.log(quiz_data);
@@ -152,7 +160,13 @@
</div>
{/if}
{:else}
<SomeAdminScreen bind:final_results bind:game_pin bind:game_token bind:quiz_data />
<SomeAdminScreen
bind:final_results
bind:game_pin
bind:game_token
bind:quiz_data
bind:game_mode
/>
{/if}
<a
frontend/src/routes/play/+page.svelte
+3 -1
View File
@@ -22,6 +22,7 @@
started: boolean;
}
let game_mode;
let final_results: Array<null> | Array<Array<PlayerAnswer>> = [null];
interface PlayerAnswer {
@@ -118,7 +119,7 @@
</svelte:head>
<div>
{#if !gameMeta.started && gameData === undefined}
<JoinGame {game_pin} />
<JoinGame {game_pin} bind:game_mode />
{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
<ShowEndScreen bind:final_results bind:quiz_data={gameData} />
{:else if gameData !== undefined && question_index === ''}
@@ -130,6 +131,7 @@
{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
{#key unique}
<Question
bind:game_mode
bind:question={gameData.questions[parseInt(question_index)]}
bind:question_index
/>
frontend/src/routes/view/[quiz_id]/+page.svelte
+1 -1
View File
@@ -9,7 +9,7 @@
import { createTippy } from 'svelte-tippy';
import ImportedOrNot from '$lib/view_quiz/imported_or_not.svelte';
import { QuizQuestionType } from '$lib/quiz_types.js';
import { start_game } from '$lib/dashboard/start_game';
import { start_game } from '../../../lib/dashboard/start_game.svelte';
const tippy = createTippy({
arrow: true,