|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Experiment Instructions</title> |
|
|
<style> |
|
|
/* ─────────── base ─────────── */ |
|
|
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0} |
|
|
:root{ |
|
|
--gap:1.25rem; |
|
|
--card-border:#0d6efd; |
|
|
--card-bg:#ffffff; |
|
|
} |
|
|
html,body{height:80%} |
|
|
body{ |
|
|
font-family:Arial,Helvetica,sans-serif; |
|
|
line-height:1.55; |
|
|
height:800px; |
|
|
background:#f8f9fa; |
|
|
color:#212529; |
|
|
display:flex; |
|
|
flex-direction:column; |
|
|
align-items:center; /* center on huge screens */ |
|
|
padding:var(--gap); |
|
|
} |
|
|
|
|
|
/* ─────────── header ─────────── */ |
|
|
h2{ |
|
|
color:#343a40; |
|
|
margin-bottom:var(--gap); |
|
|
font-size:1.6rem; |
|
|
font-weight:700; |
|
|
text-align:center; |
|
|
} |
|
|
|
|
|
/* ─────────── card stack ─────────── */ |
|
|
.stack{ |
|
|
flex:1; |
|
|
width:100%; |
|
|
max-width:820px; /* keeps long lines readable */ |
|
|
display:flex; |
|
|
flex-direction:column; |
|
|
gap:var(--gap); |
|
|
} |
|
|
|
|
|
.card{ |
|
|
background:var(--card-bg); |
|
|
border-left:5px solid var(--card-border); |
|
|
padding:1rem 1.25rem; |
|
|
border-radius:6px; |
|
|
box-shadow:0 1px 4px rgba(0,0,0,.06); |
|
|
} |
|
|
|
|
|
.card h3{ |
|
|
color:#343a40; |
|
|
font-size:1.1rem; |
|
|
margin-bottom:.5rem; |
|
|
} |
|
|
|
|
|
.card ul{padding-left:1.2rem} |
|
|
.card p, |
|
|
.card li{margin-bottom:.55rem} |
|
|
|
|
|
/* ─────────── start button ─────────── */ |
|
|
.start{ |
|
|
align-self:center; |
|
|
margin-top:var(--gap); |
|
|
padding:.75rem 1.6rem; |
|
|
font-size:1rem; |
|
|
background:#0d6efd; |
|
|
color:#fff; |
|
|
border:none; |
|
|
border-radius:4px; |
|
|
cursor:pointer; |
|
|
transition:opacity .25s; |
|
|
} |
|
|
.start:hover{opacity:.9} |
|
|
|
|
|
/* ─────────── small screens ─────────── */ |
|
|
@media(max-width:480px){ |
|
|
body{padding:.9rem} |
|
|
.card{padding:.9rem 1rem} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<h2>🧠 Experiment Instructions</h2> |
|
|
|
|
|
|
|
|
<div class="stack"> |
|
|
<div class="card"> |
|
|
<h3>🧭 Interface Overview</h3> |
|
|
<p>You will review <strong>10 math problems</strong> and decide whether each final numerical answer is <em>correct</em> or <em>incorrect</em>.</p> |
|
|
<ul> |
|
|
<li><strong>Left panel</strong> — problem statement & facts</li> |
|
|
<li><strong>Right panel</strong> — step-by-step explanation</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h3>🕹️ Controls</h3> |
|
|
<ul> |
|
|
<li><strong>▶ / ❚❚</strong> — auto-play / pause</li> |
|
|
<li><strong>⤴ / ⤵</strong> — previous / next step manually</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h3>🎨 Highlights</h3> |
|
|
<p>Variables are colour-coded and their values update live as each step runs.</p> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h3>❌Potential Errors</h3> |
|
|
<p>Some explanations may contain errors. If you notice any, please indicate the step where you believe the first error occurs..</p> |
|
|
<p>The error type includes:</p> |
|
|
<ul> |
|
|
<li><strong>Calculation Error (CA)</strong>: Error appears during the calculation process.</li> |
|
|
<li><strong>Counting Error (CO)</strong>: Error occurs during the counting process.</li> |
|
|
<li><strong>Context Value Error (CV)</strong>: Error arises when attributes of named entities do not align with the information provided.</li> |
|
|
<li><strong>Hallucination (HA)</strong>: Error involves adding fictitious unrelated statements contradictory to the question.</li> |
|
|
<li><strong>Unit Conversion Error (UC)</strong>: Error occurs during unit conversion process.</li> |
|
|
<li><strong>Operator Error (OP)</strong>: Error involves a single operator being erroneously applied within the expression.</li> |
|
|
<li><strong>Formula Confusion Error (FC)</strong>: Error appears when applying formula in inappropriate scenario.</li> |
|
|
<li><strong>Missing Step (MS)</strong>: Error entails an incomplete generation of reasoning process, lacking a necessary step.</li> |
|
|
<li><strong>Contradictory Step (CS)</strong>: Error manifests inconsistency between preceding and subsequent reasoning steps.</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<button class="start" id="startBtn">Next</button> |
|
|
|
|
|
<script> |
|
|
document.getElementById('startBtn').addEventListener('click', ()=>{ |
|
|
if(window.parent && typeof window.parent.setUserName==='function'){ |
|
|
window.location.href = 'warning.html'; |
|
|
}else{ |
|
|
alert('Parent interface not ready. Please reload.'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
