Rancangan layar :
1. Layar Tampilan Awal
Gambar 3.34 Rancangan Layar Tampilan Awal
Tampilan awal dari program ini merupakan animasi text maupun gambar. Animasi ini akan memunculkan suatu konfirmasi untuk masuk atau keluar dari flash perangkat ajar ini.
Gambar 3.35 Rancangan Konfirmasi Layar Tampilan Awal
Apabila tombol ‘Keluar’ ditekan, maka program akan keluar. Apabila tombol ‘Jalankan Animasi’ ditekan, maka program akan menuju ke Layar Menu.
Konfirmasi
Jalankan Keluar
2. Layar Utama
Gambar 3.36 Rancangan Layar Utama 1
Layar Utama merupakan suatu wadah untuk menampilkan tampilan layar-layar menu. Layar Utama ini juga merupaka wadah untuk layar-layar materi dan juga soal akan tetapi untuk layar materi dan soal, tombol untuk ’Kembali ke menu’ dihilangkan seperti gambar 3.37
Gambar 3.37 Rancangan Layar Utama 2
Keluar Tampilan Layar Suara Kalkulator Keluar Tampilan Layar Suara Kalkulator Kembali ke menu
Pada Layar Utama seperti yang terlihat pada Gambar 3.36, terdapat tombol-tombol yang dapat ditekan, antara lain
a. ‘Kembali ke menu’ apabila di klik maka tampilan layar akan menampilkan Layar Menu,
b. ‘Suara’ apabila kursor atau mouse diarahkan tombol tersebut maka user dapat membesar kecilkan musik atau suara yang sedang di dengar pada saat aplikasi flash berjalan,
c. ‘Kalkulator’ apabila ditekan, maka akan muncul suatu kalkulator mini yang dapat digunakan user untuk membantu jika ada perhitungan,
d. ‘Keluar’ apabila tombol ini ditekan, maka aplikasi flash akan berhenti atau keluar.
3. Layar Menu
Gambar 3.38 Rancangan Layar Menu
Bab 1 Bab 2 Bab 3 Bab 4 Profil Keluar Animasi Suara Kalkulator
Gambar 3.38 diatas merupakan keseluruhan tampilan menu pada aplikasi perangkat ajar fisika ini. Gambar 3.34 tersebut terdiri dari Layar Utama dan juga Layar Menu. Yang menjadi tampilan dari layar menu antara lain ‘Bab 1’, ‘Bab 2’, ‘Bab 3’, ‘Bab 4’, ‘Profile’, dan ‘Animasi’.
Tampilan Menu ini berisi Animasi serta tampilan dari menu-menu yang ada di program ini. Pada bagian kiri, terdapat menu-menu ‘Bab 1’, ‘Bab 2’, ‘Bab 3’, ‘Bab 4’, dan ‘Profile’ yang apabila ditekan maka bagian ‘Animasi’ akan berubah sesuai dengan menu yang ditekan.
Apabila menu ‘Bab 1’, ‘Bab 2’, ‘Bab 3’, dan ‘Bab 4’ maka animasi akan memunculkan Layar Bab, sedangkan apabila menu ‘Profile’ ditekan, maka animasi akan memunculkan Layar Profile.
4. Layar Bab
Gambar 3.39 Rancangan Layar Bab
Layar Bab berisikan Content Sub dari Bab yang ditekan. Setiap Content Sub akan berubah sesuai dengan menu Bab yang ditekan, antara
lain ‘Bab 1’, ‘Bab 2’, ‘Bab 3’, dan ‘Bab 4’. Bab 1 Bab 2 Bab 3 Bab 4 Profil Content Sub Bab
5. Layar Materi
Gambar 3.40 Rancangan Layar Materi
Layar materi merupakan isi dari Sub Bab. Layar Materi berisi ‘Content Materi’. Setiap ‘Content Materi’ berbeda-beda sesuai dengan Sub Bab yang dipilih. Pada Layar Materi juga berisi tombol ‘Pilih Materi’ dan ‘Next’. Apabila tombol ‘Pilih Materi’ ditekan maka Layar akan kembali ke Layar Menu, tetapi jika tombol ‘Next’ ditekan maka Layar akan menuju ke ‘Content Materi’ berikutnya.
Gambar 3.41 merupakan tampilan dari ‘Content Materi’ yang telah ditekan tombol ‘Next’. Layar ini akan memunculkan tombol ‘Back’ yang berguna untuk memunculkan ‘Content Materi’ sebelumnya. Jika ‘Content Materi’ tekan sampai akhir, maka tombol ‘Next’ akan menuju ke Layar Soal.
Content Materi Pilih Materi
Gambar 3.41 Rancangan Layar Materi Lanjutan
6. Layar Pra-Soal
Gambar 3.42 Rancangan Layar Soal
Pada Layar Pra-Soal seperti yang terlihat pada Gambar 3.41, terdapat input - input berupa input ‘Nama’, ‘Kelas’, dan ‘No. Absen’ yang dapat diisi oleh user untuk dimasukkan ke dalam Layar Nilai.
Quiz Mulai Nama Kelas No. Absen Kembali ke bab Content Materi Pilih Next Back
Layar Soal ini juga terdapat tombol ‘Pilih Materi’ yang apabila ditekan maka layar akan kembali ke Layar Menu dan terdapat juga tombol ‘Mulai’ jika ditekan maka Layar Soal akan muncul.
7. Layar Soal
Gambar 3.43 Rancangan Layar Soal Lanjutan
Gambar 3.43 merupakan Layar Soal yang akan muncul setelah user menekan tombol ‘Mulai’ pada Layar Pra-Soal. Pada Layar Soal
tersebut berisi ‘Soal’ dan ’Pilihan Ganda’. Apabila user menekan tombol ‘Pilihan Ganda’ maka ‘Pilihan Jawaban’ akan muncul sesuai dengan tombol ‘Pilihan Ganda’ yang ditekan dan tombol ‘Jawab’ akan dapat ditekan. Apabila tombol ‘Pilihan Ganda’ belum ditekan maka tombol ‘Jawab’ tidak akan dapat ditekan. ‘Pilihan Jawaban’ berubah setiap kali tombol ‘Pilihan Ganda’ ditekan. Jika terjadi perubahan pada ‘Pilihan
Quiz Jawab Soal Pilihan Ganda Pilihan Jawaban a. b. c. d.
Ganda’ maka ‘Pilihan Jawaban’ juga akan berubah. Pada saat tombol ‘Jawab’ ditekan, ‘Pilihan jawaban’ akan memunculkan ‘Salah’ atau ‘Benar’. Layar yang berisi soal akan berulang sampai soal habis kemudian Layar akan berpindah menuju Layar Nilai.
8. Layar Nilai
Gambar 3.44 Rancangan Layar Nilai
Gambar 3.44 merupakan Layar Nilai berisi hasil dari Soal yang telah dikerjakan sebelumnya. ‘Nama’, ‘Kelas’ dan ‘No.Absen’ didapat dari input yang telah dimasukkan pada awal Layar Soal. Pada Layar Score juga terdapat tombol ‘Pilih Materi’ yang apabila ditekan maka
Layar akan kembali ke Layar Menu, dan terdapat juga tombol ‘Keluar’ yang apabila ditekan maka program akan keluar/berhenti.
Quiz Pilih Keluar Nama Kelas No. Absen Hasil Nilai
Gambar 3.45 Rancangan Hasil
Gambar 3.45 merupakan tampilan ’Hasil’ dari Layar Nilai.
Gambar 3.46 Rancangan Nilai
Gambar 3.46 merupakan tampilan dari ‘Nilai’ yang ada di Layar Nilai. Setelah mengerjakan soal, maka ‘Benar’ dan ‘Salah’ akan dihitung kemudian dijumlahkan menjadi ‘Nilai’.
Benar Salah Total Score Nilai Nilai Benar Nilai salah Jumlah Hasil Soal 1 Soal 10 Benar/Sala Benar/Sala
9. Layar Profile
Gambar 3.47 Rancangan Layar Profile
Gambar 3.47 merupakan Gambar rancangan untuk tampilan Layar Profile.
3.3.4 XML (Extensible Markup Language)
Format yang digunakan dalam membuat basis data, kami menggunakan XML. XML dapat didefinisikan sebagai aplikasi yang diakses oleh aplikasi yang lain. Format XML merupakan format multiplatform yang dapat berhubungan dengan aplikasi apapun. XML dalam aplikasi perangkat ajar fisika ini digunakan untuk meng-update database soal.
3.3.5 Spesifikasi Proses