File size: 3,956 Bytes
17892ce 9afbe76 17892ce |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<!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');
// Initial countdown value
let countdown = 1;
// Update button text every second
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; // Make button clickable
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);
// Click handler
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> |