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]);
-------------------------------------------