Gambar 3.5 Diagram level 2 untuk proses Tombol latihan
3.3 Perancangan Tampilan
3.3.1 Menu Utama
Halaman awal dari aplikasi dibuat menu utama yang dilengkapi dengan tombol-tombol menu pilihan. Tombol tersebut terdiri dari menu profil, menu materi, menu contoh soal, menu
latihan, dan tombol keluar. Rancangan untuk tampilan utama aplikasi dapat dilihat pada Gambar 3.6.
Pilihan_menu
nilai nama
Jaw aba
n S
oa l
Jaw aba
n
hasil nama
Data_jawaban
User Baca nama
T.5.1 Periksa
jawaban T.5.2
Hitung nilai
T.5.3
Universitas Sumatera Utara
Gambar 3.6 Rancangan Tampilan Menu Utama
3.3.2 Menu Profil
Selanjutnya tampilan untuk bagian menu profil. Pada tahap ini informasi tentang penulislah yang akan dimuat pada menu profil. Rancangan untuk menu profil dapat dilihat dari Gambar
3.7
PROFIL
MATERI
CONTOH SOAL
LATIHAN
KELUAR JUDUL APLIKASI
Universitas Sumatera Utara
Gambar 3.7 Rancangan Tampilan Menu Profil
3.3.3 Menu Materi
Halaman menu materi ini berfungsi untuk menampilkan isi dari materi pelajaran mengenai Anatomi dan kerusakan mata. Pada bagian kiri terdapat bagian-bagian menu materi. Apabila
kursor digerakkan ke salah satu tombol bagian men materi tersebut, maka akan tampil bagian yang akan dibahas dari materi tersebut. Menu materi ini terdiri dari lima pembahasan antara
lain Anatomi, kerusakan mata, lapisan retina, sirkulasi retina dan Tes mata. Rancangan untuk menu materi dapat dilihat pada Gambar 3.8.
GAMBAR
TENTANG PENULIS
JUDUL MENU
HOME
Universitas Sumatera Utara
Gambar 3.8 Rancangan Tampilan Menu Materi
Setelah dipilih pada bagian materi apa yang ingin dilihat, maka tampilan isi dari materi akan terlihat dalam gambar dengan animasi yang telah disajikan. Rancangan untuk tampilan isi
materi dapat dilihat pada Gambar 3.9
Gambar 3.9 Rancangan Tampilan isi Menu Materi 3.3.4 Menu Contoh Soal
Pada tampilan menu contoh soal dirancang dengan adanya tombol button yang terdiri dari lima buah pertanyaan, dimana dari pertanyaan tersebut dilengkapi dengan jawaban yang
tersedia. Rancangan tampilan menu contoh soal dapat dilihat pada Gambar 3.10
PILIHAN MATERI
ANIMASI
MATERI ANATOMI
KERUSAKAN MATA
LAPISAN RETINA
SIRKULASI RETINA
HOME SEKILAS PEMBAHASAN
MATERI
Universitas Sumatera Utara
Gambar 3.10 Rancangan Tampilan Menu Contoh Soal
3.3.5 Menu Latihan
Pada tampilan menu latihan akan dibedakan menjadi tiga bagian, yakni bagian pertama meminta pengguna untuk mengisikan nama sebelum memulai latihan, bagian kedua
menampilkan soal-soal latihan dan bagian terakhir yang menampilkan nilai hasil dari latihan. Rancangan tampilan untuk ke empat bagian menu latihan dapat dilihat pada Gambar 3.11 –
3.13
Gambar 3.11 Rancangan Tampilan mengisi nama untuk melanjutkan latihan 1
2 3
4 5
CONTOH SOAL
HOME SOAL DAN JAWABAN
ISIKAN NAMA ANDA
TIDAK YA
Universitas Sumatera Utara
Gambar 3.12 Rancangan Tampilan pertanyaan menu latihan
Gambar 3.13 Rancangan Tampilan nilai dari menu latihan LATIHAN
PERTANYAAN DAN PILIHAN JAWABAN
LATIHAN
HASIL LATIHAN NILAI
BENAR SALAH
HOME
Universitas Sumatera Utara
3.4 Story Board Story Board adalah suatu bentuk penjelasan tentang susunan materi yang disampaikan pada
detik demi detik beserta suara, gambar, dan animasi yang dibutuhkan.
Adapun Story Board yang dibuat adalah sebagai berikut:
Universitas Sumatera Utara
Scene Sequence
Board Durasi
Naskah 1
2
3 1
1
1
2 00:00:11
00:00:06 00:00:05
00:03:29
Layer menu utama dimana mempunyai 5
button yaitu : profil, materi, cth soal, dan
latihan serta keluar. Logo dan text berisi
animasi tampilan yang bergerak melingkar
berulang-ulang dan dilengkapi dengan
musik. Menu profil berisi
gambar dan data diri pendesain. Serta button
home. Pada gambar terdapat animasi
pergerakan sinar dari ujung kiri ke kanan dan
dilengkapi dengan musik.
Menu materi terdapat 6 button: anatomi,
kerusakan, lapisan, sirkulasi, tes mata dan
home. Serta gambar animasi yang berubah-
ubah dengan gambar beberapa orang yang
dijuluki dengan mata terindah dan dilengkapi
dengan musik. Layer anatomi dan
fungsi dilengkapi dengan button materi
yang berfungsi kembali ke menu materi. Layer
ini terdapat gambar animasi anatomi mata
yang ditunjuk satu persatu dengan suara.
Latihan Keluar
Profil
Materi Cth soal
Logo usu
Text
Profil
Gambar Profil
Text
Home
Materi
Anatomi
Kerusakan
lapisan Sirkulasi
Tes mata Gambar
Animasi
Home
Anatomi Dan Fungsi
Gambar Animasi mata
Materi
Universitas Sumatera Utara
3
4
5
6 00:01:35
00:01:39
00:00:38 00:00:15
Layer kerusakan mata terdapat
button materi yang berfungsi kembali
ke menu materi. Layer ini terdapat gambar
animasi kerusakan mata antara lain ablasi retina,
retina tears, dan buta warna yang ditunjuk
satu persatu dengan suara dan musik.
Layer lapisan retina terdapat
button materi yang berfungsi kembali
ke menu materi. Layer ini terdapat gambar
animasi lapisan retina yang ditunjuk satu
persatu dengan suara dan musik.
Layer Sirkulasi retina terdapat
button materi yang berfungsi kembali
ke menu materi. Layer ini terdapat gambar
animasi sirkulasi retina yang ditunjuk satu
persatu dengan suara dan musik.
Layer Tes mata terdapat
button materi yang berfungsi kembali
ke menu materi. Serta button cek dan coba
lagi yang berfungsi mencek kesalahan dan
mencoba lagi. Layer ini terdapat 4 gambar
lingkaran yang berisi angka dan tempat
pengisian angka tersebut dan terdapat
musik yang mengiringinya.
Kerusakan Mata
Gambar Animasi Kerusakan mata
Materi
Lapisan Retina
Gambar Animasi Lapisan Retina
Materi Sirkulasi Retina
Gambar Animasi Sirkulasi Retina
Materi
Tes Mata
Materi cek
4 2
8 1
Universitas Sumatera Utara
4
5 1
1
2
3 00:00:17
00:00:05 00:00:16
00:00:03 Layer Contoh soal
terdapat 6
button: 1, 2, 3, 4, 5 dan home.
Apabila angka pada button dipilih maka
akan tampil soal dengan jawabannya.
Layer ini juga terdapat musik.
Layer latihan terdapat
2 text yang tertera yaitu masukan nama dan
lanjutkan. Dimana di bawah dari itu terdapat
link untuk menyimpan nama. Layer ini
terdapat 2 button: ya dan tidak. Apabila ya,
maka sistem akan melanjutkan jika tidak
sistem akan kembali ke home.
Layer latihan ini terdapat nama dan
soal yang berbentuk pilihan berganda.
User diminta memilih salah satu dari 4
jawaban.
Layer ini juga terdapat musik.
Layer latihan ini terdapat
hasil latihan, nilai, benar dan salah
dari user. Layer ini terdapat juga button
home dan coba lagi serta musik, dimana
coba lagi berarti mengulang soal dari
awal.
Gambar 3.14 Story Board
1
Contoh Soal
2 3
4 5
Soal dan
Jawaban
Home
Latihan
Input Nama
Ya
Tidak
Masukan Nama Anda
Lanjutkan
Latihan
Nama Peserta Soal 110
Pilihan berganda a. c.
b. d.
Latihan
Hasil Latihan : Nilai :
Benar : Salah :
Home
Coba Lagi
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI
4.1 Implementasi 4.1.1 Tampilan Menu Utama