Cara membuat quiz dengan metode penjodohan(Drag-Drop)
flash tidak hanya bisa digunakan untuk membuat sebuah animasi, tetapi juga bisa digunakan untuk membuat quis interaktif, awalnya saya pernah mendapat kesulitan saat dimintai oleh pelanggan untuk merancang media pembelajaran yang menggunakan quis dengan metode penjodohan, awalnya saya sedikit bingung karena udah searching di mbah Google tapi tidak satu pun yang sesuai dengan yang saya cari, akhirnya dengan menggabungkan beberapa referensi yang sedikit banyak membantu dalam mewujudkan suksesnya pembuatan kuis ini. oke...langsung aja..simak langkah-langkah yang akan saya sajikan dibawah ini:
flash tidak hanya bisa digunakan untuk membuat sebuah animasi, tetapi juga bisa digunakan untuk membuat quis interaktif, awalnya saya pernah mendapat kesulitan saat dimintai oleh pelanggan untuk merancang media pembelajaran yang menggunakan quis dengan metode penjodohan, awalnya saya sedikit bingung karena udah searching di mbah Google tapi tidak satu pun yang sesuai dengan yang saya cari, akhirnya dengan menggabungkan beberapa referensi yang sedikit banyak membantu dalam mewujudkan suksesnya pembuatan kuis ini. oke...langsung aja..simak langkah-langkah yang akan saya sajikan dibawah ini:
- membuka program Macromedia Flash Pro 8, pilih -> create new -> flash document.
- kemudian atur ukuran layar menjadi 1024 px * 768 px, karna kita akan menggunakan ukuran dari layar monitor CRT. anda bisa sesuiakan dengan ukuran laptop atau PC anda.
- sekarang tambahkan 2 layer baru. kemudian beri nama sesuai dengan gambar, selanjutnya klik layer 1 frame 1, masukan gambar atau backgroun sesuka anda, disini saya menggunakan warna kuning, caranya adalah klik Rectangle Tool kemudian ganti Fill color menjadi warna kuning. anda bisa tambahkan gambar lain dengan cara import to stage dari menu file.
- langkah selanjutnya adalah klik layer 2 frame 1, kemudian tuliskan seperti gambar dibawah ini...anda juga bsa tambahkan gambar sesuai keinginan.
- kemudian pilih semua teks dan gambar yang ada di layer 2 frame 1, kemudian tekan F8 untuk mengubahnya menjadi Movie Clip...ubah instance name'y menjadi kuis..
- kemudian double klik pada MC kuis td, naah....kita sudah masuk dihalaman utama pembuatan kuis. tambahkan 8 layer baru, anda bisa sesuaikan dengan jumlah soal yang akan anda berikan, pada kasus ini saya menggunakn 3 gambar topologi jaringan komputer, kemudian namakan layer sesuai dengan kasus, lihat gambar...
- pada layer 'tombol' tambahkan gambar dan jadikan tombol dengan cara menekan tombol F8, klik pada tombol tsb kemudian tekan tombol F9 untuk memasukan Action Script pada tombol tsb, ketikkan script berikut
- on(release){
nextFrame();
} 
- script diatas berfungsi untuk melanjutkan ke frame selanjutnya bila tombol diklik.
- kemudian klik layer 'bus' kemudian pada frame 2 klik kanan dan pilih 'insert blank keyframe kemudian masukan gambar topologi bus.
- lakukan langkah ke-11 pada layer 'ring' dan 'star'.
- jika sudah, sekarang kita akan membuat tombol soal dan target yang digunakan untuk mencocokkan antar soal dan jawaban. klik frame 2 pada layer 'soal' kemudian klik kanan dan pilih 'insert blank keyframe', buat gambar persegi panjang. usahakan semua gambar sama antara lebar dan panjangnya...kemudia tuliskan keterangan pada masing-masing kotak, lihat gambar dibawah ini:
- kemudian klik pada frame 2 layer 'target' kemudian buat sebuah kotak seperti gambar, (ukuran panjang dan lebar kotak harus sama dengan gambar yang ada pada layer soal), atur posisi setiap gambar sesuai gambar dibawah ini dan beri tanda tanya peda setiap kotak.
- setelah selesai, klik frame 1 pada layer action kemudian ketikkan kode program dibawah ini
- stop(); skor=0; (script tsb berfungsi untuk menghentikan animasi pada layer pertama dan akan memberikan skor 0 pada awal kuis.
- selanjutnya aktifkan layer soal kemudian seleksi gambar kotak 'topologi ring' (usahakan semua kotak terseleksi, kemudian tekan tombol f8 untuk mengubahnya menjadi Movie Clip, kemudian beri nama 'mc_ring' dan beri instance name = 'soal1', lihat gambar:
- langkah selanjutnya adalah lakukan langkah ke 25 pada kotak 'topologi star' dan topologi bus', kemudian beri nama sesuai dengan gambar, pada 'mc_star' beri instance name = 'soal2' dan berikan nama 'soal3' pada 'mc_bus'.
- sekarang pilih layer 'target' kemudian seleksi gambar kotak yang ada pada 'topologi ring' kemudian tekan f8 untuk mengubahnya menjadi movie clip, beri nama bebas, kemudian beri nama pada instance name = 'jawaban1'.
- lakukan hal yang sama pada langkah 30 pada gambar kotak 'topologi star' dan 'topologi bus' masing-masing instance name nya = 'jawaban2' dan 'jawaban3'.
- langkah selanjutnya adalah pilih frame 2 pada layer 'tombol' kemudian buat gambar tombol seperti gambar dibawah ini, kemudian seleksi gambar tersebut dan tekan f8 kemudian pilih 'button' beri nama 'tblskor'. kemudian klik tombol tsb dan tekan f9 kemudian ketik skript berikut on (release) { nextFrame; }
- kemudian pilih frame 3 pada layer 1, kemudian tambahkan 'dynamic text' dengan nama variabel 'skor' dan instance name = 'nilai'. dan tambahkan satu lagi 'dynamic text' kemudian beri nama variabel 'komentar'.
- kemudian seleksi huruf 'SKOR ANDA ADALAH' ubah menjadi movie clip kemudian ketikkan action script sebagai berikut:
- onClipEvent (load) {
if (_root.kuis.skor <= 1) {
_root.kuis.komentar = "Jangan pernah menyerah !!!";
}
if (_root.kuis.skor = 2) {
_root.kuis.komentar = "Hebat, lebih semangat lagi ok !!!";
}
// end if
if (_root.kuis.skor >= 3) {
_root.kuis.komentar = "Sempurna !!!";
}
// end if
} - setelah selesai, kita kembali ke layer action, pilih frame 2 kemudian tekan tombol f9 dan ketkkan action script berikut:
- //Script untuk soal pertama
soal1._x;
soal1._y;
soal1.onPress = function() {
this.startDrag();
};
soal1.onRelease = function() {
this.stopDrag();
if (eval(this._droptarget) == jawaban1) {
this._x = jawaban1._x;
this._y = jawaban1._y;
skor++;
//this._visible = true;
this.enabled = false;
} else if (eval(this._droptarget) == jawaban2) {
this._x = jawaban2._x;
this._y = jawaban2._y;
this.enabled = false;
} else if (eval(this._droptarget) == jawaban3) {
this._x = jawaban3._x;
this._y = jawaban3._y;
this.enabled = false;
}
};
//Script untuk soal kedua
soal2._x;
soal2._y;
soal2.onPress = function() {
this.startDrag();
};
soal2.onRelease = function() {
this.stopDrag();
if (eval(this._droptarget) == jawaban2) {
this._x = jawaban2._x;
this._y = jawaban2._y;
skor++;
this.enabled = false;
} else if (eval(this._droptarget) == jawaban1) {
this._x = jawaban1._x;
this._y = jawaban1._y;
this.enabled = false;
} else if (eval(this._droptarget) == jawaban3) {
this._x = jawaban3._x;
this._y = jawaban3._y;
this.enabled = false;
}
};
//Script untuk soal ketiga
soal3._x;
soal3._y;
soal3.onPress = function() {
this.startDrag();
};
soal3.onRelease = function() {
this.stopDrag();
if (eval(this._droptarget) == jawaban1) {
this._x = jawaban1._x;
this._y = jawaban1._y;
this.enabled = false;
} else if (eval(this._droptarget) == jawaban2) {
this._x = jawaban2._x;
this._y = jawaban2._y;
this.enabled = false;
} else if (eval(this._droptarget) == jawaban3) {
this._x = jawaban3._x;
this._y = jawaban3._y;
skor++;
this.enabled = false;
}
}; - jika sudah, tekan ctrl+enter untuk mengetes quis yang telah kita buat, jika berhasil maka semua akan berjalan sukses......selamat mencoba...jiak ada kritik dan saran silahkan komentar ya...
