| | <!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> |
| |
|
