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