Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Android
  • Aplikasi
  • Teknologi

Aplikasi Kuis Berbasis Android Menggunakan JQuizMe

  • Mei 12, 2013
  • admin
145

SHARES

ShareTweet

Penulis menemukan sebuah library Javascript berbasis Jquery yang dapat dipergunakan untuk pembuatan sebuah Kuis. Library ini penulis temukan di code.google.com dengan nama project JQuizMe. Dibuat oleh Larry Battle dan hingga sekarang telah mencapai versi 2.2.1. Dalam tutorial kali ini penulis akan menjelaskan secara ringkas penggunaan JQuizMe pada framework Phonegap.

Kuis Phonegap

Kuis Phonegap

Lihat Demo Download Source

Lihat Tutorial Android Lainnya disini

Sebagai informasi tambahan, dengan menggunakan JQuizMe kita pun bisa membuat aplikasi kuis untuk berbagai jenis pertanyaan. Cakupan jenis pertanyaannya antara lain:

  • Kuis berbentuk Fill in the Blank (Mengisi secara manual)
  • Flash Card (Kuis bergambar)
  • Multiple Choice (Kuis pilihan ganda)
  • True and False (Kuis benar atau salah)

Setelah membaca dokumentasi lengkap di kuis tersebut dan mencoba mengaplikasikannya dengan localhost, penulis kemudian mencoba mengkombinasikan JQuizMe agar dapat dijalankan pada platform Android maupun Smartphone lain. Ternyata JQuizMe juga berjalan baik di smartphone dengan beberapa perubahan tampilan agar terlihat responsive pada berbagai device.

Mari kita mulai tutorial sederhana pembuatan aplikasi kuis berjenis multiple choice. Yang perlu Pembaca persiapkan untuk membuat aplikasi kuis ini adalah :

  • JQuery versi 1.8.3 (bisa di download melalui situs resmi Jquery.com), dan
  • JQuizMe library (berisi file javascript dan css) – download di http://code.google.com/p/jquizme/downloads/list

number 1Pertama, kita membuat konfigurasi project Phonegap sederhana melalui Eclipse yang telah terpasang plugin MDS Applaud. Pembaca bisa mengikuti tutorial pemasangan MDS Applaud yang telah saya tulis sebelumnya di artikel yang berjudul membuat project MDS Applaud, jika belum memasang plugin tersebut.

Berikut adalah informasi konfigurasi aplikasi Phonegap yang penulis buat :

  • Nama aplikasi : Kuis Phonegap
  • Build Target : Android 2.1 (Agar support platform Android 2.1 ke atas)
  • Package Name : com.mkhuda.phonegapkuis
  • Phonegap Contents Configuration : Minimal Phonegap Project
  • Phonegap version : Phonegap cordova 1.9.0 (Anda bisa menggunakan versi lain)

number 2Kemudian setelah kita membuat project di atas. Selanjutnya kita membuat dua folder baru di dalam folder assets/www dengan nama folder js/ dan css/. Lalu kita copy library JQuery dan JQuizme ke dalam folder js/ dan JQuizme.css ke dalam folder css/. Seperti ini :

Isi folder assets www

Isi folder assets www

number 3Langkah selanjutnya adalah menuliskan script di index.html dengan menginclude script jquery, jquizme.js dan jquizme.css, berikut adalah kode yang harus ditulis. Untuk mempercepat tutorial, saya sudah menyertakan script / source code aplikasi ini. Berikut adalah isi dari index.html :


<!DOCTYPE HTML>
<html>
<head>
<meta name=”viewport” content=”width=320; user-scalable=no” />
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8“>
<title>Kuis Phonegap</title>
<script type=”text/javascript” charset=”utf-8” src=”cordova-1.9.0.js“></script>
<link rel=”stylesheet” type=”text/css” href=”css/jQuizMe.css“/>
</head>
<body>
<div id=”quizArea“/>
</body>
<script type=”text/javascript” src = “js/jquery-1.8.3.js“></script>
<script type=”text/javascript” src=”js/jQuizMe-2.2.1.js“></script>
<script type=”text/javascript“>
$( function($){
var quiz = {
multiList: [
{
ques: “Bahasa pemrograman apa yang didukung Phonegap”,
ans: “HTML, CSS, Javascript”,
ansSel: [“PHP, ASP, MySQL”, “Ruby on Rails”]
},
{
ques: “Apakah Phonegap dapat digunakan untuk membuat aplikasi Blackberry?”,
ans: “Iya”,
ansSel: [“tidak”]
},
{
ques: “Platform apa saja yang didukung”,
ans: “Android, iOS, Windows Phone, Blackberry”,
ansSel: [“Windows 7, Windows ME,”, “Linux, Chrome App, Firefox Add-ons”]
}
],
},
options = {
help: “<center>Silahkan jawab pertanyaan-pertanyaan yang ada</center>”,
intro: “Kuis Phonegap<br>Info tutorial lebih lanjut, Anda bisa belajar di <a href=’http://mkhuda.com/’>Mkhuda.com</a>”,
allRandom: true,
title: “Basic Phonegap”
};
$(“#quizArea”).jQuizMe(quiz, options);
});
</script>
</html>

view raw

index.html

hosted with ? by GitHub

Kode di atas menunjukkan bahwa kita membuat variabel bernama Quiz yang berisi option multilist  untuk pembuatan kuis berjenis multiple choice. Pertanyaan dibuat berbentuk array dimana :

  • ques, merupakan soal pertanyaan yang dibuat
  • ans, jawaban yang benar, dan
  • ansSel, merupakan pilihan ganda dari soal pertanyaan

Kita bisa melihat dokumentasi lengkap mengenai option dan penjelasan Array di http://code.google.com/p/jquizme/wiki/HowToUse

Baca juga:

  1. Membuat Project Aplikasi Phonegap Menggunakan MDS Applaud
  2. Library Jquery dan Javascript Untuk Aplikasi Phonegap
  3. Aplikasi Efek Buku Berbasis Phonegap
  4. Menampilkan Native Splash Screen Aplikasi Android Pada Phonegap
  5. Aplikasi Android Phonegap Dengan Database SQLite
 
admin

Previous Article
  • Teknologi

Kombinasi Amarino, Arduino dan Phonegap Untuk Dunia Robotik

  • Mei 11, 2013
  • admin
View Post
Next Article
  • Teknologi

Proposal Skripsi Tugas Akhir Mahasiswa Teknik. What??

  • Mei 13, 2013
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.