✨ Added custom background-color

classquiz/db/models.py

@@ -111,6 +111,7 @@ class QuizInput(BaseModel):
     title: str
     description: str
     cover_image: str | None
+    background_color: str | None
     questions: list[QuizQuestion]
 
 
@@ -125,6 +126,7 @@ class Quiz(ormar.Model):
     questions: Json[list[QuizQuestion]] = ormar.JSON(nullable=False)
     imported_from_kahoot: Optional[bool] = ormar.Boolean(default=False, nullable=True)
     cover_image: Optional[str] = ormar.Text(nullable=True, unique=False)
+    background_color: str | None = ormar.Text(nullable=True, unique=False)
 
     class Meta:
         tablename = "quiz"
@@ -171,6 +173,7 @@ class PlayGame(BaseModel):
     cover_image: str | None
     game_mode: str | None
     current_question: int = -1
+    background_color: str | None
 
 
 class GamePlayer(BaseModel):

classquiz/routers/editor.py

@@ -177,6 +177,7 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
         quiz.updated_at = datetime.now()
         quiz.questions = quiz_input.dict()["questions"]
         quiz.cover_image = quiz_input.cover_image
+        quiz.background_color = quiz_input.background_color
         for image in images_to_delete:
             if image is not None:
                 try:

classquiz/routers/quiz.py

@@ -113,6 +113,7 @@ async def start_quiz(
         cover_image=quiz.cover_image,
         game_mode=game_mode,
         user_id=user.id,
+        background_color=quiz.background_color,
     )
     await redis.set(f"game:{str(game.game_pin)}", game.json(), ex=18000)
     return {**quiz.dict(exclude={"id"}), **game.dict(exclude={"questions"})}

classquiz/socket_server/__init__.py

@@ -201,14 +201,16 @@ async def set_question_number(sid, data: str):
     if session["admin"]:
         game_pin = session["game_pin"]
         game_data = PlayGame.parse_raw(await redis.get(f"game:{session['game_pin']}"))
-        game_data.current_question = int(data)
+        game_data.current_question = int(float(data))
         await redis.set(f"game:{session['game_pin']}", game_data.json())
         await redis.set(f"game:{session['game_pin']}:current_time", datetime.now().isoformat())
         await sio.emit(
             "set_question_number",
             {
-                "question_index": int(data),
-                "question": ReturnQuestion(**game_data.dict(include={"questions"})["questions"][int(data)]).dict(),
+                "question_index": int(float(data)),
+                "question": ReturnQuestion(
+                    **game_data.dict(include={"questions"})["questions"][int(float(data))]
+                ).dict(),
             },
             room=game_pin,
         )
@@ -244,21 +246,21 @@ async def submit_answer(sid: str, data: dict):
     session = await sio.get_session(sid)
     game_data = PlayGame.parse_raw(await redis.get(f"game:{session['game_pin']}"))
     answer_right = False
-    if game_data.questions[int(data.question_index)].type == QuizQuestionType.ABCD:
-        for answer in game_data.questions[int(data.question_index)].answers:
+    if game_data.questions[int(float(data.question_index))].type == QuizQuestionType.ABCD:
+        for answer in game_data.questions[int(float(data.question_index))].answers:
             if answer.answer == data.answer and answer.right:
                 answer_right = True
                 break
-    elif game_data.questions[int(data.question_index)].type == QuizQuestionType.RANGE:
+    elif game_data.questions[int(float(data.question_index))].type == QuizQuestionType.RANGE:
         if (
-            game_data.questions[int(data.question_index)].answers.min_correct
-            <= int(data.answer)
-            <= game_data.questions[int(data.question_index)].answers.max_correct
+            game_data.questions[int(float(data.question_index))].answers.min_correct
+            <= int(float(data.answer))
+            <= game_data.questions[int(float(data.question_index))].answers.max_correct
         ):
             answer_right = True
     else:
         raise NotImplementedError
-    latency = int((await sio.get_session(sid))["ping"])
+    latency = int(float((await sio.get_session(sid))["ping"]))
     time_q_started = datetime.fromisoformat(await redis.get(f"game:{session['game_pin']}:current_time"))
     answers = await redis.get(f"game_session:{session['game_pin']}:{data.question_index}")
     diff = (time_q_started - now).total_seconds() * 1000  # - timedelta(milliseconds=latency)
@@ -271,7 +273,9 @@ async def submit_answer(sid: str, data: dict):
 
     score = 0
     if answer_right:
-        score = calculate_score(abs(diff) - latency, int(game_data.questions[int(data.question_index)].time))
+        score = calculate_score(
+            abs(diff) - latency, int(float(game_data.questions[int(float(data.question_index))].time))
+        )
     await redis.hincrby(f"game_session:{session['game_pin']}:player_scores", session["username"], score)
     if answers is None:
         await redis.set(

frontend/src/app.css

@@ -23,3 +23,9 @@
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 }
+
+@layer utilities {
+	.normal-background {
+		@apply bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702];
+	}
+}

frontend/src/lib/admin.svelte

@@ -17,6 +17,7 @@
 	export let game_token: string;
 	export let quiz_data: QuizData;
 	export let game_mode;
+	export let bg_color;
 
 	const { t } = getLocalization();
 
@@ -95,7 +96,11 @@
 </script>
 
 {#if game_mode === 'kahoot'}
-	<div class="fixed top-0 w-full h-14 bg-transparent z-20 grid grid-cols-3">
+	<div
+		class="fixed top-0 w-full h-14 z-20 grid grid-cols-3"
+		style="background: {bg_color ? bg_color : 'transparent'}"
+		class:text-black={bg_color}
+	>
 		<p class="mr-auto ml-0 col-start-1 col-end-1">
 			{selected_question === -1 ? '0' : selected_question + 1}
 			/{quiz_data.questions.length}
@@ -143,7 +148,7 @@
 		/>
 	{/if}
 {/if}
-<div class:mt-28={game_mode === 'kahoot'} class="w-full h-full">
+<div class:pt-28={game_mode === 'kahoot'} class="w-full h-full">
 	{#if timer_res !== undefined && !final_results_clicked && !question_results}
 		<div class="flex flex-col justify-center w-screen h-1/6">
 			<h1 class="text-6xl text-center">

frontend/src/lib/editor.svelte

@@ -113,7 +113,7 @@
 		if (res.ok) {
 			confirm_to_leave = false;
 			console.log(confirm_to_leave);
-			window.location.href = '/dashboard';
+			// window.location.href = '/dashboard';
 		} else {
 			alert('Error');
 		}

frontend/src/lib/editor/settings-card.svelte

@@ -7,6 +7,7 @@
 	import type { EditorData } from '$lib/quiz_types';
 	import { getLocalization } from '$lib/i18n';
 	import Spinner from '$lib/Spinner.svelte';
+
 	export let pow_data;
 	export let pow_salt;
 
@@ -15,8 +16,11 @@
 	let uppyOpen = false;
 
 	export let edit_id: string;
-
 	export let data: EditorData;
+
+	let custom_bg_color = Boolean(data.background_color);
+
+	$: data.background_color = custom_bg_color ? data.background_color : undefined;
 </script>
 
 <div class="w-full h-full pb-20 px-20">
@@ -122,6 +126,48 @@
 					{/if}
 				</button>
 			</div>
+			<div class="pt-10 w-full flex justify-center">
+				<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}
+					>
+						<div class="bg-gray-200 rounded-lg w-full h-full p-1">
+							<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]"
+							/>
+						</div>
+					</div>
+					<div>
+						<label
+							for="large-toggle"
+							class="inline-flex relative items-center cursor-pointer"
+						>
+							<input
+								type="checkbox"
+								bind:checked={custom_bg_color}
+								id="large-toggle"
+								class="sr-only peer"
+							/>
+							<span
+								class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+							/>
+						</label>
+					</div>
+					<div
+						class:pointer-events-none={!custom_bg_color}
+						class:opacity-50={!custom_bg_color}
+						class="transition-all"
+					>
+						<input
+							type="color"
+							class="rounded-lg p-1 min-h-full hover:cursor-pointer"
+							bind:value={data.background_color}
+						/>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

frontend/src/lib/quiz_types.ts

@@ -13,6 +13,7 @@ export interface QuizData {
 	game_pin: string;
 	started: boolean;
 	cover_image?: string;
+	background_color?: string;
 }
 
 export enum QuizQuestionType {
@@ -47,4 +48,5 @@ export interface EditorData {
 	description: string;
 	questions: Question[];
 	cover_image?: string;
+	background_color?: string;
 }

frontend/src/routes/admin/+page.svelte

@@ -116,85 +116,93 @@
 		}
 		players = players;
 	};
+	let bg_color;
+	$: bg_color = quiz_data ? quiz_data.background_color : undefined;
 </script>
 
 <svelte:window on:beforeunload={confirmUnload} />
 <svelte:head>
 	<title>ClassQuiz - Host</title>
 </svelte:head>
-{#if JSON.stringify(final_results) !== JSON.stringify([null])}
-	<div class="w-screen flex justify-center mt-8">
-		<button
-			on:click={request_answer_export}
-			class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-			>{$t('admin_page.export_results')}</button
-		>
-	</div>
-	{#await import('$lib/play/end.svelte') then c}
-		<svelte:component
-			this={c.default}
-			bind:final_results
-			bind:question_count={quiz_data.questions.length}
-		/>
-	{/await}
-{/if}
-{#if !success}
-	<input placeholder="game id" bind:value={game_token} />
-	<input placeholder="game pin" bind:value={game_pin} />
-	<button on:click={connect}>{$t('words.connect')}!</button>
-	{#if errorMessage !== ''}
-		<p class="text-red-700">{errorMessage}</p>
-	{/if}
-{:else if !game_started}
-	<div class="w-full h-full">
-		<AudioPlayer bind:play={play_music} />
-		<img
-			alt="QR code to join the game"
-			src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={darkMode}"
-			class="block mx-auto w-1/6"
-		/>
-		<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>
-		<div class="flex justify-center w-full mt-4">
-			<ul class="list-disc pl-8">
-				{#if players.length > 0}
-					{#each players as player}
-						<li>
-							<span
-								class="hover:line-through"
-								on:click={() => {
-									kick_player(player.username);
-								}}>{player.username}</span
-							>
-							<!--					<button>{$t('words.kick')}</button>-->
-						</li>
-					{/each}
-				{/if}
-			</ul>
+<div
+	class="min-h-screen min-w-full"
+	style="background: {bg_color ? bg_color : 'transparent'}"
+	class:text-black={bg_color}
+>
+	{#if JSON.stringify(final_results) !== JSON.stringify([null])}
+		<div class="w-screen flex justify-center mt-8">
+			<button
+				on:click={request_answer_export}
+				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+				>{$t('admin_page.export_results')}</button
+			>
 		</div>
-		{#if players.length > 0}
-			<div class="flex justify-center w-full mt-4">
-				<button
-					class="ml-4 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-					id="startGame"
-					on:click={() => {
-						socket.emit('start_game', '');
-						game_started = true;
-					}}
-					>{$t('admin_page.start_game')}
-				</button>
-			</div>
+		{#await import('$lib/play/end.svelte') then c}
+			<svelte:component
+				this={c.default}
+				bind:final_results
+				bind:question_count={quiz_data.questions.length}
+			/>
+		{/await}
+	{/if}
+	{#if !success}
+		<input placeholder="game id" bind:value={game_token} />
+		<input placeholder="game pin" bind:value={game_pin} />
+		<button on:click={connect}>{$t('words.connect')}!</button>
+		{#if errorMessage !== ''}
+			<p class="text-red-700">{errorMessage}</p>
 		{/if}
-	</div>
-{:else}
-	<SomeAdminScreen
-		bind:final_results
-		bind:game_pin
-		bind:game_token
-		bind:quiz_data
-		bind:game_mode
-	/>
-{/if}
-
+	{:else if !game_started}
+		<div class="w-full h-full">
+			<AudioPlayer bind:play={play_music} />
+			<img
+				alt="QR code to join the game"
+				src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={bg_color ? false : darkMode}"
+				class="block mx-auto w-1/6"
+			/>
+			<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>
+			<div class="flex justify-center w-full mt-4">
+				<ul class="list-disc pl-8">
+					{#if players.length > 0}
+						{#each players as player}
+							<li>
+								<span
+									class="hover:line-through"
+									on:click={() => {
+										kick_player(player.username);
+									}}>{player.username}</span
+								>
+								<!--					<button>{$t('words.kick')}</button>-->
+							</li>
+						{/each}
+					{/if}
+				</ul>
+			</div>
+			{#if players.length > 0}
+				<div class="flex justify-center w-full mt-4">
+					<button
+						class="ml-4 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+						id="startGame"
+						on:click={() => {
+							socket.emit('start_game', '');
+							game_started = true;
+						}}
+						>{$t('admin_page.start_game')}
+					</button>
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<SomeAdminScreen
+			bind:final_results
+			bind:game_pin
+			bind:game_token
+			bind:quiz_data
+			bind:game_mode
+			bind:bg_color
+		/>
+	{/if}
+</div>
 <a
 	on:click|preventDefault={request_answer_export}
 	href="#"

frontend/src/routes/play/+page.svelte

@@ -81,7 +81,6 @@
 	socket.on('set_question_number', (data) => {
 		solution = undefined;
 		restart();
-		console.log(data, data.question_index);
 		question = data.question;
 		question_index = data.question_index;
 		answer_results = undefined;
@@ -118,6 +117,9 @@
 	socket.on('solutions', (data) => {
 		solution = data;
 	});
+
+	let bg_color;
+	$: bg_color = gameData ? gameData.background_color : undefined;
 	// The rest
 </script>
 
@@ -138,42 +140,52 @@
 		{/each}
 	{/if}-->
 </svelte:head>
-<div>
-	{#if !gameMeta.started && gameData === undefined}
-		<JoinGame {game_pin} bind:game_mode bind:username />
-	{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
-		<ShowEndScreen bind:final_results bind:question_count={gameData.question_count} />
-	{:else if gameData !== undefined && question_index === ''}
-		<ShowTitle
-			bind:title={gameData.title}
-			bind:description={gameData.description}
-			bind:cover_image={gameData.cover_image}
-		/>
-	{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
-		{#key unique}
-			<Question bind:game_mode bind:question bind:question_index bind:solution />
-		{/key}
-	{:else if gameMeta.started && answer_results !== undefined}
-		{#if answer_results === null}
-			<div class="w-full flex justify-center">
-				<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
-			</div>
-		{:else if game_mode === 'kahoot'}
-			<div>
-				<h2 class="text-center text-3xl mb-8">{$t('words.result', { count: 2 })}</h2>
-			</div>
+<div
+	class="min-h-screen min-w-full"
+	style="background: {bg_color ? bg_color : 'transparent'}"
+	class:text-black={bg_color}
+>
+	<div>
+		{#if !gameMeta.started && gameData === undefined}
+			<JoinGame {game_pin} bind:game_mode bind:username />
+		{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
+			<ShowEndScreen bind:final_results bind:question_count={gameData.question_count} />
+		{:else if gameData !== undefined && question_index === ''}
+			<ShowTitle
+				bind:title={gameData.title}
+				bind:description={gameData.description}
+				bind:cover_image={gameData.cover_image}
+			/>
+		{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
 			{#key unique}
-				<KahootResults bind:username bind:question_results={answer_results} bind:scores />
-			{/key}
-		{:else}
-			{#key unique}
-				<ShowResults
-					bind:results={answer_results}
-					bind:game_data={gameData}
-					bind:question_index
-					bind:solution
-				/>
+				<Question bind:game_mode bind:question bind:question_index bind:solution />
 			{/key}
+		{:else if gameMeta.started && answer_results !== undefined}
+			{#if answer_results === null}
+				<div class="w-full flex justify-center">
+					<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
+				</div>
+			{:else if game_mode === 'kahoot'}
+				<div>
+					<h2 class="text-center text-3xl mb-8">{$t('words.result', { count: 2 })}</h2>
+				</div>
+				{#key unique}
+					<KahootResults
+						bind:username
+						bind:question_results={answer_results}
+						bind:scores
+					/>
+				{/key}
+			{:else}
+				{#key unique}
+					<ShowResults
+						bind:results={answer_results}
+						bind:game_data={gameData}
+						bind:question_index
+						bind:solution
+					/>
+				{/key}
+			{/if}
 		{/if}
-	{/if}
+	</div>
 </div>

migrations/versions/400f8ed06c48_added_background_color.py

@@ -0,0 +1,29 @@
+"""added background-color
+
+Revision ID: 400f8ed06c48
+Revises: ec6cf07ff68a
+Create Date: 2022-09-26 17:56:00.426804
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import ormar
+
+
+# revision identifiers, used by Alembic.
+revision = "400f8ed06c48"
+down_revision = "ec6cf07ff68a"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column("quiz", sa.Column("background_color", sa.Text(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column("quiz", "background_color")
+    # ### end Alembic commands ###