Latihan Soal Pendidikan Pancasila Kelas 3

:root{
–paper:#FAFCFF; –line:#DCE9F7; –margin:#F2A6B3;
–ink:#1B2F6B; –ink-soft:#4A5B8C; –card:#FFFFFF; –border:#C9D8EE;
–accent:#1B4FD8; –accent-ink:#FFFFFF; –sun:#FFCF40; –sun-ink:#4A3600;
–ok:#1E8E4E; –ok-bg:#E3F6EA; –bad:#C62F45; –bad-bg:#FDE8EB;
–key-bg:#FFF7DA; –key-border:#E8C95A;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme=”light”]){
–paper:#0F1630; –line:#1A2547; –margin:#6B2A3C;
–ink:#EAF0FF; –ink-soft:#A9B7DE; –card:#172047; –border:#2B3A6B;
–accent:#7FA2FF; –accent-ink:#0F1630; –sun:#FFCF40; –sun-ink:#4A3600;
–ok:#5AD48C; –ok-bg:#123A28; –bad:#FF7D8F; –bad-bg:#45202A;
–key-bg:#3A3212; –key-border:#8A7420;
}
}
:root[data-theme=”dark”]{
–paper:#0F1630; –line:#1A2547; –margin:#6B2A3C;
–ink:#EAF0FF; –ink-soft:#A9B7DE; –card:#172047; –border:#2B3A6B;
–accent:#7FA2FF; –accent-ink:#0F1630; –sun:#FFCF40; –sun-ink:#4A3600;
–ok:#5AD48C; –ok-bg:#123A28; –bad:#FF7D8F; –bad-bg:#45202A;
–key-bg:#3A3212; –key-border:#8A7420;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);height:100%}
body{
margin:0; min-height:100%;
font-family:”Nunito”,system-ui,-apple-system,”Segoe UI”,Roboto,sans-serif;
font-size:17px; line-height:1.55; color:var(–ink);
background-color:var(–paper);
background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(–line) 31px,var(–line) 32px);
position:relative;
}
body::before{content:””;position:fixed;top:0;bottom:0;left:12px;width:2px;background:var(–margin);pointer-events:none}
@media (min-width:860px){body::before{left:calc(50% – 420px)}}
h1,h2,h3{font-family:”Baloo 2″,”Nunito”,system-ui,sans-serif;line-height:1.15;margin:0}
.wrap{max-width:760px;margin:0 auto;padding:0 18px 56px 30px}
@media (min-width:860px){.wrap{padding-left:18px}}

/* Header */
.hero{padding:28px 0 8px}
.tag{display:inline-block;background:var(–sun);color:var(–sun-ink);font-weight:800;font-size:.85rem;padding:3px 12px;border-radius:999px;margin-bottom:10px}
.hero h1{font-size:clamp(2rem,6vw,2.9rem);font-weight:800;letter-spacing:-.01em}
.hero p{margin:8px 0 0;color:var(–ink-soft);max-width:54ch}
.namebox{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.namebox label{font-weight:800}
.namebox input{flex:1 1 220px;min-width:0;font:inherit;padding:9px 12px;border:2px solid var(–border);border-radius:12px;background:var(–card);color:var(–ink)}

/* Progress */
.progress{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(–paper);padding:10px 0 8px;margin-top:14px;border-bottom:2px solid var(–border)}
.progress .row{display:flex;justify-content:space-between;font-weight:800;font-size:.95rem}
.track{height:12px;border-radius:999px;background:var(–line);margin-top:6px;overflow:hidden;border:1px solid var(–border)}
.fill{height:100%;width:0;background:var(–accent);border-radius:999px;transition:width .25s ease}

/* Sections */
.sec{margin-top:34px}
.sec h2{font-size:1.6rem;font-weight:800}
.sec .hint{margin:4px 0 14px;color:var(–ink-soft)}

/* Question */
.q{background:var(–card);border:2px solid var(–border);border-radius:18px;padding:18px 18px 16px;margin:0 0 20px}
.q-head{display:flex;gap:12px;align-items:flex-start}
.num{flex:none;width:38px;height:38px;border-radius:50%;background:var(–accent);color:var(–accent-ink);display:grid;place-items:center;font-family:”Baloo 2″,”Nunito”,sans-serif;font-weight:800;font-size:1.15rem}
.stem{flex:1;min-width:0}
.stem p{margin:0 0 8px}
.stem ul{margin:0 0 8px;padding-left:22px}
.stem b.hi{background:var(–sun);color:var(–sun-ink);padding:0 4px;border-radius:4px}
.opts{display:grid;gap:8px;margin:12px 0 0}
.opt{position:relative;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:2px solid var(–border);border-radius:14px;cursor:pointer;background:var(–paper)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .badge{flex:none;width:28px;height:28px;border-radius:8px;border:2px solid var(–border);display:grid;place-items:center;font-weight:800;font-size:.9rem;background:var(–card)}
.opt .otext{flex:1;padding-top:1px}
.opt.sel{border-color:var(–accent);box-shadow:0 0 0 2px var(–accent) inset}
.opt.sel .badge{background:var(–accent);color:var(–accent-ink);border-color:var(–accent)}
.opt:focus-within{outline:3px solid var(–sun);outline-offset:2px}
.opt.locked{cursor:default}
.opt.is-correct{border-color:var(–ok);background:var(–ok-bg);box-shadow:none}
.opt.is-correct .badge{background:var(–ok);border-color:var(–ok);color:#fff}
.opt.is-correct::after{content:”✓ benar”;font-weight:800;color:var(–ok);font-size:.85rem;align-self:center}
.opt.is-wrong{border-color:var(–bad);background:var(–bad-bg);box-shadow:none}
.opt.is-wrong .badge{background:var(–bad);border-color:var(–bad);color:#fff}
.opt.is-wrong::after{content:”✗ salah”;font-weight:800;color:var(–bad);font-size:.85rem;align-self:center}
.ans-input,.ans-area{width:100%;font:inherit;padding:10px 12px;border:2px solid var(–border);border-radius:12px;background:var(–paper);color:var(–ink);margin-top:12px}
.ans-area{min-height:110px;resize:vertical}
.ans-input:focus,.ans-area:focus,.namebox input:focus{outline:3px solid var(–sun);outline-offset:1px}
.ans-input:disabled,.ans-area:disabled{opacity:.85}

/* Buttons */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
button{font:inherit;font-weight:800;cursor:pointer;border-radius:12px;padding:10px 18px;border:2px solid var(–accent);background:var(–accent);color:var(–accent-ink)}
button.ghost{background:transparent;color:var(–accent)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible{outline:3px solid var(–sun);outline-offset:2px}
button.big{padding:13px 24px;font-size:1.05rem}

/* Feedback */
.fb{display:none;margin-top:14px;border-radius:14px;padding:12px 14px}
.fb.show{display:block}
.fb.ok{background:var(–ok-bg);border:2px solid var(–ok)}
.fb.bad{background:var(–bad-bg);border:2px solid var(–bad)}
.fb.key{background:var(–key-bg);border:2px solid var(–key-border)}
.fb strong{font-size:1.05rem}
.fb p{margin:6px 0 0}
.fb ul,.fb ol{margin:6px 0 0;padding-left:22px}
.fb .why{margin-top:8px;font-size:.97rem}
.selfmark{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.selfmark button{padding:8px 14px}
.selfdone{margin-top:10px;font-weight:800}

/* Figures */
.fig{margin:10px 0 4px;border:2px dashed var(–border);border-radius:14px;padding:10px;background:var(–paper)}
.fig svg{display:block;width:100%;height:auto;max-height:260px}
.fig .cap{font-size:.88rem;color:var(–ink-soft);margin:6px 2px 0}
.d-bg{fill:var(–card)} .d-road{fill:#8993A8} .d-road2{fill:#8993A8}
.d-house{fill:var(–line);stroke:var(–ink-soft);stroke-width:2}
.d-house.adi{fill:var(–sun);stroke:var(–sun-ink)}
.d-txt{font:700 12px “Nunito”,sans-serif;fill:var(–ink)}
.d-txt.adi{fill:var(–sun-ink)}
.d-road-txt{font:800 13px “Nunito”,sans-serif;fill:#fff}
.d-box{fill:none;stroke:var(–accent);stroke-width:2;stroke-dasharray:5 4}
.pics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.pic{border:2px solid var(–border);border-radius:14px;padding:10px;text-align:center;background:var(–paper)}
.pic .em{font-size:2.4rem;line-height:1.1}
.pic .pl{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(–accent);color:var(–accent-ink);font-weight:800;margin-bottom:4px}
.pic .pc{font-size:.9rem;line-height:1.35;margin-top:4px}
.compass{max-width:300px;margin:8px auto 0}
.c-ring{fill:var(–card);stroke:var(–ink-soft);stroke-width:2}
.c-maj{stroke:var(–accent);stroke-width:3}
.c-min{stroke:var(–ink-soft);stroke-width:2;stroke-dasharray:4 4}
.c-lbl{font:800 17px “Nunito”,sans-serif;fill:var(–ink)}
.c-dot{fill:var(–accent)}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 14px;margin:8px 0 0;padding:0;list-style:none;font-size:.95rem}

/* Bottom + result */
.finish{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.result{display:none;margin-top:26px;background:var(–card);border:3px solid var(–accent);border-radius:20px;padding:22px}
.result.show{display:block}
.result h2{font-size:1.7rem;font-weight:800}
.score{display:flex;align-items:baseline;gap:10px;margin:8px 0 4px;flex-wrap:wrap}
.score .n{font-family:”Baloo 2″,”Nunito”,sans-serif;font-weight:800;font-size:4rem;line-height:1;color:var(–accent)}
.score .d{color:var(–ink-soft);font-weight:700}
.brk{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.brk li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(–border);padding-bottom:4px}
.review a{color:var(–accent);font-weight:800}
.kunci{display:none;margin-top:26px}
.kunci.show{display:block}
.kunci h2{font-size:1.6rem;font-weight:800;margin-bottom:10px}
.ktable{width:100%;border-collapse:collapse;background:var(–card);border:2px solid var(–border);border-radius:14px;overflow:hidden}
.ktable th,.ktable td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(–border)}
.ktable th{background:var(–line);font-family:”Baloo 2″,”Nunito”,sans-serif}
.ktable td:first-child{font-weight:800;width:52px}
.kwrap{overflow-x:auto}
.foot{margin-top:34px;color:var(–ink-soft);font-size:.9rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:420px){body{font-size:16px}.q{padding:14px 12px}.pics{grid-template-columns:1fr}}

(function(){
var LET=[‘A’,’B’,’C’,’D’];
var SECTIONS=[
{key:’pg’,title:’I. Pilihan Ganda’,hint:’Berilah tanda pada huruf A, B, C, atau D untuk jawaban yang paling benar.’},
{key:’pgk’,title:’II. Pilihan Ganda Kompleks’,hint:’Nomor 6, 7, dan 9: pilih semua jawaban yang benar (boleh lebih dari satu). Nomor 8: pilih satu jawaban.’},
{key:’ut’,title:’III. Uraian Terbatas’,hint:’Isilah titik-titik dengan jawaban yang benar.’},
{key:’ur’,title:’IV. Uraian Terbuka’,hint:’Tulis jawabanmu, lihat kunci jawaban, lalu nilai dirimu sendiri dengan jujur.’}
];

function compassSVG(){
var dirs=[[‘U’,0],[‘TL’,45],[‘T’,90],[‘TG’,135],[‘S’,180],[‘BD’,225],[‘B’,270],[‘BL’,315]];
var s=”;
dirs.forEach(function(d){
var r=d[1]*Math.PI/180;
var x2=150+Math.sin(r)*105,y2=150-Math.cos(r)*105,lx=150+Math.sin(r)*130,ly=150-Math.cos(r)*130;
s+=”;
s+=”+d[0]+”;
});
return s+”;
}

var FIG_DENAH=’

‘;

var FIG_PICS=’

‘;

var Q=[
{id:1,sec:’pg’,type:’pg’,
text:’

Bangsa Indonesia memiliki wilayah yang sangat luas mulai dari Sabang sampai Merauke. Wilayah ini terbagi dari pulau-pulau. Salah satunya adalah wilayah tempat tinggal kita. Oleh karenanya setiap anak harus bangga menjadi anak Indonesia karena tempat tinggal kita bagian dari ….

‘,
opts:[‘pulau’,’NKRI’,’wilayah’,’lingkungan’],answer:’B’,
why:’Tempat tinggal kita adalah bagian dari NKRI, yaitu Negara Kesatuan Republik Indonesia, yang membentang dari Sabang sampai Merauke.’},
{id:2,sec:’pg’,type:’pg’,
text:’

Rumah Raline berdekatan dengan rumah Pak Ujang dan Ibu Tuti. Setiap hari Minggu Ayah Raline mengikuti kegiatan kerja bakti bersama tetangga rumahnya. Ini artinya rumah Raline bagian dari satu ….

‘,
opts:[‘rukun warga’,’rukun tetangga’,’desa’,’kecamatan’],answer:’B’,
why:’Rumah-rumah yang berdekatan dan warganya kerja bakti bersama membentuk satu rukun tetangga (RT).’},
{id:3,sec:’pg’,type:’pg’,
text:’

Lingkungan manusia berbeda-beda dipengaruhi oleh kondisi geografis suatu daerah. Di bawah ini yang merupakan karakteristik alam yang ada di daerah dataran tinggi adalah ….

‘,
opts:[‘persawahan, gedung, sekolah, rumah sakit’,’mal, pasar, waduk’,’kantor pemerintahan, pertokoan, mal’,’pegunungan, perkebunan, danau’],answer:’D’,
why:’Ciri alam dataran tinggi adalah pegunungan, perkebunan, dan danau. Gedung, mal, pasar, dan kantor adalah buatan manusia yang lebih banyak ada di kota.’},
{id:4,sec:’pg’,type:’pg’,fig:FIG_DENAH,
text:’

Perhatikan denah di bawah ini! Dari denah tersebut, kita dapat melihat tata letak suatu tempat. Pada denah tersebut alamat lengkap Adi terletak di ….

‘,
opts:[‘Jalan Imam Bonjol RT 02/RW 10′,’Jalan Imam Bonjol No. 4 RT 02/RW 10′,’Jalan Pattimura No. 4 RT 03/RW 10′,’Jalan Pattimura RT 03/RW 10′],answer:’C’,
why:’Alamat lengkap ditulis berurutan: nama jalan, nomor rumah, lalu RT/RW. Rumah Adi ada di Jalan Pattimura nomor 4, RT 03/RW 10. Pilihan lain tidak memuat nama jalan, nomor rumah, atau RT yang tepat.’},
{id:5,sec:’pg’,type:’pg’,
text:’

Pada hari Minggu Abed ingin belajar kelompok ke rumah Hasan, tetapi tidak tahu alamat rumahnya. Oleh karena itu saat berangkat Abed diantar oleh orang tuanya. Selesai belajar kelompok ternyata orang tua Abed tidak dapat menjemput karena sedang ada tamu. Orang tua Abed menelpon berpesan agar nanti pulang sendiri, maka sikap Abed sebaiknya ….

‘,
opts:[‘tetap pulang sendiri tanpa tujuan yang jelas’,’memaksa Hasan untuk mengantarkan pulang’,’tidak mau pulang sendiri dan menunggu sampai dijemput’,’bertanya kepada orang tua Hasan terkait alamat rumahnya’],answer:’D’,
why:’Abed perlu tahu alamat rumah Hasan agar bisa mengenali jalan pulang. Bertanya dengan sopan kepada orang tua Hasan adalah cara yang aman. Pulang tanpa tujuan jelas berbahaya, memaksa itu tidak sopan, dan menunggu tidak sesuai pesan orang tua.’},

{id:6,sec:’pgk’,type:’pgk’,
text:’

Perhatikan pernyataan di bawah ini! Dari pernyataan tersebut, yang seharusnya kamu lakukan jika tersesat di suatu tempat ditunjukkan pada nomor ….

‘,
opts:[‘(1) Meminta orang tak dikenal untuk mengantar’,'(2) Menelpon dan menunggu di tempat semula sampai ada yang menjemput’,'(3) Bertanya dengan sopan kepada orang lain arah alamat yang dituju’],answer:[‘B’,’C’],
why:’Kalau tersesat, tetap tenang, hubungi keluarga dan tunggu di tempat semula, atau tanyakan arah dengan sopan. Meminta orang tak dikenal mengantar itu berbahaya.’},
{id:7,sec:’pgk’,type:’pgk’,
text:’

Berikut ini merupakan tujuan dari pentingnya mengenal tempat tinggal yang menjadi bagian dari NKRI. Dari pernyataan tersebut, yang sesuai dengan pentingnya mengenal tempat tinggal adalah ….

‘,
opts:[‘(1) Percaya diri dalam suatu perjalanan ke suatu tempat’,'(2) Mengenali ciri-ciri karakteristik lingkungan baru’,'(3) Mudah tersesat saat melewati jalan-jalan lama’],answer:[‘A’,’B’],
why:’Mengenal tempat tinggal membuat kita percaya diri saat bepergian dan mudah mengenali ciri lingkungan baru. Pernyataan (3) keliru: justru kita jadi tidak mudah tersesat.’},
{id:8,sec:’pgk’,type:’pg’,fig:FIG_PICS,
text:’

Perhatikan gambar di bawah ini! Dari gambar tersebut, yang merupakan bentuk dari kerukunan dalam lingkungan masyarakat ditunjukkan pada gambar huruf ….

‘,
opts:[‘A dan C’,’B dan D’,’C dan D’],answer:’A’,
why:’Gotong royong (A) dan saling menjenguk tetangga (C) adalah bentuk kerukunan. Berebut mainan sambil berteriak (B) dan membuang sampah sembarangan (D) bukan sikap rukun.’},
{id:9,sec:’pgk’,type:’pgk’,
text:’

Berikut ini merupakan sikap yang dapat mempererat persatuan dan kesatuan dalam masyarakat adalah ….

‘,
opts:[‘saling menyapa’,’saling menghargai’,’bersikap mengejek’],answer:[‘A’,’B’],
why:’Saling menyapa dan saling menghargai membuat warga akrab dan bersatu. Mengejek membuat orang sakit hati dan bisa memecah persatuan.’},

{id:10,sec:’ut’,type:’ut’,match:/rumah/i,
text:’

Keluarga inti adalah keluarga yang tercatat dalam satu kartu keluarga (KK) terdiri dari Ayah, Ibu, dan Anak. Keluarga inti dikepalai oleh Ayah. Tempat tinggal seluruh anggota inti tersebut adalah ….

‘,
keyText:’rumah (satu rumah)’,
why:’Ayah, Ibu, dan anak-anak dalam keluarga inti tinggal bersama di satu rumah.’},
{id:11,sec:’ut’,type:’ut’,match:/khawatir|cemas|bingung|mencari|marah|tersesat|hilang|tidak tahu|panik|risau|sedih|dimarahi/i,
text:’

Akibatnya jika kita tidak berpamitan kepada orang tua saat ingin meninggalkan rumah untuk bermain, sekolah, atau membeli jajan adalah ….

‘,
keyText:’orang tua khawatir/cemas dan bingung mencari kita’,
why:’Tanpa berpamitan, orang tua tidak tahu kita pergi ke mana. Mereka jadi khawatir dan bingung mencari, dan kita bisa dimarahi. Kalau terjadi apa-apa, tidak ada yang tahu harus mencari ke mana.’},
{id:12,sec:’ut’,type:’ut’,match:/rukun/i,
text:’

Setiap lingkungan memiliki ciri khas yang berbeda-beda. Oleh karena itu agar tercipta suasana yang nyaman maka sikap yang diperlukan adalah saling hidup ….

‘,
keyText:’rukun’,
why:’Hidup rukun berarti saling menghargai dan membantu, sehingga lingkungan terasa nyaman meski warganya berbeda-beda.’},

{id:13,sec:’ur’,type:’ur’,
text:’

Dalam sebuah perjalanan hidup, setiap anak harus mengenal identitas dirinya dan alamat tempat tinggalnya. Wilayah Indonesia sangat luas. Untuk mencari suatu tempat atau wilayah tertentu harus jelas alamat yang dituju. Sebutkan apa sajakah yang harus tertulis dalam alamat tempat tinggal kita!

‘,
keyHTML:’

Alamat tempat tinggal yang lengkap memuat:

1. Nama jalan
2. Nomor rumah
3. RT dan RW
4. Desa atau kelurahan
5. Kecamatan
6. Kabupaten atau kota
7. Provinsi
8. Kode pos

Kalau kamu menyebut nama jalan, nomor rumah, RT/RW, desa/kelurahan, kecamatan, kabupaten/kota, dan provinsi, jawabanmu sudah lengkap.

‘,
keyText:’nama jalan, nomor rumah, RT/RW, desa/kelurahan, kecamatan, kabupaten/kota, provinsi, kode pos’},
{id:14,sec:’ur’,type:’ur’,
text:’

Kita hidup di suatu wilayah yang terdiri dari rukun tetangga maupun rukun warga yang menjadi suatu kesatuan sebuah desa atau kelurahan. Dalam bermasyarakat kita diwajibkan menjalankan kerukunan supaya kenyamanan bersama didapat. Sebutkan 3 akibat kita tidak rukun dalam masyarakat!

‘,
keyHTML:’

Contoh jawaban (pilih 3 saja sudah benar):

1. Sering terjadi pertengkaran dan perselisihan antarwarga.
2. Lingkungan menjadi tidak nyaman dan tidak aman.
3. Warga sulit bekerja sama dan bergotong royong.
4. Warga saling curiga, terpecah belah, dan tidak bersatu.
5. Kegiatan bersama, seperti kerja bakti dan ronda, sulit dilaksanakan.

‘,
keyText:’3 dari: sering bertengkar, lingkungan tidak nyaman/aman, sulit bekerja sama, warga terpecah belah, kegiatan bersama sulit dilaksanakan’},
{id:15,sec:’ur’,type:’ur’,
text:’

Denah merupakan gambaran dalam skala kecil suatu tempat untuk diketahui. Dalam denah akan dibantu dengan penunjuk arah yang dinamakan arah mata angin. Arah mata angin tersebut akan membantu menyebutkan letak bangunan dalam sebuah tempat. Gambarkan dan sebutkan 8 arah mata angin tersebut!

Tips: gambar kompasmu di kertas, lalu ketik nama kedelapan arahnya di kotak jawaban.

‘,
keyHTML:’

Delapan arah mata angin (utara di atas, timur di kanan):

• U = Utara
• TL = Timur Laut
• T = Timur
• TG = Tenggara
• S = Selatan
• BD = Barat Daya
• B = Barat
• BL = Barat Laut

Urutan searah jarum jam dari atas: utara, timur laut, timur, tenggara, selatan, barat daya, barat, barat laut.

‘,
keyText:’utara, timur laut, timur, tenggara, selatan, barat daya, barat, barat laut (digambar sebagai kompas)’}
];

var state;
function reset(){state={ans:{},checked:{},res:{},self:{}};}
reset();

function $(id){return document.getElementById(id);}
function qById(id){return Q.filter(function(q){return q.id===id;})[0];}

function isAnswered(q){
var a=state.ans[q.id];
if(q.type===’pg’)return !!a;
if(q.type===’pgk’)return !!(a&&a.length);
return !!(a&&a.trim().length);
}
function isCorrect(q){
var a=state.ans[q.id];
if(q.type===’pg’)return a===q.answer;
if(q.type===’pgk’)return !!a&&a.slice().sort().join(”)===q.answer.slice().sort().join(”);
if(q.type===’ut’)return !!a&&q.match.test(a);
return false;
}
function answerText(q){
if(q.type===’pg’)return q.answer+’. ‘+q.opts[LET.indexOf(q.answer)];
if(q.type===’pgk’)return q.answer.map(function(l){return l+’. ‘+q.opts[LET.indexOf(l)];}).join(‘ dan ‘);
return q.keyText;
}

function updateProgress(){
var n=Q.filter(isAnswered).length;
$(‘progText’).textContent=’Terjawab ‘+n+’ dari ‘+Q.length;
var pct=Math.round(n/Q.length*100);
$(‘progPct’).textContent=pct+’%’;
$(‘progFill’).style.width=pct+’%’;
}

function render(){
var root=$(‘soal’);
root.innerHTML=”;
SECTIONS.forEach(function(sec){
var s=document.createElement(‘section’);
s.className=’sec’;
s.innerHTML=’

‘+sec.title+’

‘+sec.hint+’

‘;
Q.filter(function(q){return q.sec===sec.key;}).forEach(function(q){s.appendChild(buildQ(q));});
root.appendChild(s);
});
updateProgress();
}

function buildQ(q){
var art=document.createElement(‘article’);
art.className=’q’;
art.id=’q’+q.id;
var h=’

‘;
h+=’

‘;
h+=’

‘;
art.innerHTML=h;

var btn=art.querySelector(‘.btn-check’);
art.addEventListener(‘input’,function(e){
var t=e.target;
if(state.checked[q.id])return;
if(t.type===’radio’){
state.ans[q.id]=t.value;
art.querySelectorAll(‘.opt’).forEach(function(l){l.classList.toggle(‘sel’,l.querySelector(‘input’).checked);});
}else if(t.type===’checkbox’){
var arr=[];
art.querySelectorAll(‘input[type=checkbox]’).forEach(function(c){if(c.checked)arr.push(c.value);});
state.ans[q.id]=arr;
art.querySelectorAll(‘.opt’).forEach(function(l){l.classList.toggle(‘sel’,l.querySelector(‘input’).checked);});
}else{
state.ans[q.id]=t.value;
}
btn.disabled=!isAnswered(q);
updateProgress();
});
btn.addEventListener(‘click’,function(){check(q);});
return art;
}

function lock(art){
art.querySelectorAll(‘input,textarea’).forEach(function(i){i.disabled=true;});
art.querySelectorAll(‘.opt’).forEach(function(l){l.classList.add(‘locked’);});
art.querySelector(‘.btn-check’).disabled=true;
}

function fillCompass(art){
var box=art.querySelector(‘#compassBox’);
if(box)box.innerHTML=compassSVG();
}

function check(q){
if(state.checked[q.id])return;
state.checked[q.id]=true;
var art=$(‘q’+q.id);
lock(art);
var fb=art.querySelector(‘.fb’);

if(q.type===’ur’){
fb.className=’fb key show’;
fb.innerHTML=’Kunci jawaban‘+q.keyHTML
+’

‘;
fillCompass(art);
fb.querySelectorAll(‘.selfmark button’).forEach(function(b){
b.addEventListener(‘click’,function(){
state.self[q.id]=b.getAttribute(‘data-v’)===’1′;
var box=$(‘sm’+q.id);
box.outerHTML=’

‘;
});
});
return;
}

var ok=isCorrect(q);
state.res[q.id]=ok;
if(q.type===’pg’||q.type===’pgk’){
art.querySelectorAll(‘.opt’).forEach(function(l){
var inp=l.querySelector(‘input’);
var isAns=(q.type===’pg’?q.answer===inp.value:q.answer.indexOf(inp.value)>-1);
if(isAns)l.classList.add(‘is-correct’);
else if(inp.checked)l.classList.add(‘is-wrong’);
});
}
fb.className=’fb show ‘+(ok?’ok’:’bad’);
fb.innerHTML=’‘+(ok?’Benar! 🎉’:’Belum tepat.’)+’‘
+(ok?”:’

Jawaban yang benar: ‘+answerText(q)+’

‘)
+’

‘+q.why+’

‘;
}

function finish(){
Q.forEach(function(q){
if(q.type!==’ur’&&!state.checked[q.id]&&isAnswered(q))check(q);
});
var sc={pg:0,pgk:0,ut:0,ur:0},tot={pg:0,pgk:0,ut:0,ur:0},total=0,review=[];
Q.forEach(function(q){
tot[q.sec]++;
var good=(q.type===’ur’)?state.self[q.id]===true:state.res[q.id]===true;
if(good){sc[q.sec]++;total++;}else review.push(q.id);
});
var nilai=Math.round(total/Q.length*100);
var nama=$(‘nama’).value.trim();
var msg=nilai>=80?’Hebat sekali! Kamu sudah paham materinya.’:(nilai>=60?’Bagus! Sedikit lagi, coba ulangi soal yang belum tepat.’:’Ayo belajar lagi. Baca pembahasan tiap soal, lalu coba ulangi. Kamu pasti bisa!’);
var r=$(‘result’);
var names={pg:’Pilihan Ganda’,pgk:’Pilihan Ganda Kompleks’,ut:’Uraian Terbatas’,ur:’Uraian Terbuka (dinilai sendiri)’};
var h=’

‘+(nama?’Hasil latihan ‘+escapeHtml(nama):’Hasil latihanmu’)+’

‘
+’

‘
+’

‘+msg+’

‘;
Object.keys(names).forEach(function(k){h+=’
• ‘+names[k]+’‘+sc[k]+’ / ‘+tot[k]+’

‘;});
h+=’

‘;
if(review.length){
h+=’

Soal yang perlu dipelajari lagi: ‘+review.map(function(n){return ‘No. ‘+n+’‘;}).join(‘, ‘)+’

‘;
}else{
h+=’

Semua soal benar. Luar biasa! 🌟

‘;
}
h+=’

‘;
r.innerHTML=h;
r.className=’result show’;
$(‘btnReset’).addEventListener(‘click’,function(){
reset();render();
r.className=’result’;r.innerHTML=”;
$(‘kunci’).className=’kunci’;
window.scrollTo({top:0});
});
r.scrollIntoView({behavior:’smooth’,block:’start’});
}

function escapeHtml(s){return s.replace(/[&”‘]/g,function(c){return {‘&’:’&’,”:’>’,’”‘:’"’,”‘”:’'’}[c];});}

function showKey(){
var k=$(‘kunci’);
if(k.classList.contains(‘show’)){k.className=’kunci’;$(‘btnKey’).textContent=’Lihat semua kunci jawaban’;return;}
var h=’

Kunci Jawaban

Nomor 4 dan 8 mengikuti gambar yang dibuat ulang di halaman ini. Bila gambar di lembar asli berbeda, sesuaikan kuncinya.

‘;
k.innerHTML=h;
k.querySelectorAll(‘.compassKey’).forEach(function(b){b.innerHTML=compassSVG();});
k.className=’kunci show’;
$(‘btnKey’).textContent=’Sembunyikan kunci jawaban’;
k.scrollIntoView({behavior:’smooth’,block:’start’});
}

$(‘btnFinish’).addEventListener(‘click’,finish);
$(‘btnKey’).addEventListener(‘click’,showKey);
render();
})();