|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Table QA Experiment</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
background-color: #f5f5f5; |
|
|
} |
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
background-color: white; |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
h1 { |
|
|
text-align: center; |
|
|
color: #333; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
.progress { |
|
|
text-align: center; |
|
|
font-size: 1.2em; |
|
|
color: #666; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.explanations-grid { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 20px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
.explanation-card { |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
height: 600px; |
|
|
} |
|
|
.explanation-header { |
|
|
background-color: #f8f9fa; |
|
|
padding: 15px; |
|
|
border-bottom: 1px solid #ddd; |
|
|
} |
|
|
.explanation-header h2 { |
|
|
margin: 0; |
|
|
color: #333; |
|
|
font-size: 1.2em; |
|
|
} |
|
|
.explanation-content { |
|
|
padding: 0; |
|
|
height: calc(100% - 53px); |
|
|
overflow-y: auto; |
|
|
} |
|
|
iframe { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border: none; |
|
|
} |
|
|
.ranking-section { |
|
|
position: sticky; |
|
|
bottom: 0; |
|
|
background: white; |
|
|
padding: 20px; |
|
|
border-top: 3px solid #4CAF50; |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); |
|
|
margin-top: 40px; |
|
|
} |
|
|
.ranking-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 15px; |
|
|
margin: 20px 0; |
|
|
} |
|
|
.ranking-item { |
|
|
background: #f8f9fa; |
|
|
padding: 15px; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
} |
|
|
.ranking-item label { |
|
|
display: block; |
|
|
margin-bottom: 10px; |
|
|
font-weight: bold; |
|
|
color: #333; |
|
|
} |
|
|
.ranking-item select { |
|
|
width: 60px; |
|
|
padding: 8px; |
|
|
border: 2px solid #ddd; |
|
|
border-radius: 4px; |
|
|
text-align: center; |
|
|
font-size: 1.1em; |
|
|
} |
|
|
.ranking-item select option { |
|
|
padding: 4px; |
|
|
} |
|
|
.submit-button { |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
padding: 15px 30px; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
font-size: 1.1em; |
|
|
display: block; |
|
|
margin: 20px auto; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
.submit-button:hover { |
|
|
background-color: #45a049; |
|
|
} |
|
|
.instructions { |
|
|
background-color: #e9f5e9; |
|
|
border-left: 4px solid #4CAF50; |
|
|
padding: 15px; |
|
|
margin-bottom: 20px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.error-message { |
|
|
color: #d32f2f; |
|
|
text-align: center; |
|
|
margin: 10px 0; |
|
|
padding: 10px; |
|
|
background-color: #fde8e8; |
|
|
border-radius: 4px; |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="progress">Sample {{ sample_id + 1 }} of 10</div> |
|
|
|
|
|
<div class="instructions"> |
|
|
<h3>Ranking Instructions:</h3> |
|
|
<p>Please examine each explanation method and rank them based on:</p> |
|
|
<ul> |
|
|
<li><strong>Clarity:</strong> How easy is the explanation to understand?</li> |
|
|
<li><strong>Coherence:</strong> Does the explanation logically flow and make sense?</li> |
|
|
<li><strong>Helpfulness:</strong> How well does it reveal the model's reasoning?</li> |
|
|
</ul> |
|
|
<p>Assign ranks from 1 (best) to 4 (worst). Each rank can only be used once.</p> |
|
|
</div> |
|
|
|
|
|
<div class="explanations-grid"> |
|
|
{% for method in methods %} |
|
|
<div class="explanation-card"> |
|
|
<div class="explanation-header"> |
|
|
<h2>{{ method }}</h2> |
|
|
</div> |
|
|
<div class="explanation-content"> |
|
|
<iframe src="{{ visualizations[method] }}" title="{{ method }}"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
|
|
|
<div class="ranking-section"> |
|
|
<form id="rankingForm" action="{{ url_for('experiment', session_id=session_id) }}" method="post" onsubmit="return validateRankings()"> |
|
|
<div class="ranking-grid"> |
|
|
{% for method in methods %} |
|
|
<div class="ranking-item"> |
|
|
<label for="{{ method }}">{{ method }}</label> |
|
|
<select id="{{ method }}" name="{{ method }}" required> |
|
|
<option value="" selected disabled>Rank</option> |
|
|
<option value="1">1 (Best)</option> |
|
|
<option value="2">2</option> |
|
|
<option value="3">3</option> |
|
|
<option value="4">4 (Worst)</option> |
|
|
</select> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
<div id="errorMessage" class="error-message"></div> |
|
|
<button type="submit" class="submit-button">Submit Rankings</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function validateRankings() { |
|
|
const rankings = new Set(); |
|
|
const form = document.getElementById('rankingForm'); |
|
|
const errorMessage = document.getElementById('errorMessage'); |
|
|
|
|
|
for (const select of form.getElementsByTagName('select')) { |
|
|
const value = select.value; |
|
|
if (!value) { |
|
|
errorMessage.textContent = 'Please rank all methods.'; |
|
|
errorMessage.style.display = 'block'; |
|
|
return false; |
|
|
} |
|
|
rankings.add(value); |
|
|
} |
|
|
|
|
|
if (rankings.size !== 4) { |
|
|
errorMessage.textContent = 'Please assign unique ranks (1-4) to each method.'; |
|
|
errorMessage.style.display = 'block'; |
|
|
return false; |
|
|
} |
|
|
|
|
|
return true; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
