added confused dashboard

2025-05-13 04:03:43 +02:00
parent d4d7f485a7
commit b86f0a1e14
5 changed files with 109 additions and 7 deletions
--- a/app/templates/confused.html
+++ b/app/templates/confused.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Live Confusion Alerts</title>
+
+  <!-- Tailwind DEV CDN (for production, use your compiled CSS) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.min.js"></script>
+
+</head>
+<body class="bg-gray-100 min-h-screen">
+
+  <div class="max-w-3xl mx-auto mt-12 px-4">
+    <h1 class="text-3xl font-bold mb-6">Live Confusion Alerts</h1>
+    <div id="notif-list" class="space-y-4 text-gray-700">
+      <p class="italic text-gray-500">Waiting for students to click “I’m confused…”</p>
+    </div>
+  </div>
+
+  <!-- Socket.IO client (served by your Flask-SocketIO) -->
+  <script>
+    const notifList = document.getElementById("notif-list");
+    const socket    = io();
+
+    socket.on("confused", data => {
+      // Remove placeholder if it’s still there
+      if (notifList.children.length === 1 &&
+          notifList.children[0].classList.contains("italic")) {
+        notifList.innerHTML = "";
+      }
+
+      // Build a new alert box
+      const box = document.createElement("div");
+      box.className = [
+        "flex items-start",
+        "bg-red-50 border border-red-400",
+        "text-red-800 px-4 py-3 rounded-lg shadow",
+        "relative"
+      ].join(" ");
+
+      // Message text
+      const who = data.who || "Someone";
+      const now = new Date().toLocaleTimeString();
+      box.innerHTML = `
+        <div class="flex-1">
+          <strong class="font-semibold">Confused!</strong>
+          <p>${who} clicked “I’m confused.” at ${now}</p>
+        </div>
+      `;
+
+      // Close button
+      const btn = document.createElement("button");
+      btn.className = "ml-4 text-red-600 hover:text-red-900 focus:outline-none";
+      btn.setAttribute("aria-label", "Dismiss");
+      btn.innerHTML = "&times;";
+      btn.onclick = () => box.remove();
+
+      box.appendChild(btn);
+
+      // Prepend new alert
+      notifList.prepend(box);
+
+      // Auto‐remove after 20 s
+      setTimeout(() => box.remove(), 20000);
+    });
+  </script>
+</body>
+</html>
+