update

templates/consent.html

@@ -83,6 +83,6 @@
         </form>
     </div>
 
-    <p style="text-align: center; margin-top: 20px;">Your participation helps create future AI systems that can explain themselves to humans. <strong>Thank you for your contribution!</strong></p>
+    <p style="text-align: center; margin-top: 20px;">Your participation helps create future AI systems that can explain themselves to humans. <strong>Thank you!</strong></p>
 </body>
 </html>

templates/experiment.html

@@ -129,11 +129,11 @@
         <div class="buttons">
             <form action="{{ url_for('feedback') }}" method="post" onsubmit="showLoader()">
                 <input type="hidden" name="session_id" value="{{ session_id }}">
-                <button type="submit" name="prediction" value="TRUE"><h1>Statement is TRUE</h1></button>
+                <button type="submit" name="prediction" value="TRUE"><h1>Model will predict: Statement is TRUE</h1></button>
             </form>
             <form action="{{ url_for('feedback') }}" method="post" onsubmit="showLoader()">
                 <input type="hidden" name="session_id" value="{{ session_id }}">
-                <button type="submit" name="prediction" value="FALSE"><h1>Statement is FALSE</h1></button>
+                <button type="submit" name="prediction" value="FALSE"><h1>Model will predict: Statement is FALSE</h1></button>
             </form>
         </div>
     </div>

templates/index.html

@@ -139,6 +139,39 @@
         }
     </style>
     <script>
+        function shuffleArray(array) {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+            return array;
+        }
+
+        function createMethodButtons() {
+            const methods = [
+                { name: 'Chain-of-Table', color: '#1e90ff' },
+                { name: 'Plan-of-SQLs', color: '#e65100' },
+                { name: 'Text2SQL', color: '#7b1fa2' },
+                { name: 'Dater', color: '#4caf50' },
+                { name: 'No-XAI', color: '#ff9800' }
+            ];
+
+            const shuffledMethods = shuffleArray(methods);
+            const container = document.querySelector('.method-buttons');
+            container.innerHTML = ''; // Clear existing buttons
+
+            shuffledMethods.forEach(method => {
+                if (method.name === 'No-XAI' && !{{ show_no_xai|tojson }}) {
+                    return; // Skip No-XAI if not shown
+                }
+                const button = document.createElement('div');
+                button.className = `method-button ${method.name}`;
+                button.onclick = () => selectMethod(method.name);
+                button.textContent = method.name;
+                container.appendChild(button);
+            });
+        }
+
         function selectMethod(method) {
             document.getElementById('method').value = method;
 
@@ -163,6 +196,11 @@
             }
             return true;
         }
+
+        // Call this function when the page loads
+        window.onload = function() {
+            createMethodButtons();
+        };
     </script>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
@@ -205,23 +243,7 @@
             <h2 style="color: #333; margin-top: 30px; margin-bottom: 20px;">Explanation Methods</h2>
 
             <div class="method-buttons">
-                <div class="method-button Chain-of-Table" onclick="selectMethod('Chain-of-Table')">
-                    Chain-of-Table
-                </div>
-                <div class="method-button Plan-of-SQLs" onclick="selectMethod('Plan-of-SQLs')">
-                    Plan-of-SQLs
-                </div>
-                <div class="method-button Dater" onclick="selectMethod('Dater')">
-                    Dater
-                </div>
-                <div class="method-button Text2SQL" onclick="selectMethod('Text2SQL')">
-                    Text2SQL
-                </div>
-                {% if show_no_xai %}
-                <div class="method-button No-XAI" onclick="selectMethod('No-XAI')">
-                    No-XAI
-                </div>
-                {% endif %}
+                <!-- Method buttons will be dynamically inserted here -->
             </div>
 
             <button type="submit">Next</button>

templates/introduction.html

@@ -200,10 +200,10 @@
         </div>
 
         <div class="outro">
-            <h2>Your Task: Model Simulation</h2>
+            <h2>Model Simulation Task</h2>
             <p>
-                Given the statement above, an Artificial Intelligence (AI) will output either TRUE or FALSE.
-                Your job in this Simulation task is to use the AI's explanation to guess the machine response.
+                Given an input statement, an Artificial Intelligence (AI) model will output either TRUE or FALSE.
+                <strong>Your job in this Simulation task is to use the AI's explanation to guess the machine response.</strong>
                 Specifically, please choose which response (Statement is TRUE/ Statement is FALSE) model would output regardless of whether you think that response is correct or not.
             </p>
         </div>