BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 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 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. 35

2 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 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. 36

3 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 37

4 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 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 User Menampilkan Sejarah Menampilkan Petunjuk Melakukan Latihan 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. 38

5 3. Melakukan latihan yaitu user memulai untuk melakukan latihan soal Pemodelan Diagram Aktifitas Diagram Aktifitas Sejarah User System Memilih Tombol Sejarah Menampilkan halaman Sejarah 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 Diagram Aktifitas Petunjuk User System Memilih Tombol Petunjuk Menampilkan halaman 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 39

6 user dapat melihat petunjuk-petunjuk bagaimana aplikasi digunakan didalam melakukan latihan soal 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 40

7 hanya memberikan pilihan kepada user apakah nmenginginkan kembali ke level sebelumnya.seperti Gambar 3.4. User System Menampilkan Graph Berikutnya B pilih Jawaban Menampilkan Soal Berikutnya Cek Jawaban Pesan Jawaban Salah [Salah] [Benar] Pesan Jawaban Benar [Ya masih ada kesempatan] [soal <= maks.soal] Kesemp atan - 1 Soal <= max Soal Pesan kesempatan = 0 [tidak ada kesempatan] [soal > maks.soal] Pesan Nilai Jawaban Soal Kembali ke Awal Cek Level [Level <= 4] Pilih Tombol Level Pesan Level Berikutnya Level <= 4 [Level >4] Cek Tombol Level Pesan seluruh Level berhasil di selesaikan A Gambar 3.4 Diagram Aktifitas Latihan 41

8 A [Pilih Level Selanjutnya] Level yang dipilih Tampil Halaman Level selanjutnya yang dipilih [Pilih Level Sebelumnya] Tampil Halaman Level sebelumnya yang dipilih B Gambar 3.4 Diagram Aktifitas Latihan (Lanjutan) Pemodelan Diagram Sequence Diagram Sequence mengambarkan perilaku (attitude) rangkaian langkahlangkah 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 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 42

9 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 Menuju menu utama Mengakses menu sejarah Menjalankan akses ke sub menu sejarah Gambar 3.5 Diagram Sequence Sejarah 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

10 User Menu utama Proses sistem Sub menu Petunjuk Menuju menu Mengakses menu Petunjuk Menjalankan akses ke sub menu Petunjuk Gambar 3.6 Diagram Sequence Petunjuk 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

11 User halaman Periksa Periksa maks. Periksa nilai Tampil level latihan Jawaban Soal kesempatan Latihan Selanjutnya menjawab soal latihan Jawaban User Jawaban Benar Nilai tampil Level Berikutnya Jawaban Salah Menjawab soal yang Benar Kembali mengerjak an soal latihan 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. mulai Membuat Array Mengacak Graph D G B Mengacak langkah Menampilkan Soal berikutnya C Menentukan Jawaban A Benar Gambar 3.8 Algoritma Menampilkan Soal 45

12 A Menentukan Jawaban Salah Periksa Jawaban User Benar Tampil Jawaban Benar Pesan Jawaban Benar Salah Pesan Jawaban Salah Periksa Kesempatan!= 0 kesempat an Kesempatan = 0 B Soal<=maxSoal Soal>maxSoal Periksa maxsoal Pesan Kesempatan Habis Soal kembali ke awal Tampil kesimpulan & animasi bintang Pesan Pindah Level Menghilangkan satu Jawaban salah C D User pilih Tombol Level Sebelumnya Periksa user pilih tombol level User pilih Tombol Level Selanjutnya Tampil Halaman Level sebelumnya Mengecek Level F E Gambar 3.8 Algoritma Menampilkan Soal (lanjutan) 46

13 E Periksa Jumlah Level Level > 4 Pesan Level Selesai Level <=4 Pesan Level Naik Periksa sesuai level yang dipilih F selesai G 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 47

14 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 48

15 dan tampilan antar muka pada halaman latihan. Berikut ini beberapa bentuk antar muka pada aplikasi dengan sistem pada aplikasi 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. awan bergerak awan bergerak awan mata hari pohon pohon Mulai Sejarah Petunjuk Nama Aplikasi Gambar 3.9 Rancangan Gambar Antar Muka Halaman Utama 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. awan bergerak awan mata hari awan bergerak pohon pohon Silahkan Lihat Petunjuk untuk Petunjuk memulai latihan penggunaan Mulai Sejarah Petunjuk Nama Aplikasi Gambar 3.9 Rancangan Gambar Antar Muka Halaman Menu Mulai 49

16 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. awan bergerak awan mata hari awan Scroll up pohon Photo Edsger W. Dijsktra Sejarah tentang Algoritma Dijsktra pohon Scroll Down A Mulai Sejarah Petunjuk Nama Aplikasi Gambar 3.11 Rancangan Gambar Antar Muka Halaman Menu Sejarah 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. awan bergerak awan bergerak awan matahar i Scroll up pohon Petunjuk penggunaan aplikasi Petunjuk penggunaan aplikasi pohon Scroll Down A Mulai Sejarah Petunjuk Nama Nama Aplikasi Aplikasi Gambar 3.12 Rancangan Gambar Antar Muka Halaman Menu Petunjuk 50

17 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 D Pertanyaan 3 B 5 A Arahkan pointer ke node untuk memperbesar edge Mulai Tampilkan kotak jarak dari Asal jawaban A Jawaban A B Jawaban B C Jawaban C D Jawaban D Gambar 3.13 Rancangan Gambar Antar Muka Halaman Latihan Soal 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 soalsoal 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, 51

18 sehingga kotak lembar kerja akan hilang tanpa menghilangkan tulisan yang diinput oleh user. Seperti Gambar 3.14 D Pertanyaan 3 B 5 A Arahkan pointer ke node untuk memperbesar edge Mulai Tampilkan kotak jarak dari Asal jawaban A B C D Jawaban A Jawaban B Jawaban C Jawaban D Gambar 3.14 Rancangan Gambar Antar Muka Kotak Lembar Kerja 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. 52

19 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. orang Info Jawaban Info Jawaban user Kesempatan Anda.., Coba Lagi? Gambar 3.15 Rancangan Gambar Antar Muka Kotak Pesan Jawaban Ok Rancangan Antar Muka Kotak Pesan Kesimpulan Pada rancangan antar muka latihan soal terdapat kotak pesan kesimpulan yang berfungsi untuk memberitahukan kepada user kesimpulan dari langkahlangkah graph yang menampilkan jalur tepat dari langkah-langkah yang dilalui. Seperti Gambar Kesimpulan Hasil dari langkah-langkah yang dilalui Gambar 3.16 Rancangan Gambar Antar Muka Kesimpulan 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 orang Selamat Level 1 level 2 level 3 level 4 Gambar 3.17 Rancangan Gambar Antar Muka Kotak Pesan Level 53

20 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 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 Nilai : Benar : Salah : 0 0 Gambar 3.18 Rancangan Gambar Antar Muka Halaman Kotak Nilai. 54