From 380221b9b4068d42892cebb0d02b7a54ebabf457 Mon Sep 17 00:00:00 2001
From: mohazab2006 <mohazab2006@gmail.com>
Date: Sat, 24 Jan 2026 20:14:02 -0500
Subject: [PATCH] Add confetti effect on correct answer submission (#46)

---
 package-lock.json                          | 19 +++++++++++++
 package.json                               |  2 ++
 src/components/Evaluation/Evaluation.astro | 33 +++++++++++++++++++++-
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6a677547..98e976ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@astrojs/svelte": "^5.6.0",
         "astro": "^4.11.1",
         "axios": "^1.7.7",
+        "canvas-confetti": "^1.9.4",
         "fs": "^0.0.1-security",
         "js-yaml": "^4.1.0",
         "katex": "^0.16.10",
@@ -25,6 +26,7 @@
         "typescript": "^5.5.2"
       },
       "devDependencies": {
+        "@types/canvas-confetti": "^1.9.0",
         "@types/jest": "^29.5.12",
         "@types/katex": "^0.16.7",
         "@types/node": "^20.14.9",
@@ -2804,6 +2806,13 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/canvas-confetti": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.9.0.tgz",
+      "integrity": "sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -3717,6 +3726,16 @@
         }
       ]
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
+      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
diff --git a/package.json b/package.json
index 70be73e0..f51720b1 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@astrojs/svelte": "^5.6.0",
     "astro": "^4.11.1",
     "axios": "^1.7.7",
+    "canvas-confetti": "^1.9.4",
     "fs": "^0.0.1-security",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.10",
@@ -32,6 +33,7 @@
     "typescript": "^5.5.2"
   },
   "devDependencies": {
+    "@types/canvas-confetti": "^1.9.0",
     "@types/jest": "^29.5.12",
     "@types/katex": "^0.16.7",
     "@types/node": "^20.14.9",
diff --git a/src/components/Evaluation/Evaluation.astro b/src/components/Evaluation/Evaluation.astro
index aa002ce5..9883a6b6 100644
--- a/src/components/Evaluation/Evaluation.astro
+++ b/src/components/Evaluation/Evaluation.astro
@@ -153,6 +153,33 @@ const sortedQuestionData = multipleChoiceQuestionData.sort(
 />
 
 <script>
+  import confetti from "canvas-confetti";
+
+  // Respect reduced motion preferences
+  const prefersReducedMotion =
+    window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+
+  // Confetti that falls from the top of the screen
+  function dropConfetti(durationMs = 1500) {
+    if (prefersReducedMotion) return;
+
+    const end = Date.now() + durationMs;
+
+    (function frame() {
+      confetti({
+        particleCount: 8,
+        startVelocity: 0,
+        spread: 70,
+        ticks: 240,
+        gravity: 1.0,
+        origin: { x: Math.random(), y: 0 },
+        zIndex: 9999,
+      });
+
+      if (Date.now() < end) requestAnimationFrame(frame);
+    })();
+  }
+
   const nodes = document.getElementsByClassName("MultipleChoiceQuestion");
 
   for (let i = 0; i < nodes.length; i++) {
@@ -193,6 +220,10 @@ const sortedQuestionData = multipleChoiceQuestionData.sort(
       const element = options[i] as Element;
       element.setAttribute("data-revealed", "true");
     }
-    // alert(`You got ${correct} out of ${total} correct!`);
+
+    // Trigger confetti if user got all answers correct
+    if (total > 0 && correct === total) {
+      dropConfetti();
+    }
   });
 </script>