✨ Option to hide question results

2024-07-11 21:53:18 +02:00
parent e6d7a8d087
commit 0ad07eced6
7 changed files with 76 additions and 9 deletions
@@ -121,6 +121,7 @@ class QuizQuestion(BaseModel):
    type: None | QuizQuestionType = QuizQuestionType.ABCD
    answers: list[ABCDQuizAnswer] | RangeQuizAnswer | list[TextQuizAnswer] | list[VotingQuizAnswer] | str
    image: str | None = None
+    hide_results: bool | None = False

    @validator("answers")
    def answers_not_none_if_abcd_type(cls, v, values):
@@ -130,7 +130,7 @@ SPDX-License-Identifier: MPL-2.0
 		{/if}
 	{/if}
 	<br />
-	{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify( [null] ) && quiz_data.questions[selected_question].type !== QuizQuestionType.SLIDE && question_results !== null}
+	{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify( [null] ) && quiz_data.questions[selected_question].type !== QuizQuestionType.SLIDE && question_results !== null && quiz_data.questions[selected_question]?.hide_results !== true}
 		{#if question_results === undefined}
 			{#if !final_results_clicked}
 				<div class="w-full flex justify-center">
@@ -11,23 +11,27 @@ SPDX-License-Identifier: MPL-2.0
 	import { reach } from 'yup';
 	import { dataSchema } from '$lib/yupSchemas';
 	import Spinner from '../Spinner.svelte';
-	// import { createTippy } from 'svelte-tippy';
+	import { createTippy } from 'svelte-tippy';
 	import { getLocalization } from '$lib/i18n';
 	import MediaComponent from '$lib/editor/MediaComponent.svelte';
+	import { fade } from 'svelte/transition';
+	import BrownButton from '$lib/components/buttons/brown.svelte';
 	// import MediaComponent from "$lib/editor/MediaComponent.svelte";

 	const { t } = getLocalization();

-	/*	const tippy = createTippy({
-        arrow: true,
-        animation: 'perspective-subtle',
-        placement: 'top'
-    });*/
+	const tippy = createTippy({
+		arrow: true,
+		animation: 'perspective-subtle',
+		placement: 'top'
+	});

 	export let data: EditorData;
 	export let selected_question: number;
 	export let edit_id: string;

+	let advanced_options_open = false;
+
 	let uppyOpen = false;
 	let unique = {};

@@ -93,6 +97,33 @@ SPDX-License-Identifier: MPL-2.0
 				<span
 					class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-green-400 transition"
 				/>
+				<button
+					class="ml-auto"
+					type="button"
+					use:tippy={{ content: $t('editor.advanced_settings') }}
+					on:click={() => (advanced_options_open = true)}
+				>
+					<svg
+						class="text-white w-5 h-5"
+						aria-hidden="true"
+						fill="none"
+						stroke="white"
+						stroke-width="2"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						></path>
+						<path
+							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						></path>
+					</svg>
+				</button>
 			</div>
 		</div>
 		{#if data.questions[selected_question].type === QuizQuestionType.SLIDE}
@@ -233,3 +264,22 @@ SPDX-License-Identifier: MPL-2.0
 		{/if}
 	</div>
 </div>
+
+{#if advanced_options_open}
+	<div
+		class="fixed top-0 left-0 w-full h-full bg-black/60 flex"
+		transition:fade={{ duration: 150 }}
+	>
+		<div class="w-1/4 h-1/3 m-auto bg-white dark:bg-gray-700 rounded-lg flex flex-col p-2 gap-2">
+			<h1 class="text-3xl mx-auto">{$t('editor.advanced_settings')}</h1>
+			<label class="flex justify-around text-lg">
+				<span class="my-auto">{$t('editor.hide_question_results')}</span>
+				<input type="checkbox" bind:checked={data.questions[selected_question]["hide_results"]} />
+			</label>
+			<div class="mt-auto w-full">
+				<BrownButton on:click={() => (advanced_options_open = false)}>{$t('words.close')}</BrownButton>
+			</div>
+
+		</div>
+	</div>
+{/if}
@@ -231,7 +231,9 @@
        "enter_answer": "Gib eine Antwort ein",
        "visit_docs": "Besuche die Dokumentation.",
        "enable_reorder": "Fragen Umsortieren",
-        "disable_reorder": "Umsortieren beenden"
+        "disable_reorder": "Umsortieren beenden",
+        "advanced_settings": "Erweiterte Einstellungen",
+        "hide_question_results": "Frageergebnisse ausblenden?"
    },
    "import": {
        "need_help": "",
@@ -226,7 +226,9 @@
        "visit_docs": "Visit the docs.",
        "enter_answer": "Enter an answer",
        "enable_reorder": "Enable reorder mode",
-        "disable_reorder": "Disable reorder mode"
+        "disable_reorder": "Disable reorder mode",
+        "advanced_settings": "Advanced Settings",
+        "hide_question_results": "Hide question resuluts?"
    },
    "import_page": {
        "need_help": "Need help?",
@@ -79,6 +79,17 @@ SPDX-License-Identifier: MPL-2.0
 						class="admin-button"
 						>{$t('admin_page.next_question', { question: selected_question + 2 })}
 					</button>
+				{:else if quiz_data.questions[selected_question]?.hide_results === true}
+					<button
+						on:click={() => {
+							get_question_results();
+							setTimeout(() => {
+								set_question_number(selected_question + 1);
+							}, 200);
+						}}
+						class="admin-button"
+						>{$t('admin_page.next_question', { question: selected_question + 2 })}
+					</button>
 				{:else}
 					<button on:click={get_question_results} class="admin-button"
 						>{$t('admin_page.show_results')}
@@ -61,6 +61,7 @@ export interface Question {
 	type?: QuizQuestionType;
 	image?: string;
 	answers: Answers;
+	hide_results?: boolean;
 }

 export type Answers =