luulinh90s/Tabular-LLM-Study-Debugging

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Table Question Answering Experiment</title>7    <style>8        body {9            font-family: 'Arial', sans-serif;10            line-height: 1.6;11            margin: 0;12            padding: 20px;13            display: flex;14            flex-direction: column;15            min-height: 100vh;16        }17        .container {18            max-width: 800px;19            margin: 0 auto;20            flex-grow: 1;21        }22        h1, h2 {23            color: #333;24        }25        .intro, .outro {26            background-color: #f0f0f0;27            padding: 20px;28            border-radius: 5px;29            margin-bottom: 20px;30        }31        .sample-container {32            border: 1px solid #ddd;33            padding: 20px;34            margin-bottom: 20px;35        }36        iframe {37            width: 100%;38            height: 600px;39            border: none;40        }41        .button-container {42            text-align: center;43            margin-top: 20px;44        }45        .next-button {46            background-color: #4CAF50;47            color: white;48            padding: 15px 30px;49            border: none;50            border-radius: 5px;51            cursor: pointer;52            font-size: 18px;53            text-decoration: none;54        }55        .next-button:hover {56            background-color: #45a049;57        }58    </style>59</head>60<body>61    <div class="container">62        <div class="intro">63            <h1>Introduction to Table Question Answering</h1>64            <p>In this experiment, you will interact with Table Question Answering (TableQA) models. TableQA involves answering questions based on data provided in tables.</p>65        </div>66 67        <div class="sample-container">68            <h2>Verify if the following Statement is CORRECT or WRONG</h2>69            <iframe srcdoc="70            <html><head>71            <style>72            body { font-family: Arial, sans-serif; margin: 20px; }73            h1 { text-align: center; }74            .cot-title { color: blue; }75            .pos-title { color: green; }76            h2 { color: black; text-align: left; }77            h3 { color: black; text-align: left; }78            h4 { color: darkslategray; }79            table { width: 100%; border-collapse: collapse; margin: 20px 0; }80            table, th, td { border: 1px solid #ddd; padding: 8px; }81            th { background-color: #f2f2f2; }82            tr:nth-child(even) { background-color: #f9f9f9; }83            .highlight { background-color: #ffffcc; }84            .true { color: green; }85            .false { color: red; }86            .highlighted-cell { background-color: yellow; cursor: pointer; }87            .step-title { background-color: #f1f1f1; color: #444; padding: 10px; margin: 10px 0; font-size: 18px; border-left: 4px solid #888; }88            .step { display: block; }89            </style>90            </head><body>91            <hr>92            <h3><span>Statement:</span> the wildcats kept the opposing team scoreless in four games</h3>93            <h3>Input Table Caption: 1947 kentucky wildcats football team</h3>94            <div class='step'>95            <table>96            <tr>97            <td>game</td>98            <td>date</td>99            <td>opponent</td>100            <td>result</td>101            <td>wildcats_points</td>102            <td>opponents</td>103            <td>record</td>104            </tr>105            <tr>106            <td>1</td>107            <td>9999-09-20</td>108            <td>ole miss</td>109            <td>loss</td>110            <td>7</td>111            <td>14</td>112            <td>0 - 1</td>113            </tr>114            <tr>115            <td>2</td>116            <td>9999-09-27</td>117            <td>cincinnati</td>118            <td>win</td>119            <td>20</td>120            <td>0</td>121            <td>1 - 1</td>122            </tr>123            <tr>124            <td>3</td>125            <td>9999-10-04</td>126            <td>xavier</td>127            <td>win</td>128            <td>20</td>129            <td>7</td>130            <td>2 - 1</td>131            </tr>132            <tr>133            <td>4</td>134            <td>9999-10-11</td>135            <td>9 georgia</td>136            <td>win</td>137            <td>26</td>138            <td>0</td>139            <td>3 - 1 , 20</td>140            </tr>141            <tr>142            <td>5</td>143            <td>9999-10-18</td>144            <td>10 vanderbilt</td>145            <td>win</td>146            <td>14</td>147            <td>0</td>148            <td>4 - 1 , 14</td>149            </tr>150            <tr>151            <td>6</td>152            <td>9999-10-25</td>153            <td>michigan state</td>154            <td>win</td>155            <td>7</td>156            <td>6</td>157            <td>5 - 1 , 13</td>158            </tr>159            <tr>160            <td>7</td>161            <td>9999-11-01</td>162            <td>18 alabama</td>163            <td>loss</td>164            <td>0</td>165            <td>13</td>166            <td>5 - 2</td>167            </tr>168            <tr>169            <td>8</td>170            <td>9999-11-08</td>171            <td>west virginia</td>172            <td>win</td>173            <td>15</td>174            <td>6</td>175            <td>6 - 2</td>176            </tr>177            <tr>178            <td>9</td>179            <td>9999-11-15</td>180            <td>evansville</td>181            <td>win</td>182            <td>36</td>183            <td>0</td>184            <td>7 - 2</td>185            </tr>186            <tr>187            <td>10</td>188            <td>9999-11-22</td>189            <td>tennessee</td>190            <td>loss</td>191            <td>6</td>192            <td>13</td>193            <td>7 - 3</td>194            </tr>195            </table>196            </body></html>197            <h3>Model thinks this Statement is:</span> CORRECT</h3>198            </body></html>199            "></iframe>200        </div>201 202        <div class="outro">203            <h2>Your Task</h2>204            <p>Your task in this experiment is to evaluate methods that explain how a TableQA works. You will be given an explanation and asked to detect AI errors.</p>205        </div>206 207        <div class="button-container">208            <!-- This button leads to the Attribution Explanations page -->209            <a href="{{ url_for('attribution') }}" class="next-button">Next</a>210        </div>211    </div>212</body>213</html>