Spaces:
Sleeping
Sleeping
File size: 3,956 Bytes
591b70f bc7b90a 591b70f bc7b90a e27e6fe bc7b90a 6ce0fcc 5f7d006 bc7b90a 5f7d006 bc7b90a 5f7d006 bc7b90a 6ce0fcc bc7b90a 5f7d006 bc7b90a e27e6fe 6ce0fcc bc7b90a e27e6fe 5f7d006 bc7b90a e27e6fe 6ce0fcc bc7b90a e27e6fe bc7b90a e27e6fe bc7b90a 5f7d006 e27e6fe d083e30 bc7b90a e27e6fe bc7b90a e27e6fe d083e30 e27e6fe d083e30 bc7b90a e27e6fe 6ce0fcc 591b70f bc7b90a e27e6fe bc7b90a a91b58d 83eee94 158c387 bc7b90a 169cb7c bc7b90a 591b70f df19e23 b0c4b38 169cb7c b0c4b38 d083e30 b0c4b38 df19e23 bc7b90a 591b70f 1367413 | 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 = 4;
// 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> |