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

✨ Made editor more user-friendly

Browse Source
This commit is contained in:
Mawoka
2023-10-04 11:51:24 +02:00
parent 28676787ea
commit 47abc28440
8 changed files with 80 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/editor/ABCDEditorPart.svelte
+2 -2
View File
@@ -97,11 +97,11 @@ SPDX-License-Identifier: MPL-2.0
<input
bind:value={answer.answer}
type="text"
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent"
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none focus:shadow-2xl transition-all"
style="background-color: {answer.color}; color: {get_foreground_color(
answer.color
)}"
placeholder={$t('editor.empty')}
placeholder={$t('editor.enter_answer')}
/>
<button
type="button"
frontend/src/lib/editor/AddNewQuestionPopup.svelte
+13 -1
View File
@@ -96,7 +96,7 @@ SPDX-License-Identifier: MPL-2.0
on:click={on_parent_click}
transition:fade|local={{ duration: 100 }}
>
<div class="m-auto w-2/3 h-5/6 rounded shadow-2xl bg-white dark:bg-gray-600 p-6">
<div class="m-auto w-2/3 h-5/6 rounded shadow-2xl bg-white dark:bg-gray-600 p-6 flex flex-col">
<h1 class="text-center text-3xl mb-6">{$t('quiztivity.editor.select_page_type')}</h1>
<div class="grid grid-cols-4 gap-4 overflow-y-scroll">
{#each question_types as qt, i}
@@ -111,5 +111,17 @@ SPDX-License-Identifier: MPL-2.0
</div>
{/each}
</div>
<div class="mt-auto flex justify-center">
<p>
{$t('editor.need_more_help')}
<a
href="/docs/quiz/question-types"
target="_blank"
class="text-sm font-bold underline text-blue-500 dark:text-blue-400"
>{$t('editor.visit_docs')}</a
>
</p>
</div>
</div>
</div>
frontend/src/lib/editor/OrderEditorPart.svelte
+18 -2
View File
@@ -9,6 +9,7 @@ SPDX-License-Identifier: MPL-2.0
import type { EditorData, OrderQuizAnswer } from '$lib/quiz_types';
import { fade } from 'svelte/transition';
import { flip } from 'svelte/animate';
import { get_foreground_color } from '$lib/helpers.ts';
const { t } = getLocalization();
@@ -51,6 +52,19 @@ SPDX-License-Identifier: MPL-2.0
id: [i]
};
}
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
const set_colors_if_unset = () => {
for (let i = 0; i < data.questions[selected_question].answers.length; i++) {
if (!data.questions[selected_question].answers[i].color) {
data.questions[selected_question].answers[i].color = default_colors[i];
}
}
};
$: {
set_colors_if_unset();
data;
selected_question;
}
</script>
<div class="w-full">
@@ -140,8 +154,10 @@ SPDX-License-Identifier: MPL-2.0
<input
bind:value={answer.answer}
type="text"
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent"
style="background-color: {answer.color ?? 'transparent'}"
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none"
style="background-color: {answer.color}; color: {get_foreground_color(
answer.color
)}"
placeholder={$t('editor.empty')}
/>
<input
frontend/src/lib/editor/TextEditorPart.svelte
+9 -2
View File
@@ -10,6 +10,7 @@ SPDX-License-Identifier: MPL-2.0
import { getLocalization } from '$lib/i18n';
import { reach } from 'yup';
import { TextQuestionSchema } from '$lib/yupSchemas';
import { createTippy } from 'svelte-tippy';
export let selected_question: number;
export let data: EditorData;
@@ -27,6 +28,11 @@ SPDX-License-Identifier: MPL-2.0
};
}
const tippy = createTippy({
arrow: true,
animation: 'perspective-subtle'
});
const get_empty_answer = (): TextQuizAnswer => {
return {
answer: '',
@@ -74,14 +80,15 @@ SPDX-License-Identifier: MPL-2.0
<input
bind:value={answer.answer}
type="text"
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent"
placeholder={$t('editor.empty')}
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none"
placeholder={$t('editor.enter_answer')}
/>
<button
type="button"
on:click={() => {
answer.case_sensitive = !answer.case_sensitive;
}}
use:tippy={{ content: 'Case sensitive?', placement: 'top' }}
>
{#if answer.case_sensitive}
<svg
frontend/src/lib/editor/card.svelte
+2 -2
View File
@@ -186,9 +186,10 @@ SPDX-License-Identifier: MPL-2.0
type="number"
max="999"
min="1"
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1"
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 outline-none focus:shadow-2xl"
bind:value={data.questions[selected_question].time}
/>
<p class="inline-block">s</p>
</div>
</div>
<div class="flex justify-center py-5">
@@ -207,7 +208,6 @@ SPDX-License-Identifier: MPL-2.0
/>
{/await}
{:else if type === QuizQuestionType.RANGE}
<p>Range</p>
<RangeEditor bind:selected_question bind:data />
{:else if type === QuizQuestionType.VOTING}
{#await import('$lib/editor/VotingEditorPart.svelte')}
frontend/src/lib/editor/settings-card.svelte
+21 -11
View File
@@ -8,6 +8,7 @@ SPDX-License-Identifier: MPL-2.0
import type { EditorData } from '$lib/quiz_types';
import { getLocalization } from '$lib/i18n';
import Spinner from '$lib/Spinner.svelte';
import { createTippy } from 'svelte-tippy';
const { t } = getLocalization();
@@ -18,6 +19,10 @@ SPDX-License-Identifier: MPL-2.0
export let data: EditorData;
let custom_bg_color = Boolean(data.background_color);
const tippy = createTippy({
arrow: true,
animation: 'perspective-subtle'
});
$: data.background_color = custom_bg_color ? data.background_color : undefined;
</script>
@@ -45,10 +50,10 @@ SPDX-License-Identifier: MPL-2.0
>
<div class="flex justify-center pt-10 w-full">
<!--<input
type="text"
bind:value={data.title}
class="p-3 rounded-lg border-gray-500 border text-center w-1/3 text-lg font-semibold dark:bg-gray-500"
/>-->
type="text"
bind:value={data.title}
class="p-3 rounded-lg border-gray-500 border text-center w-1/3 text-lg font-semibold dark:bg-gray-500"
/>-->
{#await import('$lib/inline-editor.svelte')}
<Spinner my_20={false} />
{:then c}
@@ -58,8 +63,9 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex justify-center pt-10 w-full max-h-32">
<textarea
type="text"
placeholder="Description"
bind:value={data.description}
class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none dark:bg-gray-500"
class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none dark:bg-gray-500 outline-none focus:shadow-2xl transition-all"
/>
</div>
@@ -134,12 +140,15 @@ SPDX-License-Identifier: MPL-2.0
<div class="grid grid-cols-3 w-fit h-fit gap-4">
<div
class="max-w-full transition-all"
class:pointer-events-none={custom_bg_color}
class:opacity-50={custom_bg_color}
use:tippy={{ content: 'use the standard background', placement: 'left' }}
>
<div class="bg-gray-200 rounded-lg w-full h-full p-1">
<div
class="bg-gray-200 rounded-lg w-full h-full p-1"
class:pointer-events-none={custom_bg_color}
>
<span
class="inline-block w-full h-full bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702]"
class="inline-block w-full h-full bg-[#d6edc9] dark:bg-[#4e6e58]"
/>
</div>
</div>
@@ -160,11 +169,12 @@ SPDX-License-Identifier: MPL-2.0
</label>
</div>
<div
class:pointer-events-none={!custom_bg_color}
class:opacity-50={!custom_bg_color}
class="transition-all"
use:tippy={{ content: 'Use your own background color', placement: 'right' }}
>
<input
class:pointer-events-none={!custom_bg_color}
type="color"
class="rounded-lg p-1 min-h-full hover:cursor-pointer border-black border"
bind:value={data.background_color}
@@ -182,8 +192,8 @@ SPDX-License-Identifier: MPL-2.0
data.background_image = undefined;
}}
class="mt-10 bg-red-500 p-2 rounded-lg border-2 border-black transition hover:bg-red-400"
>Remove Background-Image</button
>
>Remove Background-Image
</button>
{:else}
{#await import('$lib/editor/uploader.svelte')}
<div class="pt-10">
frontend/src/lib/i18n/locales/en.json
+4 -1
View File
@@ -217,7 +217,10 @@
"check_choice_description": "All correct answers have to be chosen to score points",
"order_description": "Answers can be brought into the correct order",
"text_description": "Players can enter text",
"range_description": "A number-range can be selected with a slider"
"range_description": "A number-range can be selected with a slider",
"need_more_help": "Need more help?",
"visit_docs": "Visit the docs.",
"enter_answer": "Enter an answer"
},
"import_page": {
"need_help": "Need help?",
frontend/src/routes/dashboard/+page.svelte
+11 -1
View File
@@ -18,6 +18,7 @@ SPDX-License-Identifier: MPL-2.0
import StartGamePopup from '$lib/dashboard/start_game.svelte';
import Analytics from './Analytics.svelte';
import MediaComponent from '$lib/editor/MediaComponent.svelte';
import { createTippy } from 'svelte-tippy';
// import GrayButton from "$lib/components/buttons/gray.svelte";
@@ -31,6 +32,11 @@ SPDX-License-Identifier: MPL-2.0
let items_to_show = [];
let all_items: Array<any>;
let fuse;
const tippy = createTippy({
arrow: true,
animation: 'perspective-subtle',
placement: 'bottom'
});
let id_to_position_map = {};
@@ -117,7 +123,11 @@ SPDX-License-Identifier: MPL-2.0
</button>-->
<div class="w-full grid lg:grid-cols-4 gap-2 grid-cols-2 px-4">
{#if create_button_clicked}
<div class="flex gap-2" transition:fly={{ y: 10 }}>
<div
class="flex gap-2"
transition:fly={{ y: 10 }}
use:tippy={{ content: 'Unsure? Choose "Quiz".' }}
>
<BrownButton href="/create">{$t('words.quiz')}</BrownButton>
<BrownButton href="/quiztivity/create">{$t('words.quiztivity')}</BrownButton
>