🎮ArcadeLab

Three Decisions Before the Clock Wins

by GlitchWolf45
50 lines6.2 KB
▶ Play
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="robots" content="index,follow">
  <title>Three Decisions Before the Clock Wins</title>
  <style>
    :root{--paper:#f4ecd8;--ink:#1d1d1b;--red:#b9281f;--line:#2f2f2a;--green:#1d6d4b}
    *{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif;min-height:100vh}
    body:before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(29,29,27,.07) 28px)}
    main{width:min(760px,calc(100% - 28px));margin:24px auto 40px;border:3px solid var(--line);background:rgba(244,236,216,.96);box-shadow:9px 9px 0 var(--red)}
    header{padding:22px 24px 18px;border-bottom:3px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
    .kicker{font:700 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
    h1{font-size:clamp(34px,7vw,62px);line-height:.92;margin:8px 0 0;max-width:620px}.clock{font:800 25px/1 ui-monospace,SFMono-Regular,Consolas,monospace;border:2px solid var(--red);padding:9px;color:var(--red)}
    .intro{padding:18px 24px;border-bottom:2px solid var(--line);font-size:18px;line-height:1.55}
    .card{padding:24px}.step{font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;color:var(--red)}
    h2{font-size:28px;margin:8px 0 18px;line-height:1.15}.answers{display:grid;gap:10px}
    button{appearance:none;text-align:left;border:2px solid var(--line);background:#fffaf0;padding:14px 15px;font:700 16px/1.25 Georgia,serif;cursor:pointer;transition:.15s}
    button:hover,button:focus{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line);outline:none}
    button[disabled]{cursor:default;opacity:.6;transform:none;box-shadow:none}.feedback{min-height:52px;margin:16px 0 0;padding:13px 15px;border-left:6px solid var(--line);background:#fffaf0;font-size:16px;line-height:1.45}
    .feedback.good{border-color:var(--green)}.feedback.bad{border-color:var(--red)}
    .next{display:none;margin-top:14px;background:var(--ink);color:var(--paper);width:100%;text-align:center}.result{display:none;padding:24px}
    .result strong{font-size:52px;color:var(--red)}.result p{font-size:18px;line-height:1.55}
    a{color:#fff;background:var(--red);display:inline-block;padding:12px 15px;font-weight:700;text-decoration:none;border:2px solid var(--red)}a:hover{background:transparent;color:var(--red)}
    footer{border-top:2px solid var(--line);padding:14px 24px;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
    @media(max-width:560px){header{grid-template-columns:1fr}.clock{justify-self:start}main{margin-top:14px}.card,.result{padding:20px}}
  </style>
</head>
<body>
<main>
  <header><div><div class="kicker">Exam triage drill / 03 decisions</div><h1>Three decisions before the clock wins</h1></div><div class="clock" id="clock">10:00</div></header>
  <div class="intro">Read the situation, then choose the action that protects the most useful work. This drill teaches pacing decisions. It does not reproduce or answer a Gaokao question.</div>
  <section class="card" id="card"><div class="step" id="step"></div><h2 id="prompt"></h2><div class="answers" id="answers"></div><div class="feedback" id="feedback">Choose one action.</div><button class="next" id="next">Next decision</button></section>
  <section class="result" id="result"><div class="kicker">Triage complete</div><strong id="score"></strong><p>Review the first decision that cost time. A specific note about reading, method choice, or execution can guide the next attempt.</p><a href="https://gaokaoexam.org/subjects/math/challenge/2026-shanghai" target="_blank" rel="noopener">Try the 2026 Shanghai mathematics 10-minute challenge</a></section>
  <footer>Independent study aid. GaokaoExam.org presents independently reconstructed and translated material and is not an official government publication.</footer>
</main>
<script>
const items=[
 {q:"The instruction asks for every valid choice. Two options fit different readings of one condition.",a:["Answer the familiar version","Re-read the condition","Expand both calculations"],c:1,ok:"Good. Resolve the wording before spending time on two different problems.",no:"The condition decides which problem exists. Check it before calculating."},
 {q:"The method is clear, the calculation is long, and three minutes remain for two questions.",a:["Mark the route and move","Finish at any cost","Start the next problem from memory"],c:0,ok:"Good. A precise mark preserves the route without surrendering the remaining paper.",no:"The clock still belongs to the whole set. Preserve the route and protect the remaining questions."},
 {q:"A probability product looks convenient, but the prompt has not yet established independence.",a:["Multiply immediately","Verify the condition","Round the result first"],c:1,ok:"Good. Test the condition that makes the method legal.",no:"The calculation depends on a condition. Verify it before using the rule."}
];
let at=0,points=0;const step=document.querySelector('#step'),prompt=document.querySelector('#prompt'),answers=document.querySelector('#answers'),feedback=document.querySelector('#feedback'),next=document.querySelector('#next');
function render(){const item=items[at];step.textContent=`Decision ${String(at+1).padStart(2,'0')} / 03`;prompt.textContent=item.q;answers.innerHTML='';feedback.className='feedback';feedback.textContent='Choose one action.';next.style.display='none';item.a.forEach((label,i)=>{const b=document.createElement('button');b.textContent=label;b.onclick=()=>choose(i);answers.appendChild(b)})}
function choose(i){const item=items[at];answers.querySelectorAll('button').forEach(b=>b.disabled=true);const good=i===item.c;if(good)points++;feedback.className=`feedback ${good?'good':'bad'}`;feedback.textContent=good?item.ok:item.no;next.style.display='block'}
next.onclick=()=>{at++;if(at<items.length)render();else{document.querySelector('#card').style.display='none';document.querySelector('#result').style.display='block';document.querySelector('#score').textContent=`${points}/3`}};render();
</script>
</body>
</html>

Game Source: Three Decisions Before the Clock Wins

Creator: GlitchWolf45

Libraries: none

Complexity: moderate (50 lines, 6.2 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: three-decisions-before-the-clock-wins-glitchwolf45" to link back to the original. Then publish at arcadelab.ai/publish.