From db760216c71b08ba0308154239a3c8be5735c616 Mon Sep 17 00:00:00 2001 From: JoshdRod Date: Wed, 17 Dec 2025 22:20:42 +0000 Subject: [PATCH 1/3] Added colour to back of responses based on correctness of answer Formula for calculating correctness = 100(1 - e^(no. identical nodes /(no. nodes in solution + difference in no. nodes))). --- pages/index/script.js | 49 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/pages/index/script.js b/pages/index/script.js index 07ba144..c4df2d4 100644 --- a/pages/index/script.js +++ b/pages/index/script.js @@ -45,12 +45,12 @@ function handleAnswerInputChange() let expressionTree = normaliseTree(strToTree(answerBox.value)); // Update win modal - //let answerCorrectness = evaluateCorrectness(expressionTree, SOLUTION); - //let answerCorrectnessColour = { - // "red": 255 * (100 - answerCorrectness) / 100, - // "green": 255 * (answerCorrectness) / 100, - // "blue": 0 - //}; + let answerCorrectness = evaluateCorrectness(expressionTree, SOLUTION); + let answerCorrectnessColour = { + "red": 255 * (100 - answerCorrectness) / 100, + "green": 255 * (answerCorrectness) / 100, + "blue": 0 + }; let responseBox; let responseMathJax = `\\(${treeToMathJax(expressionTree)}\\)`; @@ -59,18 +59,26 @@ function handleAnswerInputChange() 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"]})`; 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"]})`; 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"]})`; 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"]})`; break; } responseCount++; @@ -436,6 +444,35 @@ function evaluateIfBTreesEqual(b1, b2) } +// Takes in 2 expression trees, and compares how similar the 1st is to the 2nd +// FORMULA: (1 - e^(no. identical nodes / no. nodes in exp2 + difference in no. nodes between 2 trees)) * 100 +// INPUTS: 2 expression trees - b1, b2 +// RETURNS: int (0 - 100) correctness: 100 = correct, 0 = completely incorrect +function evaluateCorrectness(exp1, exp2) +{ + // If trees are equal, then return 100 + let equal = evaluateIfBTreesEqual(exp1, exp2); + if (equal) + return 100; + + let difference = Math.abs(exp1.length - exp2.length); + // Loop over trees until fully DFS'd + // If nodes are identical, add 1 to count + let identicalNodesCount = 0; + let exp1CurrentNode = 0; + let exp2CurrentNode = 0; + for (let i = 0; i < Math.min(exp1.length, exp2.length); i++) + { + if (exp1[exp1CurrentNode].content == exp2[exp2CurrentNode].content) + identicalNodesCount++; + + exp1CurrentNode = findNextInDFS(exp1, 0, exp1CurrentNode); + exp2CurrentNode = findNextInDFS(exp2, 0, exp2CurrentNode); + } + + return (1 - Math.exp(-1 * (identicalNodesCount / (exp2.length + difference)))) * 100; +} + // Compares 2 (sub)graphs, to determine if the right graph is "greater" than the left. // If so, the root nodes of both graphs need swapping in their supergraph. // Essentially performs a DFS simultaneously on both graphs, until the contents of the nodes being visited is different. From f75ecb3623ec372de484bb1a14beb2c53874a05d Mon Sep 17 00:00:00 2001 From: Copilot <198982749+Copilot@users.noreply.github.com> Date: Sun, 21 Dec 2025 19:46:36 +0000 Subject: [PATCH 2/3] Move correctness -> rgb string into helper function (#12) Addresses question on PR #9 about helper function refactoring to reduce code duplication in response colour coding. ## Changes - Added `getColourString()` helper function to encapsulate RGB string formatting - Extracted repeated color string construction (8 occurrences) into single variable --- pages/index/script.js | 35 +++++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/pages/index/script.js b/pages/index/script.js index c4df2d4..813d156 100644 --- a/pages/index/script.js +++ b/pages/index/script.js @@ -38,6 +38,18 @@ const policy = trustedTypes.createPolicy("my-policy", let responseCount = 0; +// Helper function to convert answer correctness to RGB colour string +function getColourString(correctness) +{ + let colour = { + "red": 255 * (100 - correctness) / 100, + "green": 255 * (correctness) / 100, + "blue": 0 + }; + + return `rgb(${colour["red"]}, ${colour["green"]}, ${colour["blue"]})`; +} + function handleAnswerInputChange() { if (event.key == "Enter") @@ -46,12 +58,7 @@ 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)}\\)`; switch (responseCount) @@ -59,26 +66,26 @@ function handleAnswerInputChange() 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 = correctnessColour; + colourBox1.style.backgroundColor = correctnessColour; 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 = correctnessColour; + colourBox2.style.backgroundColor = correctnessColour; 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 = correctnessColour; + colourBox3.style.backgroundColor = correctnessColour; 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 = correctnessColour; + colourBox4.style.backgroundColor = correctnessColour; break; } responseCount++; From 51702d47cb029bb0d3161b825cd5d53bec0b9f20 Mon Sep 17 00:00:00 2001 From: JoshdRod Date: Sun, 21 Dec 2025 19:51:26 +0000 Subject: [PATCH 3/3] Replace for loop with while loop This loop continues until the DFS of one of the trees is complete. The use of a for loop here was harder to read, so I replaced it with a more obvious while loop. --- pages/index/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index/script.js b/pages/index/script.js index 813d156..3518c16 100644 --- a/pages/index/script.js +++ b/pages/index/script.js @@ -468,7 +468,7 @@ function evaluateCorrectness(exp1, exp2) let identicalNodesCount = 0; let exp1CurrentNode = 0; let exp2CurrentNode = 0; - for (let i = 0; i < Math.min(exp1.length, exp2.length); i++) + while (exp1CurrentNode != -1 && exp2CurrentNode != -1) { if (exp1[exp1CurrentNode].content == exp2[exp2CurrentNode].content) identicalNodesCount++;