kuis editing video
TRANSCRIPT
-
8/18/2019 KUIS EDITING VIDEO
1/13
Aplikasi kuis sering kali kita jumpai pada media pembelajaran, game atau aplikasi multimedia. Model kuis
dengan soal yang acak dan jawaban acak menjadi sebuah daya tarik tersendiri dalam sebuah media
pembelajaran. Akan tetapi para pemula pemrograman biasanya mengalami kesulitan dalam membuat sistem
soal acak, jawaban acak dan sistem penilaian. Untuk itu melalui tutorial ini, akan dijelaskan secara sederhana
tentang pembuatan kuis interaktif dengan sistem pengacakan soal, pengacakan jawaban dan sistem penilaian.Hasil akhir dari aplikasi ini dapat anda kembangkan lebih lanjut menjadi sesuatu yang lebih kompleks semacam
game Who Want to be Millionaire, Who has biggest brain dan sebagainya. Hasil akhir yang diharapkan kurang
lebih sebagai berikut :
Untuk membuatnya, perhatikan langkahlangkah berikut :
!ada tutorial ini akan dijelaskan metode yang sangat sederhana dalam membuat "isplay #bject, yaitu dengan
membuat secara langsung tampilan $ aset %isual di &tage. !ada dasarnya metode ini lebih mudah untuk
dipelajari, akan tetapi metode yang lebih baik adalah dengan menggunakan sistem class dan addChild. 'etika
anda sudah memahami konsep sederhana berikut, anda dapat merubahnya agar lebih optimal.
(. )uatlah sebuah file baru, atur properties file untuk keperluan mobile, yaitu dengan resolusi *++ -*+
piel dan + fps.
-
8/18/2019 KUIS EDITING VIDEO
2/13
/. &elanjutnya buatlah sebuah tampilan untuk aplikasi kuis meliputi background, beberapa static
text sebagai pemanis tampilan, dan dynamic text untuk soal dan untuk score. !erhatikan gambar :
. &eleksi dynamic text untuk soal kemudian buka panel properties kemudian atur jenis huruf, matikan
opsiselectable dan opsi line type menjadi multi line. #psi multi line digunakan agar sebuah dynamic
tet mampu menampilkan beberapa baris teks. &elain itu anda harus menekan tombol embed untuk
menyertakan file huruf ke dalam aplikasi, sehingga aplikasi dapat dijalankan di semua tempat tanpa
mengalami distorsi huruf. !erhatikan gambar :
-
8/18/2019 KUIS EDITING VIDEO
3/13
-. Untuk membuat tombol pilihan jawaban, buatlah sebuah Movieclip baru dengan memilih opsi Insert >
New Symbol. 'etikan nama alternatif jawaban registrasi point berada di tengah, lalu tekan !.
&elanjutnya buatlah / buah "ayer , pada "ayer # $atas% buatlah sebuah dynamic text untuk
menampilkan jawaban. )uka panelproperties dan tambahkan instance name &jawaban'txt&.
!ada "ayer ( $bawah% buatlah sebuah background berupa kotak.
Untuk mendapatkan efek mouse over , klik frame # layer ( tambahkan !ey)rame $)*%, lalu ubah
warna background jawaban menjadi warna lain. &elanjutnya klik frame # layer # dan tambahkan )rame
$)+%. 0note : 1fek mouse o%er dapat ditampilkan secara otomatis pada symbol bertipe button, akan
tetapi button atau tombol tidak dapat menampilkan objek lain seperti dynamic tet di dalamnya,
sehingga kita harus menggunakan symbol bertipe Mo%ieclip2. !erhatikan gambar :
3. 'embali ke Scene ( kemudian drag Movieclip alternatif jawaban ke &tage sebanyak - kali. Atur
posisinya masingmasing.
4. Agar masingmasing objek dapat diakses oleh kode, maka perlu ditambahkan instance name, klik
objek, kemudian buka panel properties, dan ketikan instance name sesuai dengan gambar berikut:
-
8/18/2019 KUIS EDITING VIDEO
4/13
5. 'emudian untuk menampilkan apakah jawaban pemain benar atau salah, digunakan metode pop up
dengan sedikit animasi. Untuk itu diperlukan sebuah mo%ieclip yang di dalamnya terdapat beberapa
pesan pop up. Untuk membuatnya buatlah sebuah tampilan popup ketika jawaban benar seperti pada
gambar, lalu seleksi dan pilih convert to symbol $),% dengan nama hasil'mc, registrasi point tepat
di tengah, centang opsi -xport for .ctionscript, lalu tekan !. !erhatikan gambar :
*. 1dit Movieclip hasil'mc dengan cara dobel klik mo%ieclip tersebut, kemudian klik frame # dan
tambahkan!eyframe $)*%, lalu edit konten di frame / menjadi tampilan ketika jawaban salah. "engan
cara yang sama pada frame / buatlah tampilan ketika permainan berakhir 0soal telah habis2. !erhatikan
-
8/18/2019 KUIS EDITING VIDEO
5/13
gambar :
6ahapan selanjutnya adalah penambahan kode. )uatlah sebuah layer baru agar tidak mengganggu objek yang
sudah anda buat pada langkah di atas. &elanjutnya klik frame ( layer #, dan ketikan kode berikut :
1 var nilai:Number = 0;
2 var no_soal:Number = 0;
3 var max_soal:Number = 10;
4 var hasil:hasil_mc;
5 // struktur soal 0. oal 1!4 "a#aban$ %a#aban benar &iletakkan no 1
' var soal:(rra) = **+ia,akah ,enemu mesin ua, -+$ +%ames att+$ +avinci+$
+ssac Ne#ton+$ +%ames bon&+$
*+(kar &ari '' a&alah -+$ +2'+$ +24+$ +1'+$ +34+$
-
8/18/2019 KUIS EDITING VIDEO
6/13
*+aian tumbuhan )an ber,eran ,entin &alam 6otosintesis
a&alah -+$ +7loro6il+$ +7ambium+$ +8,i&ermis+$ +7romatin+$
9 *+enulis triloi or& o6
-
8/18/2019 KUIS EDITING VIDEO
7/13
25
2' 6unction acak_soalAB:voi&J
2 //menacak soal
2 tem,_soal = soal.sliceA0$ soal.lenthB;
29 6or Avar i:Number = 0; i K soal.lenth; iCCBJ
30 var acak:Number = Dath.6loorADath.ran&omABLsoal.lenthB;
31 var tem,:(rra) = tem,_soal*acak;
32 tem,_soal*acak = tem,_soal*i;
33 tem,_soal*i = tem,;
34 M
35 M
3' 6unction restartAB:voi&J
3 //restart kuis$ semua variabel &ikembalikan ke ,osisi semula
3 acak_soalAB;
39 nilai = 0;
40 no_soal = 0;
41 max_soal = 10;
42 score_txt.text = +0+;
43 restart_btn.visible = 6alse;
44 M
45
4' 6unction tam,ilkan_soalAB:voi&J
4 //tam,ilkan soal
4 soal_txt.text = tem,_soal*no_soal*0;
-
8/18/2019 KUIS EDITING VIDEO
8/13
49 //acak "a#aban
50 tem,_"a#aban = tem,_soal*no_soal.sliceA1$ 5B;
51 6or Avar i:Number = 0; i K tem,_"a#aban.lenth; iCCBJ
52 var acak:Number = Dath.6loorADath.ran&omABLtem,_"a#aban.lenthB;
53 var tem,:trin = tem,_"a#aban*acak;
54 tem,_"a#aban*acak = tem,_"a#aban*i;
55 tem,_"a#aban*i = tem,;
5' M
5 //tam,ilkan "a#aban
5 "a#aban_1."a#aban_txt.text = tem,_"a#aban*0;
59 "a#aban_2."a#aban_txt.text = tem,_"a#aban*1;
'0 "a#aban_3."a#aban_txt.text = tem,_"a#aban*2;
'1 "a#aban_4."a#aban_txt.text = tem,_"a#aban*3;
'2 M
'3
'4 6unction setu,_a#alAB:voi&J
'5 restartAB;
'' tam,ilkan_soalAB;
' //menatur "a#aban
' "a#aban_1.sto,AB;
'9 "a#aban_2.sto,AB;
0 "a#aban_3.sto,AB;
1 "a#aban_4.sto,AB;
2 "a#aban_1.a&&8ventistenerADouse8vent.>>7$ cek_"a#abanB;
-
8/18/2019 KUIS EDITING VIDEO
9/13
3 "a#aban_2.a&&8ventistenerADouse8vent.>>7$ cek_"a#abanB;
4 "a#aban_3.a&&8ventistenerADouse8vent.>>7$ cek_"a#abanB;
5 "a#aban_4.a&&8ventistenerADouse8vent.>>7$ cek_"a#abanB;
' //listener untuk e6ek tombol
"a#aban_1.a&&8ventistenerADouse8vent.DF8_I8$ mouse_overB;
"a#aban_2.a&&8ventistenerADouse8vent.DF8_I8$ mouse_overB;
9 "a#aban_3.a&&8ventistenerADouse8vent.DF8_I8$ mouse_overB;
0 "a#aban_4.a&&8ventistenerADouse8vent.DF8_I8$ mouse_overB;
1 //mouse out
2 "a#aban_1.a&&8ventistenerADouse8vent.DF8_F
-
8/18/2019 KUIS EDITING VIDEO
10/13
9 6unction cek_"a#abanAe:Douse8ventB:voi&J
9 var no_"a#aban:Number = NumberAe.current
-
8/18/2019 KUIS EDITING VIDEO
11/13
121 M
122
123 6unction erak_hasilAe:8ventB:voi&J
124 var ob:b"ect = e.current
-
8/18/2019 KUIS EDITING VIDEO
12/13
145 M
14' 6unction ulaniAe:Douse8ventB:voi&J
14 hasil.remove8ventistenerA8vent.8Nhil&Ais,la)b"ectAhasilBB;
149 restartAB;
150 tam,ilkan_soalAB;
151 M
152 setu,_a#alAB;
7alankan aplikasi dengan menekan tombol Ctrl0-nter , maka hasil dari tutorial ini adalah sebagai berikut:
-
8/18/2019 KUIS EDITING VIDEO
13/13
&elanjutnya anda dapat melakukan perubahan database soal, menambahkan sistem perhitungan waktu,
bantuan dan sebagainy