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

BROKEN quick save

Browse Source
This commit is contained in:
Mawoka
2023-01-18 20:34:37 +01:00
parent 0f000987ca
commit 6788b32131
5 changed files with 128 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
classquiz/socket_server/__init__.py
+1
View File
@@ -322,6 +322,7 @@ async def submit_answer(sid: str, data: dict):
print(data.dict()["complex_answer"], correct_answers)
if correct_answers == data.dict()["complex_answer"]:
answer_right = True
# TODO Set data.answer to a real value for export
elif game_data.questions[int(float(data.question_index))].type == QuizQuestionType.TEXT:
answer_right = False
frontend/src/lib/dashboard/main_slider.svelte
+12
View File
@@ -371,6 +371,18 @@
</div>
{/each}
</div>
{:else if question.type === QuizQuestionType.ORDER}
<ul class="flex flex-col gap-4 m-4 p-6">
{#each question.answers as answer}
<li
class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300"
>
<h4 class="text-center">
{answer.answer}
</h4>
</li>
{/each}
</ul>
{:else if question.type === QuizQuestionType.SLIDE}
<div
use:viewport
frontend/src/lib/editor/OrderEditorPart.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
<div class="flex flex-col w-full px-8" bind:this={parent_el}>
{#each data.questions[selected_question].answers as answer, i (answer.id)}
<div
animate:flip
animate:flip={{ duration: 200 }}
out:fade={{ duration: 150 }}
class="p-4 rounded-lg flex justify-center w-full transition relative border border-gray-600 flex-row gap-4 m-2"
>
frontend/src/lib/practice/question.svelte
+104 -24
View File
@@ -3,12 +3,13 @@
- 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">
<script lang='ts'>
import type { Question } from '$lib/quiz_types';
import { fly } from 'svelte/transition';
import { getLocalization } from '$lib/i18n';
import { QuizQuestionType } from '$lib/quiz_types';
import Spinner from '$lib/Spinner.svelte';
import { flip } from 'svelte/animate';
export let question: Question;
@@ -41,20 +42,29 @@
let text_input;
timer(question.time);
const swapArrayElements = (arr, a: number, b: number) => {
let _arr = [...arr];
let temp = _arr[a];
_arr[a] = _arr[b];
_arr[b] = temp;
return _arr;
};
</script>
<div class="w-full px-6 lg:px-20 h-[80vh] absolute" in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
<h1 class="text-3xl text-center">{@html question.question}</h1>
<div class='w-full px-6 lg:px-20 h-[80vh] absolute' in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
<h1 class='text-3xl text-center'>{@html question.question}</h1>
{#if question.image !== null}
<div>
<img
src={question.image}
class="max-h-[40vh] object-cover mx-auto mb-8 w-auto"
alt="Content for Question"
class='max-h-[40vh] object-cover mx-auto mb-8 w-auto'
alt='Content for Question'
/>
</div>
{/if}
<p class="text-center">{timer_res}</p>
<p class='text-center'>{timer_res}</p>
{#if question.type === QuizQuestionType.ABCD}
{#if show_results}
<div>
@@ -65,8 +75,8 @@
class:bg-red-500={!question.answers[i].right}
class:text-xl={i === selected_answer}
class:underline={i === selected_answer}
class="p-2 rounded-lg flex justify-center w-full transition my-5 text-black"
>{answer.answer}</button
class='p-2 rounded-lg flex justify-center w-full transition my-5 text-black'
>{answer.answer}</button
>
{/each}
</div>
@@ -75,7 +85,7 @@
{#each question.answers as answer, i}
<button
disabled={selected_answer !== undefined || timer_res === '0'}
class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
class='p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black'
on:click={() => {
selected_answer = i;
timer_res = '0';
@@ -84,7 +94,7 @@
{/each}
{#if timer_res === '0'}
<button
class="bg-orange-500 p-2 rounded-lg flex justify-center w-full transition my-5 text-black"
class='bg-orange-500 p-2 rounded-lg flex justify-center w-full transition my-5 text-black'
on:click={() => {
show_results = true;
}}>{$t('admin_page.get_results')}</button
@@ -97,7 +107,7 @@
{#await import('svelte-range-slider-pips')}
<Spinner />
{:then c}
<div class="grayscale pointer-events-none w-full">
<div class='grayscale pointer-events-none w-full'>
<svelte:component
this={c.default}
bind:values={slider_values}
@@ -105,7 +115,7 @@
bind:max={question.answers.max}
pips
float
all="label"
all='label'
/>
</div>
{/await}
@@ -121,18 +131,18 @@
bind:max={question.answers.max}
pips
float
all="label"
all='label'
/>
</div>
<div class="flex justify-center">
<div class='flex justify-center'>
<button
class="w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition"
class='w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition'
disabled={selected_answer !== undefined}
on:click={() => {
selected_answer = slider_value[0];
timer_res = '0';
}}
>{$t('words.submit')}
>{$t('words.submit')}
</button>
</div>
{/await}
@@ -141,7 +151,7 @@
{#each question.answers as answer, i}
<button
disabled={selected_answer !== undefined || timer_res === '0'}
class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
class='p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black'
on:click={() => {
selected_answer = i;
timer_res = '0';
@@ -155,7 +165,7 @@
{#await import('$lib/play/admin/slide.svelte')}
<Spinner my={false} />
{:then c}
<div class="max-h-[90%] max-w-[90%]">
<div class='max-h-[90%] max-w-[90%]'>
<svelte:component this={c.default} bind:question />
</div>
{/await}
@@ -163,23 +173,23 @@
{#if timer_res === '0'}
{#each question.answers as answer, i}
<div
class="p-2 rounded-lg flex justify-center w-full transition bg-gray-200 my-5 text-black"
class='p-2 rounded-lg flex justify-center w-full transition bg-gray-200 my-5 text-black'
>
{answer.answer}
</div>
{/each}
{:else}
<div class="flex justify-center mt-2">
<div class='flex justify-center mt-2'>
<input
type="text"
type='text'
bind:value={text_input}
class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center"
class='bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center'
/>
</div>
<div class="flex justify-center">
<div class='flex justify-center'>
<button
disabled={!text_input}
class="w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition"
class='w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition'
on:click={() => {
selected_answer = text_input;
timer_res = '0';
@@ -187,5 +197,75 @@
>
</div>
{/if}
<div class='flex flex-col w-full h-full gap-4 px-4 py-6'>
{#each question.answers as answer, i (answer.id)}
<div
class='w-full h-fit flex-row rounded-lg p-2 align-middle'
animate:flip={{ duration: 100 }}
style="background-color: {answer.color ?? '#b07156'}"
>
<button
on:click={() => {
question.answers = swapArrayElements(question.answers, i, i - 1);
}}
class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
type='button'
disabled={i === 0}
>
<svg
class='w-8 h-8'
stroke-width='2'
viewBox='0 0 24 24'
fill='none'
xmlns='http://www.w3.org/2000/svg'
color='currentColor'
>
<path
d='M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5'
stroke='currentColor'
stroke-width='2'
stroke-linecap='round'
stroke-linejoin='round'
/>
</svg>
</button>
<p class='w-full text-center p-2 text-2xl'>{answer.answer}</p>
<button
on:click={() => {
question.answers = swapArrayElements(question.answers, i, i + 1);
}}
class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
type='button'
disabled={i === question.answers.length - 1}
>
<svg
class='w-8 h-8'
stroke-width='2'
viewBox='0 0 24 24'
fill='none'
xmlns='http://www.w3.org/2000/svg'
color='currentColor'
>
<path
d='M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3'
stroke='currentColor'
stroke-width='2'
stroke-linecap='round'
stroke-linejoin='round'
/>
</svg>
</button>
</div>
{/each}
<button
class='bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition w-full'
type='button'
on:click={() => {
select_complex_answer(question.answers);
}}
>
{$t('words.submit')}
</button>
{/if}
</div>
frontend/src/routes/view/[quiz_id]/+page.svelte
+10
View File
@@ -218,6 +218,16 @@
and {question.answers.max_correct} are correct, where numbers between {question
.answers.min} and {question.answers.max} can be selected.
</p>
{:else if question.type === QuizQuestionType.ORDER}
<ul class="flex flex-col gap-4 m-4 p-6">
{#each question.answers as answer}
<li class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300">
<h4 class="text-center">
{answer.answer}
</h4>
</li>
{/each}
</ul>
{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
<div class="grid grid-cols-2 gap-4 m-4 p-6">
{#each question.answers as answer, index_answer}