Jumat, 23 Juni 2017

[Tutorial] Membuat Soal Pilihan Ganda dengan Adobe Flash

Selain soal essay kita juga dapat membuat soal pilihan ganda (a, b, c, d). Pada tutorial kali ini kita akan membuat soal pilihan ganda. Di bawah ini kami hanya menjelaskan bagaimana cara membuatnya hanya dengan satu soal saja. Hal ini dikarenakan jika kami membuatnya lebih dari 1 soal maka tutorialnya akan panjang sekali dan juga tutorialnya akan berulang-ulang karena cara membuat soal yang satu dengan soal yang lain hampir sama. 

1. Buatlah 5 buah Static Text dan masing-masing diberi tulisan berikut:
1. Tempat sarapan tutorial flash adalah …
a. Warung Makan
b. Warung Tegal
c. Warung Flash
d. Warung Pojok

2. Tempatkan 5 buah Static Text tadi seperti gambar di bawah ini :

Letak soal dan jawaban


3. Pastikan anda tidak menyeleksi satu objek pun di stage, lalu tekan Ctrl+F8 maka kotak dialog Create new Symbol akan muncul. Berikan invs_btn sebagai Name dan ubah Type-nya menjadi Button lalu tekan OK

4. Anda akan masuk ke stage invs_btn. Klik frame Hit yang terletak di Timeline lalu tekan F7. Gambarlah sebuah persegi panjang dengan panjang dan lebar yang cukup untuk menutupi jawaban abcd di atas.

5. Tekan Ctrl+E anda akan berada di Stage Scene 1. Buka Library dengan menekan Ctrl+L. Drag invs_btn di Library ke stage hingga jumlahnya 4 buah.

6. Tempatkan 4 buah invs_btn tadi ke masing-masing jawaban abcd. Buatlah titik Registration berada di tengah-tengah huruf abcd seperti gambar di bawah ini :

Klik gambar untuk memperbesar. Perhatikan letak titik registrationnya

7. Klik 2 kali salah satu invs_btn di stage. Ubah letak persegi panjang sampai dapat menutupi jawaban seperti gambar di bawah ini :

Klik gambar untuk memperbesar. Perhatikan letak titik registrationnya

8. Tekan Ctrl+E untuk kembali ke stage Scene 1. Berikan Instance Name berikut pada masing-masing invs_btn secara berurutan dari atas sampai ke bawah : tombol1a, tombol1b, tombol1c, tombol1d

9. Klik tombol1a lalu tekan F9 dan masukan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
//ketika tekanan mouse dilepaskan setelah ditekan
on (release) {
        //jika tulis bernilai true
        if (tulis) {
               //posisi x silang1 sama dengan posisi x tombol ini
               silang1._x = tombol1a._x;
               //posisi y silang1 sama dengan posisi y tombol ini
               silang1._y = tombol1a._y;
               //nilai jawaban1 diubah menjadi false
               jawaban1 = false;
        }
}

10. Klik tombol1b lalu tekan F9 dan masukan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
//ketika tekanan mouse dilepaskan setelah ditekan
on (release) {
        //jika tulis bernilai true
        if (tulis) {
               //posisi x silang1 sama dengan posisi x tombol ini
               silang1._x = tombol1b._x;
               //posisi y silang1 sama dengan posisi y tombol ini
               silang1._y = tombol1b._y;
               //nilai jawaban1 diubah menjadi false
               jawaban1 = false;
        }
}

11. Klik tombol1c lalu tekan F9 dan masukan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
//ketika tekanan mouse dilepaskan setelah ditekan
on (release) {
        //jika tulis bernilai true
        if (tulis) {
               //posisi x silang1 sama dengan posisi x tombol ini
               silang1._x = tombol1c._x;
               //posisi y silang1 sama dengan posisi y tombol ini
               silang1._y = tombol1c._y;
               //nilai jawaban1 diubah menjadi true
               jawaban1 = true;
        }
}
12. Klik tombol1d lalu tekan F9 dan masukan script berikut :
1
2
3
4
5
6
7
8
9
10
11
12
//ketika tekanan mouse dilepaskan setelah ditekan
on (release) {
        //jika tulis bernilai true
        if (tulis) {
               //posisi x silang1 sama dengan posisi x tombol ini
               silang1._x = tombol1d._x;
               //posisi y silang1 sama dengan posisi y tombol ini
               silang1._y = tombol1d._y;
               //nilai jawaban1 diubah menjadi false
               jawaban1 = false;
        }
}

13. Buatlah sebuah garis silang dengan luas yang dapat menutupi huruf a, b, c, d. Klik garis tersebut dan tekan F8. Pada kotak dialog yang muncul berikan silang sebagai Name dan Movie clip sebagai Type lalu tekan OK.

14. Klik Movie clip silang tadi dan berikan silang1 sebagai Instance Name

15. Buatlah sebuah garis lingkaran dengan diameter yang dapat menutupi huruf a, b, c, d. Klik garis tersebut dan tekan F8. Pada kotak dialog yang muncul berikan lingkaran sebagai Name dan Movie clip sebagai Type lalu tekan OK.

16. Klik Movie clip lingkaran tadi dan berikan lingkaran1 sebagai Instance Name. Letakan Movie clip lingkaran1 huruf (a/b/c/d) jawaban yang benar dengan titik Registration berada tepat di tengah-tengah huruf.

Letak movie clip lingkaran

17. Pastikan anda masih menyeleksi Movie clip lingkaran1, lalu buka panel Properties (Ctrl+F3) dan ubah Colornya menjadi Alpha dengan nilai 0%

Properties movie clip lingkaran

18. Buatlah Static Text bertuliskan Koreksi. Gambarlah persegi panjang dan tempatkan di tengah-tengah Static Text Koreksi.

19. Seleksi Static Text koreksi dan persegi panjang tadi lalu tekan F8. Berikan koreksi_btn sebagai Name dan pilih Button sebagai Typenya lalu tekan ok.

20. Klik koreksi_btn lalu tekan F9 dan berikan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//ketika tekanan mouse dilepaskan setelah ditekan
on (release) {
        //jika cek bernilai true
        if (!cek) {
               //membuat variable i=1
               for (i=1; i<2; i++) {
                       //jika jawaban+i bernilai true
                       if (_root["jawaban"+i]) {
                               //nilai ditambah 1
                               nilai += 1;
                               //benar ditambah 1
                               benar += 1;
                       //jika jawaban+i bernilai false
                       } else if (!_root["jawaban"+i]) {
                               //salah ditambah 1
                               salah += 1;
                               //lingkaran+i menjadi tidak transparan
                               _root["lingkaran"+i]._alpha = 100;
                       }
               }
               cek = true;
               tulis = false;
        }
}

21. Buatlah Static Text bertuliskan Reset. Gambarlah persegi panjang dan tempatkan di tengah-tengah Static Text Reset.

22. Seleksi Static Text Reset dan persegi panjang tadi lalu tekan F8. Berikan reset_btn sebagai Name dan pilih Button sebagai Typenya lalu tekan ok.

23. Klik reset_btn lalu tekan F9 dan berikan script berikut :

1
2
3
4
5
//ketika tekanan mouse dilepaskan setelah ditekan
on (release) {
        //jalankan fungsi reset
        reset();
}

24. Buatlah 3 buah Static Text dan beri masing-masing tulisan berikut Benar: , Salah: , Nilai:

25. Buatlah 3 buah Dynamic Text dengan masing-masing Var benar, salah, nilai. Lalu tempatkan koreksi_btn, reset_btn, 3 buah Static Text dan Dynamic Text tadi seperti gambar di bawah ini :

Letak tombol dan text

26. Klik frame 1 pada Timeline Scene 1 dan tekan F9. Pada kotak Action masukan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function reset() {
        //membuat variable i=1
        for (i=1; i<2; i++) {
               //posisi x movie clip silang+i =- 100
               _root["silang"+i]._x = -100;
               //posisi y movie clip silang+i =- 100
               _root["silang"+i]._y = -100;
               //jawaban+i bernilai dengan false
               _root["jawaban"+i] = false;
               //warna lingkaran+i transparan
               _root["lingkaran"+i]._alpha = 0;
               cek = false;
               tulis = true;
               nilai = 0;
               benar = 0;
               salah = 0;
        }
}
//fungsi reset dijalankan sekali ketika frame ini dimainkan
reset();

27. Tekan Ctrl+Enter untuk melihat hasilnya :

Pilih Warung Flash sebagai jawabannya

Tidak ada komentar:

Posting Komentar