From e1686d828e7d5a3f20c4a71a376239b75a22ab29 Mon Sep 17 00:00:00 2001
From: "tom.hempel" <tom.hempel@stud.uni-bamberg.de>
Date: Thu, 2 Oct 2025 13:56:30 +0200
Subject: [PATCH] redesigned web interface

---
 experiment-scripts/index.html | 1118 +++++++++++++++++----------------
 1 file changed, 593 insertions(+), 525 deletions(-)
diff --git a/experiment-scripts/index.html b/experiment-scripts/index.html
index 10eb489..0c9d162 100644
--- a/experiment-scripts/index.html
+++ b/experiment-scripts/index.html
@@ -3,334 +3,447 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-
+    <title>VR Charades Experiment Control</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
     <style>
-        table {
-            /* width: 100%; */
-            border-collapse: collapse;
-            font-family: sans-serif;
-            font-size: 0.95rem;
-            background-color: #fff;
-            border: 1px solid #ccc;
-
-            max-height: 400px;
-            overflow-y: scroll;
-
-            margin: 10px;
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
-        th, td {
-            padding: 0.25em 1em;
-            border: 1px solid #ddd;
-            text-align: left;
-        }
-
-        th {
-            background-color: #f4f4f4;
-            font-weight: bold;
-        }
-
-        tr:nth-child(even) {
-            background-color: #f9f9f9;
-        }
-
-        tr:hover {
-            background-color: #f1f1f1;
-        }
-
-        div.container table {
-            max-height: 100vh;
-            overflow-y: scroll;
-        }
-
-
-
-
-
-
         body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-            padding: 0;
-            background-color: #f4f4f4;
+            font-family: 'Inter', sans-serif;
+            background: #f5f5f5;
+            color: #2c3e50;
+            line-height: 1.5;
+        }
+
+        .header {
+            background: #2c3e50;
+            color: white;
+            padding: 1.5rem 2rem;
+            border-bottom: 3px solid #34495e;
+        }
+
+        .header h1 {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .header p {
+            font-size: 0.9rem;
+            color: #bdc3c7;
+            margin-top: 0.25rem;
         }
 
         .container {
-            flex: 1;
-	    min-width: 400px;
-            margin: 10px;
-            padding: 20px;
-            background-color: #fff;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem;
         }
 
-        h2 {
+        .timer-section {
+            background: white;
+            border: 2px solid #34495e;
+            border-radius: 4px;
+            padding: 2rem;
+            margin-bottom: 2rem;
             text-align: center;
-            margin-bottom: 20px;
         }
 
-        label {
+        .timer-label {
+            font-size: 0.875rem;
+            color: #7f8c8d;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 0.5rem;
+        }
+
+        .timer-display {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 4rem;
+            font-weight: 500;
+            color: #2c3e50;
+        }
+
+        .timer-display.warning {
+            color: #e67e22;
+        }
+
+        .timer-display.danger {
+            color: #e74c3c;
+        }
+
+        .timer-display.inactive {
+            color: #bdc3c7;
+        }
+
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .section {
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 1.5rem;
+        }
+
+        .section-title {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #2c3e50;
+            margin-bottom: 1.5rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 2px solid #ecf0f1;
+        }
+
+        .form-group {
+            margin-bottom: 1.25rem;
+        }
+
+        .form-label {
             display: block;
-            margin: 8px 0 4px;
-            font-weight: bold;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #34495e;
+            margin-bottom: 0.5rem;
         }
 
-        select, input[type="number"], input[type="text"] {
+        .form-input {
             width: 100%;
-            padding: 8px;
-            margin-bottom: 16px;
-            border-radius: 4px;
-            border: 1px solid #ccc;
+            padding: 0.625rem 0.75rem;
+            border: 1px solid #cbd5e0;
+            border-radius: 3px;
+            font-size: 0.9375rem;
+            font-family: inherit;
+            transition: border-color 0.15s;
         }
 
-        .row {
+        .form-input:focus {
+            outline: none;
+            border-color: #3498db;
+        }
+
+        .form-input:disabled {
+            background: #f8f9fa;
+            color: #adb5bd;
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+
+        .radio-group {
             display: flex;
-            justify-content: space-between;
+            gap: 1.5rem;
+            margin-top: 0.5rem;
         }
 
-        .row .input-group {
-            width: 32%;
-        }
-
-        .row .input-group input {
-            width: 100%;
-        }
-
-        .button-container {
-            text-align: center;
-        }
-
-        .button-container button {
-            padding: 10px 20px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 4px;
+        .radio-label {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
             cursor: pointer;
         }
 
-        .button-container button:hover {
-            background-color: #45a049;
+        .radio-label input {
+            cursor: pointer;
         }
 
-        .word {
-            border-radius: 4px;
-            padding: 3px 8px;
-            display: inline;
-            border: 1px solid gray;
+        .btn {
+            padding: 0.625rem 1.25rem;
+            border: none;
+            border-radius: 3px;
+            font-size: 0.9375rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.15s;
+            font-family: inherit;
         }
 
-        .word > input[type="checkbox"] {
-            display: none;
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
         }
 
-        .word:hover > input[type="checkbox"] {
-            display: inline;
-        }
-
-        .word-selected {
-            background-color:#4c6faf;
-        }
-        
-        .word:hover {
-            border: 1px solid black;
-            background-color:#0c59e7;
+        .btn-primary {
+            background: #3498db;
             color: white;
-            font-weight: bold;
         }
 
-        .word-timer::after {
-            content: "s";
+        .btn-primary:hover:not(:disabled) {
+            background: #2980b9;
         }
 
-        .word-done::before {
-            content: "❌ ";
-        }
-        
-        .word-correct::before {
-            content: "✅ ";
+        .btn-success {
+            background: #27ae60;
+            color: white;
         }
 
-        .word:hover .word-correct::before {
-            content: "";
-        }
-    
-        .word:hover .word-done::before {
-            content: "";
+        .btn-success:hover:not(:disabled) {
+            background: #229954;
         }
 
-        
-        .current-word {
-            font-weight: bold;
+        .btn-danger {
+            background: #e74c3c;
+            color: white;
         }
 
-        .current-word::before {
-            content: "▶ ";
+        .btn-danger:hover:not(:disabled) {
+            background: #c0392b;
         }
 
-        #word-list-interactive > div {
-            margin: 20px 10px;
+        .btn-secondary {
+            background: #95a5a6;
+            color: white;
         }
 
+        .btn-secondary:hover:not(:disabled) {
+            background: #7f8c8d;
+        }
 
-        .flex {
+        .btn-group {
             display: flex;
-            justify-content: flex-start;
-            flex-wrap: wrap;
-            gap: 20px;
+            gap: 0.75rem;
+            margin-top: 1rem;
+        }
+
+        .controls-section {
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .controls-section .btn-group {
+            margin-top: 0;
+        }
+
+        textarea {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 0.875rem;
+            line-height: 1.5;
+            resize: vertical;
+        }
+
+        .word-display {
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 1.5rem;
+        }
+
+        .word-list-container {
+            max-height: 500px;
+            overflow-y: auto;
+            margin-top: 1rem;
+        }
+
+        .word-item {
+            background: #fafafa;
+            border: 1px solid #e0e0e0;
+            border-radius: 3px;
+            padding: 0.75rem 1rem;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            transition: background 0.15s;
+        }
+
+        .word-item:hover {
+            background: #f0f0f0;
+        }
+
+        .word-item.active {
+            background: #e3f2fd;
+            border-color: #3498db;
+        }
+
+        .word-item.correct {
+            background: #e8f5e9;
+            border-color: #27ae60;
+        }
+
+        .word-item.incorrect {
+            background: #ffebee;
+            border-color: #e74c3c;
+        }
+
+        .word-content {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            flex: 1;
+        }
+
+        .word-index {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 0.8125rem;
+            color: #7f8c8d;
+            min-width: 2.5rem;
+        }
+
+        .word-text {
+            font-size: 0.9375rem;
+            color: #2c3e50;
+        }
+
+        .word-timer {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 1rem;
+            color: #34495e;
+            min-width: 4rem;
+            text-align: right;
+        }
+
+        .word-checkbox {
+            margin-left: 1rem;
+        }
+
+        .placeholder {
+            text-align: center;
+            padding: 3rem 1rem;
+            color: #95a5a6;
+        }
+
+        .small-text {
+            font-size: 0.8125rem;
+            color: #7f8c8d;
+            margin-top: 0.25rem;
+        }
+
+        @media (max-width: 768px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+            
+            .timer-display {
+                font-size: 3rem;
+            }
+            
+            .btn-group {
+                flex-direction: column;
+            }
+            
+            .btn {
+                width: 100%;
+            }
         }
     </style>
 </head>
 <body>
-    <h1 style="text-align: center;">VR Charades</h1>
-
-    <div class="flex">
-    <!--    <div class="container">
-            <h2>Facial Expressions</h2>
-            <div style="max-height: 80vh; overflow-y: scroll;">
-                <table id="facialExpressions">
-                    <tr>
-                        <th>Index</th>
-                        <th>Property</th>
-                        <th>Value Slider</th>
-                        <th>Value Number</th>
-                    </tr>
-                </table>
-            </div>
-        </div>
-
-
-        <div class="container">
-            <h2>Modify Element</h2>
-
-            <label for="element-select">Select Element</label>
-            <select id="element-select">
-            </select>
-
-            <div class="row">
-                <div class="input-group">
-                    <label for="translate-x">Translation X</label>
-                    <input type="number" id="translate-x" placeholder="X">
-                </div>
-                <div class="input-group">
-                    <label for="translate-y">Translation Y</label>
-                    <input type="number" id="translate-y" placeholder="Y">
-                </div>
-                <div class="input-group">
-                    <label for="translate-z">Translation Z</label>
-                    <input type="number" id="translate-z" placeholder="Z">
-                </div>
-            </div>
-
-            <div class="row">
-                <div class="input-group">
-                    <label for="rotate-x">Rotation X</label>
-                    <input type="number" id="rotate-x" placeholder="X">
-                </div>
-                <div class="input-group">
-                    <label for="rotate-y">Rotation Y</label>
-                    <input type="number" id="rotate-y" placeholder="Y">
-                </div>
-                <div class="input-group">
-                    <label for="rotate-z">Rotation Z</label>
-                    <input type="number" id="rotate-z" placeholder="Z">
-                </div>
-            </div>
-
-            <div class="button-container">
-                <button type="button">Modify</button>
-            </div>
-        </div> -->
-
-	    <div class="container">
-		    <h2>Charades</h2>
-
-		    <label for="group-id">Group ID</label>
-		    <input type="text" id="group-id" placeholder="g1">
-
-		    <label for="ip-player1">IP Player 1</label>
-		    <input type="text" id="ip-player1" placeholder="10.42.0.38">
-
-		    <label for="ip-player2">IP Player 2</label>
-            <input type="text" id="ip-player2" placeholder="10.42.0.100">
-
-            <fieldset style="display: block; margin: 20px 0px;">
-                <legend>Current Player For Acting</legend>
-
-                <div style="margin: 0.4em;">
-                    <input id="chosen-player-1" name="chosen-player" type="radio" value="player1" checked />
-                    <label style="display: inline; font-weight: normal;" for="chosen-player-1">Player 1</label>
-                </div>
-
-                <div style="margin: 0.4em;">
-                    <input id="chosen-player-2" name="chosen-player" type="radio" value="player2" />
-                    <label style="display: inline; font-weight: normal;" for="chosen-player-2">Player 2</label>
-                </div>
-            </fieldset>
-
-		    <div class="row" style="margin-bottom: 20px;">
-			    <div class="input-group">
-				    <label for="time-s">Time per Word (s)</label>
-				    <input type="number" id="time-s" placeholder="30" value="30">
-			    </div>
-			    <div class="input-group">
-				    <label for="total-duration">Total Duration (min)</label>
-				    <input type="number" id="total-duration" placeholder="5" value="0" step="0.5">
-				    <small style="color: #666; font-size: 0.85em;">0 = no limit</small>
-			    </div>
-		    </div>
-
-
-
-            
-		    <label for="last-word-status">Last Word Status</label>
-		    <select id="last-word-status">
-			    <option value="-1">None</option>
-			    <option value="0">False</option>
-			    <option value="1">Correct</option>
-		    </select>
-
-		    <div class="row">
-			    <div class="input-group">
-				    <label for="word">Word</label>
-				    <input type="text" id="word" placeholder="Word...">
-			    </div>
-		    </div>
-
-		    <div class="button-container">
-			    <button type="button" id="button-word">Send</button>
-		    </div>
-	    </div>
-        
-        <div class="container">
-            <textarea id="word-list" name="word-list" rows="40" cols="50" placeholder="charade words"></textarea>
-            <br>
-    
-            <div class="button-container">
-                <button type="button" id="button-shuffle-words">Shuffle</button>
-                <button type="button" id="button-create-word-items">Modify</button>
-            </div>
-        </div>
-
-        <div class="container" style="overflow-x: scroll; max-height: 80vh;">
-            <div id="word-list-interactive">
-                <p>
-                    Press <b>Modify</b> to generate and run the word list.
-                </p>
-            </div>
-
-            <div class="button-container">
-                <button type="button" id="button-save-to-file">Save as CSV</button>
-                <button type="button" id="button-stop">Stop</button>
-            </div>
-        </div>
+    <div class="header">
+        <h1>VR Charades Experiment Control</h1>
+        <p>Experiment management interface</p>
     </div>
-    
-    <div id="total-timer" style="display: none; width: calc(100% - 40px); margin: 20px; padding: 30px; background-color: #4CAF50; color: white; border-radius: 12px; text-align: center; font-weight: bold; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);">
-        <div style="margin-bottom: 10px; font-size: 1.5em; opacity: 0.95;">Total Time Remaining</div>
-        <div id="total-timer-display" style="font-size: 4em; font-family: 'Courier New', monospace; letter-spacing: 0.1em;">00:00</div>
+
+    <div class="container">
+        <!-- Timer Display -->
+        <div class="timer-section">
+            <div class="timer-label">Total Time Remaining</div>
+            <div id="timer-display" class="timer-display inactive">--:--</div>
+        </div>
+
+        <!-- Main Configuration -->
+        <div class="main-grid">
+            <div class="section">
+                <h2 class="section-title">Session Configuration</h2>
+
+                <div class="form-group">
+                    <label class="form-label">Group ID</label>
+                    <input type="text" id="group-id" class="form-input" placeholder="e.g., g1, team-alpha">
+                    <div class="small-text">Used in exported CSV filename</div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label class="form-label">Time per Word (seconds)</label>
+                        <input type="number" id="time-s" class="form-input" value="30" min="1">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Total Duration (minutes)</label>
+                        <input type="number" id="total-duration" class="form-input" value="0" min="0" step="0.5">
+                        <div class="small-text">0 = unlimited</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="section">
+                <h2 class="section-title">Network Configuration</h2>
+
+                <div class="form-group">
+                    <label class="form-label">Player 1 IP Address</label>
+                    <input type="text" id="ip-player1" class="form-input" placeholder="10.42.0.38">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">Player 2 IP Address</label>
+                    <input type="text" id="ip-player2" class="form-input" placeholder="10.42.0.100">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">Active Player</label>
+                    <div class="radio-group">
+                        <label class="radio-label">
+                            <input type="radio" name="active-player" value="player1" checked>
+                            <span>Player 1</span>
+                        </label>
+                        <label class="radio-label">
+                            <input type="radio" name="active-player" value="player2">
+                            <span>Player 2</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Word List -->
+        <div class="section">
+            <h2 class="section-title">Word List</h2>
+            
+            <div class="form-group">
+                <textarea id="word-list" class="form-input" rows="12" placeholder="Enter one word per line..."></textarea>
+            </div>
+
+            <div class="btn-group">
+                <button id="btn-shuffle" class="btn btn-secondary">Shuffle Words</button>
+                <button id="btn-start" class="btn btn-success">Start Experiment</button>
+            </div>
+        </div>
+
+        <!-- Controls -->
+        <div class="controls-section">
+            <h2 class="section-title">Experiment Controls</h2>
+            <div class="btn-group">
+                <button id="btn-stop" class="btn btn-danger" disabled>Stop Experiment</button>
+                <button id="btn-save" class="btn btn-primary" disabled>Save Results (CSV)</button>
+            </div>
+        </div>
+
+        <!-- Progress Display -->
+        <div class="word-display">
+            <h2 class="section-title">Experiment Progress</h2>
+            <div id="word-list-display" class="word-list-container">
+                <div class="placeholder">
+                    <p><strong>No active experiment</strong></p>
+                    <p>Configure settings above and click "Start Experiment" to begin</p>
+                </div>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -338,195 +451,276 @@
         let runningWordList = [];
         let experimentStartTime = null;
         let totalDurationMs = 0;
-
-        function createWordItems() {
-            const wordList = document.getElementById("word-list");
-            const text = wordList.value;
-            const wordListInteractive = document.getElementById("word-list-interactive");
-            wordListInteractive.innerHTML = "";
-            runningWordList = [];
-            runningWordIndex = -1;
-
-            let index = 0;
-            text.trim().split('\n').forEach((word) => {
-                index += 1;
-
-                const div = document.createElement("div");
-                div.classList.add("word");
-                div.style.display = "flex";
-                div.setAttribute("word", word.trim());
-
-                const div2 = document.createElement("div");
-                div2.style.width = "100%";
-                div2.style.display = "flex";
-                div2.style.justifyContent = "space-between";
-
-                const p = document.createElement("p");
-                const span = document.createElement("span");
-                span.innerText = `Word ${index}: `;
-                span.style.color = "gray";
-                const wordText = document.createTextNode(word.trim());
-                p.appendChild(span);
-                p.appendChild(wordText);
-                
-
-                const input = document.createElement("input");
-                input.setAttribute("type", "checkbox");
-                input.addEventListener("input", () => {
-                    if (input.checked) {
-                        p.classList.add("word-correct");
-                    } else {
-                        p.classList.remove("word-correct");
-                    }
-                });
-
-                const timerP = document.createElement("p");
-                timerP.classList.add("word-timer");
-
-		        const timeSeconds = parseFloat(document.getElementById("time-s").value);
-                timerP.innerText = timeSeconds.toFixed(2);
-                timerP.setAttribute("remainingTime", timeSeconds.toFixed(2))
-
-                div2.appendChild(p);
-                div2.appendChild(timerP);
-
-                div.appendChild(input);
-                div.appendChild(div2);
-                wordListInteractive.appendChild(div);
-
-                runningWordList.push(div);
-            });
-        }
-
         let frameId = undefined;
         let last = undefined;
         let newWord;
         let lastWordStatus = -1;
+        let experimentRunning = false;
+
+        function updateButtonStates() {
+            document.getElementById("btn-stop").disabled = !experimentRunning;
+            document.getElementById("btn-save").disabled = experimentRunning || runningWordList.length === 0;
+            document.getElementById("btn-start").disabled = experimentRunning;
+            document.getElementById("btn-shuffle").disabled = experimentRunning;
+        }
+
+        function createWordItems() {
+            const wordList = document.getElementById("word-list");
+            const text = wordList.value;
+            const display = document.getElementById("word-list-display");
+            display.innerHTML = "";
+            runningWordList = [];
+            runningWordIndex = -1;
+
+            const words = text.trim().split('\n').filter(w => w.trim());
+            
+            words.forEach((word, index) => {
+                const div = document.createElement("div");
+                div.classList.add("word-item");
+                div.setAttribute("data-word", word.trim());
+                div.setAttribute("data-index", index);
+
+                const content = document.createElement("div");
+                content.classList.add("word-content");
+                
+                const indexSpan = document.createElement("span");
+                indexSpan.classList.add("word-index");
+                indexSpan.textContent = `${(index + 1).toString().padStart(2, '0')}.`;
+                
+                const textSpan = document.createElement("span");
+                textSpan.classList.add("word-text");
+                textSpan.textContent = word.trim();
+                
+                content.appendChild(indexSpan);
+                content.appendChild(textSpan);
+
+                const timer = document.createElement("div");
+                timer.classList.add("word-timer");
+                const timeSeconds = parseFloat(document.getElementById("time-s").value);
+                timer.textContent = timeSeconds.toFixed(1) + "s";
+                timer.setAttribute("data-remaining", timeSeconds);
+
+                const checkbox = document.createElement("input");
+                checkbox.type = "checkbox";
+                checkbox.classList.add("word-checkbox");
+                checkbox.addEventListener("change", () => {
+                    if (checkbox.checked) {
+                        div.classList.add("correct");
+                        div.classList.remove("incorrect");
+                    } else {
+                        div.classList.remove("correct");
+                    }
+                });
+
+                div.appendChild(content);
+                div.appendChild(timer);
+                div.appendChild(checkbox);
+                display.appendChild(div);
+                
+                runningWordList.push(div);
+            });
+        }
+
         function step(timestamp) {
             if (last === undefined) {
                 last = timestamp;
                 experimentStartTime = timestamp;
                 runningWordIndex = 0;
                 newWord = true;
-                lastWordStatus = -1; // First word has no previous word
+                lastWordStatus = -1;
             }
+            
             const elapsed = timestamp - last;
             last = timestamp;
             
-            // Check if total duration has been exceeded
+            // Update total timer
+            const timerDisplay = document.getElementById("timer-display");
             if (totalDurationMs > 0) {
                 const totalElapsed = timestamp - experimentStartTime;
                 const remainingMs = totalDurationMs - totalElapsed;
                 
-                // Update timer display
                 const remainingMinutes = Math.floor(remainingMs / 60000);
                 const remainingSeconds = Math.floor((remainingMs % 60000) / 1000);
-                const timerDisplay = document.getElementById("total-timer-display");
-                timerDisplay.textContent = `${remainingMinutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+                timerDisplay.textContent = 
+                    `${remainingMinutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
                 
-                // Change color when time is running out
-                const timerContainer = document.getElementById("total-timer");
-                if (remainingMs < 60000) { // Less than 1 minute
-                    timerContainer.style.backgroundColor = "#f44336"; // Red
-                } else if (remainingMs < 120000) { // Less than 2 minutes
-                    timerContainer.style.backgroundColor = "#ff9800"; // Orange
-                } else {
-                    timerContainer.style.backgroundColor = "#4CAF50"; // Green
+                timerDisplay.className = "timer-display";
+                if (remainingMs < 60000) {
+                    timerDisplay.classList.add("danger");
+                } else if (remainingMs < 120000) {
+                    timerDisplay.classList.add("warning");
                 }
                 
                 if (totalElapsed >= totalDurationMs) {
-                    console.log("Total duration exceeded, stopping experiment");
-                    cancelAnimationFrame(frameId);
-                    frameId = undefined;
-                    document.getElementById("total-timer").style.display = "none";
+                    stopExperiment();
                     alert("Experiment completed: Total duration reached");
                     return;
                 }
             }
 
-            const runningWord = runningWordList[runningWordIndex];
-            const p = runningWord.querySelector("p");
-            const timer = runningWord.querySelector(".word-timer");
-            let remainingTime = parseFloat(timer.getAttribute("remainingTime")) - (elapsed / 1000);
+            if (runningWordIndex >= runningWordList.length) {
+                stopExperiment();
+                return;
+            }
+
+            const currentWordDiv = runningWordList[runningWordIndex];
+            const timer = currentWordDiv.querySelector(".word-timer");
+            const checkbox = currentWordDiv.querySelector('input[type="checkbox"]');
+            
+            let remainingTime = parseFloat(timer.getAttribute("data-remaining")) - (elapsed / 1000);
+            
             if (newWord) {
                 newWord = false;
-                let word = runningWord.getAttribute("word");
+                const word = currentWordDiv.getAttribute("data-word");
                 sendNewWord(word, lastWordStatus, remainingTime);
+                
+                // Remove active class from all
+                runningWordList.forEach(div => div.classList.remove("active"));
+                currentWordDiv.classList.add("active");
             }
 
-            if (p.classList.contains("word-correct") || remainingTime < 0) {
-                if (remainingTime < 0) {
-                    remainingTime = 0;
+            if (checkbox.checked || remainingTime < 0) {
+                if (remainingTime < 0) remainingTime = 0;
+                
+                lastWordStatus = checkbox.checked ? 1 : 0;
+                timer.textContent = remainingTime.toFixed(1) + "s";
+                currentWordDiv.classList.remove("active");
+                
+                if (checkbox.checked) {
+                    currentWordDiv.classList.add("correct");
+                } else {
+                    currentWordDiv.classList.add("incorrect");
                 }
-
-                p.classList.add("word-done");
-                runningWordIndex += 1;
-                lastWordStatus = p.classList.contains("word-correct") ? 1 : 0;
+                
+                runningWordIndex++;
                 newWord = true;
+            } else {
+                timer.textContent = remainingTime.toFixed(1) + "s";
+                timer.setAttribute("data-remaining", remainingTime);
             }
-            timer.innerText = remainingTime.toFixed(2);
-            timer.setAttribute("remainingTime", remainingTime);
 
             if (runningWordIndex < runningWordList.length) {
                 frameId = requestAnimationFrame(step);
             } else {
-                frameId = undefined;
+                stopExperiment();
             }
         }
 
-        document.getElementById("button-stop").addEventListener("click", () => {
-            // Stop the word list animation
+        function stopExperiment() {
             if (frameId) {
                 cancelAnimationFrame(frameId);
                 frameId = undefined;
             }
-            
-            // Hide timer
-            document.getElementById("total-timer").style.display = "none";
-            
+            experimentRunning = false;
+            updateButtonStates();
             console.log("Experiment stopped");
-        });
+        }
 
-        document.getElementById("button-save-to-file").addEventListener("click", () => {
-            // Check if experiment is still running
-            if (frameId !== undefined) {
-                alert("Please stop the experiment before saving results.");
+        function sendNewWord(word, lastWordStatus, timeSeconds) {
+            const isPlayer1 = document.querySelector('input[name="active-player"]:checked').value === "player1";
+            const ipPlayer1 = document.getElementById("ip-player1").value;
+            const ipPlayer2 = document.getElementById("ip-player2").value;
+
+            const target = isPlayer1 ? ipPlayer1 : ipPlayer2;
+            const targetOther = isPlayer1 ? ipPlayer2 : ipPlayer1;
+
+            fetch("/word", {
+                method: "POST",
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({
+                    target: target,
+                    lastWordStatus: lastWordStatus,
+                    timeSeconds: timeSeconds,
+                    word: word,
+                }),
+            });
+
+            fetch("/word", {
+                method: "POST",
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({
+                    target: targetOther,
+                    lastWordStatus: lastWordStatus,
+                    timeSeconds: 0.0,
+                    word: "",
+                }),
+            });
+        }
+
+        // Event Listeners
+        document.getElementById("btn-start").addEventListener("click", () => {
+            const groupId = document.getElementById("group-id").value;
+            
+            if (!groupId || !groupId.trim()) {
+                alert("Please enter a Group ID before starting.");
+                return;
+            }
+
+            const wordList = document.getElementById("word-list").value;
+            if (!wordList.trim()) {
+                alert("Please enter a word list before starting.");
                 return;
             }
             
-            // Check if there's data to save
+            const totalDurationMin = parseFloat(document.getElementById("total-duration").value) || 0;
+            totalDurationMs = totalDurationMin * 60 * 1000;
+            
+            const timerDisplay = document.getElementById("timer-display");
+            if (totalDurationMs > 0) {
+                const minutes = Math.floor(totalDurationMs / 60000);
+                const seconds = Math.floor((totalDurationMs % 60000) / 1000);
+                timerDisplay.textContent = 
+                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                timerDisplay.className = "timer-display";
+            } else {
+                timerDisplay.textContent = "∞";
+                timerDisplay.className = "timer-display";
+            }
+            
+            createWordItems();
+            if (frameId) cancelAnimationFrame(frameId);
+
+            last = undefined;
+            newWord = undefined;
+            experimentStartTime = null;
+            experimentRunning = true;
+            updateButtonStates();
+            
+            frameId = requestAnimationFrame(step);
+            
+            console.log(`Experiment started: Group=${groupId}, Duration=${totalDurationMin}min`);
+        });
+
+        document.getElementById("btn-stop").addEventListener("click", stopExperiment);
+
+        document.getElementById("btn-save").addEventListener("click", () => {
             if (runningWordList.length === 0) {
                 alert("No data to save. Please run the experiment first.");
                 return;
             }
             
-            // Get group ID for filename
             const groupId = document.getElementById("group-id").value || "group";
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
             
-            let data = "word;correct;time left\n";
-            
-            // Only export words that were actually used (up to current index or all if finished)
+            let data = "word;correct;time_left\n";
             const maxIndex = runningWordIndex >= runningWordList.length ? runningWordList.length : runningWordIndex;
             
-            for (let i = 0; i < maxIndex; ++i) {
-                const p = runningWordList[i].querySelector("p");
-                const timer = runningWordList[i].querySelector(".word-timer");
-                
-                const word = runningWordList[i].getAttribute("word");
-                const isCorrect = p.classList.contains("word-correct");
-                const timeLeft = parseFloat(timer.getAttribute("remainingTime"));
+            for (let i = 0; i < maxIndex; i++) {
+                const div = runningWordList[i];
+                const word = div.getAttribute("data-word");
+                const checkbox = div.querySelector('input[type="checkbox"]');
+                const timer = div.querySelector(".word-timer");
+                const isCorrect = checkbox.checked;
+                const timeLeft = parseFloat(timer.getAttribute("data-remaining"));
 
                 data += `${word};${isCorrect};${timeLeft}\n`;
             }
 
-            // Create a download with proper filename
             const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
             const link = document.createElement("a");
             const url = URL.createObjectURL(blob);
-            link.setAttribute("href", url);
-            link.setAttribute("download", `${groupId}_results_${timestamp}.csv`);
-            link.style.visibility = 'hidden';
+            link.href = url;
+            link.download = `${groupId}_results_${timestamp}.csv`;
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -534,7 +728,7 @@
             console.log(`Saved ${maxIndex} out of ${runningWordList.length} words to CSV`);
         });
 
-        document.getElementById("button-shuffle-words").addEventListener("click", async () => {
+        document.getElementById("btn-shuffle").addEventListener("click", async () => {
             const wordList = document.getElementById("word-list");
             const text = wordList.value.trim();
             
@@ -543,12 +737,6 @@
                 return;
             }
             
-            // Don't allow shuffle if word list is already running
-            if (frameId !== undefined) {
-                alert("Cannot shuffle while word list is running. Please stop first.");
-                return;
-            }
-            
             const words = text.split('\n').map(word => word.trim()).filter(word => word);
             
             try {
@@ -568,129 +756,9 @@
             }
         });
 
-        document.getElementById("button-create-word-items").addEventListener("click", () => {
-            // Validate inputs
-            const groupId = document.getElementById("group-id").value;
-            
-            if (!groupId || !groupId.trim()) {
-                alert("Please enter a Group ID before starting.");
-                return;
-            }
-            
-            // Get total duration in milliseconds
-            const totalDurationMin = parseFloat(document.getElementById("total-duration").value) || 0;
-            totalDurationMs = totalDurationMin * 60 * 1000;
-            
-            // Show/hide timer based on whether duration is set
-            const timerContainer = document.getElementById("total-timer");
-            if (totalDurationMs > 0) {
-                timerContainer.style.display = "block";
-                timerContainer.style.backgroundColor = "#4CAF50";
-                const minutes = Math.floor(totalDurationMs / 60000);
-                const seconds = Math.floor((totalDurationMs % 60000) / 1000);
-                document.getElementById("total-timer-display").textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-            } else {
-                timerContainer.style.display = "none";
-            }
-            
-            createWordItems();
-            if (frameId) {
-                cancelAnimationFrame(frameId);
-            }
-
-            last = undefined;
-            newWord = undefined;
-            experimentStartTime = null;
-            frameId = requestAnimationFrame(step);
-            
-            console.log(`Experiment started: Group=${groupId}, Duration=${totalDurationMin}min`);
-        });
-
-	document.getElementById('button-word').addEventListener('click', () => {
-        const chosenPlayer1 = document.getElementById("chosen-player-1").checked;
-        const chosenPlayer2 = document.getElementById("chosen-player-2").checked;
-        const ipPlayer1 = document.getElementById("ip-player1").value;
-        const ipPlayer2 = document.getElementById("ip-player2").value;
-
-        const target = chosenPlayer1 ? ipPlayer1 : ipPlayer2;
-        const targetOther = chosenPlayer1 ? ipPlayer2 : ipPlayer1;
-		const lastWordStatus = document.getElementById("last-word-status").value;
-		const timeSeconds = document.getElementById("time-s").value;
-		const word = document.getElementById("word").value;
-
-		const data = {
-			target: target,
-			lastWordStatus: parseInt(lastWordStatus),
-			timeSeconds: parseFloat(timeSeconds),
-			word: word,
-		};
-
-		fetch("/word", {
-			method: "POST",
-			headers: {'Content-Type': 'application/json'},
-			body: JSON.stringify(data),
-		}).then(res => {
-			// console.log("Request complete! response:", res);
-		});
-
-		const data2 = {
-			target: targetOther,
-			lastWordStatus: parseInt(lastWordStatus),
-			timeSeconds: 0.0, // parseFloat(timeSeconds),
-			word: "", // word,
-		};
-
-        fetch("/word", {
-			method: "POST",
-			headers: {'Content-Type': 'application/json'},
-			body: JSON.stringify(data),
-		}).then(res => {
-			// console.log("Request complete! response:", res);
-		});
-	});
-
-    function sendNewWord(word, lastWordStatus, timeSeconds) {
-        const chosenPlayer1 = document.getElementById("chosen-player-1").checked;
-        const chosenPlayer2 = document.getElementById("chosen-player-2").checked;
-        const ipPlayer1 = document.getElementById("ip-player1").value;
-        const ipPlayer2 = document.getElementById("ip-player2").value;
-
-        const target = chosenPlayer1 ? ipPlayer1 : ipPlayer2;
-        const targetOther = chosenPlayer1 ? ipPlayer2 : ipPlayer1;
-
-        console.log("target:", target);
-        console.log("targetOther:", targetOther);
-
-		const data = {
-			target: target,
-			lastWordStatus: lastWordStatus,
-			timeSeconds,
-			word: word,
-		};
-
-		fetch("/word", {
-			method: "POST",
-			headers: {'Content-Type': 'application/json'},
-			body: JSON.stringify(data),
-		}).then(res => {
-			// console.log("Request complete! response:", res);
-		});
-
-		const dataOther = {
-			target: targetOther,
-			lastWordStatus: lastWordStatus,
-			timeSeconds: 0.0,
-			word: "", // word,
-		};
-
-        fetch("/word", {
-			method: "POST",
-			headers: {'Content-Type': 'application/json'},
-			body: JSON.stringify(dataOther),
-		}).then(res => {
-			// console.log("Request complete! response:", res);
-        });
-    }
+        // Initialize button states
+        updateButtonStates();
     </script>
 </body>
 </html>
+
