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

✨ Slides kinda working

Browse Source
This commit is contained in:
Mawoka
2022-12-22 17:54:22 +01:00
parent 0af5aeef95
commit 8d8c524e94
7 changed files with 118 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
classquiz/db/models.py
-1
View File
@@ -140,7 +140,6 @@ class QuizQuestion(BaseModel):
@validator("answers") @validator("answers")
def answers_not_none_if_abcd_type(cls, v, values): def answers_not_none_if_abcd_type(cls, v, values):
print(values)
if values["type"] == QuizQuestionType.ABCD and type(v[0]) != ABCDQuizAnswer: if values["type"] == QuizQuestionType.ABCD and type(v[0]) != ABCDQuizAnswer:
raise ValueError("Answers can't be none if type is ABCD") raise ValueError("Answers can't be none if type is ABCD")
if values["type"] == QuizQuestionType.RANGE and type(v) != RangeQuizAnswer: if values["type"] == QuizQuestionType.RANGE and type(v) != RangeQuizAnswer:
classquiz/socket_server/__init__.py
+2
View File
@@ -230,6 +230,8 @@ async def set_question_number(sid, data: str):
await redis.set(f"game:{session['game_pin']}", game_data.json()) await redis.set(f"game:{session['game_pin']}", game_data.json())
await redis.set(f"game:{session['game_pin']}:current_time", datetime.now().isoformat()) await redis.set(f"game:{session['game_pin']}:current_time", datetime.now().isoformat())
temp_return = game_data.dict(include={"questions"})["questions"][int(float(data))] temp_return = game_data.dict(include={"questions"})["questions"][int(float(data))]
if game_data.questions[int(float(data))].type == QuizQuestionType.SLIDE:
return
if game_data.questions[int(float(data))].type == QuizQuestionType.VOTING: if game_data.questions[int(float(data))].type == QuizQuestionType.VOTING:
for i in range(len(temp_return["answers"])): for i in range(len(temp_return["answers"])):
temp_return["answers"][i] = VotingQuizAnswer(**temp_return["answers"][i]) temp_return["answers"][i] = VotingQuizAnswer(**temp_return["answers"][i])
frontend/src/lib/admin.svelte
+54 -42
View File
@@ -87,14 +87,14 @@
timer_res = seconds.toString(); timer_res = seconds.toString();
}, 1000); }, 1000);
}; };
let circular_prgoress = 0; let circular_progress = 0;
$: { $: {
try { try {
circular_prgoress = circular_progress =
1 - 1 -
((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100; ((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100;
} catch { } catch {
circular_prgoress = 0; circular_progress = 0;
} }
} }
</script> </script>
@@ -126,7 +126,7 @@
</button> </button>
{/if} {/if}
{#if question_results === null && selected_question !== -1} {#if question_results === null && selected_question !== -1}
<button on:click={get_question_results} class="admin-button">Show results </button> <button on:click={get_question_results} class="admin-button">Show results</button>
{/if} {/if}
{:else if selected_question !== -1} {:else if selected_question !== -1}
<button on:click={show_solutions} class="admin-button" <button on:click={show_solutions} class="admin-button"
@@ -153,50 +153,62 @@
<div class="w-full h-full pt-28"> <div class="w-full h-full pt-28">
{#if timer_res !== undefined && !final_results_clicked && !question_results} {#if timer_res !== undefined && !final_results_clicked && !question_results}
<div class="flex flex-col justify-center w-screen h-1/6"> {#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
<h1 class="text-6xl text-center"> {#await import('$lib/play/admin/slide.svelte')}
{@html quiz_data.questions[selected_question].question} <Spinner my_20={false} />
</h1> {:then c}
<!-- <span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>--> <svelte:component
<div class="mx-auto my-2"> this={c.default}
<CircularTimer bind:question={quiz_data.questions[selected_question]}
bind:text={timer_res}
bind:progress={circular_prgoress}
color="#ef4444"
/> />
{/await}
{:else}
<div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center">
{@html 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_progress}
color="#ef4444"
/>
</div>
</div> </div>
</div> {#if quiz_data.questions[selected_question].image !== null}
{#if quiz_data.questions[selected_question].image !== null} <div>
<div> <img
<img src={quiz_data.questions[selected_question].image}
src={quiz_data.questions[selected_question].image} class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
class="max-h-[20vh] object-cover mx-auto mb-8 w-auto" alt="Content for Question"
alt="Content for Question" />
/> </div>
</div> {/if}
{/if} {#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING} <div class="grid grid-cols-2 gap-2 w-full p-4">
<div class="grid grid-cols-2 gap-2 w-full p-4"> {#each quiz_data.questions[selected_question].answers as answer, i}
{#each quiz_data.questions[selected_question].answers as answer, i} <div
<div class="rounded-lg h-fit flex"
class="rounded-lg h-fit flex" style="background-color: {answer.color ?? '#B45309'}"
style="background-color: {answer.color ?? '#B45309'}" class:opacity-50={!answer.right &&
class:opacity-50={!answer.right && timer_res === '0' &&
timer_res === '0' && quiz_data.questions[selected_question].type ===
quiz_data.questions[selected_question].type === QuizQuestionType.ABCD} 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
> >
<span class="pl-4 w-10" /> <img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
</div> <span class="text-center text-2xl px-2 py-4 w-full text-black"
{/each} >{answer.answer}</span
</div> >
<span class="pl-4 w-10" />
</div>
{/each}
</div>
{/if}
{/if} {/if}
{/if} {/if}
<br /> <br />
{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])} {#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify( [null] ) && quiz_data.questions[selected_question].type !== QuizQuestionType.SLIDE}
{#if question_results === null}{:else if question_results === undefined} {#if question_results === null}{:else if question_results === undefined}
{#if !final_results_clicked} {#if !final_results_clicked}
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
frontend/src/lib/editor/slide.svelte
+1 -1
View File
@@ -187,7 +187,7 @@
</svg> </svg>
</button>--> </button>-->
{#if el.type === ElementTypes.Text} {#if el.type === ElementTypes.Text}
<TextElement bind:text={el.data} /> <TextElement bind:data={el.data} />
{:else if el.type === ElementTypes.Headline} {:else if el.type === ElementTypes.Headline}
<HeadlineElement bind:data={el.data} /> <HeadlineElement bind:data={el.data} />
{/if} {/if}
frontend/src/lib/editor/slides/types/headline.svelte
+12 -5
View File
@@ -5,10 +5,17 @@
--> -->
<script lang="ts"> <script lang="ts">
export let data; export let data;
export let editor = true;
</script> </script>
<input {#if editor}
bind:value={data} <input
type="text" bind:value={data}
class="w-full h-full dark:text-black text-center text-3xl min-h-fit" type="text"
/> class="w-full h-full dark:text-black text-center text-3xl min-h-fit"
/>
{:else}
<h2 class="w-full h-full text-center text-3xl min-h-fit">
{data}
</h2>
{/if}
frontend/src/lib/editor/slides/types/text.svelte
+7 -8
View File
@@ -4,13 +4,12 @@
- file, You can obtain one at https://mozilla.org/MPL/2.0/. - file, You can obtain one at https://mozilla.org/MPL/2.0/.
--> -->
<script lang="ts"> <script lang="ts">
export let text; export let data;
export let editor = true;
</script> </script>
<!-- {#if editor}
- This Source Code Form is subject to the terms of the Mozilla Public <textarea bind:value={data} class="w-full h-full dark:text-black resize-none" />
- License, v. 2.0. If a copy of the MPL was not distributed with this {:else}
- file, You can obtain one at https://mozilla.org/MPL/2.0/. <p>{data}</p>
--> {/if}
<textarea bind:value={text} class="w-full h-full dark:text-black resize-none" />
frontend/src/lib/play/admin/slide.svelte
+42
View File
@@ -0,0 +1,42 @@
<!--
- 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 TextElement from '$lib/editor/slides/types/text.svelte';
import HeadlineElement from '$lib/editor/slides/types/headline.svelte';
import { ElementTypes } from '$lib/quiz_types.js';
import { draggable } from '@neodrag/svelte';
export let question: Question;
let main_el: HTMLElement | undefined;
</script>
<div class="w-full min-h-[calc(100vh-8rem)]" bind:this={main_el}>
{#if main_el}
{#each question.answers as el, i}
<div
use:draggable={{
bounds: 'parent',
handle: '.drag',
disabled: true,
defaultPosition: {
x: el.x * main_el.offsetWidth,
y: el.y * main_el.offsetHeight
}
}}
style="height: {el.height * main_el.offsetHeight}px; width: {el.width *
main_el.offsetWidth}px"
>
{#if el.type === ElementTypes.Text}
<TextElement bind:data={el.data} editor={false} />
{:else if el.type === ElementTypes.Headline}
<HeadlineElement bind:data={el.data} editor={false} />
{/if}
</div>
{/each}
{/if}
</div>