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