Last active
November 10, 2025 11:50
-
-
Save decatur/441649f8cbc6d5f4d4e3a334b13ed912 to your computer and use it in GitHub Desktop.
Keeps monitoring talking time.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .time { padding: 1em } | |
| /* https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/system-color */ | |
| .current { background-color: ActiveText !important; } | |
| .speaker { margin: 1ex; padding: 1em; background-color: ButtonFace; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Talking Time</h1> | |
| </body> | |
| <script> | |
| // Call with url query ?speakers=AB,XY,ZZ | |
| const nobody = 'Nobody'; | |
| const talking_time = new Map(); | |
| let current_id = nobody; | |
| let current_start = new Date().getTime(); | |
| let total_talking_time = 0; | |
| const url_params = new URLSearchParams(window.location.search); | |
| const speakers = url_params.get('speakers').split(','); | |
| speakers.push(nobody); | |
| for (const id of speakers) { | |
| const elem = document.createElement("div"); | |
| elem.id = id; | |
| elem.className = "speaker"; | |
| elem.textContent = id; | |
| const span = document.createElement("span"); | |
| span.className = "time"; | |
| elem.appendChild(span); | |
| elem.onclick = on_click_handler; | |
| talking_time.set(elem.id, 0); | |
| document.body.appendChild(elem); | |
| } | |
| function on_click_handler(event) { | |
| select(event.currentTarget.id); | |
| } | |
| function select(id) { | |
| update(); | |
| document.getElementById(current_id).classList.remove("current"); | |
| const target_elem = document.getElementById(id); | |
| current_id = id; | |
| target_elem.classList.add("current"); | |
| current_start = new Date().getTime(); | |
| } | |
| function update() { | |
| const elapsed = (new Date()).getTime() - current_start; | |
| current_start = new Date().getTime(); | |
| if (current_id != nobody) total_talking_time += elapsed; | |
| let total_time = talking_time.get(current_id); | |
| total_time += elapsed; | |
| talking_time.set(current_id, total_time); | |
| for (const elem of document.getElementsByClassName("speaker")) { | |
| update_speaker(elem.id); | |
| } | |
| } | |
| function update_speaker(id) { | |
| const total_time = talking_time.get(id); | |
| //console.log(total_time); | |
| const elem = document.getElementById(id); | |
| elem.querySelector('.time').textContent = `${Math.round(total_time / 1000)}sec ${Math.round(total_time / total_talking_time * 100)}%`; | |
| } | |
| setInterval(update, 5000); | |
| select(nobody); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment