Navigasi soal
Kisi nomor soal: sudah dijawab, ditandai ragu, dan nomor yang sedang dibuka. Dipakai bersama bar ujian.
Kisi nomor
Tiga keadaan berbeda — dan setiap keadaan juga dibedakan oleh lebih dari sekadar warna (isi/garis tepi).
Sudah dijawab
Terjawab
Ragu
Kosong
Lihat kode
<div style="max-width:30rem">
<div class="ck-row ck-between ck-mb-4">
<span class="ck-text-xs ck-muted">Sudah dijawab</span>
<span class="ck-row ck-row-3 ck-text-xs ck-muted">
<span class="ck-row ck-row-2"><span class="ck-qnav__btn ck-qnav__btn--answered" style="width:1rem;height:1rem"></span> Terjawab</span>
<span class="ck-row ck-row-2"><span class="ck-qnav__btn ck-qnav__btn--flagged" style="width:1rem;height:1rem"></span> Ragu</span>
<span class="ck-row ck-row-2"><span class="ck-qnav__btn" style="width:1rem;height:1rem"></span> Kosong</span>
</span>
</div>
<div class="ck-qnav">
<button class="ck-qnav__btn ck-qnav__btn--answered">1</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">2</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">3</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">4</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">5</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">6</button>
<button class="ck-qnav__btn ck-qnav__btn--answered ck-qnav__btn--flagged">7</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">8</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">9</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">10</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">11</button>
<button class="ck-qnav__btn ck-qnav__btn--answered">12</button>
<button class="ck-qnav__btn ck-qnav__btn--current">13</button>
<button class="ck-qnav__btn ">14</button>
<button class="ck-qnav__btn ">15</button>
<button class="ck-qnav__btn ">16</button>
<button class="ck-qnav__btn ">17</button>
<button class="ck-qnav__btn ">18</button>
<button class="ck-qnav__btn ">19</button>
<button class="ck-qnav__btn ">20</button>
</div>
</div>