update

templates/attribution.html

@@ -149,7 +149,7 @@
             <li>Within these rows, the "Opponents" column cells containing "0" or "scoreless" are highlighted in green.</li>
         </ul>
         <p>
-            These highlights indicate that the system identified four games where the opposing team did not score, verifying the statement as CORRECT. The yellow highlighting shows the relevant rows, while the green highlighting represents the cells containing fine-grained information needed to verify the statement.
+            These highlights indicate that the system identified four games where the opposing team did not score, verifying the statement as TRUE. The yellow highlighting shows the relevant rows, while the green highlighting represents the cells containing fine-grained information needed to verify the statement.
         </p>
         <p>
             By using different colors for highlighting, the system provides a more nuanced explanation:
@@ -159,7 +159,7 @@
             <li>Green highlights (cells): Pinpoint the exact information (opposing team's score of 0) that directly answer the question.</li>
         </ul>
         <p>
-            During the experiment, you will use explanations to guess model prediction (TRUE or FALSE), regardless of groundtruth.
+            During the experiment, you will use explanations to choose which response (Statement is TRUE/ Statement is FALSE) model would output, regardless of whether you think that response is correct or not.
         </p>
         <button onclick="location.href='{{ url_for('index') }}'">Proceed to Experiment</button>
     </div>

templates/completed.html

@@ -31,8 +31,8 @@
         }
         .stats-container {
             display: flex;
-            justify-content: space-around;
-            flex-wrap: wrap;
+            flex-direction: column;
+            align-items: center;
             margin-bottom: 30px;
         }
         .stat-card {
@@ -41,10 +41,19 @@
             padding: 20px;
             margin: 10px;
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            flex: 1 1 200px;
+            width: 80%;
             transition: transform 0.3s ease;
         }
-        .stat-card:hover {
+        .prediction-stats {
+            display: flex;
+            justify-content: space-between;
+            width: 80%;
+        }
+        .prediction-stat-card {
+            flex: 1;
+            margin: 0 5px;
+        }
+        .stat-card:hover, .prediction-stat-card:hover {
             transform: translateY(-5px);
         }
         .stat-title {
@@ -92,13 +101,15 @@
                 <div class="stat-title">Your Labeling Accuracy</div>
                 <div class="stat-value">{{ accuracy }}%</div>
             </div>
-            <div class="stat-card">
-                <div class="stat-title">You Predicted TRUE</div>
-                <div class="stat-value">{{ true_percentage }}%</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-title">You Predicted FALSE</div>
-                <div class="stat-value">{{ false_percentage }}%</div>
+            <div class="prediction-stats">
+                <div class="stat-card prediction-stat-card">
+                    <div class="stat-title">You Predicted TRUE</div>
+                    <div class="stat-value">{{ true_percentage }}%</div>
+                </div>
+                <div class="stat-card prediction-stat-card">
+                    <div class="stat-title">You Predicted FALSE</div>
+                    <div class="stat-value">{{ false_percentage }}%</div>
+                </div>
             </div>
         </div>
         <div class="button-container">

templates/experiment.html

@@ -118,7 +118,7 @@
         </div>
         <div class="task-description">
             <p><strong>Task:</strong> {{ statement | safe }}</p>
-            <p class="highlight">Based on the explanation below, please guess if what the AI model will predict?</p>
+            <p class="highlight">Based on the explanation below, please guess what the AI model will predict.</p>
         </div>
         <div class="visualization-container">
             <iframe src="{{ visualization }}"></iframe>
@@ -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>Model will predict: TRUE</h1></button>
+                <button type="submit" name="prediction" value="TRUE"><h1>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>Model will predict: FALSE</h1></button>
+                <button type="submit" name="prediction" value="FALSE"><h1>Statement is FALSE</h1></button>
             </form>
         </div>
     </div>

templates/introduction.html

@@ -200,8 +200,12 @@
         </div>
 
         <div class="outro">
-            <h2>Your Task</h2>
-            <p>Your task in this experiment is to use an explanation to guess what the TableQA model will predict (TRUE or FALSE), regardless of the groundtruth. For example, if the model predicts TRUE but the Statement is FALSE, you should guess TRUE. The task is called Model Simulation.</p>
+            <h2>Your Task: Model Simulation</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.
+                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>
 
         <div class="button-container">