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