luulinh90s commited on
Commit
16f4777
·
1 Parent(s): 174b5e1
templates/attribution.html CHANGED
@@ -56,6 +56,9 @@
56
  .highlight {
57
  background-color: #ffffcc;
58
  }
 
 
 
59
  button {
60
  background-color: #4CAF50;
61
  color: white;
@@ -107,7 +110,7 @@
107
  <td>Cincinnati</td>
108
  <td>Win</td>
109
  <td>20</td>
110
- <td class="highlight">0</td>
111
  <td>1 - 1</td>
112
  </tr>
113
  <tr class="highlight">
@@ -116,7 +119,7 @@
116
  <td>9 Georgia</td>
117
  <td>Win</td>
118
  <td>26</td>
119
- <td class="highlight">0</td>
120
  <td>3 - 1 , 20</td>
121
  </tr>
122
  <tr class="highlight">
@@ -125,7 +128,7 @@
125
  <td>10 Vanderbilt</td>
126
  <td>Win</td>
127
  <td>14</td>
128
- <td class="highlight">0</td>
129
  <td>4 - 1 , 14</td>
130
  </tr>
131
  <tr class="highlight">
@@ -134,7 +137,7 @@
134
  <td>Evansville</td>
135
  <td>Win</td>
136
  <td>36</td>
137
- <td class="highlight">0</td>
138
  <td>7 - 2</td>
139
  </tr>
140
  </table>
@@ -143,10 +146,20 @@
143
  </p>
144
  <ul style="text-align: left;">
145
  <li>The entire rows for games 2, 4, 5, and 9 are highlighted in yellow.</li>
146
- <li>Within these rows, the "Opponents" column cells containing "0" are highlighted with a deeper yellow.</li>
 
 
 
 
 
 
 
 
 
 
147
  </ul>
148
  <p>
149
- These highlights indicate that the system identified four games where the opposing team did not score, verifying the statement as true. By highlighting these cells, the system is showing us the exact data points it used in its decision-making process.
150
  </p>
151
  <p>
152
  During the experiment, you will compare different methods that provide these types of explanations. Your task will be to evaluate which explanations are most clear and helpful in understanding the system's reasoning.
 
56
  .highlight {
57
  background-color: #ffffcc;
58
  }
59
+ .green-highlight {
60
+ background-color: #90EE90;
61
+ }
62
  button {
63
  background-color: #4CAF50;
64
  color: white;
 
110
  <td>Cincinnati</td>
111
  <td>Win</td>
112
  <td>20</td>
113
+ <td class="green-highlight">0</td>
114
  <td>1 - 1</td>
115
  </tr>
116
  <tr class="highlight">
 
119
  <td>9 Georgia</td>
120
  <td>Win</td>
121
  <td>26</td>
122
+ <td class="green-highlight">0</td>
123
  <td>3 - 1 , 20</td>
124
  </tr>
125
  <tr class="highlight">
 
128
  <td>10 Vanderbilt</td>
129
  <td>Win</td>
130
  <td>14</td>
131
+ <td class="green-highlight">0</td>
132
  <td>4 - 1 , 14</td>
133
  </tr>
134
  <tr class="highlight">
 
137
  <td>Evansville</td>
138
  <td>Win</td>
139
  <td>36</td>
140
+ <td class="green-highlight">0</td>
141
  <td>7 - 2</td>
142
  </tr>
143
  </table>
 
146
  </p>
147
  <ul style="text-align: left;">
148
  <li>The entire rows for games 2, 4, 5, and 9 are highlighted in yellow.</li>
149
+ <li>Within these rows, the "Opponents" column cells containing "0" are highlighted in green.</li>
150
+ </ul>
151
+ <p>
152
+ 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.
153
+ </p>
154
+ <p>
155
+ By using different colors for highlighting, the system provides a more nuanced explanation:
156
+ </p>
157
+ <ul style="text-align: left;">
158
+ <li>Yellow highlights (rows): Show the overall context of the relevant games.</li>
159
+ <li>Green highlights (cells): Pinpoint the exact data points (opposing team's score of 0) that directly answer the question.</li>
160
  </ul>
161
  <p>
162
+ This multi-level highlighting helps users quickly grasp both the broad context and the specific details that support the system's answer.
163
  </p>
164
  <p>
165
  During the experiment, you will compare different methods that provide these types of explanations. Your task will be to evaluate which explanations are most clear and helpful in understanding the system's reasoning.
templates/introduction.html CHANGED
@@ -65,7 +65,7 @@
65
  </div>
66
 
67
  <div class="sample-container">
68
- <h2>Sample TableQA Problem</h2>
69
  <iframe srcdoc="
70
  <html><head>
71
  <style>
@@ -201,7 +201,7 @@
201
 
202
  <div class="outro">
203
  <h2>Your Task</h2>
204
- <p>Your task is to evaluate different methods that explain how the TableQA system arrives at its answers. Understanding these explanations helps improve trust and transparency in AI systems.</p>
205
  </div>
206
 
207
  <div class="button-container">
 
65
  </div>
66
 
67
  <div class="sample-container">
68
+ <h2>Verify if the following Statement is TRUE or FALSE</h2>
69
  <iframe srcdoc="
70
  <html><head>
71
  <style>
 
201
 
202
  <div class="outro">
203
  <h2>Your Task</h2>
204
+ <p>Your task in this experiment is to evaluate different methods that explain how the TableQA system arrives at its answers (here TRUE). Understanding these explanations helps improve trust and transparency in AI systems.</p>
205
  </div>
206
 
207
  <div class="button-container">