61 lines
1.8 KiB
HTML
61 lines
1.8 KiB
HTML
{% extends "admin_base.html" %}
|
|
|
|
{% set active_page = 'confused' %}
|
|
{% set title = 'Live Confusion Alerts' %}
|
|
|
|
{% block head_extra %}
|
|
<script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
|
|
{% endblock %}
|
|
|
|
{% block admin_content %}
|
|
<div class="max-w-3xl mx-auto mt-12 px-4">
|
|
<h1 class="text-3xl font-bold mb-6 dark:text-white">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>
|
|
{% endblock admin_content %}
|
|
|
|
{% block scripts %}{% endblock %}{# No Flowbite needed #}
|
|
|
|
{% block scripts_extra %}
|
|
<script>
|
|
const notifList = document.getElementById("notif-list");
|
|
const socket = io({ transports: ['websocket'] });
|
|
|
|
socket.on("confused", data => {
|
|
if (notifList.children.length === 1 &&
|
|
notifList.children[0].classList.contains("italic")) {
|
|
notifList.innerHTML = "";
|
|
}
|
|
|
|
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(" ");
|
|
|
|
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>
|
|
`;
|
|
|
|
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);
|
|
|
|
notifList.prepend(box);
|
|
setTimeout(() => box.remove(), 20000);
|
|
});
|
|
</script>
|
|
{% endblock %}
|