Code 3 - Untuk teks di atas gambar

Pertemuan#03 - Membuat sebuah soal bangun ruang untuk mencari luas permukaan bangun ruang berikut gambar ilustrasi

  1. Bagian pendukung :
    1. Mendapatkan sebuah angka acak
function RandomAngkaAtoB(a,b){ var r = a+Math.ceil(Math.random() * b); return r; }
    1. Mengacak isi sebuah array
function RandomMyArray(Arr){ for (var i=0; i<Arr.length; i++){ var r = Math.floor(Math.random() * Arr.length); var a = Arr[i]; Arr[i] = Arr[r]; Arr[r] = a; } return Arr }
    1. Mendapatkan nomor urut jawaban benar
function NoJawabanBenar(Arr, jwb){ for (var i=0; i<Arr.length; i++){ if (Arr[i]==jwb){ return i; break; } } }
    1. Mendapatkan huruf jawaban
function GetABCD(no){ var ABCD = ["A","B","C","D"] return ABCD[no] }
    1. Memecah n-digit angka menjadi array
function SplitString(ff){ var gg = new Array(); var strff = ""+ff; var len = strff.length; for (var i=0; i<len; i++){ gg.push(strff.substr(i,1)); } return gg; }
    1. Membuat angka ribuan menjadi ada titik seperti 1234 menjadi 1.234
function StringRibuan(str){ var strfix = ""; var arfix = new Array(); var StrArray = SplitString(str); for (var i=0; i<StrArray.length; i++){ arfix.push(StrArray[i]); } var ct = 0; var m = 0; var n = 0; var ctmax = StrArray.length; var arct = new Array(); for (var i=StrArray.length-1; i>=0; i--){ ct++; ctmax--; if(ct==3){ ct = 0; m++; arct.push(3); } } var n = StrArray.length - 3*arct.length; var iter=-1; strfix=""; for (var i=0; i<n; i++){ iter++; strfix += arfix[iter]; } if (n>0) strfix += "."; for (var i=0; i<m; i++){ for (j=0; j<3; j++){ iter++; strfix += arfix[iter]; } strfix += "."; } var leng = strfix.length; strfix = strfix.substr(0, leng-1); return strfix }
    1. Mendapatkan Data soal
function MyFungsi3(){ var pyth = [[4,3,5],[12,5,13],[6,8,10],[24,7,25],[8,15,17]]; var pil = RandomAngkaAtoB(-1,5); var dd = RandomAngkaAtoB(2,9); var aa = dd+pyth[pil][0]; do{ var bb = RandomAngkaAtoB(2,4); var cc = pyth[pil][2]; var tt = pyth[pil][1]; }while(bb==cc); var luas = 2*(aa+dd)/2*tt + dd*bb + aa*bb + bb*cc + bb*tt; var luas1 = (aa+dd)/2*tt + dd*bb + aa*bb + bb*cc + bb*tt; var luas2 = 2*(aa+dd)/2*tt + dd*bb + aa*bb + bb*cc; var luas3 = 2*(aa+dd)/2*tt + dd*bb + aa*bb + bb*tt; var luas4 = 2*(aa+dd)*tt + dd*bb + aa*bb + bb*cc + bb*tt; var ArSisi = [aa,bb,cc,dd]; var benar = luas; var salah1 = luas1; var salah2 = luas2; var salah3 = luas3; var salah4 = luas4; var arrSalah = [salah1,salah2,salah3,salah4]; arrSalah = RandomMyArray(arrSalah); return [ArSisi,benar,arrSalah]; }
    1. Memasukkan gambar ke canvas
function Gambar3(nmcanvas,Arr){ const canvas = document.getElementById(nmcanvas); const ctx = canvas.getContext("2d"); // menambahkan image pada canvas // let base_image = new Image(); base_image.src = "Gambar3.png"; base_image.onload = function () { ctx.drawImage(base_image, 0, 0,base_image.width, base_image.height); InsertText(Arr); } function InsertText(Arr){ ctx.font = "bold 12px Times New Roman"; ctx.textAlign = "center"; ctx.fillText(Arr[0]+" cm",105,190); ctx.fillText(Arr[1]+" cm",225,193); ctx.fillText(Arr[2]+" cm",213,97); ctx.fillText(Arr[3]+" cm",123,30); } return 0; }
-------------------------------------------
  1. Bagian utama :
    1. Program Utama
function GetSoal3(){ const MyData = MyFungsi3(); var ArSisi=MyData[0]; var benar=MyData[1]; var arrSalah=MyData[2]; const DrawPGL = Gambar3("myCanvas3",ArSisi); var ss ss = "Luas permukaan bangun tersebut adalah ... "; var Ar = []; // jawaban Ar[0] = benar; Ar[1] = arrSalah[0]; Ar[2] = arrSalah[1]; Ar[3] = arrSalah[2]; Ar[0] = StringRibuan(Ar[0]); Ar[1] = StringRibuan(Ar[1]); Ar[2] = StringRibuan(Ar[2]); Ar[3] = StringRibuan(Ar[3]); var jawab = Ar[0]; Ar = RandomMyArray(Ar); var noBenar = NoJawabanBenar(Ar, jawab); var textSoal = ss+" <p>A. "+Ar[0]+" cm²<br>B. "+Ar[1]+" cm²<br>C. "+Ar[2]+" cm²<br>D. "+Ar[3]+" cm²</p>"; var ArFix = []; ArFix.push(textSoal); ArFix.push(GetABCD(noBenar)); return ArFix; }
    1. Nomor soal dan kalimat sebelum gambar
document.write("<p>4. Perhatikan bangun prisma trapesium siku-siku berikut!<p>");
    1. Menyiapkan canvas untuk gambar
<canvas id="myCanvas3" width="277" height="215" style="border:0px solid grey;"> </canvas>
    1. Mencetak soal
var ss ss = GetSoal3(); document.write("<p>"+ss[0]+"</p>"); document.write("Jawaban : "+ss[1]);
-------------------------------------------

Code 4 - Untuk beberapa macam kumpulan jawaban

Pertemuan#04 - Membuat sebuah soal himpunan untuk mencari kalimat yang merupakan himpunan

  1. Bagian pendukung :
    1. Mendapatkan sebuah angka acak
function RandomAngkaAtoB(a,b){ var r = a+Math.ceil(Math.random() * b); return r; }
    1. Mengacak isi sebuah array
function RandomMyArray(Arr){ for (var i=0; i<Arr.length; i++){ var r = Math.floor(Math.random() * Arr.length); var a = Arr[i]; Arr[i] = Arr[r]; Arr[r] = a; } return Arr }
    1. Mendapatkan nomor urut jawaban benar
function NoJawabanBenar(Arr, jwb){ for (var i=0; i<Arr.length; i++){ if (Arr[i]==jwb){ return i; break; } } }
    1. Mendapatkan huruf jawaban
function GetABCD(no){ var ABCD = ["A","B","C","D"] return ABCD[no] }
    1. Mendapatkan Data soal
function MyFungsi4(){ //Kumpulan-kumpulan berikut ini yang merupakan himpunan adalah ... //jawaban: berparas cantik/berkacamata/berbadan pendek/berbadan tinggi var arr0 = ["Kumpulan siswi berkacamata","Kumpulan siswi cantik","Kumpulan siswi berbadan pendek","Kumpulan siswi berbadan tinggi"]; var arr1 = ["Kumpulan buku berwarna merah","Kumpulan buku tebal","Kumpulan buku tipis","Kumpulan buku bagus"]; var arr2 = ["Kumpulan bilangan prima","Kumpulan bilangan besar","Kumpulan bilangan kecil","Kumpulan bilangan penting"]; var arr=[arr0,arr1,arr2]; var a1,a2,a3,a4,a5; a1 = RandomAngkaAtoB(-1,3); var benar = arr[a1][0]; var salah1 = arr[a1][1]; var salah2 = arr[a1][2]; var salah3 = arr[a1][3]; var arrSalah = [salah1,salah2,salah3]; return [a1,benar,arrSalah]; }
-------------------------------------------
  1. Bagian utama :
    1. Program Utama
function GetSoal1(){ const MyData = MyFungsi4(); //[a0,a1,a2,a3,benar,arrSalah]; var a0=MyData[0]; var a1=MyData[1]; var a2=MyData[2]; var a3=MyData[3]; var benar=MyData[4]; var arrSalah=MyData[5]; //1. Sekelompok siswa terdiri dari 25 orang. //Terdapat 14 orang gemar berenang, //15 orang gemar sepakbola, //dan yang tidak gemar keduanya 5 orang. //Banyak siswa yang gemar keduanya adalah ... var Ekskul = NamaEkskul(); var ss ss = "Sekelompok siswa terdiri dari "+a0+" orang. "; ss += "Terdapat "+a1+" orang gemar "+Ekskul[0]+", "; ss += ""+a2+" orang gemar "+Ekskul[1]+", "; ss += "dan yang tidak gemar keduanya "+a3+" orang. "; ss += "Banyak siswa yang gemar keduanya adalah ... "; var Ar = []; // jawaban Ar[0] = benar; Ar[1] = arrSalah[0]; Ar[2] = arrSalah[1]; Ar[3] = arrSalah[2]; var jawab = Ar[0]; Ar = RandomMyArray(Ar); var noBenar = NoJawabanBenar(Ar, jawab); var textSoal = ss+" <p>A. "+Ar[0]+"<br>B. "+Ar[1]+"<br>C. "+Ar[2]+"<br>D. "+Ar[3]+"</p>"; var ArFix = []; ArFix.push(textSoal); ArFix.push(GetABCD(noBenar)); return ArFix; }
    1. Mencetak soal
var ss ss = GetSoal4(); document.write("<p>"+ss[0]+"</p>"); document.write("Jawaban : "+ss[1]);
-------------------------------------------

Code 2 - Untuk teks dan gambar

Pertemuan#02 - Membuat sebuah soal lingkaran untuk mencari keliling persegi berikut gambar ilustrasi

  1. Bagian pendukung :
    1. Mendapatkan sebuah angka acak
function RandomAngkaAtoB(a,b){ var r = a+Math.ceil(Math.random() * b); return r; }
    1. Mengacak isi sebuah array
function RandomMyArray(Arr){ for (var i=0; i<Arr.length; i++){ var r = Math.floor(Math.random() * Arr.length); var a = Arr[i]; Arr[i] = Arr[r]; Arr[r] = a; } return Arr }
    1. Mendapatkan nomor urut jawaban benar
function NoJawabanBenar(Arr, jwb){ for (var i=0; i<Arr.length; i++){ if (Arr[i]==jwb){ return i; break; } } }
    1. Mendapatkan huruf jawaban
function GetABCD(no){ var ABCD = ["A","B","C","D"] return ABCD[no] }
    1. Mendapatkan Data soal
function MyFungsi2(){ var dia = 14*RandomAngkaAtoB(0,4); var kelO = 22/7*dia; var kel1 = dia*4; var kel2 = dia*2; var kel3 = dia/2; var kel4 = dia; var kel5 = dia/2; var kel6 = dia*8; var ArSisi = [kelO]; var benar = kel1; var salah1 = kel2; var salah2 = kel3; var salah3 = kel4; var salah4 = kel5; var salah5 = kel6; var arrSalah = [salah1,salah2,salah3,salah4,salah5]; do{ arrSalah = RandomMyArray(arrSalah); var ff1 = arrSalah[0]==benar || arrSalah[1]==benar || arrSalah[2]==benar; var ff2 = arrSalah[0]==arrSalah[1] || arrSalah[0]==arrSalah[2]; var ff3 = arrSalah[1]==arrSalah[2]; }while(ff1 || ff2 || ff3); return [ArSisi,benar,arrSalah]; }
    1. Memasukkan gambar ke canvas
function Gambar2(nmcanvas,Arr){ const canvas = document.getElementById(nmcanvas); const ctx = canvas.getContext("2d"); // menambahkan image pada canvas // let base_image = new Image(); base_image.src = "Gambar2.png"; base_image.onload = function () { ctx.drawImage(base_image, 0, 0,base_image.width, base_image.height); } return 0; }
-------------------------------------------
  1. Bagian utama :
    1. Program Utama
function GetSoal2(){ const MyData = MyFungsi2(); var ArSisi=MyData[0]; var benar=MyData[1]; var arrSalah=MyData[2]; const DrawPGL = Gambar2("myCanvas2",ArSisi); var ss ss = "Perhatikan gambar! <br>"; ss += "Keempat sisi persegi disinggung oleh sebuah lingkaran seperti gambar. <br>" ss += "Jika keliling lingkaran "+ArSisi[0]+" cm, maka keliling persegi adalah ..."; var Ar = []; // jawaban Ar[0] = benar; Ar[1] = arrSalah[0]; Ar[2] = arrSalah[1]; Ar[3] = arrSalah[2]; Ar[0] = StringRibuan(Ar[0]); Ar[1] = StringRibuan(Ar[1]); Ar[2] = StringRibuan(Ar[2]); Ar[3] = StringRibuan(Ar[3]); var jawab = Ar[0]; Ar = RandomMyArray(Ar); var noBenar = NoJawabanBenar(Ar, jawab); var textSoal = ss+" <p>A. "+Ar[0]+" cm<br>B. "+Ar[1]+" cm<br>C. "+Ar[2]+" cm<br>D. "+Ar[3]+" cm</p>"; var textJawab = jawab+"</p>"; var ArFix = []; ArFix.push(textSoal); ArFix.push(GetABCD(noBenar)); return ArFix; }
    1. Menyiapkan canvas untuk gambar
<canvas id="myCanvas2" width="172" height="170" style="border:0px solid grey;"> </canvas>
    1. Mencetak soal
var ss ss = GetSoal2(); document.write("<p>"+ss[0]+"</p>"); document.write("Jawaban : "+ss[1]);
-------------------------------------------

Code 1 - Untuk teks saja

Pertemuan#01 - Membuat sebuah soal himpunan untuk mencari banyak siswa yang gemar kedua ekstrakulikuler

  1. Bagian pendukung :
    1. Mendapatkan sebuah angka acak
function RandomAngkaAtoB(a,b){ var r = a+Math.ceil(Math.random() * b); return r; }
    1. Mengacak isi sebuah array
function RandomMyArray(Arr){ for (var i=0; i<Arr.length; i++){ var r = Math.floor(Math.random() * Arr.length); var a = Arr[i]; Arr[i] = Arr[r]; Arr[r] = a; } return Arr }
    1. Mendapatkan nomor urut jawaban benar
function NoJawabanBenar(Arr, jwb){ for (var i=0; i<Arr.length; i++){ if (Arr[i]==jwb){ return i; break; } } }
    1. Mendapatkan huruf jawaban
function GetABCD(no){ var ABCD = ["A","B","C","D"] return ABCD[no] }
    1. Mendapatkan nama ekskul acak
function NamaEkskul(){ var Ekskul = ["berenang", "sepakbola", "pencak silat", "komputer", "bola voli", "bola basket", "panahan", "pramuka", "catur", "menari", "PMR"]; Ekskul = RandomMyArray(Ekskul); return Ekskul; }
    1. Mendapatkan Data soal
function MyFungsi1(){ //1. Sekelompok siswa terdiri dari 25 orang. //Terdapat 14 orang gemar berenang, //15 orang gemar sepakbola, //dan yang tidak gemar keduanya 5 orang. //Banyak siswa yang gemar keduanya adalah ... var a0,a1,a2,a3,a4,a5; var arDari = ["≤","≥"]; arDari = RandomMyArray(arDari); do{ a0 = 25; a1 = RandomAngkaAtoB(10,6); a2 = RandomAngkaAtoB(10,6); a3 = RandomAngkaAtoB(2,9); a4 = (a1+a2)-(a0-a3); }while (a1==a2 || a4<3) var soal = a1+"x + "+a2+" "+arDari[0]+" "+a4; var benar = a4; var salah1 = a4+1; var salah2 = a4+2; var salah3 = a4+3; var salah4 = a4-1; var salah5 = a4-2; var salah6 = a4-3; var arrSalah = [salah1,salah2,salah3,salah4,salah5,salah6]; arrSalah = RandomMyArray(arrSalah); return [a0,a1,a2,a3,benar,arrSalah]; }
-------------------------------------------
  1. Bagian utama :
    1. Program Utama
function GetSoal1(){ const MyData = MyFungsi1(); //[a0,a1,a2,a3,benar,arrSalah]; var a0=MyData[0]; var a1=MyData[1]; var a2=MyData[2]; var a3=MyData[3]; var benar=MyData[4]; var arrSalah=MyData[5]; //1. Sekelompok siswa terdiri dari 25 orang. //Terdapat 14 orang gemar berenang, //15 orang gemar sepakbola, //dan yang tidak gemar keduanya 5 orang. //Banyak siswa yang gemar keduanya adalah ... var Ekskul = NamaEkskul(); var ss ss = "Sekelompok siswa terdiri dari "+a0+" orang. "; ss += "Terdapat "+a1+" orang gemar "+Ekskul[0]+", "; ss += ""+a2+" orang gemar "+Ekskul[1]+", "; ss += "dan yang tidak gemar keduanya "+a3+" orang. "; ss += "Banyak siswa yang gemar keduanya adalah ... "; var Ar = []; // jawaban Ar[0] = benar; Ar[1] = arrSalah[0]; Ar[2] = arrSalah[1]; Ar[3] = arrSalah[2]; var jawab = Ar[0]; Ar = RandomMyArray(Ar); var noBenar = NoJawabanBenar(Ar, jawab); var textSoal = ss+" <p>A. "+Ar[0]+"<br>B. "+Ar[1]+"<br>C. "+Ar[2]+"<br>D. "+Ar[3]+"</p>"; var ArFix = []; ArFix.push(textSoal); ArFix.push(GetABCD(noBenar)); return ArFix; }
    1. Mencetak soal
var ss ss = GetSoal1(); document.write("<p>"+ss[0]+"</p>"); document.write("Jawaban : "+ss[1]);
-------------------------------------------

Coding Html

Berisi coding html yang bisa kalian coba sendiri.

Saat ini ada 4 tipe :
  1. Tipe 1 - acak angka link
  2. Tipe 2 - gambar saja link
  3. Tipe 3 - gambar dan angka link
  4. Tipe 4 - acak data soal link

Untuk formatnya ada 2 Model yang bisa digunakan :

  1. Model 1: Menggunakan teks saja
<!DOCTYPE html> <html> <head> <script type="text/javascript"> (Pendukung) </script> </head> <body> <div id="NamaId"> <script type="text/javascript"> (Utama) </script> <script type="text/javascript"> (Cetak) </script> </div> </body> </html>
  1. Model 2: Menggunakan gambar
<!DOCTYPE html> <html> <head> <script type="text/javascript"> (Pendukung) </script> </head> <body> <div id="NamaId"> <script type="text/javascript"> (Utama) </script> <canvas id="NamaCanvas" width="999" height="999" style="border:0px solid grey;"> </canvas> <script type="text/javascript"> (Cetak) </script> </div> </body> </html>
Semoga bermanfaat

Tentang

Versi : 1.1

Tahun : 2025

Programmer : Galih Widosamodra, S.Si

Email : Galih.Widosamodra@gmail.com

Lain-Lain

Link Video Pembahasan

Berisi link video pembahasan dari materi di blog ini.

Tingkat SD

Tingkat SMP

Tingkat SMA

Soal Ujian

Berisi link soal ujian.

Kelas 4 SD :

Kelas 6 SD :

Kelas 7 SMP :

Kelas 9

Kelas 8

Berisi link soal Matematika Kelas 8.

Materi :

Soal dan pembahasan.

Bab 1 :

Bab 2 :

Bab 3 :

Kelas 7

Kelas 6

Kelas 5

Kelas 4

Kelas 3

Beranda

Blog ini kami buat untuk menampung soal-soal latihan matematika. Fungsi dari soal-soal tersebut adalah untuk bahan latihan bagi yang membutuhkan, seperti bahan ajar guru privat online, atau untuk siswa yang ingin berlatih sendiri (otodidak).

Saat ini ada dua tipe soal. Pertama adalah soal dinamis, yaitu soal yang bisa acak/random angka, gambar, pilihan jawaban, dan disertai dengan kunci jawaban. Kedua adalah soal statis, yaitu soal tetap yang disertai dengan pembahasan.

Semoga bermanfaat

SoulMathOnline

5 Soal dan Pembahasan Isian Persamaan dan Pertidaksamaan Linier Satu Variabel

Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
PEMBAHASAN

Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
PEMBAHASAN

Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
PEMBAHASAN

Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
PEMBAHASAN

Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.
PEMBAHASAN

Silahkan tekan judul untuk melihat soal.
Silahkan tekan judul untuk melihat soal.