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

✨ Added new Question-Type: TextAnswers!

Browse Source
This commit is contained in:
Mawoka
2022-12-29 16:16:09 +01:00
parent 1633d56299
commit 7614420d0c
10 changed files with 257 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/admin.svelte
+15
View File
@@ -248,6 +248,21 @@
</div>
{/each}
</div>
{:else if quiz_data.questions[selected_question].type === QuizQuestionType.TEXT}
{#if timer_res === '0'}
<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 bg-[#B07156]">
<span class="text-center text-2xl px-2 py-4 w-full text-black"
>{answer.answer}</span
>
<span class="pl-4 w-10" />
</div>
{/each}
</div>
{:else}
<p>Enter your answer into the input field!</p>
{/if}
{/if}
{/if}
{/if}
frontend/src/lib/editor/TextEditorPart.svelte
+136
View File
@@ -0,0 +1,136 @@
<!--
- 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 { fade } from 'svelte/transition';
import type { EditorData, TextQuizAnswer } from '$lib/quiz_types';
import { getLocalization } from '$lib/i18n';
import { reach } from 'yup';
import { TextQuestionSchema } from '$lib/yupSchemas';
export let selected_question: number;
export let data: EditorData;
const { t } = getLocalization();
if (!Array.isArray(data.questions[selected_question].answers)) {
data.questions[selected_question].answers = [];
}
for (let i = 0; i < data.questions[selected_question].answers.length; i++) {
data.questions[selected_question].answers[i] = {
answer: data.questions[selected_question].answers[i].answer,
case_sensitive: false
};
}
const get_empty_answer = (): TextQuizAnswer => {
return {
answer: '',
case_sensitive: false
};
};
</script>
<div class="grid grid-cols-2 gap-4 w-full px-10">
{#if Array.isArray(data.questions[selected_question].answers)}
{#each data.questions[selected_question].answers as answer, index}
<div
out:fade={{ duration: 150 }}
class="p-4 rounded-lg flex justify-center w-full transition relative"
class:dark:bg-gray-500={answer.answer}
class:bg-gray-300={answer.answer}
class:bg-yellow-500={!reach(TextQuestionSchema, 'answer').isValidSync(
answer.answer
)}
>
<button
class="rounded-full absolute -top-2 -right-2 opacity-70 hover:opacity-100 transition"
type="button"
on:click={() => {
data.questions[selected_question].answers.splice(index, 1);
data.questions[selected_question].answers =
data.questions[selected_question].answers;
}}
>
<svg
class="w-6 h-6 bg-red-500 rounded-full"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</button>
<input
bind:value={answer.answer}
type="text"
class="border-b-2 border-dotted w-5/6 text-center rounded-lg"
placeholder="Empty..."
/>
<button
type="button"
on:click={() => {
answer.case_sensitive = !answer.case_sensitive;
console.log(answer.case_sensitive);
}}
>
{#if answer.case_sensitive}
<svg
class="w-6 h-6 inline-block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
{:else}
<svg
class="w-6 h-6 inline-block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
{/if}
</button>
</div>
{/each}
{/if}
{#if data.questions[selected_question].answers.length < 4}
<button
class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600"
type="button"
in:fade={{ duration: 150 }}
on:click={() => {
data.questions[selected_question].answers = [
...data.questions[selected_question].answers,
{ ...get_empty_answer() }
];
}}
>
<span class="italic text-center">{$t('editor_page.add_an_answer')}</span>
</button>
{/if}
</div>
frontend/src/lib/editor/card.svelte
+7
View File
@@ -182,6 +182,7 @@
<option value={QuizQuestionType.RANGE}>{$t('words.range')}</option>
<option value={QuizQuestionType.ABCD}>{$t('words.multiple_choice')}</option>
<option value={QuizQuestionType.VOTING}>{$t('words.voting')}</option>
<option value={QuizQuestionType.TEXT}>{$t('words.text')}</option>
</select>
</div>
<div class="flex justify-center py-10 w-full">
@@ -199,6 +200,12 @@
{:then c}
<svelte:component this={c.default} bind:data bind:selected_question />
{/await}
{:else if data.questions[selected_question].type === QuizQuestionType.TEXT}
{#await import('$lib/editor/TextEditorPart.svelte')}
<Spinner my_20={false} />
{:then c}
<svelte:component this={c.default} bind:data bind:selected_question />
{/await}
{/if}
</div>
</div>
frontend/src/lib/play/question.svelte
+17
View File
@@ -72,6 +72,8 @@
});
};
let text_input = '';
let slider_value = [0];
if (question.type === QuizQuestionType.RANGE) {
slider_value[0] = (question.answers.max - question.answers.min) / 2 + question.answers.min;
@@ -187,6 +189,21 @@
</button>
</div>
{/await}
{:else if question.type === QuizQuestionType.TEXT}
<input bind:value={text_input} />
<div class="flex justify-center">
<button
class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed mt-2"
type="button"
disabled={!text_input}
on:click={() => {
selectAnswer(text_input);
}}
>
{$t('words.submit')}
</button>
</div>
{/if}
{:else if question.type === QuizQuestionType.ABCD}
{#if solution === undefined}
frontend/src/lib/practice/question.svelte
+30 -1
View File
@@ -39,6 +39,7 @@
}
let slider_values = [question.answers.min_correct ?? 0, question.answers.max_correct ?? 0];
let text_input;
timer(question.time);
</script>
@@ -125,7 +126,7 @@
</div>
<div class="flex justify-center">
<button
class="w-1/2 text-3xl bg-[#B07156] my-2 disabled:opacity-60 border border-white"
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];
@@ -158,5 +159,33 @@
<svelte:component this={c.default} bind:question />
</div>
{/await}
{:else if question.type === QuizQuestionType.TEXT}
{#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"
>
{answer.answer}
</div>
{/each}
{:else}
<div class="flex justify-center mt-2">
<input
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"
/>
</div>
<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"
on:click={() => {
selected_answer = text_input;
timer_res = '0';
}}>{$t('words.submit')}</button
>
</div>
{/if}
{/if}
</div>
frontend/src/lib/quiz_types.ts
+8 -2
View File
@@ -29,7 +29,8 @@ export enum QuizQuestionType {
ABCD = 'ABCD', // eslint-disable-line no-unused-vars
RANGE = 'RANGE', // eslint-disable-line no-unused-vars
VOTING = 'VOTING', // eslint-disable-line no-unused-vars
SLIDE = 'SLIDE' // eslint-disable-line no-unused-vars
SLIDE = 'SLIDE', // eslint-disable-line no-unused-vars
TEXT = 'TEXT' // eslint-disable-line no-unused-vars
}
export interface RangeQuizAnswer {
@@ -39,12 +40,17 @@ export interface RangeQuizAnswer {
max_correct: number;
}
export interface TextQuizAnswer {
answer: string;
case_sensitive: boolean;
}
export interface Question {
time: string;
question: string;
type?: QuizQuestionType;
image?: string;
answers: Answer[] | RangeQuizAnswer | VotingAnswer[] | string;
answers: Answer[] | RangeQuizAnswer | VotingAnswer[] | string | TextQuizAnswer[];
}
export interface Answer {
frontend/src/lib/yupSchemas.ts
+20 -25
View File
@@ -35,17 +35,17 @@ export const RangeQuestionSchema = yup.object({
max_correct: yup.number()
});
export const SlideQuestionSchema = yup.array().of(
yup.object({
type: yup.string().required(),
x: yup.number(),
y: yup.number(),
height: yup.number(),
width: yup.number(),
data: yup.string().optional(),
id: yup.number().required()
})
);
export const TextQuestionSchema = yup
.array()
.of(
yup.object({
case_sensitive: yup.boolean().required(),
answer: yup.string().required('You need an answer')
})
)
.min(2, 'You need at least 2 answers')
.max(16, "You can't have more than 16 answers");
export const dataSchema = yup.object({
public: yup.boolean().required(),
type: yup.string(),
@@ -75,20 +75,15 @@ export const dataSchema = yup.object({
.lowercase(),
answers: yup.lazy((v) => {
if (Array.isArray(v)) {
try {
if (typeof v[0].right === 'boolean') {
console.log('ABCDQuestionSchema');
return ABCDQuestionSchema;
} else if (v[0].answer !== undefined) {
console.log('VotingQuestionSchema');
return VotingQuestionSchema;
} else {
console.log('SlideQuestionSchema');
return yup.string().required().nullable();
}
} catch {
console.log('SlideQuestionSchema');
return yup.string().required("The slide mustn't be empty").nullable();
if (typeof v[0].right === 'boolean') {
console.log('ABCDQuestionSchema');
return ABCDQuestionSchema;
} else if (typeof v[0].case_sensitive === 'boolean') {
console.log('TextQuestionSchema');
return TextQuestionSchema;
} else if (v[0].answer !== undefined) {
console.log('VotingQuestionSchema');
return VotingQuestionSchema;
}
} else if (typeof v === 'string' || v instanceof String) {
return yup.string().required("The slide mustn't be empty").nullable();
frontend/src/routes/view/[quiz_id]/+page.svelte
+1 -1
View File
@@ -218,7 +218,7 @@
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.VOTING}
{: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}
<div class="p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300">