From f0ce69708d4eaff06a6b7d68a73c029d46c41db7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Dec 2025 15:09:45 +0000
Subject: [PATCH 1/3] Initial plan


From 6064fc029faf146dd1ea6c9db4557c03e46367b7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Dec 2025 15:12:57 +0000
Subject: [PATCH 2/3] Refactor: Extract RGB color string into helper function

Co-authored-by: JoshdRod <128097418+JoshdRod@users.noreply.github.com>
---
 pages/index/script.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/pages/index/script.js b/pages/index/script.js
index c4df2d4..bbee38c 100644
--- a/pages/index/script.js
+++ b/pages/index/script.js
@@ -38,6 +38,12 @@ const policy = trustedTypes.createPolicy("my-policy",
 
 let responseCount = 0;
 
+// Helper function to convert color object to RGB string
+function getColorString(colorObj)
+{
+	return `rgb(${colorObj["red"]}, ${colorObj["green"]}, ${colorObj["blue"]})`;
+}
+
 function handleAnswerInputChange()
 {
 	if (event.key == "Enter")
@@ -54,31 +60,32 @@ function handleAnswerInputChange()
 
 		let responseBox;
 		let responseMathJax = `\\(${treeToMathJax(expressionTree)}\\)`;
+		let backgroundColorString = getColorString(answerCorrectnessColour);
 		switch (responseCount)
 		{
 			case 0:
 				response1.innerHTML = responseMathJax;
 				responseBox = response1;
-				response1.style.backgroundColor = `rgb(${answerCorrectnessColour["red"]}, ${answerCorrectnessColour["green"]}, ${answerCorrectnessColour["blue"]})`;
-				colourBox1.style.backgroundColor = `rgb(${answerCorrectnessColour["red"]}, ${answerCorrectnessColour["green"]}, ${answerCorrectnessColour["blue"]})`;
+				response1.style.backgroundColor = backgroundColorString;
+				colourBox1.style.backgroundColor = backgroundColorString;
 				break;
 			case 1:
 				response2.innerHTML = responseMathJax;
 				responseBox = response2;
-				response2.style.backgroundColor = `rgb(${answerCorrectnessColour["red"]}, ${answerCorrectnessColour["green"]}, ${answerCorrectnessColour["blue"]})`;
-				colourBox2.style.backgroundColor = `rgb(${answerCorrectnessColour["red"]}, ${answerCorrectnessColour["green"]}, ${answerCorrectnessColour["blue"]})`;
+				response2.style.backgroundColor = backgroundColorString;
+				colourBox2.style.backgroundColor = backgroundColorString;
 				break;
 			case 2:
 				response3.innerHTML = responseMathJax;
 				responseBox = response3;
-				response3.style.backgroundColor = `rgb(${answerCorrectnessColour["red"]}, ${answerCorrectnessColour["green"]}, ${answerCorrectnessColour["blue"]})`;
-				colourBox3.style.backgroundColor = `rgb(${answerCorrectnessColour["red"]}, ${answerCorrectnessColour["green"]}, ${answerCorrectnessColour["blue"]})`;
+				response3.style.backgroundColor = backgroundColorString;
+				colourBox3.style.backgroundColor = backgroundColorString;
 				break;
 			case 3:
 				response4.innerHTML = responseMathJax;
 				responseBox = response4;
-				response4.style.backgroundColor = `rgb(${answerCorrectnessColour["red"]}, ${answerCorrectnessColour["green"]}, ${answerCorrectnessColour["blue"]})`;
-				colourBox4.style.backgroundColor = `rgb(${answerCorrectnessColour["red"]}, ${answerCorrectnessColour["green"]}, ${answerCorrectnessColour["blue"]})`;
+				response4.style.backgroundColor = backgroundColorString;
+				colourBox4.style.backgroundColor = backgroundColorString;
 				break;
 		}
 		responseCount++;

From 7d71c94d5509e2321ee7a784e17f8c3fc46c7c6f Mon Sep 17 00:00:00 2001
From: JoshdRod <joshrod1089@gmail.com>
Date: Sun, 21 Dec 2025 15:42:42 +0000
Subject: [PATCH 3/3] <refactor> Move correctness -> colour values logic into
 helper function

UNTESTED
---
 pages/index/script.js | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/pages/index/script.js b/pages/index/script.js
index bbee38c..813d156 100644
--- a/pages/index/script.js
+++ b/pages/index/script.js
@@ -38,10 +38,16 @@ const policy = trustedTypes.createPolicy("my-policy",
 
 let responseCount = 0;
 
-// Helper function to convert color object to RGB string
-function getColorString(colorObj)
+// Helper function to convert answer correctness to RGB colour string
+function getColourString(correctness)
 {
-	return `rgb(${colorObj["red"]}, ${colorObj["green"]}, ${colorObj["blue"]})`;
+	let colour = {
+		"red": 255 * (100 - correctness) / 100,
+		"green": 255 * (correctness) / 100,
+		"blue": 0
+	};
+
+	return `rgb(${colour["red"]}, ${colour["green"]}, ${colour["blue"]})`;
 }
 
 function handleAnswerInputChange()
@@ -52,40 +58,34 @@ function handleAnswerInputChange()
 
 		// Update win modal
 		let answerCorrectness = evaluateCorrectness(expressionTree, SOLUTION);
-		let answerCorrectnessColour = {
-			"red": 255 * (100 - answerCorrectness) / 100,
-			"green": 255 * (answerCorrectness) / 100,
-			"blue": 0
-		};
-
+		let correctnessColour = getColourString(answerCorrectness);
 		let responseBox;
 		let responseMathJax = `\\(${treeToMathJax(expressionTree)}\\)`;
-		let backgroundColorString = getColorString(answerCorrectnessColour);
 		switch (responseCount)
 		{
 			case 0:
 				response1.innerHTML = responseMathJax;
 				responseBox = response1;
-				response1.style.backgroundColor = backgroundColorString;
-				colourBox1.style.backgroundColor = backgroundColorString;
+				response1.style.backgroundColor = correctnessColour;
+				colourBox1.style.backgroundColor = correctnessColour;
 				break;
 			case 1:
 				response2.innerHTML = responseMathJax;
 				responseBox = response2;
-				response2.style.backgroundColor = backgroundColorString;
-				colourBox2.style.backgroundColor = backgroundColorString;
+				response2.style.backgroundColor = correctnessColour;
+				colourBox2.style.backgroundColor = correctnessColour;
 				break;
 			case 2:
 				response3.innerHTML = responseMathJax;
 				responseBox = response3;
-				response3.style.backgroundColor = backgroundColorString;
-				colourBox3.style.backgroundColor = backgroundColorString;
+				response3.style.backgroundColor = correctnessColour;
+				colourBox3.style.backgroundColor = correctnessColour;
 				break;
 			case 3:
 				response4.innerHTML = responseMathJax;
 				responseBox = response4;
-				response4.style.backgroundColor = backgroundColorString;
-				colourBox4.style.backgroundColor = backgroundColorString;
+				response4.style.backgroundColor = correctnessColour;
+				colourBox4.style.backgroundColor = correctnessColour;
 				break;
 		}
 		responseCount++;