Assalamualaikum Guys,ketemu lagi bareng Nuril.Hari ini Nuril akan memberikan beberapa cara membuat quiz sederhana menggunakan MIT App Inventor.Quis ini menggunakan 1 screen sebagai pertanyaan.
- Pertama kalian pastikan kalian sudah masuk ke akun Google menggunakan Email kalian.
- Kedua bukalah aplikasi MIT App Inventor 2
- Ketiga buka lah Start new program,buatlah dengan nama quizSetelah itu tambahkan Label dan Button ke Screen1 caranya dengan click-drag-drop ke bagian screen.setelah itu ubahlah Tulisan Label dengan nama Quiz dan Button dengan nama Start new Quiz caranya dibagian Properties=>Text seperti contoh gambar di bawah ini
- Setelah itu Blocks screen1 tulisan Block terdapat dibagian kanan atas samping Designer,,lalu akan muncul tampilan sebagai berikut,Setelah itu buatlah:
When Button1 Click => Do open another screen=>screenName=>mulai
- Setelah kalian membuat Tampilan awal quiz,selanjutnya Nuril akan memulai untuk membuat pertanyaan untuk quiz ini,pertanyaan untuk kuis ini Nuril menggunakan Tema Mata Uang di Seluruh Dunia.Pertanyaan kuis sesuai dengan keinginan kalian.
- Setelah itu buat lah screen ke dua untuk masuk ke pertanyaan pertama,ubahlah nama screen sesuai dengan keinginan kalian,kali ini Nuril menggunakan nama mulai
- Di screen ke dua ini Nuril membuat pertanyaan Nama “Mata uang pada gambar di Atas adalah?”.seperti contoh gambar di bawah ini
Berikut ini langkah-langkah pembuatan pertanyaan seperti diatas:
- click-drag-drop Image ke bagian screen,fungsi image di sini untuk memasukan gambar kedalam screen.Cara memasukan gambar yaitu dengan cara Picture=>Upload file=>Choose file=>pilih gambar di komputer kalian=>ok
- click-drag-drop Label ke bagian screen,fungsi label ini untuk membuat pertanyaan yang kalian inginkan untuk membuat pertanyaan menjadi Center kalian bisa mengubahnya di bagian Properties=>Width “fill paretnt”=>TextAlignment “center”
- click-drag-drop Button ke bagian screen,fungsi button untuk memilih atau mengklik jawaban yang kalian inginkan,sesuaikan button untuk pertanyaan yang kalian inginkan,pada screen di atas Nuril menggunakan 3 button untuk pertanyaan.
Setelah selesai membuat pertanyaan selanjutnya Block lah screen tersebut,tulisan Block terdapat dibagian kanan atas samping Designer,Setelah itu buatlah:
- When Button1 Click => Do set Label2=>Text=>to Correct Click => Do set Label2=>BackgroundColor=>to (pilih lah warna background untuk jawaban yang benar) Click => Do set Button4=>Visible=>to true
- When Button2 Click => Do set Label2=>Text=>to Salah Click => Do set Label2=>BackgroundColor=>to (pilih lah warna background untuk jawaban yang salah)
- When Button3 Click => Do set Label2=>Text=>to Salah Click => Do set Label2=>BackgroundColor=>to (pilih lah warna background untuk jawaban yang salah)
- When Button4 Click =>Do open another screen=>screenName=>(lanjut ke screen berikutnya)
Perhatikan gambar yang telah saya buat dibawah ini:
Setelah selesai dengan pertanyaan pertama,selanjutnya kita akan membuat pertanyaan ke dua,caranya sama dengan membuat pertanyaan di screen pertama.Pada pertanyaan kedua Nuril membuat soal “Apa Nama Mata Uang Vietnam?”,seperti contoh di bawah ini
Berikut ini langkah-langkah pembuatan pertanyaan ke dua sama seperti langkah yang pertama,seperti ini langkah-langkahnya:
- click-drag-drop Image ke bagian screen,fungsi image di sini untuk memasukan gambar kedalam screen.Cara memasukan gambar yaitu dengan cara Picture=>Upload file=>Choose file=>pilih gambar di komputer kalian=>ok
- click-drag-drop Label ke bagian screen,fungsi label ini untuk membuat pertanyaan yang kalian inginkan untuk membuat pertanyaan menjadi Center kalian bisa mengubahnya di bagian Properties=>Width “fill paretnt”=>TextAlignment “center”
- click-drag-drop Button ke bagian screen,fungsi button untuk memilih atau mengklik jawaban yang kalian inginkan,sesuaikan button untuk pertanyaan yang kalian inginkan,pada screen di atas Nuril menggunakan 3 button untuk pertanyaan.
Setelah selesai membuat pertanyaan selanjutnya Block lah screen tersebut,tulisan Block terdapat dibagian kanan atas samping Designer,Perhatikan lah jawaban yang benar ada di Button ke berapa,Setelah itu buatlah:
- When Button2 Click => Do set Label2=>Text=>to Correct Click => Do set Label2=>BackgroundColor=>to (pilih lah warna background untuk jawaban yang benar) Click => Do set Button4=>Visible=>to true
- When Button1 Click => Do set Label2=>Text=>to Salah Click => Do set Label2=>BackgroundColor=>to (pilih lah warna background untuk jawaban yang salah)
- When Button3 Click => Do set Label2=>Text=>to Salah Click => Do set Label2=>BackgroundColor=>to (pilih lah warna background untuk jawaban yang salah)
- When Button4 Click =>Do open another screen=>screenName=>(lanjut ke screen berikutnya)
Perhatikan gambar yang telah saya buat dibawah ini:
Semua langkah langkah pembuatan quiz ini setiap screen sama,tetapi perlu di ingat jawaban dari pertanyaan yang di buat ada di Button ke berapa,pastikan kalian mengeceknya dengan teliti,apabila sudah selesai dengan pertanyaan terakhir,selanjutnya kita akan membuat penutupan Quiz ini.Berikut langkah langkahnya.
- Buatlah screen baru,click-drag-drop Label ke bagian screen ubanlah namanya sesuai dengan yang diinginkan,kali ini Nuril menulis “Selamat anda berhasil memenagkan kuis”
- click-drag-drop Button1 ke bagian screenn ubahlah namanya menjadi “Ulangi kuis”
- click-drag-drop Button2 ke bagian screenn ubahlah namanya menjadi “keluar”
Seperti gambar di bawah ini yang telah Nuril buat:
Setelah selesai membuat pertanyaan selanjutnya Block lah screen tersebut,tulisan Block terdapat dibagian kanan atas samping Designer,Setelah itu buatlah:
- When Button1 Click =>Do open another screen=>screenName=>mulai
- When Button2 Click => Do close application
Terakhir adalah mencoba hasil kerja tersebut denagn mengunduh aplikasi MIT AI2 Companion di Google Play Store di handphone masing-masing.klik connect-> all companion di Web, maka akan muncul barcode yang akan di scan di aplikasi android.
Demikian penjelasan yang saya sampaikan untuk pembuatan Quiz,kurang lebihnya mohom maaf Wassalamualaikum Wr.Wb
ril_93 story 