update

templates/experiment.html

@@ -4,52 +4,129 @@
     <title>Table QA Experiment</title>
     <style>
         /* Keep all existing styles */
-
-        /* Add new styles for the dropdown */
+        body {
+            font-family: 'Roboto', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 30px;
+        }
+        .progress {
+            text-align: center;
+            font-size: 1.2em;
+            color: #666;
+            margin-bottom: 20px;
+        }
+        .explanations-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+        .explanation-card {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .explanation-header {
+            background-color: #f8f9fa;
+            padding: 15px;
+            border-bottom: 1px solid #ddd;
+        }
+        .explanation-header h2 {
+            margin: 0;
+            color: #333;
+            font-size: 1.2em;
+        }
+        .explanation-content {
+            padding: 0;
+        }
+        iframe {
+            width: 100%;
+            height: 500px;
+            border: none;
+        }
+        .ranking-section {
+            position: sticky;
+            bottom: 0;
+            background: white;
+            padding: 20px;
+            border-top: 3px solid #4CAF50;
+            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+            margin-top: 40px;
+        }
+        .ranking-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+            margin: 20px 0;
+        }
+        .ranking-item {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+        }
+        .ranking-item label {
+            display: block;
+            margin-bottom: 10px;
+            font-weight: bold;
+            color: #333;
+        }
         .ranking-item select {
-            width: 80px;
+            width: 60px;
             padding: 8px;
             border: 2px solid #ddd;
             border-radius: 4px;
             text-align: center;
             font-size: 1.1em;
-            background-color: white;
-            cursor: pointer;
-            appearance: none; /* Remove default arrow */
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-            background-repeat: no-repeat;
-            background-position: right 8px center;
-            background-size: 16px;
-            padding-right: 30px;
         }
-
-        .ranking-item select:focus {
-            outline: none;
-            border-color: #4CAF50;
-            box-shadow: 0 0 0 2px rgba(74, 175, 80, 0.2);
+        .submit-button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 15px 30px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1.1em;
+            display: block;
+            margin: 20px auto;
+            transition: background-color 0.3s;
         }
-
-        .ranking-item select:hover {
-            border-color: #4CAF50;
+        .submit-button:hover {
+            background-color: #45a049;
         }
-
-        /* Style for the selected option */
-        .ranking-item select option {
-            padding: 8px;
-            font-size: 1.1em;
+        .instructions {
+            background-color: #e9f5e9;
+            border-left: 4px solid #4CAF50;
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 4px;
         }
-
-        /* Highlight used ranks */
-        .used-rank {
-            background-color: #e8f5e9 !important;
+        .error-message {
+            color: #d32f2f;
+            text-align: center;
+            margin: 10px 0;
+            padding: 10px;
+            background-color: #fde8e8;
+            border-radius: 4px;
+            display: none;
         }
     </style>
 </head>
 <body>
-    <!-- Keep existing container, progress, and instructions -->
-
     <div class="container">
         <div class="progress">Sample {{ sample_id + 1 }} of 10</div>
 
@@ -83,12 +160,12 @@
                     {% for method in methods %}
                     <div class="ranking-item">
                         <label for="{{ method }}">{{ method }}</label>
-                        <select id="{{ method }}" name="{{ method }}" required onchange="updateRankings(this)">
-                            <option value="" selected disabled>Select Rank</option>
-                            <option value="1">1 (Best)</option>
+                        <select id="{{ method }}" name="{{ method }}" required>
+                            <option value="" selected disabled>Rank</option>
+                            <option value="1">1</option>
                             <option value="2">2</option>
                             <option value="3">3</option>
-                            <option value="4">4 (Worst)</option>
+                            <option value="4">4</option>
                         </select>
                     </div>
                     {% endfor %}
@@ -100,37 +177,15 @@
     </div>
 
     <script>
-        function updateRankings(changedSelect) {
-            const allSelects = document.querySelectorAll('select');
-            const usedRanks = new Set();
-
-            // Collect all currently selected values
-            allSelects.forEach(select => {
-                if (select.value) {
-                    usedRanks.add(select.value);
-                }
-            });
-
-            // Update all selects to disable used options
-            allSelects.forEach(select => {
-                Array.from(select.options).forEach(option => {
-                    if (option.value && option.value !== select.value) {
-                        option.disabled = usedRanks.has(option.value);
-                    }
-                });
-            });
-        }
-
         function validateRankings() {
             const rankings = new Set();
             const form = document.getElementById('rankingForm');
             const errorMessage = document.getElementById('errorMessage');
-            const selects = form.getElementsByTagName('select');
 
-            for (const select of selects) {
+            for (const select of form.getElementsByTagName('select')) {
                 const value = select.value;
                 if (!value) {
-                    errorMessage.textContent = 'Please assign a rank to all methods.';
+                    errorMessage.textContent = 'Please rank all methods.';
                     errorMessage.style.display = 'block';
                     return false;
                 }
@@ -145,12 +200,6 @@
 
             return true;
         }
-
-        // Initialize dropdowns on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            const selects = document.querySelectorAll('select');
-            selects.forEach(select => updateRankings(select));
-        });
     </script>
 </body>
 </html>