📘 Belajar Coding Instan via ChatGPT untuk Membuat Soal Latihan Interaktif
Penulis: Agus Manshurudin, M.Pd. / Pendidik & Pegiat Medsos
Zaman sekarang, guru tidak perlu jadi “ahli komputer” untuk bisa membuat soal interaktif. Cukup bermodal ChatGPT dan sedikit logika sederhana, kita sudah bisa menghasilkan latihan digital yang keren — bahkan bisa dijalankan di komputer atau HP siswa. Buku mini ini dibuat khusus untuk guru MTs, supaya bisa belajar coding dasar sambil membuat soal latihan interaktif (misalnya kuis PKn, Fiqih, Bahasa Arab, atau TIK). Yuk, kita mulai langkah pertama!
LIHAT HASIL DULU KLIK DI SINI
Bab 1 – Belajar Coding Instan dengan ChatGPT
1. Apa itu ChatGPT?
ChatGPT adalah asisten pintar berbasis AI (kecerdasan buatan) yang bisa membantu kita menulis teks, membuat soal, bahkan membuat kode program sederhana.
Guru bisa “ngobrol” dengan ChatGPT seperti ke teman sendiri:
🗣️ “Buatkan soal pilihan ganda PKn kelas 8 tentang nilai-nilai Pancasila.”
Dan hasilnya bisa langsung muncul dalam hitungan detik!
Kalau mau lebih lanjut, ChatGPT juga bisa bantu ubah soal tersebut menjadi program interaktif dengan bahasa Python atau HTML.
2. Membuat Soal Pilihan Ganda Otomatis (Contoh PKn)
Kita coba dulu contoh sederhana.
Ketik di ChatGPT:
💬 Prompt:
“Buatkan 5 soal pilihan ganda PKn kelas 8 MTs dengan kunci jawaban, topik: Nilai-nilai Pancasila dalam kehidupan sehari-hari.”
Dan hasilnya bisa seperti ini 👇
🧠 Contoh Soal PKn Interaktif
Topik: Nilai-nilai Pancasila dalam Kehidupan Sehari-hari
1️⃣ Sikap yang mencerminkan sila kedua Pancasila adalah…
A. Menolong teman yang jatuh di sekolah
B. Mengikuti lomba dengan curang
C. Menghina teman berbeda agama
D. Membiarkan teman kesulitan
➡️ Jawaban: A
2️⃣ Perilaku menghargai perbedaan pendapat termasuk pelaksanaan sila…
A. Ketiga
B. Keempat
C. Kedua
D. Kelima
➡️ Jawaban: B
3️⃣ Sikap yang menunjukkan persatuan dan kesatuan adalah…
A. Gotong royong membersihkan lingkungan
B. Bertengkar karena beda pendapat
C. Egois dan tidak mau bekerja sama
D. Tidak peduli dengan kegiatan sekolah
➡️ Jawaban: A
4️⃣ Menegakkan keadilan sosial termasuk nilai dari sila…
A. Pertama
B. Kedua
C. Keempat
D. Kelima
➡️ Jawaban: D
5️⃣ Menghormati guru dan orang tua merupakan wujud pengamalan sila…
A. Pertama
B. Kedua
C. Ketiga
D. Keempat
➡️ Jawaban: A
3: Mengubah Soal Jadi Kuis Interaktif (HTML untuk Blogger)
Kalau kamu ingin membuat kuis yang bisa dibuka lewat browser (siswa klik jawaban di HP/komputer), kita pakai HTML + JavaScript. Tinggal salin kodenya ke mode HTML di Blogger, lalu terbitkan — selesai!
🔧 Cara pakai di Blogger
1. Buat postingan baru di Blogger.
2. Klik tab HTML (bukan Compose/WYSIWYG).
3. Tempel seluruh kode HTML di bawah ini.
4. Simpan / Pratinjau → Pastikan tampil dengan benar → Publish.
Jika ingin menaruhnya di widget sidebar, gunakan Layout → Add a Gadget → pilih HTML/JavaScript → tempel kode.
📄 Kode HTML Kuis Interaktif (5 soal PKn)
Salin seluruh kode ini ke editor HTML di Blogger:
<!-- ======= MULAI KODE KUIS INTERAKTIF ======= -->
<div id="quiz-container" style="max-width:800px;margin:20px auto;padding:15px;font-family:'Segoe UI',sans-serif;background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.1);">
<h2 style="text-align:center;color:#2b4b9b;">Kuis PKn: Nilai-nilai Pancasila</h2>
<div id="quiz-body" style="display:flex;gap:16px;">
<!-- Area soal -->
<div id="question-area" style="flex:1;">
<div id="question-box"></div>
<div style="display:flex;justify-content:space-between;margin-top:15px;">
<button id="prevBtn" style="padding:8px 16px;border:none;background:#ccc;border-radius:6px;cursor:pointer;">⬅ Sebelumnya</button>
<button id="nextBtn" style="padding:8px 16px;border:none;background:#4CAF50;color:white;border-radius:6px;cursor:pointer;">Selanjutnya ➡</button>
</div>
</div>
<!-- Navigator samping -->
<div id="navigator" style="width:120px;">
<h4 style="text-align:center;margin-top:0;">Nomor Soal</h4>
<div id="nav-buttons" style="display:flex;flex-wrap:wrap;gap:6px;justify-content:center;"></div>
</div>
</div>
<div id="result-page" style="display:none;margin-top:20px;text-align:center;">
<h3>Hasil Kuis</h3>
<p id="score-display" style="font-size:1.2em;font-weight:600;"></p>
<div id="detail-result" style="text-align:left;margin-top:12px;background:#f9f9f9;padding:10px;border-radius:8px;max-height:300px;overflow:auto;"></div>
<button onclick="restartQuiz()" style="margin-top:14px;padding:8px 16px;background:#2196F3;color:#fff;border:none;border-radius:6px;cursor:pointer;">Ulangi Kuis</button>
</div>
<style>
#question-box .question-card { background:#f6f8ff;padding:15px;border-radius:10px;box-shadow:inset 0 0 4px rgba(0,0,0,0.05);}
#question-box .q-title { font-weight:600;margin-bottom:10px; }
#question-box label { display:block;padding:6px 8px;border:1px solid #ddd;border-radius:6px;margin-bottom:6px;cursor:pointer;transition:0.2s; }
#question-box input[type="radio"] { margin-right:8px; }
#question-box label:hover { background:#eef4ff; }
#navigator button { width:32px;height:32px;border-radius:50%;border:1px solid #999;background:#eee;cursor:pointer;transition:0.2s; }
#navigator button.active { background:#4CAF50;color:white;border-color:#4CAF50; }
#navigator button.answered { background:#ffd54f;border-color:#fbc02d; }
@media (max-width:768px){
#quiz-body { flex-direction:column; }
#navigator { width:100%;order:-1;margin-bottom:10px; }
#navigator h4{display:none;}
#nav-buttons {justify-content:center;}
}
</style>
</div>
<script>
(function(){
const questions = [
{q:"Sikap yang mencerminkan sila kedua Pancasila adalah…",
options:["Menolong teman yang jatuh di sekolah","Mengikuti lomba dengan curang","Menghina teman berbeda agama","Membiarkan teman kesulitan"],
answer:"A"},
{q:"Perilaku menghargai perbedaan pendapat termasuk pelaksanaan sila…",
options:["Ketiga","Keempat","Kedua","Kelima"],
answer:"B"},
{q:"Sikap yang menunjukkan persatuan dan kesatuan adalah…",
options:["Gotong royong membersihkan lingkungan","Bertengkar karena beda pendapat","Egois dan tidak mau bekerja sama","Tidak peduli dengan kegiatan sekolah"],
answer:"A"},
{q:"Menegakkan keadilan sosial termasuk nilai dari sila…",
options:["Pertama","Kedua","Keempat","Kelima"],
answer:"D"},
{q:"Menghormati guru dan orang tua merupakan wujud pengamalan sila…",
options:["Pertama","Kedua","Ketiga","Keempat"],
answer:"A"}
];
let current = 0;
let userAnswers = new Array(questions.length).fill(null);
const qBox = document.getElementById('question-box');
const navWrap = document.getElementById('nav-buttons');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const resultPage = document.getElementById('result-page');
const scoreDisplay = document.getElementById('score-display');
const detailResult = document.getElementById('detail-result');
const quizBody = document.getElementById('quiz-body');
// Render navigasi nomor soal
function renderNavigator(){
navWrap.innerHTML = '';
questions.forEach((_,i)=>{
const btn=document.createElement('button');
btn.textContent=i+1;
btn.onclick=()=>showQuestion(i);
navWrap.appendChild(btn);
});
}
// Tampilkan soal
function showQuestion(idx){
current=idx;
const item=questions[idx];
qBox.innerHTML=`
<div class="question-card">
<p class="q-title">${idx+1}. ${item.q}</p>
${item.options.map((opt,i)=>{
const letter=String.fromCharCode(65+i);
const checked=(userAnswers[idx]===letter)?'checked':'';
return `<label><input type="radio" name="q${idx}" value="${letter}" ${checked}> ${letter}. ${opt}</label>`;
}).join('')}
</div>
`;
updateNavState();
}
// Update tombol & navigasi
function updateNavState(){
const navBtns = navWrap.querySelectorAll('button');
navBtns.forEach((b,i)=>{
b.classList.remove('active');
if(userAnswers[i]) b.classList.add('answered');
if(i===current) b.classList.add('active');
});
prevBtn.disabled = current===0;
nextBtn.textContent = (current===questions.length-1) ? "Selesai 🏁" : "Selanjutnya ➡";
}
// Simpan jawaban yang dipilih
qBox.addEventListener('change',(e)=>{
if(e.target.name.startsWith('q')){
const val=e.target.value;
userAnswers[current]=val;
updateNavState();
}
});
// Tombol navigasi
prevBtn.onclick=()=>{
if(current>0) showQuestion(current-1);
};
nextBtn.onclick=()=>{
if(current<questions.length-1){
showQuestion(current+1);
}else{
showResult();
}
};
// Hitung hasil
function showResult(){
let correct=0;
detailResult.innerHTML='';
questions.forEach((q,i)=>{
const user=userAnswers[i];
const isCorrect = user===q.answer;
if(isCorrect) correct++;
detailResult.innerHTML += `
<div style="margin-bottom:8px;">
<strong>${i+1}. ${q.q}</strong><br>
Jawabanmu: <span style="color:${isCorrect?'green':'red'};">${user||'-'}</span> |
Kunci: <b>${q.answer}</b> ${isCorrect?'✅':'❌'}
</div>`;
});
const score = Math.round((correct/questions.length)*100);
scoreDisplay.textContent=`Skor akhir: ${score} / 100`;
quizBody.style.display='none';
resultPage.style.display='block';
}
window.restartQuiz=function(){
userAnswers.fill(null);
current=0;
quizBody.style.display='flex';
resultPage.style.display='none';
showQuestion(0);
}
renderNavigator();
showQuestion(0);
})();
</script>
<!-- ======= AKHIR KODE KUIS INTERAKTIF ======= -->
4. Manfaat untuk Guru MTs
✅ Membuat latihan digital tanpa perlu coding dari nol
✅ Bisa dikustom sesuai mapel (Fiqih, SKI, TIK, dll.)
✅ Siswa jadi lebih antusias dan aktif
✅ Materi bisa langsung dipakai di kelas
Dengan ChatGPT, guru bisa jadi “pengembang digital instan” — tanpa perlu gelar IT.
Langkah pertama cukup dari membuat soal, nanti lama-lama bisa menguasai cara kerja program interaktif, bahkan game edukatif sederhana.
“Coding itu bukan soal rumit atau tidak, tapi soal mau mencoba atau tidak.” 💻✨
0 Comments