Microlearning Content Reviewer

Extension Chrome untuk baca, cek, dan rapikan konten microlearning (dari file JSON) sebelum masuk ke spreadsheet produksi — tanpa perlu bisa coding.

Untuk siapa panduan ini: Learning Designer (LD), editor konten, dan siapa pun yang tugasnya mengecek isi modul sebelum tayang. Tidak ada bagian yang mengharuskan kamu menulis kode.

---

Sekilas alurnya

File JSON konten  →  Buka di extension  →  Baca tiap kartu (persis tampilan aslinya)
       →  Perbaiki langsung kalau ada yang kurang pas  →  Centang yang sudah oke
       →  Kirim ke Google Sheets (1 klik atau copy-paste)

Satu file JSON biasanya berisi satu modul, isinya banyak "potongan konten" (satu halaman/aktivitas = satu item). Extension ini menampilkan tiap potongan itu sebagai kartu yang bisa kamu baca, edit, pilih, lalu kirim ke spreadsheet.

---

1. Cara pasang (dilakukan sekali saja)

1. Buka chrome://extensions di address bar Chrome

2. Nyalakan toggle Developer mode di pojok kanan atas

3. Klik tombol Load unpacked, lalu pilih folder content-reviewer-extension

4. Extension-nya bakal muncul di daftar seperti ini:

   

5. Klik ikon hijau bergambar kartu di toolbar Chrome (pojok kanan atas browser) untuk membuka halaman reviewer

Kalau ikonnya tidak terlihat di toolbar, klik ikon puzzle piece (🧩) di sebelah address bar, lalu klik pin di samping "Microlearning Content Reviewer" supaya selalu tampil.

---

2. Masukkan konten yang mau direview

Saat pertama dibuka, halamannya masih kosong seperti ini — tinggal upload file .json atau tempel teksnya langsung:

Klik Muat JSON, dan semua item di dalamnya langsung tampil sebagai kartu.

---

3. Baca & pahami satu kartu

Begini isi satu kartu dan artinya:

• Kotak biru/oranye/ungu kecil (contoh: LA-A) — kode tipe konten. Biru = materi/bacaan, oranye = aktivitas/soal, ungu = komitmen di akhir modul.
• No. 1 — urutan halaman di dalam modul.
• M1-P01 — kode unik konten itu (dipakai sistem untuk melacak mana yang sudah dikirim ke spreadsheet, jangan diubah sembarangan).
• Tulisan miring di bawah judul — tujuan instruksional halaman itu, bukan bagian dari konten yang dibaca learner.
• Kotak putih besar — pratinjau konten persis seperti yang akan dilihat learner (bold, italic, dst. sudah tampil apa adanya, bukan kode HTML mentah).
• Kalau ada pilihan jawaban, muncul sebagai daftar kotak di bawah pratinjau — yang benar otomatis ditandai hijau.
• Baris kecil di paling bawah (Rekomendasi visual, Prompt gambar kalau ada, & Catatan produksi) — catatan untuk tim desain/produksi, bukan konten untuk learner. Prompt gambar khusus berisi prompt siap-pakai untuk AI image generator (Midjourney/DALL·E/dll.), beda dari Rekomendasi visual yang cuma deskripsi arahan.

Centang kotak di kiri atas kartu kalau kontennya sudah oke dan siap dikirim ke spreadsheet.

---

4. Perbaiki langsung kalau ada yang kurang pas

Klik tombol Edit di pojok kanan atas kartu:

• Ketik seperti biasa di kotak konten. Untuk bold, italic, garis bawah, heading kecil, bullet list, atau link — blok teksnya lalu klik tombol di toolbar (persis seperti di Word/Google Docs), tidak perlu tahu kode HTML sama sekali
• Kalau ada pilihan jawaban, klik bulatan di depan opsi yang benar untuk menandainya — tidak perlu ketik manual
• Klik Simpan untuk menyimpan perubahan, atau Batal untuk membatalkan
• Kalau konten itu sebelumnya sudah pernah dikirim ke spreadsheet, setelah diedit akan muncul label kuning "Diedit — perlu ekspor ulang" sebagai pengingat

Perubahan tersimpan otomatis di extension selama tab-nya masih ada. Kalau mau menyimpan hasil editan ke file (misal untuk arsip), klik Download JSON hasil edit di bagian atas.

---

5. Cari kartu tertentu (kalau modulnya panjang)

Ada kotak pencarian dan filter tipe konten di atas daftar kartu:

Ketik kata kunci apa saja (bisa dari tujuan, isi konten, atau kode kartu) untuk langsung menyaring — berguna kalau satu modul isinya belasan halaman.

---

6. Kirim ke Google Sheets

Ada dua cara, pilih salah satu:

Cara A — Copy-paste (paling gampang, tanpa setup apa pun)

1. Centang kartu-kartu yang sudah lolos review

2. Klik Generate TSV untuk item terpilih

3. Hasilnya otomatis tersalin ke clipboard:

   

4. Buka Google Sheets, klik sel A1 di tab tujuan, lalu Ctrl+V — semua kolom otomatis rapi terisi

Cara B — Kirim otomatis 1 klik (perlu setup sekali oleh admin/tim teknis)

Kalau di tim kamu sudah ada yang setup "Sheets Web App" (lihat bagian Setup untuk Admin dan Tim Teknis di bawah), kamu tinggal:

1. Centang kartu yang lolos review
2. Klik Kirim ke Google Sheets
3. Selesai — baris baru otomatis muncul di spreadsheet tujuan, tanpa copy-paste

Kartu yang berhasil dikirim (lewat cara A maupun B) otomatis diberi label hijau "Sudah diekspor", supaya kamu tidak terkirim dobel kalau buka file JSON yang sama lagi lain waktu.

---

Hal-hal lain yang perlu tahu

• Muncul kotak peringatan kuning setelah muat JSON? Itu tanda ada data yang kurang lengkap (misal kode kartu kosong atau dobel, atau konten kosong). Bukan error yang menghentikan proses — datanya tetap bisa direview — tapi sebaiknya dicek ke pembuat JSON-nya.
• Klik "Muat JSON lain" tapi belum sempat kirim semua? Akan muncul konfirmasi dulu supaya progres review kamu tidak kehapus tanpa sengaja.
• Mau kirim ulang konten yang sudah pernah dikirim? Buka ⚙ Pengaturan Sheets di pojok kanan atas, klik Reset status "sudah diekspor".
• Semua yang kamu lakukan di extension ini tersimpan di komputer/browser kamu sendiri — aman kalau tab atau Chrome-nya ditutup, tapi tidak otomatis tersinkron ke perangkat lain.

---

Setup untuk Admin dan Tim Teknis: Kirim Otomatis ke Sheets

(Bagian ini teknis — biasanya dikerjakan sekali oleh developer/PIC, bukan oleh tiap LD/editor yang memakai extension-nya.)

Selain copy-paste manual (Cara A di atas), ada jalur kirim otomatis lewat Google Apps Script sebagai perantara — tanpa perlu setup OAuth/Google Cloud Console.

Setup sekali di sisi Google Sheets:

1. Buka spreadsheet tujuan → menu Extensions > Apps Script
2. Hapus isi default, paste seluruh isi file apps-script/Code.gs
3. Ganti nilai SHARED_SECRET dengan string acak buatan sendiri (perlakukan seperti password)
4. Sesuaikan SHEET_NAME kalau nama tab tujuan bukan Sheet1
5. Deploy > New deployment → tipe Web app → Execute as Me, Who has access Anyone → Deploy
6. Saat diminta otorisasi, izinkan akses (wajar diminta karena Apps Script baru)
7. Salin Web app URL yang muncul (formatnya https://script.google.com/macros/s/xxx/exec)

Setup di extension (dikerjakan oleh siapa pun yang akan memakainya):

1. Klik ⚙ Pengaturan Sheets di pojok kanan atas halaman
2. Isi Web App URL dan Secret (harus sama persis dengan SHARED_SECRET di Code.gs) → Simpan pengaturan
3. Klik Test koneksi — harus muncul "Koneksi OK"
4. Selesai, tombol Kirim ke Google Sheets sudah bisa dipakai

Kalau perlu deploy ulang setelah mengubah Code.gs (misal ganti SHEET_NAME): Deploy > Manage deployments > Edit (ikon pensil) > New version > Deploy. URL Web App tetap sama, tidak perlu update pengaturan di extension.

---

Referensi teknis (untuk yang menyiapkan file JSON-nya)

Urutan kolom hasil ekspor (dipakai baik untuk TSV maupun kirim ke Sheets) sama persis dengan key di JSON:

kelas, seri, modul, no, action_id, action_type, tujuan, konten, konten_reveal, opsi_1..opsi_5, jawaban, indikator, rekomendasi_visual, prompt_gambar, catatan_produksi

Isi konten/konten_reveal tetap HTML mentah (bukan di-strip) supaya bisa dipakai langsung oleh sistem/CMS di hilir. Tag HTML yang didukung penuh oleh editor WYSIWYG: <p>, <br>, <strong>, <em>, <u>, <h3>, <ul>/<ol>/<li>, <a>.

prompt_gambar adalah prompt siap-pakai untuk AI image generator (Midjourney, DALL·E, dll.) — beda dari rekomendasi_visual yang sifatnya deskripsi arahan visual untuk tim desain. Kalau kosong, kartu tidak menampilkan baris "Prompt gambar" di footer (dianggap tidak butuh ilustrasi, misal untuk halaman activity).

Ada contoh data lengkap (15 item, Modul 1) di data/sample-modul1.json untuk uji coba tanpa perlu nyiapin file sendiri.

Catatan teknis lain

• Jalur TSV (Cara A) tidak butuh setup apa pun — cocok untuk dicoba duluan sebelum setup Cara B.
• SHARED_SECRET dikirim di body request (bukan header khusus) supaya tidak memicu CORS preflight yang tidak didukung Apps Script Web App — cukup aman untuk pemakaian tim internal, tapi jangan bagikan Web App URL + Secret ke luar tim.
• State (batch JSON aktif, riwayat ekspor, pengaturan Sheets) tersimpan di chrome.storage.local milik browser, bukan di cloud.
• Preview konten dirender di dalam <iframe sandbox> tanpa eksekusi script, jadi aman dari HTML yang tidak terduga.