|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Plan-of-SQLs Explanations in TableQA</title> |
|
<style> |
|
body { |
|
font-family: 'Roboto', sans-serif; |
|
background: url('/api/placeholder/1920/1080') no-repeat center center fixed; |
|
background-size: cover; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
min-height: 100vh; |
|
margin: 0; |
|
padding: 20px; |
|
} |
|
.container { |
|
text-align: center; |
|
background-color: #ffffff; |
|
padding: 40px; |
|
border-radius: 10px; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
width: 80%; |
|
max-width: 1000px; |
|
} |
|
h1, h2 { |
|
color: #333; |
|
} |
|
p, li { |
|
font-size: 16px; |
|
color: #333; |
|
text-align: left; |
|
} |
|
.step { |
|
background-color: #f9f9f9; |
|
border: 1px solid #ddd; |
|
border-radius: 5px; |
|
margin-bottom: 20px; |
|
padding: 15px; |
|
} |
|
.highlighted-step { |
|
background-color: #ffffd9; |
|
border-left: 5px solid #ffeb3b; |
|
padding-left: 15px; |
|
} |
|
.step-title { |
|
font-weight: bold; |
|
margin-bottom: 10px; |
|
} |
|
table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
margin-bottom: 20px; |
|
} |
|
th, td { |
|
border: 1px solid #ddd; |
|
padding: 8px; |
|
text-align: left; |
|
} |
|
th { |
|
background-color: #f2f2f2; |
|
} |
|
.highlighted-cell { |
|
background-color: #ffffcc; |
|
} |
|
button { |
|
background-color: #4CAF50; |
|
color: white; |
|
padding: 15px 30px; |
|
border: none; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
font-size: 18px; |
|
transition: background-color 0.3s ease; |
|
margin-top: 20px; |
|
} |
|
button:hover { |
|
background-color: #45a049; |
|
} |
|
iframe { |
|
width: 100%; |
|
height: 600px; |
|
border: none; |
|
margin-top: 20px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>Understanding Plan-of-SQLs Explanations</h1> |
|
<p> |
|
Plan-of-SQLs is a TableQA method that breaks down the question-answering process into a series of SQL commands. Each step represents a specific operation on the table, leading to the final answer. |
|
</p> |
|
<h2>Example: 1947 Kentucky Wildcats Football Team</h2> |
|
<p> |
|
Statement to verify: "The Wildcats kept the opposing team scoreless in 4 games." |
|
</p> |
|
<div class="step"> |
|
<div class="step-title">Step 1: Order the table by 'opponents' in ascending order.</div> |
|
<p>This step sorts the entire table based on the 'opponents' column, putting the scoreless games (0 points) at the top.</p> |
|
</div> |
|
<div class="step"> |
|
<div class="step-title">Step 2: Select rows where 'opponents' is 0.</div> |
|
<p>This step filters the table to only include rows where the opposing team didn't score any points.</p> |
|
</div> |
|
|
|
<div class="step highlighted-step"> |
|
<div class="step-title">Step 3: Use a `CASE` statement to return TRUE if the number of rows is equal to 4, otherwise return FALSE.</div> |
|
<p>This step checks if there are exactly 4 games where the opposing team was scoreless, as stated in the verification statement.</p> |
|
<p>In the final intermediate table, only count the rows with actual data. The top row, which contains the column headers (like titles or labels for the columns), is not part of the count. So, if you see only the header row with no data beneath it, the table has 0 rows. If you see one row beneath the header, the table has 1 row" </p> |
|
</div> |
|
<h2>Plan-of-SQLs Example</h2> |
|
<iframe src="{{ url_for('send_examples', filename='htmls_POS_mod2/TP/test-0.html') }}"></iframe> |
|
<button onclick="location.href='{{ url_for('experiment', session_id=session_id) }}'">Proceed to Experiment</button> |
|
</div> |
|
</body> |
|
</html> |
