사용성 테스트

<div class="stage">
  <div class="task">Task: find "Settings"</div>
  <div class="screen">
    <div class="item" id="i1">Home</div>
    <div class="item wrong" id="i2">Profile</div>
    <div class="item" id="i3">Help</div>
    <div class="item target" id="i4">Settings</div>
    <div class="cur" id="cur">&#10148;</div>
  </div>
  <div class="bubble" id="bubble">hmm...</div>
</div>

.stage{width:94%;height:90%;display:flex;flex-direction:column;gap:8px;position:relative}
.task{font:700 10px/1 monospace;color:var(--muted)}
.screen{position:relative;flex:1;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  display:flex;flex-direction:column;gap:6px;padding:8%;box-sizing:border-box}
.item{border-radius:6px;background:var(--line);padding:6px 10px;font:600 11px/1 sans-serif;color:var(--muted);transition:background .3s,color .3s}
.item.hit{background:var(--accent);color:#fff}
.cur{position:absolute;font-size:15px;color:var(--fg);transform:rotate(-45deg);z-index:4}
.bubble{position:absolute;top:2%;right:2%;background:var(--fg);color:var(--bg);font:700 10px/1 sans-serif;
  padding:5px 8px;border-radius:6px;opacity:0;transition:opacity .3s}
.bubble.show{opacity:1}

const cur = document.getElementById('cur');
const bubble = document.getElementById('bubble');
const items = { i1: document.getElementById('i1'), i2: document.getElementById('i2'), i3: document.getElementById('i3'), i4: document.getElementById('i4') };
function wait(ms) { return new Promise((r) => setTimeout(r, ms)); }
function moveTo(x, y, ms) {
  cur.style.transition = 'left ' + ms + 'ms ease, top ' + ms + 'ms ease';
  cur.style.left = x + '%'; cur.style.top = y + '%';
  return wait(ms);
}
async function loop() {
  for (;;) {
    Object.values(items).forEach((el) => el.classList.remove('hit'));
    cur.style.transition = 'none'; cur.style.left = '6%'; cur.style.top = '90%';
    bubble.classList.remove('show');
    await wait(400);
    await moveTo(20, 20, 700);
    bubble.textContent = 'hmm...';
    bubble.classList.add('show');
    await wait(700);
    bubble.classList.remove('show');
    await moveTo(20, 40, 600);
    items.i2.classList.add('hit');
    bubble.textContent = 'not this';
    bubble.classList.add('show');
    await wait(700);
    bubble.classList.remove('show');
    items.i2.classList.remove('hit');
    await moveTo(24, 78, 700);
    items.i4.classList.add('hit');
    bubble.textContent = 'found it';
    bubble.classList.add('show');
    await wait(1200);
  }
}
loop();