Latest Blog

Multimedia Interaktif Tata Surya
Membuat Multimedia Pembelajaran Interaktif tentang tata surya
ALL BLOG
;
Aplikasi CBT dengan Fitur Penyimpanan Data Nilai
Pendahuluan
Pada tutorial-tutorial sebelumnya telah dijelaskan proses pembuatan kuis interaktif(soal pilihan ganda) dengan menggunakan Adobe Flash/Adobe Animate. Namun, aplikasi ini masih dapat ditambah beberapa fitur lagi, salah satunya adalah fitur CBT (Computer Based Test) dimana pemain dapat menyimpan data nama dan nilai ke server. Untuk mendapatkan fitur tersebut, pada umumnya dibutuhkan aplikasi tambahan untuk menyimpan data, seperti PHP dan atau mySQL. Namun dalam tutorial ini kita hanya menggunakan bantuan PHP untuk menyimpan file dengan format XML
Hasil yang diharapkan pada tutorial ini adalah sebagai berikut (tunggu beberapa saat untuk membuka file sekitar 500Kb):
Untuk membuatnya perhatikan langkah berikut :
-
Terdapat beberapa persiapan yang harus dilakukan agar flash dapat menyimpan file di server. Pertama, kita membutuhkan sebuah file PHP. Untuk membuatnya, bukalah sebuah aplikasi editor teks seperti Notepad++, buat file baru dan ketikan kode berikut:
- Simpan file tersebut dengan nama simpanNilai.php.
-
Persiapan kedua, kita membutuhkan sebuah file XML. Untuk membuatnya, bukalah sebuah aplikasi editor teks seperti Notepad++, buat file baru dan ketikan kode berikut:
- Simpan file tersebut dengan nama dataNilai.xml.
-
Upload 2 file tersebut (PHP, dan XML) pada server, kemudian ubah kode URL yang ada pada kode berikutnya (ubah "www.wandah.org/swf/) menjadi URL baru tempat anda menyimpan file.
Note: Untuk mengupload file ke server anda dapat menggunakan FTP, CPanel, Filezilla dan sebagainya. - Persiapan ketiga adalah file SWF. Bukalah aplikasi Adobe Flash/Adobe Animate, kemudian buatlah file baru bertipe AS3 dengan ukuran 800x480 pixel.
- Buatlah 3 buah layer dengan nama layer BG, layer tombol, dan layer kode.
- Klik frame 1 layer BG buatlah/importlah sebuah background, berikut judul aplikasi.
- Buatlah sebuah input text dengan opsi show border around text dan max char = 15 untuk membatasi jumlah karakter nama pemain. Selanjutnya tambahkan instance name nama_txt pada input text tersebut.
-
Buatlah sebuah tombol untuk memulai, dan tambahkan instance name mulai_btn pada tombol tersebut. Perhatikan tata letak aset visual pada frame 1 sebagai berikut :
-
Klik frame 1 layer kode kemudian buka panel action (F9) dan ketikan kode berikut :
- Klik frame 5 layer BG tambahkan keyframe (F6).
- Klik frame 5 layer tombol tambahkan Blank Keyframe. Buatlah sebuah static text untuk menampilkan petunjuk penggunaan aplikasi.
-
Buatlah sebuah tombol untuk melanjutkan kuis, dan tambahkan instance name mulai_kuis pada tombol tersebut. Perhatikan tata letak aset visual pada frame 5 sebagai berikut :
-
Klik frame 5 layer kode, tambahkan Keyframe. Kemudian buka panel action (F9) dan ketikan kode berikut :
- Seleksi frame 10 di ketiga Layer tambahkan keyframe (F6).
- Ikuti tutorial membuat kuis interaktif pada link berikut Kuis Interaktif dengan membuat aset visual, tombol dan instance name yang sama. Sedikit perbedaan adalah kita tidak membutuhkan tombol ulang (retry btn)
-
Buatlah sebuah tombol untuk menggantikan tombol retry, yaitu tombol submit nilai, dan tambahkan instance name submit_btn pada tombol tersebut. Perhatikan tata letak aset visual pada frame 15 sebagai berikut :
-
Klik frame 10 layer kode, tambahkan Keyframe. Kemudian buka panel action (F9) dan ketikan kode berikut :
- Klik frame 15 layer BG tambahkan keyframe (F6).
- Klik frame 15 layer tombol tambahkan Blank Keyframe. Buatlah sebuah dynamic text untuk menampilkan hasil penilaian. Berikan instance name hasil_txt pada dynamic text tersebut.
-
Buatlah sebuah tombol untuk mensubmit nilai, dan tambahkan instance name submit_nilai_btn pada tombol tersebut. Perhatikan tata letak aset visual pada frame 15 sebagai berikut :
-
Klik frame 15 layer kode, tambahkan Keyframe. Kemudian buka panel action (F9) dan ketikan kode berikut :
- Klik frame 20 layer BG tambahkan keyframe (F6).
- Klik frame 20 layer tombol tambahkan Blank Keyframe. Buatlah sebuah 2 buah dynamic text untuk menampilkan nilai pemain, pastikan opsi render Text as HTML anda aktifkan, serta opsi Multiline. Berikan masing-masing instance name nama_pemain_txt dan nilai_txt pada dynamic text tersebut.
-
Buatlah sebuah tombol untuk kembali ke halaman awal, dan tambahkan instance name ulang_btn pada tombol tersebut. Perhatikan tata letak aset visual pada frame 20 sebagai berikut :
-
Klik frame 20 layer kode, tambahkan Keyframe. Kemudian buka panel action (F9) dan ketikan kode berikut :
-
Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka akan didapatkan aplikasi seperti di atas
<?php $data = $_GET['dataxml']; file_put_contents("dataNilai.xml", $data); ?>
<dataNilai> <dataPemain> <nama>Wandah</nama> <nilai>90</nilai> </dataPemain> </dataNilai>
stop(); var nama_pemain = ""; var nilai_pemain = 0; mulai_btn.addEventListener(MouseEvent.CLICK, mulai); function mulai(e:MouseEvent):void{ if (nama_txt.text != ""){ nama_pemain = nama_txt.text; mulai_btn.removeEventListener(MouseEvent.CLICK, mulai); gotoAndStop(5); } }
stop(); mulai_kuis.addEventListener(MouseEvent.CLICK, mulaiKuis); function mulaiKuis(e:MouseEvent):void{ mulai_kuis.removeEventListener(MouseEvent.CLICK, mulaiKuis); gotoAndStop(10); }
var nilai:Number = 0; var no_soal:Number = 0; var max_soal:Number = 10; var hasil:hasil_mc; // struktur soal 0. Soal 1-4 jawaban, Jawaban benar diletakkan no 1 var soal:Array = [["Siapakah penemu mesin uap ?", "James Watt", "Davinci", "Issac Newton", "James bond"], ["Akar dari 676 adalah ?", "26", "24", "16", "34"], ["Bagian tumbuhan yang berperan penting dalam fotosintesis adalah ?", "Klorofil", "Kambium", "Epidermis", "Kromatin"], ["Penulis trilogi Lord of The Ring adalah?", "JRR Tolkien", "JK Rowling", "J Cameron", "J Thomas"], ["Jumlah seluruh sudut segitiga siku-siku adalah ?", "180", "270", "90", "360"], ["Provinsi termuda di Indonesia adalah ? ", "Banten", "Bangka belitung", "Batam", "Gorontalo"], ["Hukum gravitasi ditemukan oleh ? ", "Issac Newton", "Einstein", "T. A. Edison", "Kopernicus"], ["(sin 30) x 8 + (sin 90) = ? ", "5", "8", "0", "1"], ["Penemu arus listrik bolak balik adalah ? ", "Nicola Tesla", "T. Alpha Edison", "James Watt", "A. Graham bell"], ["Komponen elektronik yang mengubah arus bolak-balik menjadi searah adalah? ", "Diode", "Transistor", "Resistor", "Trafo"], ["Planet ke 5 dari Matahari adalah?", "Yupiter", "Mars", "Uranus", "Saturnus"], ["Dinosaurus terbesar dalam film Jurrasic World adalah?", "Mousaurus", "Indominus Rex", "Tyranosaurus", "Spinosaurus"], ["Gedung tertinggi di dunia sampai dengan 2015 adalah?", "Burj Al Khaifa", "Burj Dubai", "Beijing Tower", "Petronas"], ["Pesawat komersial dengan kapasitas terbesar di dunia adalah?", "Airbus 380", "Boeing 777", "Beluga", "Antonov"], ["Juara Dunia MotoGP 2014 adalah?", "Mark Marquez", "Jorge Lorenzo", "Valentino Rossi", "Dani Pedrosa"]]; //perbanyak data base soal... var temp_soal:Array; var temp_jawaban:Array; function restart():void{ //restart kuis, semua variabel dikembalikan ke posisi semula acak_soal(); nilai = 0; no_soal = 0; max_soal = 10; score_txt.text = "0"; submit_btn.visible = false; } function acak_soal():void{ //mengacak soal temp_soal = soal.slice(0, soal.length); for (var i:Number = 0; i < soal.length; i++){ var acak:Number = Math.floor(Math.random()*soal.length); var temp:Array = temp_soal[acak]; temp_soal[acak] = temp_soal[i]; temp_soal[i] = temp; } } function tampilkan_soal():void{ //tampilkan soal soal_txt.text = temp_soal[no_soal][0]; //acak jawaban temp_jawaban = temp_soal[no_soal].slice(1, 5); for (var i:Number = 0; i < temp_jawaban.length; i++){ var acak:Number = Math.floor(Math.random()*temp_jawaban.length); var temp:String = temp_jawaban[acak]; temp_jawaban[acak] = temp_jawaban[i]; temp_jawaban[i] = temp; } //tampilkan jawaban jawaban_1.jawaban_txt.text = temp_jawaban[0]; jawaban_2.jawaban_txt.text = temp_jawaban[1]; jawaban_3.jawaban_txt.text = temp_jawaban[2]; jawaban_4.jawaban_txt.text = temp_jawaban[3]; } function setup_awal():void{ restart(); tampilkan_soal(); //mengatur jawaban jawaban_1.stop(); jawaban_2.stop(); jawaban_3.stop(); jawaban_4.stop(); jawaban_1.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_2.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_3.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_4.addEventListener(MouseEvent.CLICK, cek_jawaban); //listener untuk efek tombol jawaban_1.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_2.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_3.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_4.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); //mouse out jawaban_1.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_2.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_3.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_4.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); //tombol submit submit_btn.addEventListener(MouseEvent.CLICK, kirim_nilai); } function mouse_over(e:MouseEvent):void{ e.currentTarget.gotoAndStop(2); } function mouse_out(e:MouseEvent):void{ e.currentTarget.gotoAndStop(1); } function cek_jawaban(e:MouseEvent):void{ var no_jawaban:Number = Number(e.currentTarget.name.substr(8))-1; if (temp_jawaban[no_jawaban] == temp_soal[no_soal][1]){ //jawaban benar tampilkan_hasil(1); nilai+=10; score_txt.text = String(nilai); }else{ //jawaban salah tampilkan_hasil(2); } } function tampilkan_hasil(tp:Number):void{ hasil = new hasil_mc(); hasil.x = 400; hasil.y = 250; hasil.gotoAndStop(tp); hasil.scaleX = 0.2; hasil.scaleY = 0.2; hasil.waktu = 0; hasil.tp = tp; hasil.addEventListener(Event.ENTER_FRAME, gerak_hasil); addChild(hasil); } function gerak_hasil(e:Event):void{ var ob:Object = e.currentTarget; if (ob.scaleX < 1){ ob.scaleX+=0.1; ob.scaleY+=0.1; } if (ob.waktu > -1 && ob.tp < 3){ ob.waktu++; if (ob.waktu > 60){ ob.waktu = -1; //tambah no soal no_soal++; ob.removeEventListener(Event.ENTER_FRAME, gerak_hasil); removeChild(DisplayObject(ob)); if (no_soal < max_soal){ tampilkan_soal(); }else{ tampilkan_hasil(3); submit_btn.visible = true; } } } } function kirim_nilai(e:MouseEvent):void{ nilai_pemain = nilai; removeChild(hasil); //hapus semua listener jawaban_1.removeEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_2.removeEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_3.removeEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_4.removeEventListener(MouseEvent.CLICK, cek_jawaban); //listener untuk efek tombol jawaban_1.removeEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_2.removeEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_3.removeEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_4.removeEventListener(MouseEvent.MOUSE_OVER, mouse_over); //mouse out jawaban_1.removeEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_2.removeEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_3.removeEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_4.removeEventListener(MouseEvent.MOUSE_OUT, mouse_out); //tombol submit submit_btn.removeEventListener(MouseEvent.CLICK, kirim_nilai); //pergi ke halaman submit gotoAndStop(15); } setup_awal();
import flash.events.MouseEvent; hasil_txt.text = "Hai... "+nama_pemain+" nilaimu adalah "+String(nilai_pemain)+" klik untuk melanjutkan"; var xmlData:XML; var totalData = 0; function salahServer():void { trace("ada kesalahan server"); } function kirimNilai(inputNama, inputNilai):void { //Tahap 1 - Baca file data nilai dari server trace("buka file XML..."); var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, salahServer); xmlLoader.addEventListener(Event.COMPLETE, bacaXML); var rand = Math.floor(Math.random()*1000); xmlLoader.load(new URLRequest("http://wandah.org/swf/dataNilai.xml?r="+rand)); function bacaXML(e:Event):void { //Tahap 2 - tambahkan data baru ke xml trace("update file XML..."); xmlData = new XML(e.target.data); totalData = xmlData.dataPemain.length(); xmlData.appendChild(< dataPemain> </dataPemain>); xmlData.dataPemain[totalData].appendChild(< nama>{inputNama}</nama>); xmlData.dataPemain[totalData].appendChild(< nilai>{inputNilai}</nilai>); totalData+= 1; //Tahap 3 - update data dengan memanggil file PHP var xmlURLReq:URLRequest = new URLRequest("http://wandah.org/swf/simpanNilai.php"); var requestVars:URLVariables = new URLVariables(); requestVars.dataxml = xmlData; xmlURLReq.data = requestVars; xmlURLReq.method = URLRequestMethod.GET; var xmlSendLoad:URLLoader = new URLLoader(); xmlSendLoad.load(xmlURLReq); trace("proses selesai "+xmlURLReq); gotoAndStop(20); } } submit_nilai_btn.addEventListener(MouseEvent.CLICK, kirimData); function kirimData(e:MouseEvent):void{ if (nilai_pemain > 0 ){ kirimNilai(nama_pemain, nilai_pemain); } submit_nilai_btn.visible = false; }
import flash.events.MouseEvent; var data_nilai = []; nama_pemain_txt.htmlText = "Loading....."; nilai_txt.htmlText = ""; function olah_data():void{ //ubah data XML menjadi array var i:int; var j:int; trace(totalData); trace("xml = "+xmlData); for (i = 0; i<totalData;i++){ data_nilai.push({nama:xmlData.dataPemain[i].nama, nilai:xmlData.dataPemain[i].nilai}); } trace(data_nilai); //urutkan nilai tertinggi data_nilai.sortOn("nilai", Array.DESCENDING); //tampilkan var listNama = ""; var listNilai = ""; for (i = 0; i<totalData;i++){ if (i){ //tampilkan 10 teratas saja listNama+= String(i+1)+". "+data_nilai[i].nama+"\n"; listNilai+= data_nilai[i].nilai+"\n"; } } nama_pemain_txt.htmlText = listNama; nilai_txt.htmlText = listNilai; } olah_data(); ulang_btn.addEventListener(MouseEvent.CLICK, ulangi); function ulangi(e:MouseEvent):void{ ulang_btn.removeEventListener(MouseEvent.CLICK, ulangi); gotoAndStop(1); }
Penjelasan Kode
Aplikasi di atas pada dasarnya sama dengan aplikasi kuis pada tutorial sebelumnya, hanya saja terdapat fitur menyimpan data ke server. Untuk menyimpan data ke file XML diperlukan sebuah file PHP dimana data dari flash ke PHP dikirim menggunakan metode GET. Anda juga dapat menggunakan teknik lain seperti metode POST atau mengencrypt data terlebih dahulu sebelum dikirimkan ke server untuk mengamankan aplikasi dari kecurangan.
Pada tiap-tiap keyframe (frame 1, 5, 10, 15, dan 20) pada dasarnya memiliki kode dengan fungsi yang sederhana :
- Pada frame 1, kode sederhana untuk memasukkan nama pemain
- Pada frame 5, kode hanya untuk melewati halaman petunjuk
- Pada frame 10, kode kuis dipastekan dan diedit sedikit untuk menambahkan tombol submit
- Pada frame 15, kode submit akan mengirimkan data ke file PHP. Data akan diolah dan disimpan, dan setelah proses selesai frame akan di pindah ke frame 20
- Pada frame 20, data diurutkan dari nilai terbesar, kemudian ditampilkan dengan teknik teks HTML dimana karakter \n akan menghasilkan baris baru (enter)
Pada tahapan selanjutnya anda bisa menambahkan beberapa fitur baru seperti soal gambar, timer, pilihan materi dan sebagainya. Selamat mencoba dan semoga bermanfaat!!
file sumber (Adobe Animate CC 2017): dapat diunduh disini
Share ( Ayo Berbagi )
Leave me a comment
untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon