| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>Experiment Warning</title> |
| | <style> |
| | /* ─────────── base ─────────── */ |
| | *,*:before,*:after{box-sizing:border-box;margin:0;padding:0} |
| | :root{ |
| | --gap:1.5rem; |
| | --card-border:#0d6efd; |
| | --card-bg:#ffffff; |
| | } |
| | html,body{ |
| | height:100%; |
| | background:#f8f9fa; |
| | font-family:Arial,Helvetica,sans-serif; |
| | color:#212529; |
| | display:flex; |
| | justify-content:center; /* horizontal center */ |
| | align-items:center; /* vertical center */ |
| | padding:var(--gap); |
| | } |
| |
|
| | /* ─────────── card ─────────── */ |
| | .stack{ |
| | width:100%; |
| | max-width:700px; /* wider card */ |
| | } |
| |
|
| | .card{ |
| | background:var(--card-bg); |
| | border-left:8px solid var(--card-border); |
| | padding:2rem 2.5rem; /* bigger padding */ |
| | border-radius:8px; |
| | box-shadow:0 4px 20px rgba(0,0,0,.15); /* stronger shadow */ |
| | text-align:left; |
| | } |
| |
|
| | .card h3{ |
| | color:#343a40; |
| | font-size:1.8rem; /* bigger heading */ |
| | margin-bottom:1rem; |
| | } |
| |
|
| | .card ul{ |
| | padding-left:1.5rem; |
| | font-size:1.25rem; /* bigger list items */ |
| | } |
| | .card p, |
| | .card li{ |
| | margin-bottom:.75rem; |
| | font-size:1.25rem; /* bigger text */ |
| | line-height:1.6; |
| | } |
| |
|
| | /* ─────────── start button ─────────── */ |
| | .start{ |
| | display:block; |
| | width:100%; |
| | margin-top:2rem; |
| | padding:1rem 2rem; /* bigger button */ |
| | font-size:1.3rem; /* bigger text */ |
| | background:#6c757d; |
| | color:#fff; |
| | border:none; |
| | border-radius:6px; |
| | cursor:pointer; |
| | transition:opacity .25s, transform .2s; |
| | } |
| | /* .start:hover{ |
| | opacity:.9; |
| | transform: scale(1.03); |
| | } */ |
| |
|
| | /* ─────────── small screens ─────────── */ |
| | @media(max-width:480px){ |
| | body{padding:1rem} |
| | .card{padding:1.5rem 1.75rem} |
| | .card h3{font-size:1.5rem} |
| | .card p, .card li, .card ul{font-size:1.1rem} |
| | .start{font-size:1.1rem;padding:.9rem 1.5rem} |
| | } |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <div class="stack"> |
| | <div class="card"> |
| | <h3>⚠ Important Information</h3> |
| | <ul> |
| | <li>At the beginning of the experiment, you <strong>MUST</strong> click the <strong>Enter Full Screen</strong> button at the top-right corner to proceed in full-screen mode, <strong>DO NOT</strong> exit the full screen mode until prompted at the end of the experiment.</li> |
| | <li>Once in the experiment, please <strong>DO NOT</strong> use the Back button, Refresh button, or close the window.</li> |
| | <li>Once you are in the experiment, please read the explanations and the final answer thoroughly <strong>BEFORE</strong> clicking on the Correct / Incorrect buttons.</li> |
| | </ul> |
| | <button class="start" id="startBtn" disabled>Please read the information (5s)</button> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | const startBtn = document.getElementById('startBtn'); |
| | |
| | |
| | let countdown = 1; |
| | |
| | |
| | const interval = setInterval(() => { |
| | startBtn.textContent = `Please read the information (${countdown}s)`; |
| | countdown--; |
| | if (countdown < 0) { |
| | clearInterval(interval); |
| | startBtn.textContent = 'Continue to Experiment'; |
| | startBtn.disabled = false; |
| | startBtn.style.backgroundColor = '#0d6efd'; |
| | startBtn.style.cursor = 'pointer'; |
| | startBtn.style.opacity = 1; |
| | startBtn.addEventListener('mouseover', () => { |
| | startBtn.style.opacity = 0.9; |
| | startBtn.style.transform = "scale(1.03)"; |
| | }); |
| | startBtn.addEventListener('mouseout', () => { |
| | startBtn.style.opacity = 1; |
| | }); |
| | } |
| | }, 1000); |
| | |
| | |
| | startBtn.addEventListener('click', () => { |
| | if(window.parent && typeof window.parent.setUserName === 'function'){ |
| | window.parent.setUserName('anonymous'); |
| | window.parent.loadNext(); |
| | } else { |
| | alert('Parent interface not ready. Please reload.'); |
| | } |
| | }); |
| | </script> |
| | </body> |
| | </html> |
