Tabular-LLM-Study-Preference-Ranking

Runtime error

App Files Files Community

luulinh90s commited on Oct 24, 2024

Commit

8b0f70d

1 Parent(s): e75202e

update

Browse files

Files changed (1) hide show

templates/experiment.html +75 -117

templates/experiment.html CHANGED Viewed

@@ -3,132 +3,56 @@
 <head>
     <title>Table QA Experiment</title>
     <style>
-        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 input {
-            width: 60px;
             padding: 8px;
             border: 2px solid #ddd;
             border-radius: 4px;
             text-align: center;
             font-size: 1.1em;
-        }
-        .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;
         }
-        .submit-button:hover {
-            background-color: #45a049;
         }
-        .instructions {
-            background-color: #e9f5e9;
-            border-left: 4px solid #4CAF50;
-            padding: 15px;
-            margin-bottom: 20px;
-            border-radius: 4px;
         }
-        .error-message {
-            color: #d32f2f;
-            text-align: center;
-            margin: 10px 0;
-            padding: 10px;
-            background-color: #fde8e8;
-            border-radius: 4px;
-            display: none;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="progress">Sample {{ sample_id + 1 }} of 10</div>
         <div class="instructions">
             <h3>Ranking Instructions:</h3>
             <p>Please examine each explanation method and rank them based on:</p>
@@ -159,7 +83,13 @@
                     {% for method in methods %}
                     <div class="ranking-item">
                         <label for="{{ method }}">{{ method }}</label>
-                        <input type="number" id="{{ method }}" name="{{ method }}" min="1" max="4" required>
                     </div>
                     {% endfor %}
                 </div>
@@ -170,15 +100,37 @@
     </div>
     <script>
         function validateRankings() {
             const rankings = new Set();
             const form = document.getElementById('rankingForm');
             const errorMessage = document.getElementById('errorMessage');
-            for (const input of form.getElementsByTagName('input')) {
-                const value = parseInt(input.value);
-                if (isNaN(value) || value < 1 || value > 4) {
-                    errorMessage.textContent = 'Please use only numbers between 1 and 4.';
                     errorMessage.style.display = 'block';
                     return false;
                 }
@@ -193,6 +145,12 @@
             return true;
         }
     </script>
 </body>
 </html>

 <head>
     <title>Table QA Experiment</title>
     <style>
+        /* Keep all existing styles */
+        /* Add new styles for the dropdown */
+        .ranking-item select {
+            width: 80px;
             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);
         }
+        .ranking-item select:hover {
+            border-color: #4CAF50;
         }
+        /* Style for the selected option */
+        .ranking-item select option {
+            padding: 8px;
+            font-size: 1.1em;
+        }
+        /* Highlight used ranks */
+        .used-rank {
+            background-color: #e8f5e9 !important;
         }
     </style>
 </head>
 <body>
+    <!-- Keep existing container, progress, and instructions -->
     <div class="container">
         <div class="progress">Sample {{ sample_id + 1 }} of 10</div>
         <div class="instructions">
             <h3>Ranking Instructions:</h3>
             <p>Please examine each explanation method and rank them based on:</p>
                     {% 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>
+                            <option value="2">2</option>
+                            <option value="3">3</option>
+                            <option value="4">4 (Worst)</option>
+                        </select>
                     </div>
                     {% endfor %}
                 </div>
     </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) {
+                const value = select.value;
+                if (!value) {
+                    errorMessage.textContent = 'Please assign a rank to all methods.';
                     errorMessage.style.display = 'block';
                     return false;
                 }
             return true;
         }
+        // Initialize dropdowns on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            const selects = document.querySelectorAll('select');
+            selects.forEach(select => updateRankings(select));
+        });
     </script>
 </body>
 </html>