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

✨ Implemented in Editor

Browse Source
This commit is contained in:
Mawoka
2022-10-04 12:38:04 +02:00
parent 4a54ed5bf8
commit 99bd6cc329
8 changed files with 162 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/editor/RangeSelectorEditorPart.svelte
+2 -2
View File
@@ -66,10 +66,10 @@
<!-- <RangeSlider bind:value={range_arr} bind:min={answer.min} bind:max={answer.max} range={true} slider={lol} /> -->
{#await import('svelte-range-slider-pips')}
<Spinner />
<Spinner my_20={false} />
{:then c}
{#await sleep(100)}
<Spinner />
<Spinner my_20={false} />
{:then _}
<svelte:component
this={c.default}
frontend/src/lib/editor/VotingEditorPart.svelte
+83
View File
@@ -0,0 +1,83 @@
<!--
- 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 { EditorData, VotingAnswer } from '../quiz_types';
import { fade } from 'svelte/transition';
import { reach } from 'yup';
import { getLocalization } from '$lib/i18n';
import { VotingQuestionSchema } from '$lib/yupSchemas';
const { t } = getLocalization();
const empty_answer: VotingAnswer = {
answer: '',
image: undefined
};
export let selected_question: number;
export let data: EditorData;
if (!Array.isArray(data.questions[selected_question].answers)) {
data.questions[selected_question].answers = [];
}
</script>
<!--
- 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/.
-->
<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"
class:bg-yellow-500={!reach(VotingQuestionSchema, 'answer').isValidSync(
answer.answer
)}
class:dark:bg-gray-500={answer.answer}
class:bg-gray-300={answer.answer}
>
<input
bind:value={answer.answer}
type="text"
on:contextmenu|preventDefault={() => {
data.questions[selected_question].answers.splice(index, 1);
data.questions[selected_question].answers =
data.questions[selected_question].answers;
}}
class="border-b-2 border-dotted w-5/6 text-center rounded-lg"
style="background-color: {answer.color ?? 'transparent'}"
placeholder="Empty..."
/>
<input
class="rounded-lg p-1"
type="color"
bind:value={answer.color}
on:contextmenu|preventDefault={() => {
answer.color = null;
}}
/>
</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,
{ ...empty_answer }
];
}}
>
<span class="italic text-center">{$t('editor_page.add_an_answer')}</span>
</button>
{/if}
</div>
frontend/src/lib/editor/card.svelte
+10 -3
View File
@@ -96,11 +96,11 @@
use:tippy={{ content: "Click to learn why it's loading so long." }}
class="cursor-help"
>
<Spinner />
<Spinner my_20={false} />
</a>
{:else}
{#await import('$lib/editor/uploader.svelte')}
<Spinner />
<Spinner my_20={false} />
{:then c}
<svelte:component
this={c.default}
@@ -146,17 +146,24 @@
>
<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>
</select>
</div>
<div class="flex justify-center pt-10 w-full">
{#if data.questions[selected_question].type === QuizQuestionType.ABCD}
{#await import('$lib/editor/ABCDEditorPart.svelte')}
<Spinner />
<Spinner my_20={false} />
{:then c}
<svelte:component this={c.default} bind:data bind:selected_question />
{/await}
{:else if data.questions[selected_question].type === QuizQuestionType.RANGE}
<RangeEditor bind:selected_question bind:data />
{:else if data.questions[selected_question].type === QuizQuestionType.VOTING}
{#await import('$lib/editor/VotingEditorPart.svelte')}
<Spinner my_20={false} />
{:then c}
<svelte:component this={c.default} bind:data bind:selected_question />
{/await}
{/if}
</div>
<p class="italic text-center mt-auto pt-4">{$t('editor_page.right_click_to_delete')}</p>
frontend/src/lib/editor/settings-card.svelte
+2 -2
View File
@@ -67,11 +67,11 @@
</div>
{:else if pow_data === undefined}
<a href="/docs/pow" target="_blank" class="cursor-help">
<Spinner />
<Spinner my_20={false} />
</a>
{:else}
{#await import('$lib/editor/uploader.svelte')}
<Spinner />
<Spinner my_20={false} />
{:then c}
<svelte:component
this={c.default}
frontend/src/lib/editor/sidebar.svelte
+24
View File
@@ -207,6 +207,30 @@
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}
{#if Array.isArray(question.answers)}
<div class="grid grid-cols-2 gap-2">
{#each question.answers as answer}
<span
class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700"
class:dark:bg-gray-500={answer.answer}
class:bg-gray-300={answer.answer}
class:bg-yellow-500={!reach(
ABCDQuestionSchema,
'answer'
).isValidSync(answer.answer)}
use:tippy={{
content: answer.answer === '' ? 'Empty...' : answer.answer
}}
>{#if answer.answer === ''}
<i>Empty...</i>
{:else}
{answer.answer}
{/if}</span
>
{/each}
</div>
{/if}
{:else}
<p>Unknown Question Type (shouldn't happen)</p>
{/if}