휴리스틱 평가

<div class="stage">
  <div class="num" id="num">1</div>
  <div class="txt" id="txt"></div>
  <div class="dots" id="dots"></div>
</div>

.stage{width:94%;height:88%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.num{font:800 28px/1 monospace;color:var(--accent)}
.txt{font:700 13px/1.3 sans-serif;color:var(--fg);min-height:2.6em;display:flex;align-items:center}
.dots{display:flex;gap:5px}
.dots span{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dots span.on{background:var(--accent)}

const heuristics = [
  'Visibility of system status',
  'Match with the real world',
  'User control and freedom',
  'Consistency and standards',
  'Error prevention',
  'Recognition rather than recall',
  'Flexibility and efficiency',
  'Aesthetic, minimalist design',
  'Help recover from errors',
  'Help and documentation',
];
const num = document.getElementById('num');
const txt = document.getElementById('txt');
const dots = document.getElementById('dots');
heuristics.forEach(() => {
  const d = document.createElement('span');
  dots.appendChild(d);
});
const dotEls = dots.children;
let i = 0;
function show() {
  num.textContent = String(i + 1).padStart(2, '0');
  txt.textContent = heuristics[i];
  for (let k = 0; k < dotEls.length; k++) dotEls[k].classList.toggle('on', k === i);
  i = (i + 1) % heuristics.length;
}
show();
setInterval(show, 1500);