Cara Membuat Aplikasi Asesmen Generator AI Menggunakan Canvas Gemini
Cara Membuat Generator Asesmen AI menggunakan Canvas Gemini
Ikuti langkah berikut untuk membuat aplikasi Generator Asesmen SD–SMA dengan sistem rendering presisi tinggi menggunakan Canvas Gemini.
STEP 1 – Minta Prompt ke ChatGPT
Minta ChatGPT membuatkan prompt generator asesmen sesuai kebutuhan (mapel, jenjang, tipe soal).
Minta ChatGPT membuatkan prompt generator asesmen sesuai kebutuhan (mapel, jenjang, tipe soal).
STEP 2 – Salin Prompt
Salin prompt yang sudah dibuat.
Salin prompt yang sudah dibuat.
STEP 3 – Buka Gemini AI
Buka Gemini AI → pilih Canvas → paste prompt tadi.
Buka Gemini AI → pilih Canvas → paste prompt tadi.
STEP 4 – Tunggu Proses
Tunggu hingga sistem selesai membuat aplikasi.
Tunggu hingga sistem selesai membuat aplikasi.
STEP 5 – Uji & Unduh
Coba aplikasinya. Jika sudah sesuai, unduh dalam format Word atau PDF.
Coba aplikasinya. Jika sudah sesuai, unduh dalam format Word atau PDF.
STEP 6 – Bagikan
Klik tombol Bagikan → ambil link publik → gunakan.
Klik tombol Bagikan → ambil link publik → gunakan.
Prompt Siap Pakai untuk Gemini Canvas
Anda adalah **Senior Fullstack Developer + Document Rendering Engineer + Instructional Designer 2026**.
Buatkan aplikasi web Generator Asesmen SD–SMA dengan sistem rendering presisi tinggi sehingga:
Layout Preview = Layout Word = Layout PDF (100% konsisten)
# TARGET UTAMA
1. Preview A4 profesional
2. Export Word presisi
3. Export PDF presisi
4. Tidak ada teks loncat, gambar melebar, halaman terpotong, spasi berubah, margin bergeser
# SISTEM RENDERING WAJIB
1️⃣ SISTEM PREVIEW BERBASIS A4 FIXED CANVAS
- width: 794px
- min-height: 1123px
- Background putih
- Margin internal 80px
- Box-sizing: border-box
- Font fix (Times New Roman / Calibri)
- Line-height 1.5
- Semua ukuran dalam px
Gunakan class:
.page-a4
.page-break
2️⃣ SISTEM PAGE BREAK OTOMATIS
- Jika tinggi > 1123px → buat halaman baru otomatis
- Gunakan page-break-after: always; break-after: page;
Lampiran kunci jawaban:
- Halaman baru
- Class .lampiran-page
3️⃣ SISTEM EXPORT WORD PRESISI
Gunakan html-docx-js atau docx.js
WAJIB:
- Ukuran A4 21cm x 29.7cm
- Margin top/bottom 2.5cm
- Margin left/right 3cm
- Font eksplisit
- Gambar max 12cm
- Page break sebelum lampiran
4️⃣ SISTEM EXPORT PDF PRESISI
Gunakan html2pdf.js dengan konfigurasi:
{ margin: 0,
filename: 'Asesmen.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: { scale: 2, useCORS: true, letterRendering: true },
jsPDF: { unit: 'px', format: [794,1123], orientation: 'portrait' },
pagebreak: { mode: ['css', 'legacy'] }
}
WAJIB gunakan selector .page-a4
# SISTEM GAMBAR
- max-width:100%
- height:auto
- display:block
- margin:10px auto
- object-fit:contain
- Konversi base64 saat export
# LAMPIRAN
- Halaman baru
- Heading center bold
- Ikut dalam Word & PDF
# LOADING SYSTEM
Overlay full screen:
"AI sedang menyusun asesmen dan menata tata letak presisi..."
Minimal 2 detik.
# NOTIFIKASI
Popup sukses:
"✅ Asesmen siap diunduh dengan format presisi tinggi"
Gunakan:
- HTML
- CSS A4 fixed layout
- JavaScript modular
- Tanpa framework berat
- Semua dalam 1 file HTML
- Siap tempel di Blogger
Output:
1 file HTML lengkap tanpa penjelasan tambahan.
Tips: Setelah aplikasi muncul di Canvas, uji export Word & PDF untuk memastikan layout benar-benar presisi.