✨ Added custom color for buttons

classquiz/db/models.py

@@ -65,6 +65,7 @@ class UserSession(ormar.Model):
 class ABCDQuizAnswer(BaseModel):
     right: bool
     answer: str
+    color: str | None
 
 
 class RangeQuizAnswer(BaseModel):

frontend/src/lib/editor/ABCDEditorPart.svelte

@@ -9,6 +9,7 @@
 	import { reach } from 'yup';
 	import { ABCDQuestionSchema } from '$lib/yupSchemas';
 	import { getLocalization } from '$lib/i18n';
+	import { invertColor } from '$lib/helpers';
 
 	const { t } = getLocalization();
 
@@ -32,11 +33,6 @@
 	{#if Array.isArray(data.questions[selected_question].answers)}
 		{#each data.questions[selected_question].answers as answer, index}
 			<div
-				on:contextmenu|preventDefault={() => {
-					data.questions[selected_question].answers.splice(index, 1);
-					data.questions[selected_question].answers =
-						data.questions[selected_question].answers;
-				}}
 				out:fade={{ duration: 150 }}
 				class="p-4 rounded-lg flex justify-center w-full transition"
 				class:bg-red-500={!answer.right}
@@ -48,7 +44,13 @@
 				<input
 					bind:value={answer.answer}
 					type="text"
-					class="bg-transparent border-b-2 border-dotted w-5/6 text-center"
+					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..."
 				/>
 				<button
@@ -90,6 +92,14 @@
 						</svg>
 					{/if}
 				</button>
+				<input
+					class="rounded-lg p-1"
+					type="color"
+					bind:value={answer.color}
+					on:contextmenu|preventDefault={() => {
+						answer.color = null;
+					}}
+				/>
 			</div>
 		{/each}
 	{/if}

frontend/src/lib/helpers.ts

@@ -0,0 +1,16 @@
+/*
+ * 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/.
+ */
+
+export const invertColor = (hexTripletColor: string): string => {
+	let color = hexTripletColor;
+	color = color.substring(1); // remove #
+	let color_int = parseInt(color, 16); // convert to integer
+	color_int = 0xffffff ^ color_int; // invert three bytes
+	color = color_int.toString(16); // convert to hex
+	color = ('000000' + color).slice(-6); // pad with leading zeros
+	color = '#' + color; // prepend #
+	return color;
+};

frontend/src/lib/play/question.svelte

@@ -9,6 +9,7 @@
 	import { socket } from '$lib/socket';
 	import Spinner from '../Spinner.svelte';
 	import { getLocalization } from '$lib/i18n';
+	import { invertColor } from '$lib/helpers';
 
 	const { t } = getLocalization();
 
@@ -86,7 +87,8 @@
 		<div class="flex flex-wrap">
 			{#each question.answers as answer}
 				<button
-					class="w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white"
+					class="w-1/2 text-3xl my-2 disabled:opacity-60 border border-white"
+					style="background-color: {answer.color ?? '#B45309'}"
 					disabled={selected_answer !== undefined}
 					on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
 				>

frontend/src/lib/quiz_types.ts

@@ -38,6 +38,7 @@ export interface Question {
 export interface Answer {
 	right: boolean;
 	answer: string;
+	color?: string;
 }
 
 export interface EditorData {