Jika beberapa waktu yang lalu saya berbagi tutorial bagaimana membuat Soal Interaktif Pilihan Ganda, kali ini saya akan berbagi bagaimana membuat Soal Interaktif Essay.
Langsung ke TKP sob…
Langkah 1. Buat flash dokumen baru dan buatlah 2 buah Layer dan beri nama Layer1 dengan nama latar dan Layer2 dengan nama essay.

Langkah 2. Masukkan gambar latar pada Layer latar sesuai keinginan sobat, kemudian kuncilah Layer latarnya.

Langkah 3. Klik Frame1 Layer essay dan buatlah desain soal seperti gambar berikut :

Keterangan :
A. Soal; Properti : Static Text
B. Kotak Jawaban;
E. Isi Nilai; Properti : Dynamic Text
F. Tombol;
Langkah 4. Klik Frame 1 pada Layer Essay. Sebagai contoh, buatlah 5 pertanyaan essay pada Static Text.

Langkah 5. Buatlah 5 buah input text dengan masing-masing Var : Jawaban1, Jawaban2, Jawaban3, Jawaban4 dan Jawaban5, dan Maximum Characters : 6.

…..
Langkah 6. Buatlah tanda Benar (contreng) dan tanda Salah (silang) disamping kanan input text jawaban, dengan cara :
Buatlah lingkaran menggunakan Oval Tool. Selanjutnya seleksi gambar lingkaran kemudian tekan F8 dan aturlah seperti gambar berikut :

Dan pada propertinya beri Instance Name dengan nama tanda1.

Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 7. Dobel klik gambar lingkaran yang telah menjadi Movie clip, tambah/insert keyframe pada frame2 dan frame3.
Berikut… klik frame2, gambarlah tanda contreng (benar) dan tanda silang (salah) pada frame3.


Jika sudah masukkan Action script :
pada frame1, frame2, frame2

Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 8. Klik Layer Essay, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
Klik tombol Koreksi, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :

Klik tombol Reset, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :

Langkah 9. Simpan project sobat dan cona jalankan project sobat.
Untuk file latihannya silahkan download disini
Langsung ke TKP sob…
Langkah 1. Buat flash dokumen baru dan buatlah 2 buah Layer dan beri nama Layer1 dengan nama latar dan Layer2 dengan nama essay.

Langkah 2. Masukkan gambar latar pada Layer latar sesuai keinginan sobat, kemudian kuncilah Layer latarnya.

Langkah 3. Klik Frame1 Layer essay dan buatlah desain soal seperti gambar berikut :

Keterangan :
A. Soal; Properti : Static Text
B. Kotak Jawaban;
Properti jawaban nomor 1 : var isi dengan “jawaban1” (tanpa tanda petik)
Properti jawaban nomor 2 : var isi dengan “jawaban2” (tanpa tanda petik)
Properti jawaban nomor 3 : var isi dengan “jawaban3” (tanpa tanda petik)
Properti jawaban nomor 4 : var isi dengan “jawaban4” (tanpa tanda petik)
Properti jawaban nomor 5 : var isi dengan “jawaban5” (tanpa tanda petik)C. Tanda Benar / Salah
Jawaban nomor 1, Properti : tipe Movie Clip, Instance Name : tanda1
Jawaban nomor 2, Properti : tipe Movie Clip, Instance Name : tanda2
Jawaban nomor 3, Properti : tipe Movie Clip, Instance Name : tanda3
Jawaban nomor 4, Properti : tipe Movie Clip, Instance Name : tanda4
Jawaban nomor 5, Properti : tipe Movie Clip, Instance Name : tanda5D. Nilai; Properti : Static Text
E. Isi Nilai; Properti : Dynamic Text
F. Tombol;
Langkah 4. Klik Frame 1 pada Layer Essay. Sebagai contoh, buatlah 5 pertanyaan essay pada Static Text.

Langkah 5. Buatlah 5 buah input text dengan masing-masing Var : Jawaban1, Jawaban2, Jawaban3, Jawaban4 dan Jawaban5, dan Maximum Characters : 6.

…..
Langkah 6. Buatlah tanda Benar (contreng) dan tanda Salah (silang) disamping kanan input text jawaban, dengan cara :
Buatlah lingkaran menggunakan Oval Tool. Selanjutnya seleksi gambar lingkaran kemudian tekan F8 dan aturlah seperti gambar berikut :

Dan pada propertinya beri Instance Name dengan nama tanda1.

Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 7. Dobel klik gambar lingkaran yang telah menjadi Movie clip, tambah/insert keyframe pada frame2 dan frame3.
Berikut… klik frame2, gambarlah tanda contreng (benar) dan tanda silang (salah) pada frame3.


Jika sudah masukkan Action script :
- stop();

Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 8. Klik Layer Essay, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
- //daftar untuk jawaban yang benar
- jawaban_benar1 = "200";
- jawaban_benar2 = "1";
- jawaban_benar3 = "0";
- jawaban_benar4 = "10000";
- jawaban_benar5 = "101";
- //nilai pertama kali sama dengan 0
- nilai = 0;
- //ketika mouse diklik
- on (release) {
- //menghasilkan variable i=1, i=2, i=3, i=4, i=5
- for (i=1; i<6; i++) {
- //jika jawaban +i sama dengan jawaban +i
- if (_root["jawaban"+i] == _root["jawaban_benar"+i]) {
- //nilai ditambah 1
- nilai += 1;
- //tanda+i pindah ke frame 2
- _root["tanda"+i].gotoAndStop(2);
- } else {
- //tanda+i pindah ke frame 3
- _root["tanda"+i].gotoAndStop(3);
- }
- }
- koreksi.enabled = false; //tombol koreksi tidak bisa ditekan
- koreksi._alpha = 40; //tombol koreksi lebih transparan
- }

Klik tombol Reset, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
- on (release) {
- koreksi.enabled = true; //tombol koreksi dapat ditekan
- koreksi._alpha = 100; //warna tombol koreksi tidak transparan
- nilai = 0; //nilai diubah menjadi 0
- for (i=1; i<6; i++) { //menghasilkan variable i=1, i=2, i=3, i=4, i=5
- _root["jawaban_user"+i] = ""; //jawaban_user+i dikosongkan
- _root["tanda"+i].gotoAndStop(1); //tanda+i pindah ke frame 1
- }
- }

Langkah 9. Simpan project sobat dan cona jalankan project sobat.
Untuk file latihannya silahkan download disini