28
BAB III
ANALISIS DAN PERANCANGAN
Untuk memahami aplikasi yang dirancang maka salah satu tahapan yang harus dilalui adalah melakukan analisis, karena dengan melakukan analisis akan membuat lebih terarah dan jelas dalam alur aplikasinya. Selanjutnya hasil dari analisa akan dilanjutkan kepada proses perancangan yang akan diterapkan ke dalam pembangunan aplikasi selanjutnya.
3.1 Prototipe Aplikasi Penghasil Soal Kuis Otomatis
Prototipe aplikasi penghasil soal kuis otomatis Adalah Prototipe aplikasi yang menghasilkan soal kuis secara otomatis dengan menggunakan aturan-aturan (rules) tertentu (Anis Cherid, 2012). Pada prototipe aplikasi ini, proses pembuatan aturan-aturan penghasil soal masih tergantung kepada pembuatan aturan menggunakan teknik programming yang rumit. Prototipe aplikasi penghasil soal kuis otomatis menggunakan aplikasi Microsoft PowerPoint sebagai media ditempatkannya kuis otomatis tersebut bersama dengan materi pembelajaran sehingga menjadi aplikasi yang utuh dan berdiri sendiri.
Slide PowerPoint berisi kode program dalam bahasa VBScript untuk ditulis ke dalam teks file dan program yang dibuat dengan Visual Basic Application (VBA). Di dalam kode program VBScript, terdapat kode untuk memanggil kembali berbagai kode VBA yang terdapat di dalam aplikasi PowerPoint. Sedangkan program di dalam PowerPoint yang dibuat dengan VBA berfungsi merekam kode program VBScript ke dalam teks file, mengeksekusi Windows Scripting Host (WSH) dan memberikan perintah kepada WSH untuk mengeksekusi file teks berisi kode program VBScript kemudian juga berfungsi mengubah tampilan slide sesuai dengan pertanyaan dan pilihan jawaban yang dihasilkan oleh program VBScript.
Selain itu yang terpenting adalah program di dalam PowerPoint yang dibuat dengan VBA menyediakan struktur memori tiruan agar hasil eksekusi kode program dapat dievaluasi dengan mudah.
Arsitektur aplikasi penghasil soal kuis otomatis terdiri dari sebuah interpreter yang berguna sebagai penerjemah kode program sehingga kode program yang baru dapat dibuat oleh sebuah aplikasi yang sedang berjalan, kemudian kode program yang baru tersebut dieksekusi bersama-sama dengan aplikasi yang menghasilkan kode program tersebut. Gambar 3.1 memperlihatkan arsitektur aplikasi penghasil soal kuis otomatis.
Gambar 3.1 Arsitektur Aplikasi Penghasil Soal Kuis Otomatis
Berdasarkan gambar 3.1 yang menjadi perhatian pada penelitian penulis adalah bagaimana dapat membantu dalam pembuatan file teks yang berisi kode program. Diperlukan sebuah antarmuka yang memudahkan user dalam membuat kode program untuk aplikasi penghasil soal kuis otomatis. Antarmuka tersebut memberikan solusi akan kemungkinan terjadinya kesalahan dalam pengetikan kode program. Berikut dibawah ini langkah kerja prototipe aplikasi penghasil soal kuis otomatis dalam memproses file teks berisi kode program sehingga menghasilkan soal kuis otomatis.
1. Awal Aplikasi dijalankan.
Pada awal aplikasi dijalankan terdiri dari tiga slide PowerPoint. Lihat gambar 3.2.
Aplikasi Penghasil Soal Kuis Otomatis
…. dim a(10) a(0)=20 msgbox a(0) …. Interpreter File Teks
Gambar 3.2 Tampilan Slide untuk Menambah Kuis Dipilih
2. Tekan tombol <Shift-F5> pada keyboard dan kemudian klik panah besar yang terdapat di tengah-tengah layar presentasi. Komputer akan menampilkan form untuk menambah slide kuis baru.
Gambar 3.3 Form untuk Menambah Slide Kuis Baru
3. Kemudian pilih jenis kuis dengan Pilihan Ganda Otomatis dengan Program dan tampilan seperti gambar 3.4 akan muncul.
Gambar 3.4 Tampilan untuk Menambahkan Program Penghasil Kuis
4. Selanjutnya pada form tersebut dapat dimasukan kode program yang
digunakan sebagai kode program penghasil kuis otomatis. Berikut dibawah ini adalah contoh kode program sederhana :
Kode 3.1 Potongan Program Sederhana
1. createQuestion "Siapakah nama orang yang pertama kali menginjakkan kakinya di bulan?"
2. createCorrectAnswer "Neil Amstrong" 3. createWrongAnswer "Edwin Aldrin" 4. createWrongAnswer "Apollo"
5. createWrongAnswer "John F. Kennedy" 6. createWrongAnswer "Winston Churchill"
Kode program tersebut akan dieksekusi oleh aplikasi sehingga menghasilkan sebuah soal kuis otomatis. Kode 3.1 merupakan sebuah kode program yang dimasukan oleh user dengan berbagai aturan (rules) dengan
menggunakan teknik programming yang rumit. Oleh karena itu berdasarkan
Pembuatan Prototipe Aplikasi Penghasil Soal Kuis Otomatis (Anis Cherid, 2012) penulis selanjutnya menganalisa antarmuka yang dibutuhkan oleh aplikasi tersebut sebagai solusi atas kendala-kendala yang dialami user dalam membuat kode program aplikasi penghasil soal kuis otomatis.
3.2 Analisis Sistem
Antarmuka pemograman visual pada aplikasi penghasil kuis otomatis merupakan aplikasi yang menyediakan sebuah antarmuka yang dapat memudahkan user dalam membuat kuis otomatis. Pengembangan antarmuka tersebut dilakukan dengan konsep mengurangi interaksi user dalam menulis kode
program menggunakan keyboard dan beralih kepada mouse. Antarmuka yang
disediakan memandu user untuk menuliskan kode program dengan efisien dan mengurangi kesalahan dalam penulisan kode program.
Penentuan variabel, pertanyaan dan jawaban dalam kuis otomatis telah dirancang dalam sebuah antarmuka yang secara otomatis memandu user menuliskan kode program sesuai dengan aturan kode program yang digunakan. Penulisan kode program berdasarkan aturan kode program menjadi yang sangat diperhatikan pada output aplikasi ini, disamping memudahkan user yang penting juga adalah kebenaran kode program yang dihasilkan. Dimana kebenaran sebuah kode program dapat diperiksa berdasarkan aturan masing masing jenis kode program yang digunakan.
Pengendalian kode program yang dilakukan oleh aplikasi menghasilkan sebuah aturan mengenai bagaimana cara memeriksa kebenaran sebuah kode program yang dibuat user. Pemeriksaan kode program dilakukan pada setiap baris program dengan hanya terdapat satu fungsi saja. Sedangkan penggunaan fungsi lebih dari satu diizinkan dengan menggunakan pendefinisan fungsi tersebut melalui variabel tertentu. Aturan yang dilakukan aplikasi ini bertujuan untuk memudahkan aplikasi memeriksa aturan kode program yang digunakan kemudian menghasilkan kode program yang benar. Untuk menghasilkan sebuah aplikasi penghasil kuis otomatis dibutuhkannya sebuah kombinasi berbagai fungsi tertentu. Penulisannya yang membutuhkan ketelitian tinggi menjadi acuan aplikasi dalam menerjemahkan cara penulisan menjadi sebuah antarmuka. Kombinasi penggunaan fungsi pada penulisan manual akan mudah dilakukan tetapi resiko kesalahan akan menjadi besar karena tidak adanya pengendalian pada setiap fungsi. Kode program 3.1 merupakan contoh kode program yang belum menggunakan aturan yang digunakan pada aplikasi antarmuka penghasil kuis otomatis.
Kode 3.1 Kode Program Penulisan Manual.
1. numOfElement = randomNumber(4,10)
2. createQuestion "Jika array dideklarasikan dengan cara " & Chr(13) & Chr(34) & "int a [&1&]; " & Chr(34) & Chr(13) & "yang manakah dari instruksi di bawah ini adalah instruksi yang SALAH:", numOfElement
3. question1 = numOfElement - 1
4. question2 = randomNumber(0, numOfElement - 1, question1)
5. question3 = randomNumber(0, numOfElement - 1, question1,
question2)
6. question4 = randomNumber(0, numOfElement - 1, question1,
question2, question3)
7. question5 = numOfElement
8. createArray "a", 3
9. fillArray "a", "cout << a[&1&];", "a[&1&] = &2&;", "a[&1&] = a[&1&] + &2&;"
10. createCorrectAnswer getValue("a", randomNumber(0, 2, -1)), question5, randomNumber(0, 50)
11. createWrongAnswer getValue("a", randomNumber(0, 2, -1)), question1, randomNumber(0, 50)
12. createWrongAnswer getValue("a", randomNumber(0, 2, -1)), question2, randomNumber(0, 50)
13. createWrongAnswer getValue("a", randomNumber(0, 2, -1)), question3, randomNumber(0, 50)
14. createWrongAnswer getValue("a", randomNumber(0, 2, -1)), question4, randomNumber(0, 50)
Kode 3.2 Potongan Kode Program Baris 10
10. createCorrectAnswer getValue("a", randomNumber(0, 2, -1)), question5, randomNumber(0, 50)
Potongan Kode program 3.2 memperlihatkan penulisan fungsi dengan tingkat kerumitan yang tinggi dengan penggunaan fungsi getValue dan fungsi randomNumber. Dan jika hal ini diterapkan pada aplikasi yang dirancang maka tujuan aplikasi tidak akan tercapai dalam menghasilkan kode program yang sesuai aturan pemograman karena aplikasi tidak mengetahui jenis fungsi yang digunakan dan tepatnya berapa banyak fungsi yang digunakan. Sehingga untuk mengatasi hal tersebut, aplikasi harus membatasi dalam penggunaan fungsi dengan hanya mengizinkan satu fungsi setiap baris kode program.
Kode 3.3 Potongan Kode Program Menggunakan Aturan Aplikasi.
1. numOfElement = randomNumber(4,10)
2. createQuestion "Jika array dideklarasikan dengan cara " & Chr(13) & Chr(34) & "int a [&1&]; " & Chr(34) & Chr(13) & "yang manakah dari instruksi di bawah ini adalah instruksi yang SALAH:", numOfElement
3. question1 = numOfElement - 1
4. question2 = randomNumber(0, numOfElement - 1, question1)
5. question3 = randomNumber(0, numOfElement - 1, question1,
question2)
6. question4 = randomNumber(0, numOfElement - 1, question1,
question2, question3)
7. question5 = numOfElement
8. createArray "a", 3
9. char_a1 = "cout << a[&1&];" 10. char_a2 = "a[&1&] = &2&;"
11. char_a3 = "a[&1&] = a[&1&] + &2&;" 12. fillArray "a",char_a1,char_a2,char_a3
13. randomNumber1= randomNumber(0, 2, -1)
14. randomNumber2= randomNumber(0, 50)
15. correct_answer = getValue("a",randomNumber1)
16. createCorrectAnswer correct_answer, question5, randomNumber2 Pada Kode program 3.3 memperlihatkan bagaimana aplikasi memberikan solusi bagaimana user tetap dapat menggunakan banyak fungsi dalam satu baris program, yaitu dengan penggunaan variabel. Pada baris 16 terlihat bahwa baris tersebut menggunakan tiga varabel yang telah didefinisikan masing-masing sebagai hanya satu fungsi. Variabel pertama pada baris 15 sebagai fungsi getValue yang menggunakan variabel randomNumber1 sebagai fungsi random number. Variabel kedua menggunakan variabel question5 yang didefinisikan pada baris 7 sebagai fungsi random number. Kemudian pada variabel terakhir adalah menggunakan varaibel randomNumber2 pada baris 14 sebagai fungsi random number.
Berdasarkan uraian diatas disimpulkan bahwa pengendalian kode program dilakukan dengan cara sebagai berikut :
1. Membatasi penggunaan fungsi dimana hanya mengizinkan penggunaan
satu fungsi pada setiap baris program.
2. Penggunaan variabel sebagai solusi untuk penggunaan fungsi yang
lebih dari satu.
Jadi inilah cara bagaimana aplikasi tetap dapat menghasilkan fleksibilitas dalam membuat kode program tanpa harus menghilangkan konsep penulisan kode program sesuai aturan pemograman.
Kemudian cara diatas juga dapat memudahkan dalam mengubah kode program tertentu secara manual pada aplikasi ini dimana user akan diberitahu jika kode program yang diubah tidak sesuai dengan aturan program. Selain itu kesalahan yang dilakukan user juga diinformasikan melalui sebuah antarmuka yang dapat membantu user lebih mudah dalam memahami berbagai aturan kode program tertentu.
Antarmuka dirancang dengan sederhana dan mengutamakan fungsional dari kode program yang dihasikan. Hal ini diharapkan dapat memberikan pembelajaran mengenai bahasa pemograman terkait dengan aturan-aturan kode program yang rumit bagi pengajar. Baris - baris kode program akan ditampilkan pada sebuah listbox dimana user selanjutnya dapat meng-copy kode program tersebut ke clipboard.
Aplikasi dilengkapi dengan fitur expression builder untuk memudahkan user dalam membuat fungsi tertentu sehingga akan terciptanya sebuah kombinasi kuis baik dari pertanyaan maupun dari jawaban.
Berikut dibawah ini mengenai alur aplikasi ini ketika dijalankan :
1. Awal aplikasi dijalankan, user menentukan variabel akan disimpan di array.
2. Ketika variabel sudah ditentukan, maka aplikasi akan memandu user
menentukan isi dari variabel tersebut, dengan diikuti munculnya jendela expression builder.
3. User selanjutnya memilih berbagai fungsi pada expression builder. Aplikasi telah menentukan variabel apa saja yang harus diinput oleh user pada fungsi yang dipilih.
4. Ketika aplikasi sudah menerima inputan fungsi dari user, satu baris kode program variabel akan dieksekusi oleh aplikasi dengan menerima perintah eksekusi pada tombol execute.
5. User selanjutnya memasukan pertanyaan kuis berdasarkan kebutuhan ataupun
variabel yang sebelumnya dibuat.
6. Jika pertanyaan kuis sudah selesai dieksekusi, user dapat membuat kode program untuk jawaban benar dan salah.
7. Satu baris kode program yang dieksekusi dapat diubah berdasarkan kebutuhan user. Perubahan yang dilakukan user dikontrol oleh aplikasi untuk mengurangi kesalahan penulisan kode program.
3.3 Perancangan
Untuk tahap perancangan pada tugas akhir ini meliputi dua bagian yaitu perancangan proses disajikan dalam bentuk logik model dengan menggunakan diagram alir data (DFD). Perancangan kedua adalah perancangan proses aplikasi
menggunakan perancangan menggunakan alir data (flowchart) untuk mengetahui
jalan aplikasi.
Perancangan antar muka sistem dilakukan dengan membuat sketsa tampilan antarmuka sistem yang berfungsi sebagai alat komunikasi antar pengguna dengan sistem.
3.3.1 Konteks Diagram
Pada gambar 3.5 dapat dilihat sebuah konteks diagram yang menggambarkan proses apa saja yang diproses dan informasi yang akan dilakukan oleh user.
1. User
User pada aplikasi ini adalah Pengajar dan Dosen, dimana yang dilakukan oleh user adalah membuat variabel dan fungsi yang akan digunakan. Setelah ini user dapat membuat pertanyaan berdasarkan variabel yang sudah dibuat. Sama halnya dengan variabel, pertanyaan dapat diberikan formula. Pada tahap akhir user melakukan pembuatan jawaban benar dan salah berdasarkan pertanyaan. Jawaban benar dan salah juga dapat diberikan fungsi untuk pilihan jawaban yang kombinasi.
3.3.2 Diagram Alir Data
Setelah perancangan proses konteks diagram selesai dilakukan, maka breakdown selanjutnya masuk pada diagram alir data yang semua proses nya masih terkait dengan konteks diagram. Pada gambar 3.2 proses yang pertama kali terjadi setelah user pertama kali melihat tampilan aplikasi adalah menentukan variable dan memilih fungsi-fungsi yang akan digunakan dalam kode program. Adapun fungsi-fungsi yang diproses oleh aplikasi adalah random char, random number, create array, put value, display array, get value, general dan fill array.
Jika sudah berhasil diselesaikan, user membuat pertanyaan berdasarkan variable dan fungsi yang sudah dibuat. Langkah selanjutnya adalah membuat pilihan jawaban benar dan pilihan jawaban yang salah. Kode program yang sudah dibuat juga dapat diubah berdasarkan kebutuhan.
Input yang dilakukan oleh user akan diproses oleh aplikasi dan menghasilkan output berupa baris-baris kode program. Baris kode program yang diciptakan oleh aplikasi adalah kode program variabel, pertanyaan dan jawaban. Kode program yang dihasilkan akan selanjutnya digunakan untuk menghasilkan kuis otomatis pada prototipe aplikasi penghasil kuis otomatis (Anis Cherid, 2012).
3.3.3 Flowchart
3.3.3.1 Flowchart Aktivitas Keseluruhan Aplikasi
Mulai
For i=1 to jmlvar+1
Load var(i) Hapus Variabel RandomChar Panggil Fungsi RandomChar unLoad var(i) Tampilkan var(i) ya tidak ya User Sistem
Klik Tombol Fungsi RandomChar tidak A Menerima Perintah variabel, jmlvar=0 Menampilkan Jendela fungsi RandomChar Klik Hapus Membuat
variabel ya Klik Tombol Variabel
Pilih variabel(i) Tampilkan Menu tidak Random Number
Klik Tombol Fungsi RandomNumber ya Menampilkan Jendela Fungsi RandomNumber Panggil Fungsi RandomNumber CreateArray tidak tidak
Klik Tombol Fungsi CreateArray Menampilkan Jendela Fungsi CreateArray Panggil Fungsi CreateArray ya B D
PutValue
Panggil Fungsi putValue ya
User Sistem
Klik Tombol Fungsi putValue tidak C Menampilkan Jendela fungsi putValue CopyArray
Klik Tombol Fungsi copyArray ya Menampilkan Jendela Fungsi copyArray Panggil Fungsi copyArray FillArray tidak
Klik Tombol Fungsi fillArray Menampilkan Jendela Fungsi fillArray Panggil Fungsi fillArray ya A DisplayArray Panggil Fungsi displayArray
ya Klik Tombol Fungsi
displayArray tidak Menampilkan Jendela fungsi displayArray GetValue
Klik Tombol Fungsi getValue ya Menampilkan Jendela Fungsi getValue Panggil Fungsi getValue General tidak
Klik Tombol Fungsi general Menampilkan Jendela Fungsi general Panggil Fungsi general ya tidak B
Pertanyaan Panggil Fungsi Membuat pertanyaan ya User Sistem
Klik Tombol Fungsi pertanyaan tidak Menampilkan Jendela Membuat pertanyaan Jawaban
Klik Tombol Fungsi Jawaban ya Menampilkan Jendela Membuat Jawaban Panggil Fungsi Membuat Jawaban tidak C D Hapus Kode
Program Klik Tombol Hapus
Kode Program Hapus baris program k Pilih baris program , k Menampilkan Perubahan Kode Program ya tidak Ubah Kode Program tidak
Double klik baris program ya Menampilkan Jendela Ubah Kode program Add Text
Pilih Kursor text
Cek Aturan Valid ya tidak ya Pesan error tidak Jendela add E F Pilih item add
G
H tidak
User Sistem
Klik Tombol Copy Kode Program Menampilkan Jendela Kode Program copy Selesai E F Menerima item tambah Tambah Kode Program G Select Kode Cek Aturan Valid Pesan error tidak Menampilikan Jendela replace ya
Pilih item replace
Menerima item replace
Replace Kode Program H
Gambar 3.7 Flowchart Aktivitas Keseluruhan Aplikasi (lanjutan)
Gambar 3.3 memperlihatkan aktivitas keseluruhan yang dilakukan oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, aplikasi mulai dijalankan
2. Tampilkan Menu, Aplikasi menampilkan berbagai menu.
3. Membuat Variabel, aplikasi memberikan menu untuk menambah variabel. 4. Klik tombol Variabel, jika ingin membuat variabel diharuskan memilih
5. For i=1 to jmlvar+1, aplikasi mulai memproses array berdasarkan jumlah variabel yang didefinisikan pada kode program aplikasi yaitu 0, selanjutnya ditambah dengan 1. Pengulangan yang terjadi berdasarkan jumlah tombol variabel di klik.
6. Load var(i), aplikasi membuat objek variabel berdasarkan array i . 7. Menampilkan var(i), aplikasi menampilkan objek variabel.
8. Hapus Variabel, jika tidak ingin menggunakan variabel maka pilihan berikutnya adalah harus variabel. Menu ini digunakan untuk membantu user dalam mengatur beberapa variabel yang telah dibuatnya.
9. Pilih Variabel, untuk menjalankan proses hapus, user harus memilih variabel yang akan dihapus.
10.Klik Hapus, untuk memulai hapus varibel.
11.unLoad var(i), aplikasi menghapus variabel berdasarkan perintah tombol hapus dan i sebagai pilihan variabel yang akan dihapus. Objek variabel tersebut akan unload pada tampilan aplikasi.
12.RandomChar, menu fungsi membuat randomChar.
13.Klik Tombol Fungsi RandomChar, untuk mulai membuat fungsi randomchar.
14.Menampilkan Jendela Fungsi RandomChar, jendela fungsi randomchar akan muncul.
15.Panggil Fungsi RandomChar, aplikasi akan memanggil fungsi randomchar.
16.RandomNumber, Menu fungsi membuat randomnumber.
17.Klik Tombol Fungsi RandomNumber, untuk mulai membuat fungsi randomnumber.
18.Menampilkan Jendela Fungsi RandomNumber, jendela fungsi randomnumber akan muncul.
19.Panggil Fungsi RandomNumber, aplikasi akan memanggil fungsi randomnumber.
21.Klik Tombol Fungsi CreateArray, untuk memulai membuat fungsi createarray.
22.Menampilkan Jendela Fungsi CreateArray, jendela fungsi createarray akan muncul.
23.Panggil Fungsi CreateArray, aplikasi akan memanggil fungsi createarray. 24.PutValue, Menu fungsi membuat putvalue.
25.Klik Tombol Fungsi PutValue, untuk memulai membuat fungsi putvalue. 26.Menampilkan Jendela Fungsi PutValue, jendela fungsi putvalue akan
muncul.
27.Panggil Fungsi PutValue, aplikasi akan memanggil fungsi putValue. 28.CopyArray, Menu fungsi membuat copyarray.
29.Klik Tombol Fungsi CopyArray, untuk memulai membuat fungsi copyarray.
30.Menampilkan Jendela Fungsi CopyArray, jendela fungsi copyarray akan muncul.
31.Panggil Fungsi CopyArrray, aplikasi akan memanggil fungsi copyarray. 32.FillArray, Menu fungsi membuat fillarray.
33.Klik Tombol Fungsi FillArray, untuk memulai membuat fungsi fillarray. 34.Menampilkan Jendela Fungsi FillArray, jendela fungsi fillarray akan
muncul.
35.Panggil Fungsi FillArray, aplikasi akan memanggil fungsi fillarray. 36.DisplayArray, Menu fungsi membuat displayarray.
37.Klik Tombol Fungsi DisplayArray, untuk memulai membuat fungsi displayarray.
38.Menampilkan Jendela Fungsi DisplayArray, jendela fungsi displayarray akan muncul.
39.Panggil Fungsi DisplayArrray, aplikasi akan memanggil fungsi displayarray.
40.GetValue, Menu fungsi membuat getvalue.
41.Klik Tombol Fungsi GetValue, untuk memulai membuat fungsi getvalue. 42.Menampilkan Jendela Fungsi GetValue, jendela fungsi getvalue akan
43.Panggil Fungsi GetValue, aplikasi akan memanggil fungsi getvalue. 44.General, Menu fungsi membuat general.
45.Klik Tombol Fungsi General, untuk memulai membuat fungsi general. 46.Menampilkan Jendela Fungsi General, jendela fungsi general akan
muncul.
47.Panggil Fungsi General, aplikasi akan memanggil fungsi general. 48.Pertanyaan, Menu fungsi membuat pertanyaan.
49.Klik Tombol Pertanyaan, untuk memulai membuat pertanyaan. 50.Menampilkan Jendela Pertanyaan, jendela pertanyaan akan muncul. 51.Panggil Fungsi Membuat Pertanyaan, aplikasi akan memanggil fungsi
membuat pertanyaan.
52.Jawaban, Menu fungsi membuat jawaban.
53.Klik Tombol Jawaban, untuk memulai membuat jawaban.
54.Menampilkan Jendela Membuat Jawaban, jendela jawaban akan muncul. 55.Panggil Fungsi Membuat Jawaban, aplikasi akan memanggil fungsi
membuat jawaban.
56.Hapus Kode Program, menu hapus kode program.
57.Pilih Baris Program ,k , memilih baris program yang akan dihapus.
58.Klik Tombol Hapus Kode Program, untuk mulai menghapus kode program yang sudah dipilih sebelumnya.
59.Hapus Baris Program k, aplikasi memanggil fungsi hapus baris program. 60.Menampilkan Perubahan, aplikasi akan menampilkan kode program
terbaru setelah menjalankan proses hapus kode program. 61.Ubah Kode Program, menu ubah kode program.
62.Double Klik Baris Program, untuk mulai mengubah kode program.
63.Menampilkan Jendela Ubah Kode Program, aplikasi akan menampilkan jendela ubah kode program berdasarkan baris program yang dipilih. 64.Add Text, menu pilihan menambah text pada kode program.
65.Pilih Kursor Text, user memilih penempatan kursor untuk meletakkan text atau variabel akan ditambahkan.
66.Cek Aturan, aplikasi memanggil fungsi cek aturan text atau variabel yang akan ditambahkan.
67.Valid, fungsi cek aturan akan memeriksa apakah text atau variabel benar atau tidak.
68.Pesan Error, aplikasi akan menampilkan pesan error ketika text atau variabel yang dimasukan tidak valid.
69.Jendel Add, aplikasi akan menampilkan jendela add yang berisi variabel dan textbox yang dapat diisi dengan text.
70.Pilih Item Add, memilih item apa yang akan ditambahkan pada kode program.
71.Menerima Item Tambah, aplikasi menerima item yang telah dipilih untuk ditambahkan.
72.Tambah Item Tambah, aplikasi memanggil fungsi tambah untuk menambahkan kode program.
73.Select Kode, pilihan menu terakhir dari jendela ubah kode program yaitu replace kode program. Untuk memulainya adalah dengan select kode. 74. Cek Aturan, aplikasi memanggil fungsi cek aturan text atau variabel yang
akan di-replace.
75.Valid, fungsi cek aturan akan memeriksa apakah text atau variabel benar atau tidak.
76.Pesan Error, aplikasi akan menampilkan pesan error ketika text atau variabel yang disisipkan tidak valid.
77.Jendel Replace, aplikasi akan menampilkan jendela replace yang berisi variabel dan textbox yang dapat diisi dengan text.
78.Pilih Item Add, memilih item apa yang akan ditambahkan pada kode program.
79.Menerima Item Replace, aplikasi menerima item yang dipilih untuk replace kode program.
80.Replace Kode Program, aplikasi memanggil fungsi merubah kode program.
81.Klik Tombol Copy, menu terakhir dari aplikasi yaitu meng-copy kode program yang dihasilkan pada clipboard.
82.Menampilkan Jendela Kode Program Copy, aplikasi akan menampilkan form yang berisi kode program yang dapat di-copy ke clipboard.
83.Selesai, aplikasi selesai dijalankan.
3.3.3.2 Flowchart Fungsi Membuat Pertanyaan
Gambar 3.8 Flowchart Fungsi Membuat Pertanyaan
Gambar 3.4 memperlihatkan aktivitas fungsi membuat pertanyaan oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, aplikasi mulai dijalankan
3. Menerima pertanyaan, aplikasi menerima masukan pertanyaan yang diketikan oleh user.
4. Klik Tombol Variabel, user klik tombol variabel untuk memulai pemilihan variabel yang akan digunakan pada pertanyaan.
5. Menampilkan Variabel, aplikasi akan menampilkan variabel yang telah ditentukan user sebelumnya.
6. Pilih Variabel, User memilih variabel yang akan digunakan untuk pertanyaan.
7. Menerima Pilihan Variabel, var , aplikasi menerima pilihan variabel. 8. Execute, user selanjutnya mengeksekusi pertanyaan untuk dijadikan sebuat
baris program pertanyaan.
9. Membuat Kode Program Pertanyaan, CreateQuestion "pertanyaan",var , ketika sudah dieksekusi oleh user maka selanjutnya aplikasi membuat kode program pertanyaan berdasarkan masukan yang dilakukan oleh user. 10.Tampilkan Kode Program Pertanyaan, aplikasi akan menampilkan kode
program di sebuah listbox.
3.3.3.3 Flowchart Fungsi Membuat Jawaban Masukan Jawaban Menampilkan Daftar Variabel Klik Tombol variabel Menerima pilihan variabel Jawaban, var
Menerima Jawaban
Membuat kode program Jawaban Benar CreateCorrectAnswer ”Jawaban”,var User Sistem Tampilkan Kode Program Jawaban Mulai Pilih Variabel Jawaban Selesai Execute benar ya Jawaban benar Jawaban =benar Pilih Jenis jawaban Jawaban =Salah tidak
Membuat kode program Jawaban Salah CreateWrongAnswer
”Jawaban”,var
Execute Salah
Gambar 3.9 Flowchart Fungsi Membuat Jawaban
Gambar 3.5 memperlihatkan aktivitas fungsi membuat jawaban oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
2. Masukan Jawaban, user memasukan text jawaban.
3. Menerima Jawaban, aplikasi menerima masukan jawaban yang diketikan oleh user.
4. Klik Tombol Variabel, user klik tombol variabel untuk memulai pemilihan variabel yang akan digunakan pada jawaban.
5. Menampilkan Variabel, aplikasi akan menampilkan variabel yang telah ditentukan user sebelumnya.
6. Pilih Variabel, User memilih variabel yang akan digunakan untuk jawaban.
7. Menerima Pilihan Variabel, var , aplikasi menerima pilihan variabel. 8. Pilih Jenis Jawaban, user memasukan jenis jawaban yang akan dibuat. 9. Jawaban Benar, kondisi jika jawaban benar maka akan dilanjutkan ke
langkah berikutnya pada jawaban benar.
10.Jawaban=benar, aplikasi menerima jawaban=benar
11.Execute Benar, user selanjutnya mengeksekusi jawaban benar untuk dijadikan sebuat baris program jawaban benar.
12.Membuat Kode Program Jawaban Benar, CreateCorrectAnswer "pertanyaan",var , ketika sudah dieksekusi oleh user maka selanjutnya aplikasi membuat kode program jawaban benar berdasarkan masukan yang dilakukan oleh user.
13.Jawaban=salah, aplikasi menerima jawaban=salah
14.Execute Salah, user selanjutnya mengeksekusi jawaban salah untuk dijadikan sebuat baris program jawaban salah.
15.Membuat Kode Program Jawaban Salah, CreateWrongAnswer
"pertanyaan",var , ketika sudah dieksekusi oleh user maka selanjutnya aplikasi membuat kode program jawaban salah berdasarkan masukan yang dilakukan oleh user.
16.Tampilkan Kode Program Pertanyaan, aplikasi akan menampilkan kode program di sebuah listbox baik jawaban benar maupun salah.
3.3.3.4 Flowchart Fungsi Random Char
User Sistem
Mulai
Masukan min Menerima charact
min Masukan max Menerima charact max Pilih excep=var ya min=”charact” max=”charact” except=var Menerima except=var Klik Var
Membuat Kode Program Random, randomChar(min,max,excep) tidak
Menampilkan Kode Program RandomChar Klik Tombol Execute
tidak
Selesai Masukan exp
karakter,charact Menerima charact except=”charact”
except
ya
tidak
tidak Masukan lagi
Masukan namaVar Menerima namaVar
Gambar 3.10 Flowchart Fungsi Random Char
Gambar 3.6 memperlihatkan aktivitas fungsi random char oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan
2. Masukan namaVar, user memasukan nama variabel,
4. Masukan Min, user memasukan minimal random. 5. Menerima charact min, aplikasi menerima minimal 6. Min="charact", aplikasi memproses minimal. 7. Masukan max, user memasukan maksimal random.
8. Menerima charact max, aplikasi menerima karakter maksimal. 9. Max="charact", aplikasi memproses max.
10.Except, kondisi jika memilih pengecualian random.
11.Pilih except=var, jika memilih pengecualian sebagai variabel. 12.Klik Var, user memilih variabel.
13.Menerima except=var, aplikasi menerima pilihan user dimana except sebagai variabel.
14.Except=var, aplikasi memproses except=var.
15.Masukan exp karakter, charact, memasukan except sebagai karakter. 16.Menerima charact, aplikasi menerima karakter yang dimasukan oleh user. 17.Except="charact",aplikasi memproses except="charact".
18.Masukan lagi, kondisi masukan except lagi. Jika iya maka akan masuk ke kondisi semula pilih except=var atau except=charact. Dan jika tidak maka eksekusi fungsi.
19.Klik Tombol Execute, user klik tombol eksekusi untuk mulai membuat kode program dari fungsi random char.
20.Membuat Kode Program Random, randomchar(min,max,except), aplikasi membuat kode program dari fungi random char.
21.Menampilkan Kode Program RandomChar, aplikasi menampilkan kode program pada listbox.
3.3.3.5 Flowchart Fungsi Random Number
User Sistem
Mulai
Masukan min Menerima number
min Masukan max Menerima number max Pilih excep=var ya Min=number max=number except=var Menerima except=var Klik Var
Membuat Kode Program Random, randomNumber(min,max,excep) tidak Menampilkan Kode Program RandomNumber Klik Tombol Execute
tidak
Selesai Masukan exp
number,number Menerima number except=number
except
ya
tidak
tidak Masukan lagi
Masukan namaVar Menerima namaVar
Gambar 3.11 Flowchart Fungsi Random Number
Gambar 3.7 memperlihatkan aktivitas fungsi random number oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan.
2. Masukan namaVar, user memasukan nama variabel,
4. Masukan Min, user memasukan minimal random. 5. Menerima number min, aplikasi menerima minimal 6. Min=number, aplikasi memproses minimal.
7. Masukan max, user memasukan maksimal random.
8. Menerima number max, aplikasi menerima number maksimal. 9. Max=number, aplikasi memproses max.
10.Except, kondisi jika memilih pengecualian random.
11.Pilih except=var, jika memilih pengecualian sebagai variabel. 12.Klik Var, user memilih variabel.
13.Menerima except=var, aplikasi menerima pilihan user dimana except sebagai variabel.
14.Except=var, aplikasi memproses except=var.
15.Masukan exp number, charact, memasukan except sebagai karakter. 16.Menerima nummber, aplikasi menerima number yang dimasukan oleh
user.
17.Except=number,aplikasi memproses except=number
18.Masukan lagi, kondisi masukan except lagi. Jika iya maka akan masuk ke kondisi semula pilih except=var atau except=number. Dan jika tidak maka eksekusi fungsi.
19.Klik Tombol Execute, user klik tombol eksekusi untuk mulai membuat kode program dari fungsi random number.
20.Membuat Kode Program Random, randomNumber(min,max,except), aplikasi membuat kode program dari fungi random number.
21.Menampilkan Kode Program RandomNumber, aplikasi menampilkan kode program pada listbox.
3.3.3.6 Flowchart Fungsi Create Array
User Sistem
Mulai
Masukan namaArray
Pilih namaArray =Var Klik Var Menerima var Namaarray=var
Menerima karakter Namaarray=”karakter” ya
tidak
Menerima JmlArray Masukan JmlArray
Klik Tombol Execute Membuat Kode Program CreateArray,
createArray namaarray,jmlArray
Menampilkan Kode Program
CreateArray
Selesai
Gambar 3.12 Flowchart Fungsi Create Array
Gambar 3.8 memperlihatkan aktivitas fungsi create array oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan
2. Masukan namaArray, user memasukan namaArray.
3. Pilih namaArray=var, kondisi jika nama array sebagai variabel. 4. Menerima var, aplikasi menerima variabel yang telah dipilih. 5. Namaarray=var, aplikasi memproses namaarray=var.
6. Menerima karakter, aplikasi menerima karakter sebagai nama array jika tidak memilih nama array sebagai variabel.
8. Masukan jmlArray, user memasukan jumlah array.
9. Menerima jmlarray, aplikasi menerima jumlah array dari inputan user. 10.Klik Tombol Execute, user memulai membuat fungsi create array
dengan menekan tombol execute.
11.Membuat Kode Program CreateArray, createarray namaarray, jmlArray, aplikasi membuat kode program fungsi create array.
12.Menampilkan Kode Program CreateArray, aplikasi menampilkan kode program ke dalam listbox.
13.Selesai, fungsi selesai dijalankan.
3.3.3.7 Flowchart Fungsi Copy Array
Gambar 3.9 memperlihatkan aktivitas fungsi copy array oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan
2. Pilih Var 1, user memilih variabel pertama sebagai asal copy. 3. Menerima Var 1, aplikasi menerima variabel pertama.
4. Pilih Var 2, user memilih variabel kedua sebagai tujuan copy. 5. Menerima Var 2, aplikasi menerima variabel kedua.
6. Masukan jmlcopy, user memasukan jumlah copy. 7. Menerima jmlcopy, aplikasi menerima jumlah copy.
8. Klik Tombol Execute, user memulai membuat fungsi copy array dengan menekan tombol execute.
9. Membuat Kode Program CopyArray, copyArray var1, var2, jmlcopy, aplikasi membuat kode progam fungsi copy array.
10.Menampilkan Kode Program CopyArray, aplikasi menampilkan kode program fungsi create array ke dalam listbox.
3.3.3.8 Flowchart Fungsi Fill Array
Gambar 3.14 Flowchart Fungsi Fill Array
Gambar 3.10 memperlihatkan aktivitas fungsi fill array oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan
2. Masukan Pilihan Variabel Array, memilih nama variabel sebagai variabel yang akan dimasukan elemen.
3. Menerima Var, aplikasi menerima pilihan variabel.
4. Masukan Elemen Array, user memasukan variabel untuk array.
5. Pilih Var , user memilih variabel untuk array pada kondisi pilih variabel ke dalam array
7. Masukan ke TextBox Fill, aplikasi memasukan variabel ke textbox berdasarkan pilihan user.
8. Tambah Karakter, kondisi dimana jika user ingin menambahkan karakter baru sebagai isi array atau tidak pilih variabel.
9. Menerima Karakter, aplikasi menerima karakter jika menambahkan karakter pada array.
10. "Karakter", aplikasi memproses karakter pada array.
11. Tambah lagi, kondisi jika user ingin menambahkan variabel ataupun karakter ke dalam array. Jika iya maka user kembali ke langkah pengisian array.
12. Klik Tombol Execute, user memulai membuat fungsi fill array dengan menekan tombol execute.
13. Membuat Kode Program fillArray textboxfill, aplikasi membuat kode program fungsi fill array.
14. Menampilkan Kode Program fillArray, aplikasi menampilkan kode program fungsi fill array ke dalam listbox.
3.3.3.9 Flowchart Fungsi Display Array
User Sistem
Mulai
Pilih Var Menerima Var
Klik Tombol Execute Membuat Kode Program displayArray,
namaVar=displayArray (var) Menampilkan Kode Program displayArray Selesai Masukan Nama
Variabel Menerima namaVar
Gambar 3.15 Flowchart Fungsi Display Array
Gambar 3.11 memperlihatkan aktivitas fungsi display array oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan
2. Masukan Nama Variabel, memasukan nama variabel yang akan digunakan sebagai display array.
3. Menerima namavar, aplikasi menerima masukan nama variabel. 4. Pilih Var, memilih variabel yang akan ditampilkan arraynya. 5. Menerima Var, aplikasi menerima variabel.
6. Klik Tombol Execute, user memulai membuat fungsi display array dengan menekan tombol execute.
7. Membuat Kode Program displayArray , displayArray(var), aplikasi membuat kode program fungsi display array.
8. Menampilkan Kode Program displayArray, aplikasi menampilkan kode program fungsi display array ke dalam listbox.
9. Selesai, fungsi selesai dijalankan.
3.3.3.10 Flowchart Fungsi Get Value
User Sistem
Mulai
Masukan namaGet
Pilih namaGet =Var Klik Var Menerima var namaGet=var
Menerima karakter namaGet=”karakter” ya
tidak
Menerima JmlGet Masukan JmlGet
Klik Tombol Execute Membuat Kode Program GetValue,
namavar=getValue(namaGet,JmlGet)
Menampilkan Kode Program GetValue
Selesai
Masukan namavar Menerima namavar
Gambar 3.16 Flowchart Fungsi Get Value
Gambar 3.12 memperlihatkan aktivitas fungsi get value oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan
2. Masukan namaGet, user memasukan nama get
3. Pilih namaGet=var, kondisi jika nama get sebagai variabel. 4. Menerima var, aplikasi menerima variabel yang telah dipilih.
5. namaGet=var, aplikasi memproses namaGet=var.
6. Menerima karakter, aplikasi menerima karakter sebagai nama get jika tidak memilih nama get sebagai variabel.
7. namaGet="karakter", aplikasi memproses namaget="karakter". 8. Masukan jmlGet, user memasukan jumlah get.
9. Menerima jmlGet, aplikasi menerima jumlah get dari inputan user. 10.Masukan namavar, user memasukan nama variabel.
11.Menerima namavar, aplikasi menerima nama variabel.
12.Klik Tombol Execute, user memulai membuat fungsi get value dengan menekan tombol execute.
13.Membuat Kode Program getValue, getValue(namaGet, jmlGet) aplikasi membuat kode program fungsi getValue.
14.Menampilkan Kode Program getValue, aplikasi menampilkan kode program ke dalam listbox.
3.3.3.11 Flowchart Fungsi Put Value
User Sistem
Mulai
Pilih Var1 Menerima Var1
Masukan Variabel 1
Klik Tombol Execute Membuat Kode Program putValue,
putValue Var1,Var2,Var3
Menampilkan Kode Program
putValue
Selesai
Pilih Var2 Menerima Var2
Masukan Variabel 2
Pilih Var3 Menerima Var3
Masukan Variabel 3
Gambar 3.17 Flowchart Fungsi Put Value
Gambar 3.13 memperlihatkan aktivitas fungsi put value oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan
2. Masukan Variabel1 ,user memasukan variabel 1
3. Pilih Var1, user memilih variabel 1 untuk memasukannya ke dalam fungsi putValue
5. Masukan Variabel2 ,user memasukan variabel 2.
6. Pilih Var2, user memilih variabel 2 untuk memasukannya ke dalam fungsi putValue.
7. Menerima Var2, aplikasi menerima variabel 2. 8. Masukan Variabel3 ,user memasukan variabel 3.
9. Pilih Var3, user memilih variabel 3 untuk memasukannya ke dalam fungsi putValue.
10.Menerima Var3, aplikasi menerima variabel 3.
11.Klik Tombol Execute, user memulai membuat fungsi putValue dengan menekan tombol execute.
12.Membuat Kode Program putValue, putValue Var1,Var2,Var3, aplikasi membuat kode program fungsi putValue.
13.Menampilkan Kode Program putValue, aplikasi menampilkan kode program fungsi putValue ke dalam listbox.
3.3.3.12 Flowchart Fungsi General
User Sistem
Mulai
Menerima namaVar
Klik Tombol Execute Membuat Kode Program general,
namaVar=expresi Menampilkan Kode Program general Selesai tidak Masukan namaVar Masukan expresi Menerima expresi Valid ya Pesan Error tidak Tipe data String Masukan
String Menerima string
ya Ekpresi=”string”
Ekpresi=expresi Fungsi Valid
Gambar 3.18 Flowchart fungsi general
Gambar 3.14 memperlihatkan aktifitas fungsi general oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut :
1. Mulai, fungsi mulai dijalankan
2. Memasukan namaVar, user memasukan nama variabel. 3. Menerima Var, aplikasi menerima variabel.
4. Tipe String, kondisi jika masukan berupa tipe data string.
6. Menerima string, aplikasi menerima string.
7. Ekpresi=”string”, aplikasi memproses ekpresi dengan string dengan kutip dua diatas (“”).
8. Memasukan ekpresi, user memasukan expresi tertentu jika tidak memenuhi baris 4.
9. Fungsi Valid, memanggil fungsi valid sebagai script control.
10.Valid, kondisi jika ekpresi yang dimasukan benar, maka akan ke langkah selanjutnya.
11.Menerima expresi, aplikasi menerima ekspresi.
12.Ekpresi=expresi, aplikasi memproses ekpresi sama dengan expresi.
13.Klik Tombol Execute, user memulai membuat fungsi general dengan menekan tombol execute.
14.Membuat Kode Program General , namaVar=expresi, aplikasi membuat kode program fungsi general.
15.Menampilkan Kode Program general, aplikasi menampilkan kode program fungsi general ke dalam listbox.
16.Selesai, fungsi selesai dijalankan.
3.4 Perancangan Antarmuka (Interface)
Perancangan antarmuka merupakan hal yang terpenting dalam aplikasi ini, karena keberhasilan aplikasi ini ditentukan bagaimana aplikasi menampilkan tahapan dalam membuat kode program. Interaksi pengguna dengan aplikasi dilakukan melalui sebuah antarmuka. Antarmuka dirancang dengan sederhana
agar pengguna mudah menggunakan aplikasi dan menimbulkan kesan user
friendly sehingga pengguna dapat tertarik belajar pemograman melalui antarmuka secara grafis.
Adapun perancangan antarmuka yang dirancang yaitu:
1. Tampilan awal aplikasi
Merupakan tampilan splash sebagai tampilan pembuka dari aplikasi dengan tujuan memperkenalkan aplikasi secara singkat. Tampilan ini terdiri dari frame, progressbar dan label yang berisi informasi nama aplikasi, versi aplikasi dan copyright aplikasi.
Gambar 3.19 Tampilan Awal Aplikasi
2. Tampilan Utama
Tampilan ini berisi menu manajemen variabel dan fungsi pada sisi atas tampilan sedangkan pada bagian lainnya berisi tampilan kode program dan tampilan manajemen variabel. Antarmuka pada awal aplikasi dirancang menggunakan kontrol tertentu di Visual Basic 6.0.
Tampilan kode program menggunakan kontrol listbox yang menampilkan daftar baris kode program dan penomoran kode program yang dapat dipilih. Listbox kode program memiliki kontrol scroll dengan tujuan memudahkan user mengatur tampilan kode program.Sedangkan untuk perancangan tampilan manajemen variabel menggunakan kontrol textbox dan option button dengan tujuan nama variabel dapat diganti dan dipilih oleh pengguna. Textbox dan option button dikontrol oleh array berdasarkan banyaknya jumlah variabel yang digunakan.
Tampilan awal ini dilengkapi dengan toolbar, statusbar, menu dan popup menu. Diharapkan tampilan tersebut akan menambah kemudahan user dalam mengoperasikan aplikasi ini.
Gambar 3.20 Tampilan Utama Aplikasi dan Manajemen Variabel
3. Tampilan membuat pertanyaan
Pada tampilan pertanyaan user diminta untuk memasukan pertanyaan pada sebuah textbox. Dalam pengetikkan pertanyaan user juga diberi bantuan dalam menggunakan sebuah string tertentu pada isi pertanyaan. Bantuan tersebut berupa listbox. Selanjutnya adalah memasukan variabel yang berasal dari kode program yang dibuat sebelumnya, dimana user memilih di sebuah listbox dengan double klik listbox tersebut. Semua variabel yang dipilih akan ditempatkan pada textbox variabel. Dan diakhiri dengan tombol execute.
4. Tampilan membuat jawaban
Tampilan membuat jawaban memiliki konsep yang sama dengan tampilan membuat pertanyaan tetapi memiliki perbedaan pada bagian option button untuk membedakan jenis jawaban benar dan salah.
Gambar 3.22 Tampilan Membuat Jawaban
5. Tampilan ubah kode program
Tampilan ini akan muncul ketika baris - baris kode program telah tercipta. Melalui perintah double klik item pada listbox kode program, tampilan ubah kode program ini akan menampilkan dua pilihan dalam bentuk listbox. Berdasarakan pilihan tersebut tampilan pilihan item yang akan dapat diubah akan muncul.
6. Tampilan fungsi random character
Pada tampilan ini aplikasi mulai memandu user untuk menghasilkan kode program dengan cepat tanpa menyalahi aturan kode program fungsi random character. User ditampilkan sebuah informasi mengenai fungsi tersebut melalui sebuah frame yang berjudul properties fungsi random character. User akan diajak mengikuti tahap-tahap membuat fungsi random character dengan memasukan nama variabel, min, max dan exception jika ada.
Gambar 3.24 Tampilan Fungsi Random Character
7. Tampilan fungsi random number
Tampilan fungsi random number memandu user untuk mengisi nama variabel, min, max dan exception. Pada textbox min dan max, aplikasi memberikan HscrollBar untuk membantu mengisi min dan max. Sedangkan pada sisi kanan tampilan juga diberikan sebuah frame yang berisi informasi fungsi yaitu properties fungsi random number.
Gambar 3.25 Tampilan Fungsi Random Number
8. Tampilan fungsi create array
Tampilan fungsi create array menggunakan option button sebagai pilihan membuat kode program create array. Option button tersebut adalah untuk new variable dan exist variable. Di bagian jumlah array, aplikasi memberikan HScrollbar dan daftar variabel sebagai kontrol yang membantu user pada saat mengisi jumlah array.
9. Tampilan fungsi put value
Tampilan fungsi put value menggunakan tiga listbox untuk menampilkan variabel-variabel yang telah dibuat sebelumnya.Dimana selanjutmya akan diproses dengan menekan command button execute.
Gambar 3.27 Tampilan Fungsi Put Value
10. Tampilan fungsi copy array
Tampilan copy array terdiri dari dua listbox yang digunakan untuk asal copy dan tujuan copy. Listbox tersebut hanya dipilih dengan pilihan yang berbeda kemudian dilanjutkan dengan mengisi jumlah copy. Dimana jumlah copy, aplikasi mengediakan kontrol HScrollbar untuk membantu pengisian jumlah copy. Setiap perubahan pada HScroll akan ditempatkan di textbox.Tampilan fungsi ini juga diberikan frame sebagai properties fungsi copy array.
11. Tampilan fungsi fill array
Untuk membantu pembuatan fungsi fill array, aplikasi menggunakan listbox dan textbox dalam penentuan variabel dan elemen array lainnya. Pada listbox sendiri user menentukan pilihan dengan double klik pada item listbox. Pilihan tersebut akan ditempatkan pada sebuah textbox. Properties fungsi terdapat disisi kanan tampilan yang menggunakan sebuah frame dan label untuk menampilkan informasi fungsi fill array.
Gambar 3.29 Tampilan Fungsi Fill Array
12. Tampilan fungsi display array
Tampilan fungsi display array hanya menggunakan textbox dan listbox sebagai nama variabel dan pilihan variabel array yang akan ditampilkan. Sama halnya dengan fungsi lainnya tampilan fungsi ini juga dilengkapi dengan frame sebagai properties fungsi display array.
Gambar 3.30 Tampilan Fungsi Display Array
13. Tampilan fungsi get value
Tampilan fungsi get value memiliki konsep yang sama dengan tampilan create array, dimana menggunakan listbox dan texbox. Begitu juga dengan properties fungsi berada disisi kanan tampilan fungsi get value.
Gambar 3.31 Tampilan Fungsi Get Value
14. Tampilan fungsi general
Tampilan fungsi general terdiri dari textbox nama variabel, textbox expreso dan checkbox sebagai tipe data. Di sisi bawah aplikasi juga menggunakan
listbox untuk membantu user menuliskan variabel tertentu di textbox expresi. Properties fungsi juga disediakan pada tampilan ini.
Gambar 3.32 Tampilan Fungsi General
15. Tampilan hasil kode program
Tampilan hasil kode program hanya menggunakan sebuah texbox dengan properti multiline untuk menampilkan semua baris kode program. Baris kode program tersebut dapat di copy ke clipboard untuk kebutuhan user pada aplikasi penghasil kuis otomatis.
16. Tampilan about
Tampilan menampikan informasi mengenai aplikasi.
