|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Table Question Answering Experiment</title> |
|
<style> |
|
body { |
|
font-family: 'Arial', sans-serif; |
|
line-height: 1.6; |
|
margin: 0; |
|
padding: 20px; |
|
display: flex; |
|
flex-direction: column; |
|
min-height: 100vh; |
|
} |
|
.container { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
flex-grow: 1; |
|
} |
|
h1, h2 { |
|
color: #333; |
|
} |
|
.intro, .outro { |
|
background-color: #f0f0f0; |
|
padding: 20px; |
|
border-radius: 5px; |
|
margin-bottom: 20px; |
|
} |
|
.sample-container { |
|
border: 1px solid #ddd; |
|
padding: 20px; |
|
margin-bottom: 20px; |
|
} |
|
iframe { |
|
width: 100%; |
|
height: 600px; |
|
border: none; |
|
} |
|
.button-container { |
|
text-align: center; |
|
margin-top: 20px; |
|
} |
|
.next-button { |
|
background-color: #4CAF50; |
|
color: white; |
|
padding: 15px 30px; |
|
border: none; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
font-size: 18px; |
|
text-decoration: none; |
|
} |
|
.next-button:hover { |
|
background-color: #45a049; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<div class="intro"> |
|
<h1>Introduction to Table Question Answering</h1> |
|
<p>In this experiment, you will interact with Table Question Answering (TableQA) models. TableQA involves answering questions based on data provided in tables.</p> |
|
</div> |
|
|
|
<div class="sample-container"> |
|
<h2>Verify if the following Statement is TRUE or FALSE</h2> |
|
<iframe srcdoc=" |
|
<html><head> |
|
<style> |
|
body { font-family: Arial, sans-serif; margin: 20px; } |
|
h1 { text-align: center; } |
|
.cot-title { color: blue; } |
|
.pos-title { color: green; } |
|
h2 { color: black; text-align: left; } |
|
h3 { color: black; text-align: left; } |
|
h4 { color: darkslategray; } |
|
table { width: 100%; border-collapse: collapse; margin: 20px 0; } |
|
table, th, td { border: 1px solid #ddd; padding: 8px; } |
|
th { background-color: #f2f2f2; } |
|
tr:nth-child(even) { background-color: #f9f9f9; } |
|
.highlight { background-color: #ffffcc; } |
|
.true { color: green; } |
|
.false { color: red; } |
|
.highlighted-cell { background-color: yellow; cursor: pointer; } |
|
.step-title { background-color: #f1f1f1; color: #444; padding: 10px; margin: 10px 0; font-size: 18px; border-left: 4px solid #888; } |
|
.step { display: block; } |
|
</style> |
|
</head><body> |
|
<hr> |
|
<h3><span>Statement:</span> the wildcats kept the opposing team scoreless in four games</h3> |
|
<h3>Input Table Caption: 1947 kentucky wildcats football team</h3> |
|
<div class='step'> |
|
<table> |
|
<tr> |
|
<td>game</td> |
|
<td>date</td> |
|
<td>opponent</td> |
|
<td>result</td> |
|
<td>wildcats_points</td> |
|
<td>opponents</td> |
|
<td>record</td> |
|
</tr> |
|
<tr> |
|
<td>1</td> |
|
<td>9999-09-20</td> |
|
<td>ole miss</td> |
|
<td>loss</td> |
|
<td>7</td> |
|
<td>14</td> |
|
<td>0 - 1</td> |
|
</tr> |
|
<tr> |
|
<td>2</td> |
|
<td>9999-09-27</td> |
|
<td>cincinnati</td> |
|
<td>win</td> |
|
<td>20</td> |
|
<td>0</td> |
|
<td>1 - 1</td> |
|
</tr> |
|
<tr> |
|
<td>3</td> |
|
<td>9999-10-04</td> |
|
<td>xavier</td> |
|
<td>win</td> |
|
<td>20</td> |
|
<td>7</td> |
|
<td>2 - 1</td> |
|
</tr> |
|
<tr> |
|
<td>4</td> |
|
<td>9999-10-11</td> |
|
<td>9 georgia</td> |
|
<td>win</td> |
|
<td>26</td> |
|
<td>0</td> |
|
<td>3 - 1 , 20</td> |
|
</tr> |
|
<tr> |
|
<td>5</td> |
|
<td>9999-10-18</td> |
|
<td>10 vanderbilt</td> |
|
<td>win</td> |
|
<td>14</td> |
|
<td>0</td> |
|
<td>4 - 1 , 14</td> |
|
</tr> |
|
<tr> |
|
<td>6</td> |
|
<td>9999-10-25</td> |
|
<td>michigan state</td> |
|
<td>win</td> |
|
<td>7</td> |
|
<td>6</td> |
|
<td>5 - 1 , 13</td> |
|
</tr> |
|
<tr> |
|
<td>7</td> |
|
<td>9999-11-01</td> |
|
<td>18 alabama</td> |
|
<td>loss</td> |
|
<td>0</td> |
|
<td>13</td> |
|
<td>5 - 2</td> |
|
</tr> |
|
<tr> |
|
<td>8</td> |
|
<td>9999-11-08</td> |
|
<td>west virginia</td> |
|
<td>win</td> |
|
<td>15</td> |
|
<td>6</td> |
|
<td>6 - 2</td> |
|
</tr> |
|
<tr> |
|
<td>9</td> |
|
<td>9999-11-15</td> |
|
<td>evansville</td> |
|
<td>win</td> |
|
<td>36</td> |
|
<td>0</td> |
|
<td>7 - 2</td> |
|
</tr> |
|
<tr> |
|
<td>10</td> |
|
<td>9999-11-22</td> |
|
<td>tennessee</td> |
|
<td>loss</td> |
|
<td>6</td> |
|
<td>13</td> |
|
<td>7 - 3</td> |
|
</tr> |
|
</table> |
|
</body></html> |
|
<h3>Model thinks this Statement is:</span> TRUE</h3> |
|
</body></html> |
|
"></iframe> |
|
</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> |
|
</div> |
|
|
|
<div class="button-container"> |
|
|
|
<a href="{{ url_for('attribution') }}" class="next-button">Next</a> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |
