Pantau ujian

Pengawas melihat seluruh peserta sekaligus saat ujian berlangsung. Petak yang perlu ditengok diberi bingkai kuning, peserta yang koneksinya putus diredupkan.

Kisi pantau

Kisi otomatis mengisi lebar layar (auto-fill, minimum 11 rem per petak). Setiap petak memuat pratinjau kamera dan status peserta.

Anindya PutriXII IPA 1

2×

Bagas PrakosoXII IPA 1

Citra LestariXII IPA 2

Dimas NugrohoXI IPA 3

Erika HandayaniXI IPA 3

Fajar RamadhanX IPA 2

1×

Gita PermataXII IPA 2

Hendra SusiloX IPA 1

Mengerjakan Perlu ditengok Terputus Selesai

Lihat kode

<div class="ck-monitor">
<div class="ck-monitor__tile ">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--success" aria-hidden="true"></span><b>Anindya Putri</b><span class="ck-text-xs ck-muted ck-truncate">XII IPA 1</span></div>
</div><div class="ck-monitor__tile ck-monitor__tile--warn">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg><span class='ck-monitor__flag'><span class="ck-badge ck-badge--warning">2×</span></span></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--warning" aria-hidden="true"></span><b>Bagas Prakoso</b><span class="ck-text-xs ck-muted ck-truncate">XII IPA 1</span></div>
</div><div class="ck-monitor__tile ">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--success" aria-hidden="true"></span><b>Citra Lestari</b><span class="ck-text-xs ck-muted ck-truncate">XII IPA 2</span></div>
</div><div class="ck-monitor__tile ck-monitor__tile--offline">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--destructive" aria-hidden="true"></span><b>Dimas Nugroho</b><span class="ck-text-xs ck-muted ck-truncate">XI IPA 3</span></div>
</div><div class="ck-monitor__tile ">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--primary" aria-hidden="true"></span><b>Erika Handayani</b><span class="ck-text-xs ck-muted ck-truncate">XI IPA 3</span></div>
</div><div class="ck-monitor__tile ">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--success" aria-hidden="true"></span><b>Fajar Ramadhan</b><span class="ck-text-xs ck-muted ck-truncate">X IPA 2</span></div>
</div><div class="ck-monitor__tile ck-monitor__tile--warn">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg><span class='ck-monitor__flag'><span class="ck-badge ck-badge--warning">1×</span></span></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--warning" aria-hidden="true"></span><b>Gita Permata</b><span class="ck-text-xs ck-muted ck-truncate">XII IPA 2</span></div>
</div><div class="ck-monitor__tile ">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--success" aria-hidden="true"></span><b>Hendra Susilo</b><span class="ck-text-xs ck-muted ck-truncate">X IPA 1</span></div>
</div></div>
<div class="ck-legend ck-mt-4">
<span class="ck-legend__item"><span class="ck-legend__dot ck-legend__dot--success"></span>Mengerjakan</span>
<span class="ck-legend__item"><span class="ck-legend__dot ck-legend__dot--warning"></span>Perlu ditengok</span>
<span class="ck-legend__item"><span class="ck-legend__dot ck-legend__dot--destructive"></span>Terputus</span>
<span class="ck-legend__item"><span class="ck-legend__dot"></span>Selesai</span>
</div>

Petak

Tiga keadaan: normal, --warn (perlu ditengok), dan --offline. Lencana kecil di kanan atas mencatat jumlah pelanggaran.

Anindya PutriXII IPA 1

2×

Bagas PrakosoXII IPA 1

Lihat kode

<div class="ck-monitor" style="max-width:34rem">
<div class="ck-monitor__tile ">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--success" aria-hidden="true"></span><b>Anindya Putri</b><span class="ck-text-xs ck-muted ck-truncate">XII IPA 1</span></div>
</div><div class="ck-monitor__tile ck-monitor__tile--warn">
  <div class="ck-monitor__shot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-4Z"/><circle cx="12" cy="13" r="3.5"/></svg><span class='ck-monitor__flag'><span class="ck-badge ck-badge--warning">2×</span></span></div>
  <div class="ck-monitor__meta"><span class="ck-dot ck-dot--warning" aria-hidden="true"></span><b>Bagas Prakoso</b><span class="ck-text-xs ck-muted ck-truncate">XII IPA 1</span></div>
</div></div>