✨ Implemented in Editor

classquiz/db/models.py

@@ -85,24 +85,33 @@ class RangeQuizAnswer(BaseModel):
     max_correct: int
 
 
+class VotingQuizAnswer(BaseModel):
+    answer: str
+    image: str | None = None
+    color: str | None
+
+
 class QuizQuestionType(str, Enum):
     ABCD = "ABCD"
     RANGE = "RANGE"
+    VOTING = "VOTING"
 
 
 class QuizQuestion(BaseModel):
     question: str
     time: str  # in Secs
     type: None | QuizQuestionType = QuizQuestionType.ABCD
-    answers: list[ABCDQuizAnswer] | RangeQuizAnswer
+    answers: list[ABCDQuizAnswer] | RangeQuizAnswer | list[VotingQuizAnswer]
     image: str | None = None
 
     @validator("answers")
     def answers_not_none_if_abcd_type(cls, v, values):
-        if values["type"] == QuizQuestionType.ABCD and len(v) == 0:
+        if values["type"] == QuizQuestionType.ABCD and type(v[0]) != ABCDQuizAnswer:
             raise ValueError("Answers can't be none if type is ABCD")
         if values["type"] == QuizQuestionType.RANGE and type(v) != RangeQuizAnswer:
             raise ValueError("Answer must be from type RangeQuizAnswer if type is RANGE")
+        if values["type"] == QuizQuestionType.VOTING and type(v[0]) != VotingQuizAnswer:
+            raise ValueError("Answer must be from type RangeQuizAnswer if type is RANGE")
         return v
 
 

frontend/src/lib/editor/RangeSelectorEditorPart.svelte

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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}

frontend/src/lib/quiz_types.ts

@@ -18,7 +18,8 @@ export interface QuizData {
 
 export enum QuizQuestionType {
 	ABCD = 'ABCD', // eslint-disable-line no-unused-vars
-	RANGE = 'RANGE' // eslint-disable-line no-unused-vars
+	RANGE = 'RANGE', // eslint-disable-line no-unused-vars
+	VOTING = 'VOTING' // eslint-disable-line no-unused-vars
 }
 
 export interface RangeQuizAnswer {
@@ -33,7 +34,7 @@ export interface Question {
 	question: string;
 	type?: QuizQuestionType;
 	image?: string;
-	answers: Answer[] | RangeQuizAnswer;
+	answers: Answer[] | RangeQuizAnswer | VotingAnswer[];
 }
 
 export interface Answer {
@@ -41,6 +42,11 @@ export interface Answer {
 	answer: string;
 	color?: string;
 }
+export interface VotingAnswer {
+	answer: string;
+	image?: string;
+	color?: string;
+}
 
 export interface EditorData {
 	public: boolean;

frontend/src/lib/yupSchemas.ts

@@ -17,6 +17,17 @@ export const ABCDQuestionSchema = yup
 	.min(2, 'You need at least 2 answers')
 	.max(16, "You can't have more than 16 answers");
 
+export const VotingQuestionSchema = yup
+	.array()
+	.of(
+		yup.object({
+			answer: yup.string().required('You need an answer'),
+			image: yup.string().optional().nullable()
+		})
+	)
+	.min(2, 'You need at least 2 answers')
+	.max(16, "You can't have more than 16 answers");
+
 export const RangeQuestionSchema = yup.object({
 	min: yup.number(),
 	max: yup.number(),
@@ -50,9 +61,17 @@ export const dataSchema = yup.object({
 						"The image-url isn't valid"
 					)
 					.lowercase(),
-				answers: yup.lazy((v) =>
-					Array.isArray(v) ? ABCDQuestionSchema : RangeQuestionSchema
-				)
+				answers: yup.lazy((v) => {
+					if (Array.isArray(v)) {
+						if (typeof v[0].right === 'boolean') {
+							return ABCDQuestionSchema;
+						} else {
+							return VotingQuestionSchema;
+						}
+					} else {
+						return RangeQuestionSchema;
+					}
+				})
 			})
 		)
 		.min(1, 'You need at least one question')