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

Sebelum masuk ke tutorial, download bahan bahan dibawah ini :

Halaman materi : https://goo.gl/SKkQYb

Halaman soal : https://goo.gl/BgB0Oi

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.

Setelah klik side menu app, jangan lupa ceklis pada pilihan use app designer dan klik

continue.

Selanjutnya beri nama project dan klik create.

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.

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.

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.

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.

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.

Buat halaman baru yang nanti akan digunakan untuk menampilkan materi dan soal

dengan cara klik new page pada panel pages.

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.

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.

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.

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

Saatnya kita mengatur aplikasi yang akan kita build, pada tab project, atur build

settings.

Gambar dibawah menampilkan dimana kita akan memasukkan icon dan splash

screen dari aplikasi kita.

Terakhir, pergi ke tab build dan pilih android.

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.

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.

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

Thank You