From cc7d3a489bff2e15ea583591c9df65346b183207 Mon Sep 17 00:00:00 2001 From: Mawoka Date: Sat, 17 Jun 2023 13:35:36 +0200 Subject: [PATCH] :sparkles: Improved question-type selection and fixed bug where Check Choice and ABCD were inverted --- frontend/src/lib/editor.svelte | 2 + frontend/src/lib/editor/ABCDEditorPart.svelte | 8 +- .../src/lib/editor/AddNewQuestionPopup.svelte | 115 ++++++++++++++++++ frontend/src/lib/editor/MediaComponent.svelte | 4 - .../lib/editor/RangeSelectorEditorPart.svelte | 1 + frontend/src/lib/editor/TextEditorPart.svelte | 1 - frontend/src/lib/editor/card.svelte | 27 ++-- frontend/src/lib/editor/sidebar.svelte | 25 ++-- frontend/src/lib/editor/slide.svelte | 2 - .../src/lib/editor/slides/edit_menu.svelte | 4 - .../src/lib/editor/slides/types/circle.svelte | 1 - .../lib/editor/slides/types/rectangle.svelte | 1 - frontend/src/lib/editor/uploader.svelte | 2 - frontend/src/lib/inline-editor.svelte | 1 - frontend/src/lib/quiz_types.ts | 16 +-- frontend/src/routes/edit/+page.svelte | 1 - 16 files changed, 154 insertions(+), 57 deletions(-) create mode 100644 frontend/src/lib/editor/AddNewQuestionPopup.svelte diff --git a/frontend/src/lib/editor.svelte b/frontend/src/lib/editor.svelte index 8755cf2..a1c9d6a 100644 --- a/frontend/src/lib/editor.svelte +++ b/frontend/src/lib/editor.svelte @@ -57,6 +57,8 @@ let edit_id; let confirm_to_leave = true; + $: console.log('data', data); + const getEditID = async () => { let res; if (quiz_id === null) { diff --git a/frontend/src/lib/editor/ABCDEditorPart.svelte b/frontend/src/lib/editor/ABCDEditorPart.svelte index 89c2eaf..a38da11 100644 --- a/frontend/src/lib/editor/ABCDEditorPart.svelte +++ b/frontend/src/lib/editor/ABCDEditorPart.svelte @@ -16,8 +16,6 @@ const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58']; - console.log(get_foreground_color(default_colors[0])); - export let selected_question: number; export let check_choice = false; export let data: EditorData; @@ -43,9 +41,8 @@ }; }; $: save_colors(data); - data.questions[selected_question].type = check_choice - ? QuizQuestionType.ABCD - : QuizQuestionType.CHECK; + data.questions[selected_question].type = + check_choice === true ? QuizQuestionType.CHECK : QuizQuestionType.ABCD;
@@ -97,7 +94,6 @@ type="button" on:click={() => { answer.right = !answer.right; - console.log(answer.right); }} > {#if answer.right} diff --git a/frontend/src/lib/editor/AddNewQuestionPopup.svelte b/frontend/src/lib/editor/AddNewQuestionPopup.svelte new file mode 100644 index 0000000..c2d76e6 --- /dev/null +++ b/frontend/src/lib/editor/AddNewQuestionPopup.svelte @@ -0,0 +1,115 @@ + + + + +
+
+

{$t('quiztivity.editor.select_page_type')}

+
+ {#each question_types as qt, i} +
+ +

{qt.description}

+
+ {/each} +
+
+
diff --git a/frontend/src/lib/editor/MediaComponent.svelte b/frontend/src/lib/editor/MediaComponent.svelte index 208a292..9ea325a 100644 --- a/frontend/src/lib/editor/MediaComponent.svelte +++ b/frontend/src/lib/editor/MediaComponent.svelte @@ -17,15 +17,11 @@ return; } const res = await fetch(`/api/v1/storage/info/${src}`); - console.log('Headers', res.headers); const fileType = res.headers.get('Content-Type'); - console.log(fileType, 'fileType'); if (fileType.includes('video')) { - console.log('Setting type to video'); type = 'video'; } else { type = 'img'; - console.log(res); const data = await fetch(`/api/v1/storage/download/${src}`); return { data: URL.createObjectURL(await data.blob()), diff --git a/frontend/src/lib/editor/RangeSelectorEditorPart.svelte b/frontend/src/lib/editor/RangeSelectorEditorPart.svelte index 278bd53..0a7c88e 100644 --- a/frontend/src/lib/editor/RangeSelectorEditorPart.svelte +++ b/frontend/src/lib/editor/RangeSelectorEditorPart.svelte @@ -14,6 +14,7 @@ min_correct: 3 }; } + /* const correct_numbers = (data: number[]) => { console.log(data, data[1] <= data[0]) diff --git a/frontend/src/lib/editor/TextEditorPart.svelte b/frontend/src/lib/editor/TextEditorPart.svelte index 1a646bd..9335e11 100644 --- a/frontend/src/lib/editor/TextEditorPart.svelte +++ b/frontend/src/lib/editor/TextEditorPart.svelte @@ -80,7 +80,6 @@ type="button" on:click={() => { answer.case_sensitive = !answer.case_sensitive; - console.log(answer.case_sensitive); }} > {#if answer.case_sensitive} diff --git a/frontend/src/lib/editor/card.svelte b/frontend/src/lib/editor/card.svelte index d4c6b4d..94d1f8b 100644 --- a/frontend/src/lib/editor/card.svelte +++ b/frontend/src/lib/editor/card.svelte @@ -54,13 +54,22 @@ const update_image_url = () => { image_url = data.questions[selected_question].image; - console.log('updated!'); }; $: { update_image_url(); selected_question; data.questions; } + + const type_to_name = { + RANGE: $t('words.range'), + ABCD: $t('words.multiple_choice'), + VOTING: $t('words.voting'), + TEXT: $t('words.text'), + ORDER: $t('words.order'), + CHECK: $t('words.check_choice') + }; + /* if (typeof data.questions[selected_question].type !== QuizQuestionType) { console.log(data.questions[selected_question].type !== QuizQuestionType.ABCD || data.questions[selected_question].type !== QuizQuestionType.RANGE) @@ -183,21 +192,10 @@
- +

{type_to_name[String(data.questions[selected_question].type)]}

- {#if type === QuizQuestionType.ABCD || QuizQuestionType.CHECK} + {#if type === QuizQuestionType.ABCD || type === QuizQuestionType.CHECK} {#await import('$lib/editor/ABCDEditorPart.svelte')} {:then c} @@ -209,6 +207,7 @@ /> {/await} {:else if type === QuizQuestionType.RANGE} +

Range

{:else if type === QuizQuestionType.VOTING} {#await import('$lib/editor/VotingEditorPart.svelte')} diff --git a/frontend/src/lib/editor/sidebar.svelte b/frontend/src/lib/editor/sidebar.svelte index 3539974..e481efa 100644 --- a/frontend/src/lib/editor/sidebar.svelte +++ b/frontend/src/lib/editor/sidebar.svelte @@ -10,6 +10,8 @@ import { ABCDQuestionSchema, dataSchema } from '../yupSchemas'; import { createTippy } from 'svelte-tippy'; import { getLocalization } from '$lib/i18n'; + import AddNewQuestionPopup from '$lib/editor/AddNewQuestionPopup.svelte'; + const { t } = getLocalization(); export let data: EditorData; @@ -22,13 +24,7 @@ }); let arr_of_cards = Array(data.questions.length); let propertyCard; - const empty_question: Question = { - question: '', - time: '20', - image: '', - answers: [], - type: QuizQuestionType.ABCD - }; + let add_new_question_popup_open = false; const empy_slide: Question = { type: QuizQuestionType.SLIDE, @@ -51,10 +47,10 @@ } }; /* onMount(() => { - propertyCard.scrollIntoView({ - behavior: 'smooth' - }); - });*/ + propertyCard.scrollIntoView({ + behavior: 'smooth' + }); + });*/
@@ -205,7 +201,7 @@ class="h-10 border rounded-lg" alt="Not available" use:tippy={{ - content: `Not available`, + content: `Not available`, allowHTML: true }} /> @@ -281,7 +277,7 @@ type="button" class="h-full flex justify-center w-full dark:text-black flex-col border-r border-black" on:click={() => { - data.questions = [...data.questions, { ...empty_question }]; + add_new_question_popup_open = true; }} > {$t('words.question')} @@ -325,3 +321,6 @@
+{#if add_new_question_popup_open} + +{/if} diff --git a/frontend/src/lib/editor/slide.svelte b/frontend/src/lib/editor/slide.svelte index 5bb800b..5790fc3 100644 --- a/frontend/src/lib/editor/slide.svelte +++ b/frontend/src/lib/editor/slide.svelte @@ -84,7 +84,6 @@ fill: '#ff000d' }); } - console.log(canvas.export.toJson()); }; $: { @@ -146,7 +145,6 @@ interactive: false }*/ }); - console.log(data.answers); if (data.answers) { if (typeof data.answers === 'string') { canvas.import.json(JSON.parse(data.answers)); diff --git a/frontend/src/lib/editor/slides/edit_menu.svelte b/frontend/src/lib/editor/slides/edit_menu.svelte index d79df0a..1a63bce 100644 --- a/frontend/src/lib/editor/slides/edit_menu.svelte +++ b/frontend/src/lib/editor/slides/edit_menu.svelte @@ -15,7 +15,6 @@ const set_available_modifiers = () => { available_modifiers = []; - console.log(selected_el, 'sel_el'); if (!selected_el) { return; } @@ -43,19 +42,16 @@ const change_color = (e: Event) => { if (available_modifiers.includes('text_color')) { - console.log('text color'); selected_el.updateText({ fill: e.target.value }); } else if (available_modifiers.includes('fill_color')) { - console.log('fill color'); selected_el.update({ fill: e.target.value }); } opened_dropdown = null; }; const change_fontsize = (e: Event) => { - console.log(selected_el.node.children[1].attrs.fontSize); selected_el.updateText({ fontSize: e.target.value }); diff --git a/frontend/src/lib/editor/slides/types/circle.svelte b/frontend/src/lib/editor/slides/types/circle.svelte index 2a3b06a..b071704 100644 --- a/frontend/src/lib/editor/slides/types/circle.svelte +++ b/frontend/src/lib/editor/slides/types/circle.svelte @@ -10,7 +10,6 @@ if (!data) { data = '#ed333b'; } - $: console.log(data);
diff --git a/frontend/src/lib/editor/slides/types/rectangle.svelte b/frontend/src/lib/editor/slides/types/rectangle.svelte index 502d7c8..4a5bee6 100644 --- a/frontend/src/lib/editor/slides/types/rectangle.svelte +++ b/frontend/src/lib/editor/slides/types/rectangle.svelte @@ -10,7 +10,6 @@ if (!data) { data = '#ed333b'; } - $: console.log(data);
diff --git a/frontend/src/lib/editor/uploader.svelte b/frontend/src/lib/editor/uploader.svelte index adec973..3d87e3c 100644 --- a/frontend/src/lib/editor/uploader.svelte +++ b/frontend/src/lib/editor/uploader.svelte @@ -85,7 +85,6 @@ } else { data.questions[selected_question].image = image_id; } - console.log(selected_question, data); modalOpen = false; selected_type = null; @@ -109,7 +108,6 @@ 'popup=true,toolbar=false,menubar=false,location=false,' ); video_popup.addEventListener('beforeunload', () => { - console.log('Unloaded'); video_popup = undefined; }); }; diff --git a/frontend/src/lib/inline-editor.svelte b/frontend/src/lib/inline-editor.svelte index 9bc0614..63f0147 100644 --- a/frontend/src/lib/inline-editor.svelte +++ b/frontend/src/lib/inline-editor.svelte @@ -73,7 +73,6 @@ }) .then((newEditor) => { editor = newEditor; - console.log(editor); editor.setData(text); editor.model.document.on('change:data', () => { triggerChange(); diff --git a/frontend/src/lib/quiz_types.ts b/frontend/src/lib/quiz_types.ts index 614c6ac..b35486e 100644 --- a/frontend/src/lib/quiz_types.ts +++ b/frontend/src/lib/quiz_types.ts @@ -58,15 +58,17 @@ export interface Question { question: string; type?: QuizQuestionType; image?: string; - answers: - | Answer[] - | RangeQuizAnswer - | VotingAnswer[] - | string - | TextQuizAnswer[] - | OrderQuizAnswer[]; + answers: Answers; } +export type Answers = + | Answer[] + | RangeQuizAnswer + | VotingAnswer[] + | string + | TextQuizAnswer[] + | OrderQuizAnswer[]; + export interface Answer { right: boolean; answer: string; diff --git a/frontend/src/routes/edit/+page.svelte b/frontend/src/routes/edit/+page.svelte index 73c95fb..18892a8 100644 --- a/frontend/src/routes/edit/+page.svelte +++ b/frontend/src/routes/edit/+page.svelte @@ -38,7 +38,6 @@ export let data; let { quiz_id } = data; - console.log(quiz_id); let quiz_data: Data; const get_quiz = async (): Promise => {