Bar ujian

Bilah menempel berisi nama kuis, penghitung waktu, dan tombol kumpulkan. Warna waktu berubah: normal, peringatan (≤5 menit), bahaya (≤1 menit).

Penghitung waktu

Isi data-ck-timer="2700" (detik) — JS menghitung mundur dan menambah kelas warna otomatis.

Kuis Matematika — Bab 3

Soal 14 dari 20 · 6 belum dijawab

45:00

04:12 00:48

Lihat kode

<div class="ck-quizbar" style="border:1px solid hsl(var(--ck-border));border-radius:var(--ck-radius-lg)">
  <div class="ck-grow"><div class="ck-text-sm ck-strong">Kuis Matematika — Bab 3</div><div class="ck-text-xs ck-muted">Soal 14 dari 20 · 6 belum dijawab</div></div>
  <span class="ck-timer" data-ck-timer="2700"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span data-ck-timer-text>45:00</span></span>
  <button class="ck-btn ck-btn--default">Kumpulkan</button>
</div>
<div class="ck-mt-4 ck-row ck-row-4 ck-wrap">
  <span class="ck-timer ck-timer--warn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> 04:12</span>
  <span class="ck-timer ck-timer--danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> 00:48</span>
</div>