Modul ini memberikan tutorial membuat aplikasi kuis berbasis HTML dengan Intel XDK dengan menjelaskan cara membuat side menu dan tab view. Tutorial meliputi pembuatan project, pengaturan menu, penambahan konten kuis melalui iframe, dan pembuatan aplikasi Android.

1. MEMBUAT APLIKASI KUIS
BERBASIS HTML
DENGAN INTEL XDK
Modul ini memberikan tutorial membuat aplikasi kuis android dengan
Intel XDK. Dalam modul ini akan dibahas tentang menu sidebar dan menu
tab view.
Dibuat oleh:
Nur Rohman

2. Sebelum masuk ke tutorial, download bahan bahan dibawah ini :
Halaman materi : https://goo.gl/SKkQYb
Halaman soal : https://goo.gl/BgB0Oi

3. 1. Side Menu App
 Membuat project baru, setelah membuka Intel XDK sekarang kita mulai
membuat project baru. Caranya klik menu Start A New Project disebelah kiri
bawah.
 Kemudian pilih template lalu pilih layout and user interface, akan muncul beberapa
pilihan, langsung saja pilih yang side menu app.

4.  Setelah klik side menu app, jangan lupa ceklis pada pilihan use app designer dan klik
continue.
 Selanjutnya beri nama project dan klik create.

5.  Klik OK!
 Kemudian akan tampil layout yang akan kita gunakan untuk mendesain aplikasi kita.
Klik title pada header dan ketikkan nama aplikasi yang akan dibuat. Disini saya
contohkan “Quiz” sebagai nama aplikasinya.

6.  Disamping judul aplikasi ada icon side app yang bisa kita ganti dengan mengklik
iconnya kemudian di panel sebelah kanan pilih icon yang diinginkan.
 Nah, iconnya sudah bisa diganti.

7.  Klik icon yang barusan diganti dan kita bisa edit side menu app. Untuk mengatur
actionnya kita bisa pilih di panel kanan bawah. Double klik Home pada side menu
untuk mengatur halaman awal aplikasi.
 Sekarang kita masuk di halaman home, kita bisa menambahkan gambar dengan cara
drag and drop IMG pada tab control kemudia pada panel kanan atas kta pilih
gambarnya. Sebelumnya pastikan anda sudah memiliki gambar pada folder aplikasi
yang tadi dibuat.

8.  Selanjutnya kita tambahkan 2 button materi dan quiz dengan cara drag and drop
Button dari tab control.
 Kita bisa melihat hasilnya di tab emulate yang ada diatas.

9.  Selanjutnya kita akan mengimport folder html yang akan digunakan sebagai
halaman materi dan soal. Caranya pada panel paling kiri klik kanan lalu pilih Show In
Explore.
 Kemudian copykan folder materi dan soal yang tadi sudah di download kedalam
folder /www.

10.  Buat halaman baru yang nanti akan digunakan untuk menampilkan materi dan soal
dengan cara klik new page pada panel pages.

11.  Buka halaman materi yang baru saja dibuat kemudian drag and drop ifram dari tab
control lalu pada panel kanan atas pada kolom src ketikan alamat
materi/materi.html setelah itu pada halaman materi akan otomatis tampil.
 Kemudian pindah ke halaman home dan klik tombol materi lalu beri link action pada
panel kiri bawah, pilih page #materi.

12.  Selanjutnya masuk ke halaman soal yang tadi dibuat lalu drag and drop iframe dari
tab control dan pada panel kanan atas masukkan link soal/soal.html. otomatis akan
tampil halaman soal.
 Pada panel kanan bawah pilih button quiz dan pilih page #soal.

13.  Untuk menginputkan materi, masuk pada materi.html, akan muncul baris code.
Scroll kebawah sampe ketemu baris seperti gambar dibawah . Edit tulisan materi 1
sebagai judul dari materi 1 dan dibawahnya sebagai isi dari materi. Edit sampai
jumlah yang diinginkan.
 Lalu untuk menginputkan soal quiz, masuk ke soal.html kemudian scroll ke bawah
sampai terlihat seperti gambar dibawah. Edit pertanyaan 1, 2, 3 dst. Tentukan juga
jawabannya. Options untuk menambahkan pilihan jawaban dan answer untuk
menentukan jawaban yang benar.

14.  Selesai, pergi ke tab emulate dan lihat hasil aplikasi quiz yang tadi kita buat.

19.  Saatnya kita mengatur aplikasi yang akan kita build, pada tab project, atur build
settings.

20.  Gambar dibawah menampilkan dimana kita akan memasukkan icon dan splash
screen dari aplikasi kita.
 Terakhir, pergi ke tab build dan pilih android.

21.  Tunggu sampai muncul seperti gambar dibawah, klik build app now.
 Akhirnya kita telah berhasil membuild aplikasi, klik download build untuk
mendapatkan file .apk yang bisa diinstall di smartphone android atau dipublish ke
google play.

22. 2. Tab View App
 Yang kedua, kita akan membuat aplikasi jenis tab view. Caranya sama seperti side
menu app, bedanya pada awal saat memilih layout, pilih tab view dan jangan lupa
ceklis pada use app designer. Untuk selanjutnya, ikuti cara pada side menu app.

23. *Untuk mendownload sorce code dari aplikasi diatas, kunjungi : https://goo.gl/Y2oDSS
Thank You 