35 BAB III
ANALISA DAN PERANCANGAN
3.1 Analisis Masalah
Analisis merupakan tahap awal yang penulis lakukan sebelum membangun perangkat lunak. Analisis dibagi menjadi dua bagian yaitu analisis dan perancangan aplikasi. Analisis dilakukan terhadap data-data yang menampilkan masalah perancangan perangkat lunak. Sehingga diketahui spesifikasi kebutuhan sistem yang dibangun. Proses analisis sangat penting untuk menentukan berhasil tidaknya aplikasi dibangun. Dikarenakan tahap analisis merupakan tahap di dalam rekayasa perangkat lunak yang dapat mendefinisikan dengan jelas permasalahan dan kebutuhan sistem dapat dipenuhi sehingga sistem yang dibangun akan menjadi solusi dalam masalah tersebut.
3.1.1 Analisis Aplikasi Sebelum Dikembangkan
Analisis awal yang dilakukan penulis sebelum perancangan aplikasi adalah menganalisis permasalahan sistem dari aplikasi yang sudah jadi untuk mengetahui tujuan dalam pengembangan sistem didalam aplikasi.
Penulis mengembangkan sebuah aplikasi penghasil soal dan algoritma dijkstra(Anis Cherid,2009). Dengan mengembangkan source code yang sudah ada, aplikasi yang di analisis sebelum dikembangkan merupakan sebuah aplikasi yang dapat menampilkan graph dan langkah-langkah dari graph yang ditampilkan. Dimana aplikasi ini dapat menampilkan suatu graph berarah kepada user, langkah awal user menggunakan aplikasi yaitu dengan memasukkan nilai didalam kotak input yang kemudian nilai tersebut akan direspon oleh sistem bila user menekan tombol mulai, maka sistem akan merespon nilai yang diinput kedalam kotak input untuk menentukan banyak node yang ditampilkan. Aplikasi dapat pula menampilkan langkah-langkah algoritma dijkstra didalam textarea, dimana langkah-langkah ini akan tampil bila graph telah tampil, sehingga user dapat mengetahui langkah-langkah sesuai dari graph yang ditampilkan. Setiap nilai jarak node ke node dapat bervariasi dikarenakan nilai tidak ditentukan oleh user melainkan oleh sistem yang membuat.
36
Pada sistem aplikasi, terdapat tahap-tahap yang telah ditentukan oleh sistem, sehingga user tidak dapat merubahnya yaitu dalam jumlah node yang ditampilkan telah ditentukan oleh sistem dengan maksimal nilai node adalah 11, dimana user tidak dapat memasukkan nilai melebihi maksimal node yang telah ditentukan. Sistem tidak dapat menampilkan graph kembali dikarenakan, sistem belum dirancang untuk menampilkan graph berulang-ulang, kecuali bila user menutup aplikasi dan membuka kembali.
3.1.2 Analisis Rencana Pengembangan Aplikasi
Dalam analisis yang dilakukan untuk dapat mengembangkan sistem, penulis harus dapat mengetahui permasalahan yang ada didalam analisis aplikasi sebelum dikembangkan. Permasalahan yang diketahui akan menjadi pengembangan sistem didalam aplikasi. Sehingga tujuan yang direncanakan akan dapat diimplementasikan.
Rencana pengembangan aplikasi yang penulis lakukan adalah terfokus untuk mengembangkan aplikasi dapat menampilkan soal secara otomatis secara berulang-ulang dan antar muka didalam aplikasi, topik yang dibahas didalam aplikasi yaitu untuk memberikan pembelajaran interaktif kepada user tentang bagaimana memahami setiap langkah-langkah dari algoritma Dijsktra dari graph yang ditampilkan dengan menjawab soal secara pilihan ganda (multi choices). Dalam tahap menjawab soal terdapat aturan yang ditetapkan yaitu soal yang ditampilkan terdapat beberapa level yang berbeda, disetiap level terdapat perbedaan dalam menampilkan soal dimana pada level 1 hanya memberikan soal untuk memahami langkah-langkah awal algoritma dijkstra, kemudian pada level 2 memberikan soal lanjutan dari level 1 untuk memahami langkah-langkah berikutnya dari algoritma dijkstra, pada level 3 sistem akan menampilkan soal yang berhubungan dengan langkah akhir dari algoritma dijkstra yaitu melanjutkan soal dari level 2 dan untuk level 4 sistem akan menampilkan soal secara penuh dari langkah algoritma dijkstra dengan graph yang tampil. Dalam menampilkan soal, sistem akan mengacak graph yang tampil dan mengacak jawaban yang tampil, sehingga aplikasi dapat lebih variatif digunakan oleh user dalam mempelajari algoritma dijkstra.
37
Aplikasi juga memberikan kemudahan bagi user untuk mempelajari langkah-langkah algoritma dijkstra dan menjawab soa-soal yang diberikan yaitu terdapat lembar kerja di dalam aplikasi yang berfungsi untuk membantu user dalam mempelajari setiap langkah demi langkah yang telah dilalui. Lembar kerja ini terdapat di samping graph yang ditampilkan bila user menekan tombol “Tampilkan Kotak Jaraknya dari Asal”, sehingga akan tampil lembar kerja yang dapat digunakan oleh user dalam membantu mempelajari langkah-langkah algoritma dijkstra dan menjawab soal-soal yang diberikan, kemudian lembar kerja juga dapat disembunyikan kembali bila user menekan tombol “Sembunyikan Kotak Jaraknya dari Asal”, sehingga lembar kerja pun akan hilang tanpa menghilangkan tulisan yang diinput didalam lembar kerja.
Aplikasi juga menempatkan aturan dalam menjawab soal, dimana user diberikan kesempatan menjawab sebanyak 2 kali, Kesempatan ini berfungsi untuk membatasi user dalam memilih jawaban, bila user memilih jawaban salah maka kesempatan menjawab akan berkurang 1, jika user melakukan kesalahan sebanyak 2 kali maka sistem akan memberitahukan user jawaban yang benar sebelum mengembalikan soal ke tahap pemilihan awal dan menampilkan graph yang lain. Setiap jawaban yang benar akan dapat dipelajari oleh user dengan ditampilkan di kotak teks soal, sehingga user dapat mempelajari langkah-langkah yang telah dilalui untuk dapat menjawab soal berikutnya. Aplikasi juga akan memberikan hasil jawaban kepada user dengan menampilkan hasil nilai jawaban yang benar maupun yang salah. Aplikasi juga akan menampilkan kesimpulan dari langkah-langkah algoritma dijkstra sesuai dengan graph yang ditampilkan, kesimpulan ini merupakan hasil langkah akhir dari graph yang ditampilkan.
Bila user telah berhasil menjawab seluruh soal-soal yang diberikan sesuai dengan level yang dilalui, maka aplikasi akan menampilkan animasi bintang didalam aplikasi sebagai tanda user telah berhasil menjawab seluruh soal di level yang sedang dilalui. Aplikasi akan menampilkan kotak pesan kepada user yaitu pemilihan ke level berikutnya bila user baru mencapai level 1 maka sistem akan mengaktifkan level 2 dan user juga dapat mengerjakan soal-soal di level sebelumnya bila user memilih level sebelumnya yang telah dilalui. Sistem tidak mengaktifkan keseluruhan level dikarenakan, aplikasi dirancang untuk melewati
38
level demi level secara bertahap dari level 1 ke level 4.bila user berhasil menjawab seluruh soal di level 2 maka akan tampil kotak pesan pemilihan level dari level 1 ke level 3. Dan bila user telah berhasil menjawab seluruh soal di level 3 maka, sistem akan menampilkan seluruh level dari level 1 hingga level 4 akan aktif sehingga user dapat memilih apakah ingin kembali mengerjakan kelevel sebelumnya atau kelevel selanjutnya. Level yang terakhir merupakan level 4, sehingga user harus melaui level 4 jika ingin menyelesaikan seluruh level di dalam aplikasi belajar dijkstra.
3.2 Perancangan Aplikasi
Didalam perancangan aplikasi penulis membuat suatu pemodelan aplikasi yang akan mempermudah aplikasi untuk dapat dipahami pemanfaatannya.
3.2.1 Pemodelan Diagram Use Case
Diagram use case dapat menjelaskan interaksi antara user dengan sistem dan menggambarkan fungsionalitas dari sebuah apa yang dilakukan sistem. Secara umum pemodelan Use Case dapat dilihat pada Gambar 3.1.
System
Gambar 3.1 Diagram Use Case Aplikasi Penghasil Soal Otomatis Dalam Topik Algoritma Dijkstra
Penjelasan mengenai pemodelan diagram use case dari gambar 3.1 diatas dapat di amati dibawah ini.
1. Menampilkan halaman Sejarah yaitu user dapat melihat halaman Sejarah Algoritma Dijsktra.
2. Menampilkan halaman Petunjuk yaitu user dapat melihat halaman Petunjuk untuk mengetahui petunjuk dalam latihan soal.
User Menampilkan Sejarah Menampilkan Petunjuk Melakukan Latihan
39
3. Melakukan latihan yaitu user memulai untuk melakukan latihan soal.
3.2.2 Pemodelan Diagram Aktifitas 3.2.2.1 Diagram Aktifitas Sejarah
User System
Gambar 3.2 Diagram Aktifitas Menu Mulai
Pada diagram aktifitas sejarah langkah awal yang dilakukan user yaitu memilih tombol sejarah dan kemudian sistem akan menampilkan halaman sejarah kepada user setelah itu langkah berakhir.
3.2.2.2 Diagram Aktifitas Petunjuk
Gambar 3.3 Diagram Aktifitas Halaman Petunjuk
Pada diagram aktifitas Petunjuk langkah awal user akan memilih tombol Petunjuk dan kemudian sistem akan menampilkan halaman petunjuk, sehingga
User System
Memilih Tombol Sejarah
Menampilkan halaman Sejarah
Memilih Tombol Petunjuk
40
user dapat melihat petunjuk-petunjuk bagaimana aplikasi digunakan didalam melakukan latihan soal
3.2.2.3 Diagram Aktifitas Latihan
Pada diagram aktifitas latihan langkah user memilih tombol Mulai pada halaman utama, kemudian sistem akan menampilkan halaman latihan pada level 1, kemudian untuk menampilkan soal maka user harus menekan tombol Mulai untuk menampilkan soal-soal latihan. Maka user dapat menjawab soal yang ditampilkan. jika, user telah memilih salah satu jawaban maka sistem akan memeriksa jawaban, apakah jawaban yang dipilih user benar atau salah. Jika jawaban user benar maka sistem akan menampilkan kotak pesan jawaban benar dan selanjutnya sistem akan menampilkan soal berikutnya, tetapi bila jawaban user salah maka sistem akan menampilkan kotak pesan bahwa jawaban salah dan selanjutnya sistem akan mengurangi kesempatan menjadi 1 dan bila user memilih jawaban yang salah kembali maka sistem akan menampilkan kotak pesan kembali dengan menampilkan kotak pesan bahwa kesempatan menjawab 0 dan akan menampilkan jawaban yang benar kepada user. Sistem akan menampilkan kotak pesan pindah level kepada user,setelah user berhasil menjawab soal-soal yang ditampilkan, sehingga user dapat memilih melanjutkan ke level 2. Pada level 2 soal yang ditampilkan yaitu soal lanjutan dari langkah-langkah algoritma dijkstra pada level 1, dan sistem akan menampilkan kotak pesan seperti kondisi jawaban yang dipilih oleh user dan bila user telah berhasil menjawab soal-soal yang ditampilkan maka user kembali menampilkan kotak pesan pindah level 3 dan sistem akan mengaktifkan level 3 sehingga user dapat melanjutkan ke level 3 dan sistem juga akan mengaktifkan level 1&2 apabila user ingin kembali menjawab soal-soal di level sebelumnya. Pada level 3&4 terdapat perbedaan pada soal yang ditampilkan bila level 3 menampilkan soal lanjutan pada level 2 dan dapat melanjutkan ke level 4 maka pada level 4 yaitu melanjutkan soal latihan pada level 3 dan bila user telah berhasil menjawab soal-soal yang ditampilkan maka sistem akan menampilkan informasi bahwa user telah berhasil menjawab seluruh soal dari level 1 sampai level 4. Pada level 3&4 tombol level dari level 1 & 4 akan aktif dikarenakan pada level 3 level tertinggi adalah level 4 dan pada level 4
41
hanya memberikan pilihan kepada user apakah nmenginginkan kembali ke level sebelumnya.Seperti Gambar 3.4.
User System
Gambar 3.4 Diagram Aktifitas Latihan
pilih Jawaban Menampilkan Soal
Berikutnya Cek Jawaban [Benar] [Salah] Pesan Jawaban Benar Pesan Jawaban Salah [soal <= maks.soal] [soal > maks.soal] [Ya masih ada
kesempatan]
[Level >4] [Level <= 4]
Pesan Level Berikutnya
Cek Tombol Level [tidak ada kesempatan] Soal Kembali ke Awal Soal <= max Soal Cek Level Pesan Nilai Jawaban
A Pilih Tombol Level B Level <= 4 Menampilkan Graph Berikutnya Kesemp atan - 1 Pesan kesempatan = 0
Pesan seluruh Level berhasil di selesaikan
42
Gambar 3.4 Diagram Aktifitas Latihan (Lanjutan)
3.2.3 Pemodelan Diagram Sequence
Diagram Sequence mengambarkan perilaku (attitude) rangkaian langkah-langkah pada dilakukan untuk sebagai respon sebuah kejadian untuk menghasilkan sebuah output tertentu. Pada diagram sequence menampilkan objek contoh dan pesan-pesan yang melewati objek-objek yang terdapat didalam diagram use case. Diagram Sequence menunjukkan interaksi dengan menampilkan partisipan dengan garis alir secara vertikal dan pengurutan pesan dari atas ke bawah.
Dari use case yang telah dijelaskan diatas, maka dapat digambarkan diagram sequence yang sesuai seperti pada berikut ini.
3.2.3.1 Penjelasan Diagram Sequence Menampilkan Sejarah.
Pada Diagram Sequence Menampilkan Sejarah yaitu diagram sequence dimana aktor dapat mengakses link menu sejarah yang terdapat pada menu utama
A [Pilih Level Selanjutnya] B Tampil Halaman Level selanjutnya yang dipilih [Pilih Level Sebelumnya] Level yang dipilih Tampil Halaman Level sebelumnya yang dipilih
43
di halaman utama aplikasi. Dalam menu utama aktor dapat melihat tampilan (view) dari hasil proses yang telah dipilih.seperti Gambar 3.5.
User Menu utama Proses sistem Sub menu
Sejarah
Gambar 3.5 Diagram Sequence Sejarah
3.2.3.2 Penjelasan Diagram Sequence Menampilkan Petunjuk.
Pada Diagram Sequence Menampilkan Petunjuk yaitu diagram sequence dimana aktor dapat mengakses link menu petunjuk yang terdapat pada menu utama di halaman utama aplikasi. Dalam menu utama aktor dapat melihat tampilan (view) dari hasil proses yang telah dipilih yaitu dapat mempelajari petunjuk dalam melakukan latihan soal di menu latihan. Seperti pada Gambar 3.6.
Menuju menu utama Mengakses menu sejarah Menjalankan akses ke sub menu sejarah
44
User Menu utama Proses sistem Sub menu Petunjuk
Gambar 3.6 Diagram Sequence Petunjuk 3.2.3.3 Penjelasan Diagram Sequence Latihan
Pada diagram sequence latihan user dapat melakukan latihan dengan menjawab soal-soal yang ditampilkan dan graph yang telah di acak oleh sistem. Soal yang dibuat merupakan pilihan ganda, jadi user hanya dapat memilih satu jawaban yang benar. Sistem akan memeriksa jawaban user bila user telah memilih salah satu jawaban, jika jawaban user benar maka sistem akan memeriksa maksimal dari soal sebelum menampilkan soal berikutnya, jika maksimal soal belum terpenuhi maka soal berikutnya akan tampil dengan tidak merubah graph yang tampil, jika terpenuhi maka sistem akan menampilkan hasil dari latihan dan lanjut ke level berikutya.
Jika jawaban user salah maka sistem akan memeriksa kesempatan ada, jika terpenuhi maka user harus menjawab soal yang sama dan jika, jawaban user salah kesempatan tidak ada dan sistem akan menampilkan graph baru dengan kembali ke awal soal. Bila sudah menjawab seluruh latihan soal, kemudian level selanjutnya akan aktif sehingga user dapat melanjutkan ke level selanjutnya dan user juga dapat memilih level sebelumnya. Seperti pada Gambar 3.7.
Menuju menu utama Mengakses menu Petunjuk Menjalankan akses ke sub menu Petunjuk
45
Gambar 3.7 Diagram Sequence Latihan 3.3 Algoritma Menampilkan Soal
Pada algoritma menampilkan soal, soal yang ditampilkan oleh sistem merupakan langkah-langkah dari algoritma dijkstra.
Gambar 3.8 Algoritma Menampilkan Soal
User halaman Periksa Periksa maks. Periksa nilai Tampil level
latihan Jawaban Soal kesempatan Latihan Selanjutnya C Mengacak Graph B Mengacak langkah Membuat Array Menjawab soal yang Benar Jawaban User menjawab soal latihan Level Berikutnya Nilai tampil Jawaban Benar Jawaban Salah Kembali mengerjak an soal latihan mulai A D G Menentukan Jawaban Benar Menampilkan Soal berikutnya
46
Gambar 3.8 Algoritma Menampilkan Soal (lanjutan)
Soal<=maxSoal
Soal>maxSoal B
User pilih Tombol Level Sebelumnya Kesempatan != 0 Kesempatan = 0 Benar Pesan Jawaban Benar Pesan Jawaban Salah
User pilih Tombol Level Selanjutnya Mengecek Level Periksa kesempat an Soal kembali ke awal Menentukan Jawaban Salah
Tampil kesimpulan & animasi bintang
Tampil Halaman Level sebelumnya Periksa
maxSoal
Pesan Pindah Level Salah Tampil Jawaban Benar C Periksa user pilih tombol level E F D A Periksa Jawaban User Menghilangkan satu Jawaban salah Pesan Kesempatan
47
Gambar 3.8 Algoritma Menampilkan Soal (lanjutan)
Pada algoritma ini yaitu menjelaskan alur dari program yang dibuat. Langkah awal yang djalani pada kode program adalah membuat array yang berfungsi menampung langkah-langkah algoritma Dijkstra, kemudian program akan mengacak graph yang akan ditampilkan untuk menjadi pertanyan dalam langkah algoritma Dijkstra dan kemudian soal akan mengacak langkah-langkah algoritma untuk dijadikan jawaban benar dan jawaban yang salah. Program tidak mengacak soal yang dijadikan pertanyaan dikarenakan soal yang ditanyakan merupakan langkah-langkah dari algoritma Dijkstra setahap demi setahap sesuai dengan graph yang ditampilkan. Langkah yang ditampilkan sesuai tingkatan level, untuk level 1 menampilkan soal untuk mempelajari langkah-langkah awal dari algoritma dijkstra dengan batas yang telah ditentukan oleh program, untuk level 2 program juga tidak mengacak soal melainkan hanya mengacak penempatan jawaban dan mengacak graph yang akan ditampilkan, seterusnya program hanya menampilkan soal dengan langkah-langkah algoritma dijkstra secara berurutan dengan melanjutkan langkah pada level 1 dengan batas soal yang sudah ditentukan oleh program. Untuk dengan level 3, dimana program akan menampilkan soal dengan langkah-langkah algoritma dijkstra secara berurutan pula dengan melanjutkan langkah pada level 2 dengan batas soal yang sudah ditentukan oleh program. Kemudian pada level 4, menampilkan soal langkah-langkah secara penuh dari langkah algoritma dijkstra, sehingga user harus dapat menguasai langkah-langkah
Level <=4
Pesan Level Naik
selesai
Level > 4 Periksa
Jumlah Level
Pesan Level Selesai
Periksa sesuai level yang dipilih E
G
48
algoritma dijktra secara keseluruhan dari soal-soal yang telah dijawab di level sebelumnya.
Ketika user memilih tombol Mulai di halaman utama, maka user harus menekan tombol Mulai lagi di halaman latihan supaya program menampilkan graph dan soal secara acak, bentuk soal merupakan pilihan ganda. Setelah soal ditampilkan maka user dapat menjawab salah satu jawaban. Jawaban yang telah dipilih oleh user, selanjutnya akan diproses oleh program. Program akan memeriksa apakah jawaban user benar atau salah. Jika jawaban user salah maka program akan mengurangi kesempatan menjadi 1, kemudian akan memeriksa apakah kesempatan == 0 atau tidak. Jika tidak maka program akan menghilangkan satu jawaban yang salah dan user harus menjawab soal yang sama graph yang tidak berubah, bila user menjawab jawaban salah kembali maka kesempatan habis program akan menampilkan jawaban yang benar kepada user sebelum program mengacak graph kembali dan user dapat menjawab soal dari awal. Selanjutnya, jika jawaban user benar maka program akan memeriksa soal yang telah di tampilkan apakah telah mencapai maxSoal atau belum. Jika, jumlah soal yang belum mencapai maxSoal maka program akan menampilkan soal berikutnya tanpa mengacak kembali graph yang ditampilkan dan bila soal telah mencapai maxSoal, maka program akan menampilkan nilai kotak pesan kesimpulan dan animasi bintang sebelum user pindah ke level selanjutnya dan program juga akan menampilkan hasil nilai jawaban benar dan salah yang telah dijawab oleh user. Jika level belum mencapai level 4 maka, user harus memilih level berikutnya. Program akan menampilkan level sebelumnya bila user ingin melakukan latihan di level yang telah dicapai. Bila, user telah berhasil mencapai level 4 dan berhasil menjawab seluruh soal di level 4, maka program akan menampilkan informasi bahwa user telah berhasil mencapai seluruh latihan soal di seluruh level yang di berikan, sehingga program akan berakhir.
3.4 Perancangan Antar Muka
Perancangan antar muka pada aplikasi, sedikit memberikan sentuhan animasi pada halaman utama saat user membuka aplikasi. Pada halaman utama terdapat menu Mulai, Sejarah, Petunjuk yang membedakan pada tampilan halaman utama
49
dan tampilan antar muka pada halaman latihan. Berikut ini beberapa bentuk antar muka pada aplikasi dengan sistem pada aplikasi.
3.4.1 Rancangan Antar Muka pada Halaman Utama
Halaman utama adalah antar muka pertama kali user membuka aplikasi. Pada halaman utama terdapat menu Mulai, Sejarah dan Petunjuk. Pada halaman utama penulis membuat tampilan animasi dengan memberikan animasi yang dapat bergerak, sehingga antar muka mempunyai daya tarik dalam tampilannya.
Gambar 3.9 Rancangan Gambar Antar Muka Halaman Utama 3.4.2. Rancangan Antar Muka pada Halaman Menu Mulai
Pada rancangan antar muka halaman menu Mulai adalah halaman dimana user memilih menu atau tombol Mulai di halaman utama. Menu mulai ini berfungsi untuk menampilkan halaman latihan soal yaitu level 1.
Gambar 3.9 Rancangan Gambar Antar Muka Halaman Menu Mulai
Mulai Animasi awan
bergerak Animasi awan matahari
Animasi pohon Animasi pohon Animasi awan bergerak Sejarah Petunjuk penggunaan aplikasi Silahkan Lihat Petunjuk untuk memulai latihan Petunjuk
Mulai Sejarah Petunjuk
Animasi awan
bergerak Animasi awan mata
hari Animasi pohon Animasi pohon Animasi awan bergerak Nama Aplikasi Nama Aplikasi
50
3.4.3 Rancangan Antar Muka Halaman Menu Sejarah
Pada rancangan antar muka halaman menu Sejarah adalah halaman dimana user memilih menu atau tombol Sejarah di halaman utama. Menu sejarah ini berfungsi untuk menampilkan halaman menu sejarah yang terdapat tombol level yang dapat dipilih user untuk memberikan informasi tentang sejarah dari algoritma dijsktra.
Gambar 3.11 Rancangan Gambar Antar Muka Halaman Menu Sejarah 3.4.4 Rancangan Antar Muka Halaman Menu Petunjuk
Pada rancangan antar muka halaman menu Petunjuk adalah halaman dimana user memilih menu atau tombol Petunjuk di halaman utama. Menu Petunjuk ini berfungsi untuk menampilkan halaman menu petunjuk yang terdapat tombol level yang dapat dipilih user untuk memberikan informasi tentang penggunaan aplikasi belajar dijkstra.
Gambar 3.12 Rancangan Gambar Antar Muka Halaman Menu Petunjuk
A n i m a s i p o h o n Scroll up Scroll Down Mulai Animasi awan
bergerak Animasi awan matahari
Nama Aplikasi Animasi pohon Animasi pohon Animasi awan bergerak Sejarah Petunjuk
Sejarah tentang Algoritma Dijsktra
Photo Edsger W.
Dijsktra
Mulai Animasi awan
bergerak Animasi awan matahari
Animasi pohon Animasi pohon Animasi awan bergerak Sejarah Scroll up
Petunjuk penggunaan aplikasi Petunjuk penggunaan aplikasi
A n i m a s i p o h o n Scroll Down Nama Aplikasi Petunjuk Nama Aplikasi
51
3.4.5 Rancangan Antar Muka Halaman Latihan Soal
Setelah user memilih tombol Mulai, maka akan tampil halaman latihan soal level 1, didalam antar muka halaman latihan soal level 1, dalam perancangan halaman latihan soal di setiap level tidak berbeda bentuknya. Di setiap level juga terdapat animasi gelembung yang akan tampil secara otomatis dari bawah keatas sampai aplikasi dijalankan, tujuan animasi gelembung yaitu untuk memberikan effect animasi didalam halaman latihan soal. seperti Gambar 3.13
Gambar 3.13 Rancangan Gambar Antar Muka Halaman Latihan Soal
3.4.6 Rancangan Antar Muka Kotak Lembar Kerja
Terdapat tombol “Tampilkan Kotak Jarak dari Asal” yang berfungsi menampilkan lembar kerja bila tombol ditekan. Lembar kerja akan secara default tidak tampil saat program dijalankan. Pada kotak lembar kerja yang terdapat disamping setiap graph berfungsi untuk membantu user dalam mengerjakan soal-soal yang diberikan. Pada kotak lembar kerja dapat di pindahkan dengan cara di drag, sesuai dengan kebutuhan user dan kotak lembar kerja juga dapat di sembunyikan dengan menekan tombol “Sembunyikan Kotak Jarak dari Asal”,
B A D 5 3 Arahkan pointer ke node untuk memperbesar edge Pertanyaan A B C D jawaban Mulai Jawaban A Jawaban B Jawaban C Jawaban D Tampilkan kotak jarak dari Asal
52
sehingga kotak lembar kerja akan hilang tanpa menghilangkan tulisan yang diinput oleh user. Seperti Gambar 3.14
Gambar 3.14 Rancangan Gambar Antar Muka Kotak Lembar Kerja
3.4.7 Rancangan Antar Muka Halaman Kotak Pesan Jawaban
Pada halaman kotak pesan Jawaban adalah kotak pesan yang tidak berbeda tempat, hanya saja informasi tulisan yang akan berbeda sesuai dengan jawaban yang dipilih oleh user. Bila, user memilih jawaban benar maka terdapat tulisan di “info jawaban” bahwa “jawaban Anda Benar”, bila user salah maka akan tampil tulisan di “info jawaban” yaitu “Jawaban Anda Salah” dan kemudian bila kesempatan=0,maka akan tampil bila tulisan di “info Jawaban” yaitu “Jawaban Anda Salah” dan menampilkan tulisan di “info Jawaban User” yaitu jawaban yang benar dari soal yang ditampilkan dan pada tulisan. Bila, tombol Ok dipilih oleh user sesuai dengan jawaban user yaitu bila, jawaban user benar maka akan berfungsi untuk menampilkan soal berikutnya tanpa merubah graph yang tampil dan jika jawaban user salah, masih terdapat kesempatan maka aplikasi akan tetap menampilkan soal yang tampil dengan menghilangkan satu jawaban yang salah.
B A D 5 3 Arahkan pointer ke node untuk memperbesar edge Pertanyaan A B C D jawaban Mulai Jawaban A Jawaban B Jawaban C Jawaban D Tampilkan kotak jarak dari Asal
53
Tetapi, jika user menjawab jawaban yang salah dan kesempatan telah tidak ada, maka program akan menampilkan graph yang baru dan menampilkan pertanyaan kembali ke awal sesuai dengan graph yang ditampilkan.
Gambar 3.15 Rancangan Gambar Antar Muka Kotak Pesan Jawaban
3.4.8 Rancangan Antar Muka Kotak Pesan Kesimpulan
Pada rancangan antar muka latihan soal terdapat kotak pesan kesimpulan yang berfungsi untuk memberitahukan kepada user kesimpulan dari langkah-langkah graph yang menampilkan jalur tepat dari langkah-langkah-langkah-langkah yang dilalui . Seperti Gambar 3.16.
Gambar 3.16 Rancangan Gambar Antar Muka Kesimpulan 3.4.9 Rancangan Antar Muka Kotak Pesan Level
Pada rancangan antar muka latihan soal terdapat kotak pesan level, yang berfungsi memberitahukan kepada user untuk dapat melanjutkan ke level selanjutnya. Seperti Gambar 3.17.
Gambar 3.17 Rancangan Gambar Antar Muka Kotak Pesan Level Selamat
Animasi orang
Level 1 | level 2 | level 3 | level 4
Info Jawaban Kesempatan Anda ..,
Coba Lagi? Info Jawaban user
Ok
Animasi orang
Kesimpulan
54
Pada kotak pesan level terdapat perbedaan disetiap level, dikarenakan pada level 1 program hanya mengaktifkan tulisan level 1 & level 2, dikarenakan user tidak dapat melakukan latihan soal langsung ke level 3 & 4. Pada level 2 hanya mengaktifkan level 1,2,3 dan untuk level 4 tidak aktif karena user belum melakukan latihan di level 3 dan pada level 3 semua tombol akan aktif, dikarenakan level 4 merupakan level terakhir, sehingga user dapat memilih apakah ingin melakukan latihan soal di level 4 atau kembali ke level sebelumnya dan tulisan “Selamat” akan tampil sesuai dengan level selanjutnya yang ingin di capai. Contoh “User berhasil melakukan latihan soal di level 1 maka akan tampil tulisan “Lanjut ke Level 2”, program akan memberikan informasi kepada user untuk melanjutkan ke level 2”. Program juga akan memberikan kesempatan kepada user apakah ingin melakukan latihan soal di level sebelumnya yang telah dialui atau tidak dengan mengaktifkan tombol level-level sebelumnya yang telah dialui oleh user.
3.4.10 Rancangan Antar Muka Halaman Kotak Nilai
Pada halaman kotak nilai akan tampil hasil nilai jawaban benar dan salah saat user telah menjawab seluruh soal yang ditampilkan, kotak nilai ini merupakan hasil nilai jawaban benar dan salah user dalam melakukan latihan soal. Seperti Gambar 3.18.
Gambar 3.18 Rancangan Gambar Antar Muka Halaman Kotak Nilai. Nilai :
Benar : Salah :
0 0
