Membuat Kuis Interaktif Dengan Flash 8.0
PENDAHULUAN
Dalam modul sederhana ini, materi yang dibahas adalah script yang dipergunakan dalam pembuatan aplikasi kuis dengan software MM Flash. Untuk kesempatan yang pertama ini, pembahasan dibatasi hanya membahas alur pemrograman aplikasi kuis secara garis besar. Pada kesempatan yang lain, pembuatan aplikasi kuis akan dibahas secara terperinci dan lebih detail, disertai contoh-contoh sederhana untuk menjelaskan logika script.Proses pembuatan aplikasi kuis ini dibagi menjadi 6 tahap.
Tahap I.
Membangun logika program dan memahami daftar soal yang berstruktur xml
Tahap II.
Menyusun array daftar soal yang acak
Tahap III.
Menampilkan soal, gambar, dan pilihan jawaban dengan animasi script
Tahap IV.
Memakai penghitung waktu
Tahap V.
Membuat fungsi pemeriksa pilihan jawaban
Tahap VI.
Menyusun semua fungsi dalam satu aplikasi kuis dan membuat preloadernya
Sebagaimana layaknya membuat suatu aplikasi atau program yang menggunakan bahasa VB, C, Delphi, Phyton, dan lain-lain, kita dapat merancang flowchart terlebih dahulu sebagai tahap awal pengerjaan, sehingga nantinya dapat memudahkan kita dalam mengerjakan coding (listing, atau kode program) dan pengembangannya.Adapun flowchart yang kita pakai dalam aplikasi kuis ini adalah sebagai berikut :
TAHAP 1. MEMBACA XML
Dalam contoh aplikasi kuis sederhana ini, digunakan file xml sebagai sumber data soal, untuk menyederhanakan pembahasan. Untuk aplikasi yang lebih kompleks, kita dapat menggunakan aplikasi host (aplikasi desktop seperti VB, atau aplikasi web yang menggunakan bahasa PHP, ASP, dan lain-lain) untuk menghubungkan flash dengan source data soal yang tersimpan di dalam database (MS SQL, mysql, MS Access .mdb, dan lain-lain). Contoh file xml yang kita pakai di dalam kuis ini dapat dilihat pada link berikut ini :
Dengan kedalaman maksimum 1637 m, danau Baikal merupakan danau terdalam di dunia. Danau ini terletak di :
images/Gambar01.jpg
A
Siberia, Rusia
Andez, Chili
Greenland, Kanada
Buku peta
Kilimanjaro, Afrika
Peta ini menunjukkan dua rute imigrasi dari benua Asia ke Amerika pada zaman es, dimana permukaan laut yang rendah memungkinkan dilakukannya perjalanan darat antar dua benua tersebut. Masa itu berlangsung pada :
images/Gambar02.jpg
B
130 juta s/d 100 juta tahun yang lalu
23000 s/d 19000 tahun yang lalu
10000 s/d 8000 tahun yang lalu
2500 s/d 1500 tahun yang lalu
Kemaren sore waktu tukang es lewat
Ini adalah kucing pertama hasil percobaan teknologi kloning di sebuah universitas di Texas. Kucing ini kemudian diberi nama "CC", yang merupakan singkatan dari :
images/Gambar03.jpg
C
Cell Clone
College Cat
Carbon Copy
Cewek Cakep
Ching Ching
Foto ini menunjukkan para ilmuwan yang sedang mempersiapkan Challenger Deep, untuk meneliti palung terdalam di dunia, yang memiliki kedalaman lebih dari 11 km, yaitu :
images/Gambar04.jpg
D
Palung Jawa
Palung Liberty
Palung Atlantis
Palung Mariana
Palung Philipina
Garis berwarna coklat pada peta ini menunjukkan bentuk pertama dari Tembok Besar China yang dibangun pada masa Dynasti Qin, yang memerintah pada :
images/Gambar05.jpg
E
zaman baheula
1300 M s/d 1500 M
1500 SM s/d 1000 SM
205 SM s/d 265 M
221 SM s/d 206 SM
Script yang kita pergunakan di dalam kuis untuk membaca file xml tersebut adalah :var xmlSoal:XML = new XML();var aDaftarSoal:Array = new Array(); bacaXML(); function bacaXML():Void { xmlSoal.ignoreWhite = true; xmlSoal.onLoad = function(bSukses:Boolean):Void { if (bSukses) { var xnKumpulanSoal:XMLNode = this.firstChild; var nJumlahSoal:Number = xnKumpulanSoal.childNodes.length; for (var i:Number = 0; i
TAHAP 2. MEMPERSIAPKAN ARRAY SOAL UNTUK KUIS
Array daftar soal yang telah dibuat pada waktu proses membaca xml bukanlah array yang akan kita tampilkan dalam kuis.Karena kita menginginkan soal-soal yang ada dalam kuis nanti muncul secara acak, kita memerlukan array lain yang isinya sama dengan array source soal, tetapi urutan itemnya sudah diacak. Karena itu array source soal ini diduplikatkan lagi sebagai array baru, tetapi urutan isinya dibuat secara random.Scriptnya adalah sebagai berikut (Script menyusun Soal Acak): function susunSoal():Void {
aSoal = new Array();
var nJumlahSoal:Number = aDaftarSoal.length;
var aPolaSusunanSoal:Array = ciptakanSusunanAcak(0, nJumlahSoal);
for (var i:Number = 0; i
var nUrutanSoal:Number = Number(aPolaSusunanSoal[i]);
var sPertanyaan:String = aDaftarSoal[nUrutanSoal][0];
aItemSoal.push(sPertanyaan);
var sGambar:String = aDaftarSoal[nUrutanSoal][1];
aItemSoal.push(sGambar);
var sHurufJawaban:String = aDaftarSoal[nUrutanSoal][2].toString();
var nJawaban:Number = sHurufJawaban.charCodeAt(0) - 65;
var sJawaban:String = aDaftarSoal[nUrutanSoal][3][nJawaban].toString();
var nJumlahPilihan:Number = aDaftarSoal[nUrutanSoal][3].length;
var aPolaSusunanJawaban:Array = ciptakanSusunanAcak(0, nJumlahPilihan);
var aSubItemSoal:Array = new Array();
for (var j:Number = 0; j
var sPilihan:String = aDaftarSoal[nUrutanSoal][3][nNomorPilihan].toString();
aSubItemSoal.push(sPilihan);
}
for (var j:Number = 0; j
var sHurufJawabanBaru:String = String.fromCharCode(65 + j);
aItemSoal.push(sHurufJawabanBaru);
break;
}
}
aItemSoal.push(aSubItemSoal);
aSoal.push(aItemSoal);
}
}
Adapun script yang kita gunakan untuk menghasilkan urutan acak tersebut adalah function yang mempunyai nilai return, seperti script berikut ini :function ciptakanSusunanAcak(nAngkaStart:Number, nAngkaFinish:Number):Array {
var nAngka:Number = nAngkaStart;
var nJarakAngka:Number = nAngkaFinish - nAngkaStart;
var aHasilSusunan:Array = new Array();
var aHasilSementara:Array = new Array();
for (var i:Number = 0; i
var bAngkaSudahAda:Boolean = false;
while(!bAngkaSudahAda) {
var nRandom:Number = random(nJarakAngka);
var nItem:Number = nAngka + nRandom;
var sItem:String = "item" + nItem;
if (sHasilSementara.indexOf(sItem) < 0) {
aHasilSementara.push(sItem);
aHasilSusunan.push(nItem);
bAngkaSudahAda = true;
}
}
}
return aHasilSusunan;
}
TAHAP 3. MEMPERSIAPKAN MOVIECLIP
etelah daftar soal siap, kita dapat menampilkannya ke Stage. Untuk itu kita mempersiapkan movieclip-movieclip yang diperlukan dalam Library.Contoh movieclip yang dapat dipakai untuk keperluan ini dapat dilihat dalam file ini
library movieclip.zip
Kita tidak memerlukan movieclip apa-apa di atas Stage. Yang kita perlukan adalah movieclip di dalam Library yang bisa dimanfaatkan secara langsung oleh actionscript. Untuk itu pastikan setiap movieclip yang diperlukan di dalam Library telah memiliki Linkage Identifier yang benar.
Dalam menampilkan soal, ada beberapa hal yang harus kita lakukan. Teks soal dan image gambar harus diletakkan di dalam movieclip, lalu kita harus membuat efek animasi terhadap movieclip tersebut. Hal ini dapat dilihat dari script yang berikut ini :function tampilkanSoal():Void {
buatKotakSoal();
animasiKotakSoal(0);
buatKotakPilihan();
animasiKotakPilihan(0);
BacaFileGambar(aSoal[nNomorSoal][1].toString());
mulaiHitungWaktu();
}
Untuk menampilkan teks pertanyaan atau soal, kita mengambil movieclip yang telah kita persiapkan sebelumnya dari Library, lalu mengisinya dengan teks soal yang kita ambil dari array daftar soal. Scriptnya adalah sebagai berikut :function buatKotakSoal():Void {
var mcSoal:MovieClip = this.attachMovie("lib_Soal", "mcSoal", this.getNextHighestDepth());
mcSoal.tSoal.htmlText = aSoal[nNomorSoal][0];
mcSoal.tNomorSoal.text = "Soal " + (nNomorSoal + 1);
mcSoal._x = -mcSoal._width;
mcSoal._y = 15;
aDaftarObjekAnimasi.push(mcSoal._name);
}
Sedangkan pilihan jawaban ditampilkan dengan script di bawah ini. Perulangan for dilakukan sebanyak jumlah pilihan yang ada. Jumlah pilihan yang ada telah dihitung pada waktu menyusun array soal yang acak.function buatKotakPilihan():Void {
var nJumlahPilihan:Number = aSoal[nNomorSoal][3].length;
for (var i:Number = 0; i
mcPilihan.tPilihan.htmlText = aSoal[nNomorSoal][3][i];
mcPilihan.btnPilihan.onRelease = checkJawaban;
var sAbjadPilihan:String = String.fromCharCode(65 + i);
mcPilihan.tAbjad.text = sAbjadPilihan;
mcPilihan._x = -mcPilihan._width;
mcPilihan._y = 110 + (i * 55);
aDaftarObjekAnimasi.push(mcPilihan._name);
}
}
Untuk meload dan menampilkan gambar, kita menggunakan class MovieClipLoader.Tetapi sebelumnya kita sudah mempersiapkan movieclip yang akan menampung gambar hasil load.Scriptnya adalah sebagai berikut : function persiapkanGambar():Void {
var mcBingkaiGambar:MovieClip = this.attachMovie("lib_BingkaiGambar", "mcBingkaiGambar", this.getNextHighestDepth());
mcBingkaiGambar._x = 310;
mcBingkaiGambar._y = 110;
var mcTempatImage:MovieClip = mcBingkaiGambar.createEmptyMovieClip("TempatImage", mcBingkaiGambar.getNextHighestDepth());
mcTempatImage._x = 10;
mcTempatImage._y = 10;
}
Kita mempersiapkan sebuah fungsi untuk membaca sekaligus menampilkan gambar. Dengan demikian, pada waktu kita memerlukan gambar, kita tinggal memanggil fungsi tersebut.Scriptnya adalah seperti ini : function BacaFileGambar(sFileGambar:String):Void {
if (sFileGambar == "") {
mcBingkaiGambar.tInfoGambar.text = "Tidak Ada Gambar";
return;
}
mclBacaFile.loadClip(sFileGambar, mcBingkaiGambar.TempatImage);
oListenerBacaFile.onLoadProgress = function(mcTarget:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
var nPersen:Number = Math.round((bytesLoaded/bytesTotal) * 100);
mcTarget._parent.tInfoGambar.text = "loading " + nPersen + "%";
};
oListenerBacaFile.onLoadError = function():Void {
mcBingkaiGambar.tInfoGambar.text = "Error pada proses loading file " + sFileGambar;
};
}
Kita menggunakan event onEnterFrame dalam menganimasikan movieclip. Setiap instance movieclip mempunyai event onEnterFrame karena instance movieclip akan meng-inherit semua event, method, dan property dari class MovieClip.Script yang kita gunakan untuk menganimasikan movieclip adalah sebagai berikut :
script animasi movieclip teks soal function animasiKotakSoal(nJenisAnimasi:Number):Void {
if (nJenisAnimasi == 0) {
var nTargetX:Number = 15;
mcSoal.Akselerasi = (mcSoal._width/2) + 20;
mcSoal.onEnterFrame = function():Void {
this._x += this.Akselerasi;
this.Akselerasi /= 2;
if (this._x > nTargetX) {
this._x = nTargetX;
this.onEnterFrame = null;
}
};
} else
if (nJenisAnimasi == 1) {
mcSoal.Akselerasi = 1;
mcSoal.onEnterFrame = function():Void {
this._y -= this.Akselerasi;
this.Akselerasi++;
if (this._y < -this._height) {
var sNamaObjek:String = this._name;
this.removeMovieClip();
updateDaftarObjekAnimasi(sNamaObjek);
}
};
}
}
script animasi movieclip pilihan jawaban function animasiKotakPilihan(nJenisAnimasi:Number):Void {
var nJumlahPilihan:Number = aSoal[nNomorSoal][3].length;
if (nJenisAnimasi == 0) {
var nTargetX:Number = 15;
for (var i:Number = 0; i
mcPilihan.Akselerasi = (mcPilihan._width/2) + 20;
mcPilihan.MulaiAnimasi = (i + 1) * 3;
mcPilihan.hitung = 0;
mcPilihan.onEnterFrame = function():Void {
this.hitung++;
if (this.hitung > this.MulaiAnimasi) {
this._x += this.Akselerasi;
this.Akselerasi /= 2;
if (this._x > nTargetX) {
this._x = nTargetX;
this.onEnterFrame = null;
}
}
};
}
} else
if (nJenisAnimasi == 1) {
for (var i:Number = 0; i
mcPilihan.btnPilihan.enabled = false;
mcPilihan.Akselerasi = 1;
mcPilihan.MulaiAnimasi = (nJumlahPilihan - i) * 3;
mcPilihan.hitung = 0;
mcPilihan.onEnterFrame = function():Void {
this.hitung++;
if (this.hitung > this.MulaiAnimasi) {
this._y += this.Akselerasi;
this.Akselerasi *= 2;
}
if (this._y > Stage.height) {
var sNamaObjek:String = this._name;
this.removeMovieClip();
updateDaftarObjekAnimasi(sNamaObjek);
}
};
}
}
}
Selama aplikasi kuis dijalankan, akan ada movieclip-movieclip yang muncul dan hilang silih berganti. Untuk dapat mengontrol animasi movieclip-movieclip tersebut dengan baik, kita memerlukan suatu daftar yang menyimpan informasi movieclip mana saja yang sedang aktif.Daftar ini berupa array. Tiap-tiap kita meng-create suatu movieclip baru yang akan dianimasikan, kita append identifiernya ke dalam array. Ketika movieclip tersebut sudah di-remove dari Stage, kita hilangkan identifiernya dari array.Scriptnya adalah sebagai berikut :
daftar objek animasi function updateDaftarObjekAnimasi(sNamaObjek:String):Void {
for (var i:Number = 0; i
if (sNamaObjek == sObjekTerdaftar) {
aDaftarObjekAnimasi.splice(i, 1);
break;
}
}
if(aDaftarObjekAnimasi.length == 0) {
buatSoalBaru();
}
}
TAHAP 4. TIMER PENGHITUNG WAKTU
Kita menggunakan penghitung waktu dalam kuis ini sebagai pelengkap, supaya nilai score yang dihasilkan user setelah menjawab kuis tidak terlalu monoton. User yang menjawab kuis dengan tepat dan cepat, akan mendapat score yang lebih tinggi.Untuk itu digunakan syntax setInterval untuk mengaktifkan fungsi penghitung waktu ini.
initialisasi timer function mulaiHitungWaktu():Void {
nInterval = 0;
nWaktu = 0;
updatePenunjukWaktu();
nInterval = setInterval(updatePenunjukWaktu, 1000);
}
Untuk menampilkan timer yang sedang berjalan, sehingga user dapat melihat waktu yang dipakainya dalam menjawab kuis, kita memakai script ini :
script menampilkan timer function updatePenunjukWaktu():Void {
var nMenit:Number = Math.floor(nWaktu/60);
var sMenit:String = nMenit.toString();
var nDetik:Number = nWaktu % 60;
var sDetik:String = "0";
if (nDetik < 10) sDetik += nDetik.toString()
else sDetik = nDetik.toString();
mcSoal.tWaktu.text = sMenit + ":" + sDetik;
nWaktu++;
if (nWaktu > nBatasWaktu) clearInterval(nInterval);
updateAfterEvent();
}
TAHAP 5. MEMERIKSA JAWABAN
Setelah user memilih sebuah jawaban, kita menjalankan fungsi untuk memeriksa jawaban tersebut.Scriptnya adalah seperti ini :
fungsi memeriksa jawaban function checkJawaban():Void {
clearInterval(nInterval);
var mcPilihan:MovieClip = this._parent;
var sPilihan:String = mcPilihan.tAbjad.text.toLowerCase();
var sJawaban:String = aSoal[nNomorSoal][2].toString().toLowerCase();
var nTotalScore:Number = 100;
var nScoreTiapSoal:Number = nTotalScore/aSoal.length;
if (sPilihan == sJawaban) {
nWaktu--;
var nPengurangScore:Number = nWaktu * ((nScoreTiapSoal/2) / nBatasWaktu);
nScore += (nScoreTiapSoal - nPengurangScore);
taruhSimbol(mcPilihan, 1);
} else {
taruhSimbol(mcPilihan, 0);
var mcPilihanBenar:MovieClip = cariPilihanBenar();
taruhSimbol(mcPilihanBenar, 2);
}
}
Movieclip yang benar yang seharusnya dipilih oleh user, didapatkan dengan script berikut ini :
mendapatkan jawaban yang benar function cariPilihanBenar():MovieClip {
var sJawaban:String = aSoal[nNomorSoal][2].toString().toLowerCase();
var nJumlahPilihan:Number = aSoal[nNomorSoal][3].length;
for (var i:Number = 0; i
var sPilihan:String = mcPilihan.tAbjad.text.toLowerCase();
if (sPilihan == sJawaban) {
return mcPilihan;
}
}
}
Untuk menunjukkan pada user pilihan yang benar dan yang salah kita menampilkan movieclip-movieclip yang menggambarkan simbol benar dan salah.
menampilkan simbol benar dan salahfunction taruhSimbol(mcTarget:MovieClip, nJenisSimbol:Number):Void {
var sNamaSimbol:String;
if (nJenisSimbol == 0) sNamaSimbol = "lib_SimbolSalah"
else if (nJenisSimbol == 1) sNamaSimbol = "lib_SimbolBenar"
else if (nJenisSimbol == 2) sNamaSimbol = "lib_SimbolTunjukYangBenar";
mcTarget.attachMovie(sNamaSimbol, "mcSimbol" + nJenisSimbol, mcTarget.getNextHighestDepth());
}
TAHAP VI. TAHAP AKHIR
Setelah semua soal selesai dijawab, aplikasi kuis akan menampilkan window berisi hasil nilai score kuis, dengan script sederhana berikut ini : menampilkan hasil function tampilkanHasil():Void {
var mcWindowHasil:MovieClip = this.attachMovie("lib_WindowHasil", "mcWindowHasil", this.getNextHighestDepth());
mcWindowHasil.tScore.text = "Score Anda : " + Math.round(nScore);
mcWindowHasil._x = (Stage.width - mcWindowHasil._width) /2;
mcWindowHasil._y = (Stage.height - mcWindowHasil._height) /2;
mcWindowHasil.btnOK.onRelease = function():Void {
this._parent.removeMovieClip();
susunSoal();
}
}
Kumpulan script selengkapnya dapat dilihat dalam source file berikut ini, disertai dengan file-file image yang diperlukan dalam aplikasi kuis :
quiz2.zip Adapun untuk movieclip preloadernya, kita dapat membuatkan sebuah movieclip dengan animasi script sederhana seperti pada source file berikut ini :
preloader.zip
File sumber bisa di download di:
http://www.webmediacenter.co.id/publicproject.php
Biografi Penulis
Eko Purwanto
Tamat SMA Negeri 1 Binjai tahun 1994 kemudian meneruskan kuliah di D3 Ilmu Komputer FMIPA USU, kemudian menyelesaikan S1 Informatika di STT Harapan Medan, saat ini memimpin sebuah lembaga pendidikan di Kota Medan, yakni Webmedia Training Center, mengawali karirnya di sebuah BUMN Kepelabuhanan di Belawan sebagai Staf IT Unit Terminal Peti Kemas. 3 tahun bekerja, pensiun muda dan kemudian mendirikan WEBMEDIA yang memiliki visi menciptakan dunia kerja dan mampu bekerja buat seluruh siswa dan alumninya.
Eko Purwanto dapat dihubungi melalui:
- Situs: http://www.webmediacenter.com http://www.dokumenkerja.com
- Email: epurwanto@webmediacenter.com
- YM: epurwanto_id
PENDAHULUAN
Dalam modul sederhana ini, materi yang dibahas adalah script yang dipergunakan dalam pembuatan aplikasi kuis dengan software MM Flash. Untuk kesempatan yang pertama ini, pembahasan dibatasi hanya membahas alur pemrograman aplikasi kuis secara garis besar. Pada kesempatan yang lain, pembuatan aplikasi kuis akan dibahas secara terperinci dan lebih detail, disertai contoh-contoh sederhana untuk menjelaskan logika script.Proses pembuatan aplikasi kuis ini dibagi menjadi 6 tahap.
Tahap I.
Membangun logika program dan memahami daftar soal yang berstruktur xml
Tahap II.
Menyusun array daftar soal yang acak
Tahap III.
Menampilkan soal, gambar, dan pilihan jawaban dengan animasi script
Tahap IV.
Memakai penghitung waktu
Tahap V.
Membuat fungsi pemeriksa pilihan jawaban
Tahap VI.
Menyusun semua fungsi dalam satu aplikasi kuis dan membuat preloadernya
Sebagaimana layaknya membuat suatu aplikasi atau program yang menggunakan bahasa VB, C, Delphi, Phyton, dan lain-lain, kita dapat merancang flowchart terlebih dahulu sebagai tahap awal pengerjaan, sehingga nantinya dapat memudahkan kita dalam mengerjakan coding (listing, atau kode program) dan pengembangannya.Adapun flowchart yang kita pakai dalam aplikasi kuis ini adalah sebagai berikut :
TAHAP 1. MEMBACA XML
Dalam contoh aplikasi kuis sederhana ini, digunakan file xml sebagai sumber data soal, untuk menyederhanakan pembahasan. Untuk aplikasi yang lebih kompleks, kita dapat menggunakan aplikasi host (aplikasi desktop seperti VB, atau aplikasi web yang menggunakan bahasa PHP, ASP, dan lain-lain) untuk menghubungkan flash dengan source data soal yang tersimpan di dalam database (MS SQL, mysql, MS Access .mdb, dan lain-lain). Contoh file xml yang kita pakai di dalam kuis ini dapat dilihat pada link berikut ini :
Script yang kita pergunakan di dalam kuis untuk membaca file xml tersebut adalah :var xmlSoal:XML = new XML();var aDaftarSoal:Array = new Array(); bacaXML(); function bacaXML():Void { xmlSoal.ignoreWhite = true; xmlSoal.onLoad = function(bSukses:Boolean):Void { if (bSukses) { var xnKumpulanSoal:XMLNode = this.firstChild; var nJumlahSoal:Number = xnKumpulanSoal.childNodes.length; for (var i:Number = 0; i
TAHAP 2. MEMPERSIAPKAN ARRAY SOAL UNTUK KUIS
Array daftar soal yang telah dibuat pada waktu proses membaca xml bukanlah array yang akan kita tampilkan dalam kuis.Karena kita menginginkan soal-soal yang ada dalam kuis nanti muncul secara acak, kita memerlukan array lain yang isinya sama dengan array source soal, tetapi urutan itemnya sudah diacak. Karena itu array source soal ini diduplikatkan lagi sebagai array baru, tetapi urutan isinya dibuat secara random.Scriptnya adalah sebagai berikut (Script menyusun Soal Acak): function susunSoal():Void {
aSoal = new Array();
var nJumlahSoal:Number = aDaftarSoal.length;
var aPolaSusunanSoal:Array = ciptakanSusunanAcak(0, nJumlahSoal);
for (var i:Number = 0; i
var nUrutanSoal:Number = Number(aPolaSusunanSoal[i]);
var sPertanyaan:String = aDaftarSoal[nUrutanSoal][0];
aItemSoal.push(sPertanyaan);
var sGambar:String = aDaftarSoal[nUrutanSoal][1];
aItemSoal.push(sGambar);
var sHurufJawaban:String = aDaftarSoal[nUrutanSoal][2].toString();
var nJawaban:Number = sHurufJawaban.charCodeAt(0) - 65;
var sJawaban:String = aDaftarSoal[nUrutanSoal][3][nJawaban].toString();
var nJumlahPilihan:Number = aDaftarSoal[nUrutanSoal][3].length;
var aPolaSusunanJawaban:Array = ciptakanSusunanAcak(0, nJumlahPilihan);
var aSubItemSoal:Array = new Array();
for (var j:Number = 0; j
var sPilihan:String = aDaftarSoal[nUrutanSoal][3][nNomorPilihan].toString();
aSubItemSoal.push(sPilihan);
}
for (var j:Number = 0; j
var sHurufJawabanBaru:String = String.fromCharCode(65 + j);
aItemSoal.push(sHurufJawabanBaru);
break;
}
}
aItemSoal.push(aSubItemSoal);
aSoal.push(aItemSoal);
}
}
Adapun script yang kita gunakan untuk menghasilkan urutan acak tersebut adalah function yang mempunyai nilai return, seperti script berikut ini :function ciptakanSusunanAcak(nAngkaStart:Number, nAngkaFinish:Number):Array {
var nAngka:Number = nAngkaStart;
var nJarakAngka:Number = nAngkaFinish - nAngkaStart;
var aHasilSusunan:Array = new Array();
var aHasilSementara:Array = new Array();
for (var i:Number = 0; i
var bAngkaSudahAda:Boolean = false;
while(!bAngkaSudahAda) {
var nRandom:Number = random(nJarakAngka);
var nItem:Number = nAngka + nRandom;
var sItem:String = "item" + nItem;
if (sHasilSementara.indexOf(sItem) < 0) {
aHasilSementara.push(sItem);
aHasilSusunan.push(nItem);
bAngkaSudahAda = true;
}
}
}
return aHasilSusunan;
}
TAHAP 3. MEMPERSIAPKAN MOVIECLIP
etelah daftar soal siap, kita dapat menampilkannya ke Stage. Untuk itu kita mempersiapkan movieclip-movieclip yang diperlukan dalam Library.Contoh movieclip yang dapat dipakai untuk keperluan ini dapat dilihat dalam file ini
library movieclip.zip
Kita tidak memerlukan movieclip apa-apa di atas Stage. Yang kita perlukan adalah movieclip di dalam Library yang bisa dimanfaatkan secara langsung oleh actionscript. Untuk itu pastikan setiap movieclip yang diperlukan di dalam Library telah memiliki Linkage Identifier yang benar.
Dalam menampilkan soal, ada beberapa hal yang harus kita lakukan. Teks soal dan image gambar harus diletakkan di dalam movieclip, lalu kita harus membuat efek animasi terhadap movieclip tersebut. Hal ini dapat dilihat dari script yang berikut ini :function tampilkanSoal():Void {
buatKotakSoal();
animasiKotakSoal(0);
buatKotakPilihan();
animasiKotakPilihan(0);
BacaFileGambar(aSoal[nNomorSoal][1].toString());
mulaiHitungWaktu();
}
Untuk menampilkan teks pertanyaan atau soal, kita mengambil movieclip yang telah kita persiapkan sebelumnya dari Library, lalu mengisinya dengan teks soal yang kita ambil dari array daftar soal. Scriptnya adalah sebagai berikut :function buatKotakSoal():Void {
var mcSoal:MovieClip = this.attachMovie("lib_Soal", "mcSoal", this.getNextHighestDepth());
mcSoal.tSoal.htmlText = aSoal[nNomorSoal][0];
mcSoal.tNomorSoal.text = "Soal " + (nNomorSoal + 1);
mcSoal._x = -mcSoal._width;
mcSoal._y = 15;
aDaftarObjekAnimasi.push(mcSoal._name);
}
Sedangkan pilihan jawaban ditampilkan dengan script di bawah ini. Perulangan for dilakukan sebanyak jumlah pilihan yang ada. Jumlah pilihan yang ada telah dihitung pada waktu menyusun array soal yang acak.function buatKotakPilihan():Void {
var nJumlahPilihan:Number = aSoal[nNomorSoal][3].length;
for (var i:Number = 0; i
mcPilihan.tPilihan.htmlText = aSoal[nNomorSoal][3][i];
mcPilihan.btnPilihan.onRelease = checkJawaban;
var sAbjadPilihan:String = String.fromCharCode(65 + i);
mcPilihan.tAbjad.text = sAbjadPilihan;
mcPilihan._x = -mcPilihan._width;
mcPilihan._y = 110 + (i * 55);
aDaftarObjekAnimasi.push(mcPilihan._name);
}
}
Untuk meload dan menampilkan gambar, kita menggunakan class MovieClipLoader.Tetapi sebelumnya kita sudah mempersiapkan movieclip yang akan menampung gambar hasil load.Scriptnya adalah sebagai berikut : function persiapkanGambar():Void {
var mcBingkaiGambar:MovieClip = this.attachMovie("lib_BingkaiGambar", "mcBingkaiGambar", this.getNextHighestDepth());
mcBingkaiGambar._x = 310;
mcBingkaiGambar._y = 110;
var mcTempatImage:MovieClip = mcBingkaiGambar.createEmptyMovieClip("TempatImage", mcBingkaiGambar.getNextHighestDepth());
mcTempatImage._x = 10;
mcTempatImage._y = 10;
}
Kita mempersiapkan sebuah fungsi untuk membaca sekaligus menampilkan gambar. Dengan demikian, pada waktu kita memerlukan gambar, kita tinggal memanggil fungsi tersebut.Scriptnya adalah seperti ini : function BacaFileGambar(sFileGambar:String):Void {
if (sFileGambar == "") {
mcBingkaiGambar.tInfoGambar.text = "Tidak Ada Gambar";
return;
}
mclBacaFile.loadClip(sFileGambar, mcBingkaiGambar.TempatImage);
oListenerBacaFile.onLoadProgress = function(mcTarget:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
var nPersen:Number = Math.round((bytesLoaded/bytesTotal) * 100);
mcTarget._parent.tInfoGambar.text = "loading " + nPersen + "%";
};
oListenerBacaFile.onLoadError = function():Void {
mcBingkaiGambar.tInfoGambar.text = "Error pada proses loading file " + sFileGambar;
};
}
Kita menggunakan event onEnterFrame dalam menganimasikan movieclip. Setiap instance movieclip mempunyai event onEnterFrame karena instance movieclip akan meng-inherit semua event, method, dan property dari class MovieClip.Script yang kita gunakan untuk menganimasikan movieclip adalah sebagai berikut :
script animasi movieclip teks soal function animasiKotakSoal(nJenisAnimasi:Number):Void {
if (nJenisAnimasi == 0) {
var nTargetX:Number = 15;
mcSoal.Akselerasi = (mcSoal._width/2) + 20;
mcSoal.onEnterFrame = function():Void {
this._x += this.Akselerasi;
this.Akselerasi /= 2;
if (this._x > nTargetX) {
this._x = nTargetX;
this.onEnterFrame = null;
}
};
} else
if (nJenisAnimasi == 1) {
mcSoal.Akselerasi = 1;
mcSoal.onEnterFrame = function():Void {
this._y -= this.Akselerasi;
this.Akselerasi++;
if (this._y < -this._height) {
var sNamaObjek:String = this._name;
this.removeMovieClip();
updateDaftarObjekAnimasi(sNamaObjek);
}
};
}
}
script animasi movieclip pilihan jawaban function animasiKotakPilihan(nJenisAnimasi:Number):Void {
var nJumlahPilihan:Number = aSoal[nNomorSoal][3].length;
if (nJenisAnimasi == 0) {
var nTargetX:Number = 15;
for (var i:Number = 0; i
mcPilihan.Akselerasi = (mcPilihan._width/2) + 20;
mcPilihan.MulaiAnimasi = (i + 1) * 3;
mcPilihan.hitung = 0;
mcPilihan.onEnterFrame = function():Void {
this.hitung++;
if (this.hitung > this.MulaiAnimasi) {
this._x += this.Akselerasi;
this.Akselerasi /= 2;
if (this._x > nTargetX) {
this._x = nTargetX;
this.onEnterFrame = null;
}
}
};
}
} else
if (nJenisAnimasi == 1) {
for (var i:Number = 0; i
mcPilihan.btnPilihan.enabled = false;
mcPilihan.Akselerasi = 1;
mcPilihan.MulaiAnimasi = (nJumlahPilihan - i) * 3;
mcPilihan.hitung = 0;
mcPilihan.onEnterFrame = function():Void {
this.hitung++;
if (this.hitung > this.MulaiAnimasi) {
this._y += this.Akselerasi;
this.Akselerasi *= 2;
}
if (this._y > Stage.height) {
var sNamaObjek:String = this._name;
this.removeMovieClip();
updateDaftarObjekAnimasi(sNamaObjek);
}
};
}
}
}
Selama aplikasi kuis dijalankan, akan ada movieclip-movieclip yang muncul dan hilang silih berganti. Untuk dapat mengontrol animasi movieclip-movieclip tersebut dengan baik, kita memerlukan suatu daftar yang menyimpan informasi movieclip mana saja yang sedang aktif.Daftar ini berupa array. Tiap-tiap kita meng-create suatu movieclip baru yang akan dianimasikan, kita append identifiernya ke dalam array. Ketika movieclip tersebut sudah di-remove dari Stage, kita hilangkan identifiernya dari array.Scriptnya adalah sebagai berikut :
daftar objek animasi function updateDaftarObjekAnimasi(sNamaObjek:String):Void {
for (var i:Number = 0; i
if (sNamaObjek == sObjekTerdaftar) {
aDaftarObjekAnimasi.splice(i, 1);
break;
}
}
if(aDaftarObjekAnimasi.length == 0) {
buatSoalBaru();
}
}
TAHAP 4. TIMER PENGHITUNG WAKTU
Kita menggunakan penghitung waktu dalam kuis ini sebagai pelengkap, supaya nilai score yang dihasilkan user setelah menjawab kuis tidak terlalu monoton. User yang menjawab kuis dengan tepat dan cepat, akan mendapat score yang lebih tinggi.Untuk itu digunakan syntax setInterval untuk mengaktifkan fungsi penghitung waktu ini.
initialisasi timer function mulaiHitungWaktu():Void {
nInterval = 0;
nWaktu = 0;
updatePenunjukWaktu();
nInterval = setInterval(updatePenunjukWaktu, 1000);
}
Untuk menampilkan timer yang sedang berjalan, sehingga user dapat melihat waktu yang dipakainya dalam menjawab kuis, kita memakai script ini :
script menampilkan timer function updatePenunjukWaktu():Void {
var nMenit:Number = Math.floor(nWaktu/60);
var sMenit:String = nMenit.toString();
var nDetik:Number = nWaktu % 60;
var sDetik:String = "0";
if (nDetik < 10) sDetik += nDetik.toString()
else sDetik = nDetik.toString();
mcSoal.tWaktu.text = sMenit + ":" + sDetik;
nWaktu++;
if (nWaktu > nBatasWaktu) clearInterval(nInterval);
updateAfterEvent();
}
TAHAP 5. MEMERIKSA JAWABAN
Setelah user memilih sebuah jawaban, kita menjalankan fungsi untuk memeriksa jawaban tersebut.Scriptnya adalah seperti ini :
fungsi memeriksa jawaban function checkJawaban():Void {
clearInterval(nInterval);
var mcPilihan:MovieClip = this._parent;
var sPilihan:String = mcPilihan.tAbjad.text.toLowerCase();
var sJawaban:String = aSoal[nNomorSoal][2].toString().toLowerCase();
var nTotalScore:Number = 100;
var nScoreTiapSoal:Number = nTotalScore/aSoal.length;
if (sPilihan == sJawaban) {
nWaktu--;
var nPengurangScore:Number = nWaktu * ((nScoreTiapSoal/2) / nBatasWaktu);
nScore += (nScoreTiapSoal - nPengurangScore);
taruhSimbol(mcPilihan, 1);
} else {
taruhSimbol(mcPilihan, 0);
var mcPilihanBenar:MovieClip = cariPilihanBenar();
taruhSimbol(mcPilihanBenar, 2);
}
}
Movieclip yang benar yang seharusnya dipilih oleh user, didapatkan dengan script berikut ini :
mendapatkan jawaban yang benar function cariPilihanBenar():MovieClip {
var sJawaban:String = aSoal[nNomorSoal][2].toString().toLowerCase();
var nJumlahPilihan:Number = aSoal[nNomorSoal][3].length;
for (var i:Number = 0; i
var sPilihan:String = mcPilihan.tAbjad.text.toLowerCase();
if (sPilihan == sJawaban) {
return mcPilihan;
}
}
}
Untuk menunjukkan pada user pilihan yang benar dan yang salah kita menampilkan movieclip-movieclip yang menggambarkan simbol benar dan salah.
menampilkan simbol benar dan salahfunction taruhSimbol(mcTarget:MovieClip, nJenisSimbol:Number):Void {
var sNamaSimbol:String;
if (nJenisSimbol == 0) sNamaSimbol = "lib_SimbolSalah"
else if (nJenisSimbol == 1) sNamaSimbol = "lib_SimbolBenar"
else if (nJenisSimbol == 2) sNamaSimbol = "lib_SimbolTunjukYangBenar";
mcTarget.attachMovie(sNamaSimbol, "mcSimbol" + nJenisSimbol, mcTarget.getNextHighestDepth());
}
TAHAP VI. TAHAP AKHIR
Setelah semua soal selesai dijawab, aplikasi kuis akan menampilkan window berisi hasil nilai score kuis, dengan script sederhana berikut ini : menampilkan hasil function tampilkanHasil():Void {
var mcWindowHasil:MovieClip = this.attachMovie("lib_WindowHasil", "mcWindowHasil", this.getNextHighestDepth());
mcWindowHasil.tScore.text = "Score Anda : " + Math.round(nScore);
mcWindowHasil._x = (Stage.width - mcWindowHasil._width) /2;
mcWindowHasil._y = (Stage.height - mcWindowHasil._height) /2;
mcWindowHasil.btnOK.onRelease = function():Void {
this._parent.removeMovieClip();
susunSoal();
}
}
Kumpulan script selengkapnya dapat dilihat dalam source file berikut ini, disertai dengan file-file image yang diperlukan dalam aplikasi kuis :
quiz2.zip Adapun untuk movieclip preloadernya, kita dapat membuatkan sebuah movieclip dengan animasi script sederhana seperti pada source file berikut ini :
preloader.zip
File sumber bisa di download di:
http://www.webmediacenter.co.id/publicproject.php
Biografi Penulis
Eko Purwanto
Tamat SMA Negeri 1 Binjai tahun 1994 kemudian meneruskan kuliah di D3 Ilmu Komputer FMIPA USU, kemudian menyelesaikan S1 Informatika di STT Harapan Medan, saat ini memimpin sebuah lembaga pendidikan di Kota Medan, yakni Webmedia Training Center, mengawali karirnya di sebuah BUMN Kepelabuhanan di Belawan sebagai Staf IT Unit Terminal Peti Kemas. 3 tahun bekerja, pensiun muda dan kemudian mendirikan WEBMEDIA yang memiliki visi menciptakan dunia kerja dan mampu bekerja buat seluruh siswa dan alumninya.
Eko Purwanto dapat dihubungi melalui:
- Situs: http://www.webmediacenter.com http://www.dokumenkerja.com
- Email: epurwanto@webmediacenter.com
- YM: epurwanto_id
Posting Komentar