Pertemuan#05 - Membuat sebuah soal pecahan berikut gambar pecahan untuk soal dan jawaban
- Bagian pendukung :
- Mendapatkan sebuah angka acak
function RandomAngkaAtoB(a,b){
var r = a+Math.ceil(Math.random() * b);
return r;
}
- 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
}
- Mendapatkan nomor urut jawaban benar
function NoJawabanBenar(Arr, jwb){
for (var i=0; i<Arr.length; i++){
if (Arr[i]==jwb){
return i;
break;
}
}
}
- Mendapatkan huruf jawaban
function GetABCD(no){
var ABCD = ["A","B","C","D"]
return ABCD[no]
}
- Mendapatkan Data soal
function MyFungsi5(){
do{
var a1 = RandomAngkaAtoB(3,10);
var a2 = RandomAngkaAtoB(3,9);
var b1 = RandomAngkaAtoB(0,5);
var b2 = RandomAngkaAtoB(0,5);
var aafix1 = a2;
var aafix2 = a1;
var aafix3 = a1*b2-a2*b1;
}while(aafix3<1 || b1==b2**2 || b1==b2)
var benar = [a1,a2,b1,b2,"–",aafix1,"+",aafix2,"–",aafix3];
var salah1 = [a1,a2,b1,b2,"–",aafix1,"+",aafix2,"+",aafix3];
var salah2 = [a1,a2,b1,b2,"–",aafix1,"–",aafix2,"+",aafix3];
var salah3 = [a1,a2,b1,b2,"–",aafix1,"–",aafix2,"–",aafix3];
var salah4 = [a1,a2,b1,b2,"+",aafix1,"+",aafix2,"–",aafix3];
var salah5 = [a1,a2,b1,b2,"+",aafix1,"–",aafix2,"+",aafix3];
arrsalah = [salah1,salah2,salah3,salah4,salah5];
arrsalah = RandomMyArray(arrsalah);
return [a1,a2,b1,b2,benar,arrsalah];
}
- Memasukkan gambar ke canvas
function Gambar5(nmcanvas,ss,arr,ar1,ar2,ar3,ar4){
const canvas = document.getElementById(nmcanvas);
const ctx = canvas.getContext("2d");
// menambahkan image pada canvas //
let base0_image = new Image();
let base1_image = new Image();
base0_image.src = "Gambar5-0.png";
base1_image.src = "Gambar5-0abcd.png";
base0_image.onload = function () {
ctx.drawImage(base0_image, 0, 0,base0_image.width, base0_image.height);
base1_image.onload = function () {
var Abjad = ["A","B","C","D"];
for(var i=0;i<4;i++){
var yy = 110+50*i;
ctx.drawImage(base1_image, 0, yy,base1_image.width, base1_image.height);
ctx.font = "16px Times New Roman";
ctx.textAlign = "left";
ctx.fillText(Abjad[i],0,yy+30);
}
InsertText(arr);
}
}
function InsertText(arr){
ctx.font = "16px Times New Roman";
ctx.textAlign = "left";
ctx.fillText(ss,0,80);
ctx.textAlign = "center";
ctx.fillText(arr[0],35,15);
ctx.fillText("x² \u2212 "+arr[2],35,40);
ctx.fillText(arr[1],125,15);
ctx.fillText("x \u2212 "+arr[3],125,40);
var Abjad = ["A","B","C","D"];
var arrPil = [ar1,ar2,ar3,ar4]
var ynext = 90;
for(i=0;i<4;i++){
ctx.font = "16px Times New Roman";
ctx.textAlign = "center";
//mengubah min jadi simbol min
if(arrPil[i][4]=="–") ctx.fillText(arrPil[i][4]+""+arrPil[i][5]+"x² "+arrPil[i][6]+" "+arrPil[i][7]+"x "+arrPil[i][8]+" "+arrPil[i][9],100,ynext+50*i+40);
else ctx.fillText(""+arrPil[i][5]+"x² "+arrPil[i][6]+" "+arrPil[i][7]+"x "+arrPil[i][8]+" "+arrPil[i][9],100,ynext+50*i+40);
ctx.fillText("(x² \u2212 "+arrPil[i][2]+")(x \u2212 "+arrPil[i][3]+")",100,ynext+50*i+65);
}
}
return 0;
}
-------------------------------------------
- Bagian utama :
- Program Utama
function GetSoal5(){
const MyData = MyFungsi5();
//[a1,a2,b1,b2,benar,arrsalah];
var a1=MyData[0];
var a2=MyData[1];
var b1=MyData[2];
var b2=MyData[3];
var benar=MyData[4];
var arrsalah=MyData[5];
var Ar = [];
Ar[0] = benar;
Ar[1] = arrsalah[0];
Ar[2] = arrsalah[1];
Ar[3] = arrsalah[2];
var ss
//15. Tentukan bentuk sederhana dari (8 / x^2-4) - (2 / x-1) !
ss = "Tentukan bentuk sederhana dari bentuk aljabar di atas! ";
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));
const soal = Gambar5("myCanvas5",ss,[a1,a2,b1,b2],Ar[0],Ar[1],Ar[2],Ar[3]);
return ArFix;
}
- Menyiapkan canvas untuk gambar
<canvas id="myCanvas5" width="400" height="320" style="border:0px solid grey;"> </canvas>
- Mencetak soal
var ss
ss = GetSoal5();
document.write("<br>"+"Jawaban : "+ss[1]+"<br>");
-------------------------------------------