71 lines
2.1 KiB
HTML
71 lines
2.1 KiB
HTML
<!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 = "×";
|
||
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>
|
||
|