feat: Add confetti effect and return JSON response for challenge result (laike9m#32)

* feat: Add confetti effect and return JSON response for
challenge result
* Remove console.log statement in challenge.html

Author: 100gle

templates/challenge.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/theme/material-darker.min.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/python/python.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
   <title>Python Type Challenge - {{ name }}</title>
 
   <style type="text/css">
@@ -200,6 +201,7 @@
   </div>
 
   <script type="text/javascript">
+    let confetti = new JSConfetti();
     let initTheme = localStorage.getItem('theme') === 'dark' ? "material-darker" : "default"
     let sharedCodeMirrorOptions = {
       mode: "python",
@@ -238,8 +240,14 @@
         method: 'POST',
         body: code
       })
-        .then(response => response.text())
-        .then(result => document.getElementById("result").innerHTML = result)
+        .then(response => response.json())
+        .then(json => {
+          // add confetti effect when passed
+          if (json.passed) {
+            confetti.addConfetti()
+          }
+          document.getElementById("result").innerHTML = json.message;
+        })
         .catch((error) => {
           console.error('Error:', error);
         })

views/views.py

@@ -1,6 +1,6 @@
 import platform
 
-from flask import Blueprint, redirect, render_template, request
+from flask import Blueprint, jsonify, redirect, render_template, request
 
 from .utils import challenge_manager
 
@@ -36,8 +36,9 @@ def run_challenge(name):
 
     result = challenge_manager.run_challenge(user_code=code, name=name)
     if result.passed:
-        return "<h2>✅ Congratulations! You completed the challenge 🎉</h2>"
+        message = "<h2>✅ Congratulations! You passed the test 🎉</h2>"
+        return jsonify({"passed": True, "message": message})
 
     error_message = "<h2>❌ Challenge failed 😢</h2>"
     error_message += f"<p>Error:\n{result.stdout}{result.stderr}</p>"
-    return error_message
+    return jsonify({"passed": False, "message": error_message})