## EDUCATION GAME OF MULTIPLYING BASED ON HORIZONTAL METHOD OF HTML 5 AND ANDROID

## Michael Yoseph Ricky
Computer Science Department, School of Computer Science, BINUS University Jln. K.H. Syahdan No. 9 Palmerah, Jakarta 11480 mricky@binus.edu

## ABSTRACT
Over the years, technology is growing rapidly followed by the development of game and its variations. Now, game is easily found on a mobile device. Moreover, game on mobile device can also be used as an excellent medium for learning or often referred as educational game because the nature of educational game is practical, easy to carry anywhere, and tends to be fun. This research was to create a mobile game application for learning with Horizontal method based on HTML 5 and Phonegap and to introduce the method as a method of mathematical multiplication process. This research used the Scrum method for program development. The results obtained showed that the game in this study is considered attractive and received a positive response from the player. Player also found it helpful to know the patterns of mathematics through the multiplication of numbers in this game. So through this game the player can perform mathematical multiplication calculations quickly.
Keywords: mobile educational game, HTML5, Horizontal Method, multiplication math, phonegap

## ABSTRAK
Seiring perkembangan waktu, teknologi berkembang dengan pesat yang diikuti dengan perkembangan game dan variasi bentuk yang makin bertambah. Game saat ini makin mudah ditemukan pada perangkat mobile. Ditambah lagi, game pada perangkat mobile dapat dijadikan media yang tepat untuk pembelajaran (game edukasi) karena praktis dan mudah dibawa ke mana saja serta cenderung menyenangkan karena berbentuk permainan. Penelitian bertujuan untuk membuat aplikasi mobile game untuk pembelajaran dengan metode Horizontal pada perkalian berbasis HTML 5 dan Phonegap dan mengenalkan metode Horizontal pada perkalian matematika sebagai metode pengerjaan. Metode penelitian yang digunakan pada penelitian ini adalah Metode Scrum untuk pengembangan program. Hasil yang diperoleh menunjukkan bahwa game pada penelitian ini dianggap menarik dan mendapat respons positif dari player. Player juga merasa terbantu dan dapat mengenal pola bilangan pada perkalian matematika melalui game ini. Oleh karena itu, melalui game ini, player dapat melakukan perhitungan perkalian matematika secara cepat.
Kata kunci: game mobile edukasi, HTML5, Metode Horizontal, perkalian matematika, phonegap

## PENDAHULUAN
Perkembangan game saat ini sedang melaju dengan pesat. Bentuk yang dibuat sedemikian rupa didasarkan pada kebutuhan dan mobilitas penggunanya (Lavin-Mera, Torrente, Moreno-Ger, et al., 2009). Di era dengan tingkat mobilitas yang tinggi seperti sekarang ini pengguna sering kali tidak memiliki waktu untuk bermain dengan media yang memiliki mobilitas yang rendah. Anak-anak sekarang pun lebih banyak menghabiskan waktunya dengan handphone mereka. Melihat kebutuhan pasar yang telah berpusat ke arah mobile gadget seperti handphone dan tablet, maka para pengembang game mulai mengalihkan fokusnya kepada media yang bersifat mobile (Yerushalmy & Ben-Zaken, 2004).
Suatu ide yang menarik jika anak-anak yang menghabiskan waktu lebih banyak dengan handphone tidak hanya dapat bermain game sebagai sarana hiburan saja tetapi dapat juga dijadikan sebagai sarana edukasi yang efektif. Belajar sambil bermain dalam bentuk game tentu akan terasa lebih menyenangkan dibandingkan harus menghadapi buku yang terasa membosankan. Tanpa disadari game dapat mengajarkan banyak keterampilan dan dapat dijadikan sebagai salah satu alternatif pendidikan (Buckingham & Scanlon, 2002).
Menyadari hal tersebut, games yang dapat ditanamkan pada handphone dan tablet mulai dikembangkan. Antarmuka dalam game dirancang sedemikian rupa agar dapat mengakomodasi layar dari gadget yang terbatas. Hal ini terbukti pada kuartal keempat 2012, jumlah pengeluaran pelanggan untuk aplikasi mobile ternyata sudah mengungguli jumlah pengeluaran untuk game konsol portabel mencakup perangkat seperti Nintendo DS dan Sony PSP & Vita (Farabi, 2013).
Menurut Herumawan (2012), perhitungan mental adalah cara menghitung dengan hanya menggunakan otak manusia, tanpa bantuan peralatan yang lain. Dalam penelitian didapatkan kesimpulan bahwa perhitungan mental dengan menggunakan Metode Horizontal (METRIS) dapat meningkatkan kepercayaan diri, kecepatan merespon, ingatan dan daya konsentrasi pada para praktisinya. Menurut Azizah (2012), setelah melakukan pembelajaran perkalian dengan menggunakan METRIS, siswa memberi respons positif terhadap pembelajaran perkalian menggunakan METRIS. Siswa senang dengan adanya diskusi bersama teman, memberikan pendapat kepada teman kelompok lain, belajar dalam suasana yang tenang, dan mendapat penghargaan dari guru. Setelah diberikan angket, rata-rata skor siswa yang diperoleh siswa sebesar 4,19, atau 83,8% siswa memberi sikap positif terhadap pembelajaran perkalian dengan menggunakan METRIS. METRIS dapat meningkatkan hasil belajar perkalian siswa kelas III di Arjawinangun sacara signifikan sedangkan metode vertikal tidak signifikan dalam meningkatkan hasil belajar perkalian siswa kelas III di Arjawinangun. Pada penelitian ini kemudian metode horizontal diaplikasikan ke dalam bentuk game sehingga dalam penyebarannya akan dianggap lebih menyenangkan untuk dipelajari.
Masalah yang dihadapi adalah pembelajaran Matematika terbatas ruang dan waktu. Pembelajaran Matematika sering kali masih menggunakan cara konvensional (buku). Perkalian Matematika masih menggunakan metode pengerjaan secara vertikal. Selain itu, pembelajaran Matematika sering kali masih bergantung pada pengajar. Maka dari itu, penelitian ini bertujuan untuk merancang aplikasi mobile game untuk pembelajaran dengan Metode Horizontal pada perkalian berbasis HTML5 dan Phonegap dan mengenalkan metode Horizontal pada perkalian matematika melalui game edukasi.
Metris dikembangkan oleh Goenawan (2008). Konsep metris berawal dari pemikiran bahwa suatu bilangan dapat dipecah-pecah menjadi elemen-elemen satuan, puluhan, ratusan, dan seterusnya. Perbedaan metris dan sempoa adalah metris bisa menjelaskan langkah yang diambil karena menggunakan cara berpikir Matematika seperti yang digunakan di sekolah pada umumnya. Hal ini menjadikan Metris merupakan perhitungan mental arimatika yang lebih ilmiah meskipun sama-sama mengandalkan konsep asosiasi posisi .
Pada perkalian setiap bilangan dipecah menjadi elemen satuan, puluhan, ratusan, dan sebagainya. Ini yang membuat perkalian di Metris menjadi lebih mudah. Berikut ini penurunan rumusnya:
Perkalian bilangan 2(dua) digit AB X CD ab x cd = (a | b) x (c | d) = a x c | a x d + b x c | b x d
Perkalian 2(dua) digit : AB X AC dengan B+C=10 ab x ac = (a | b) x (a | c) = a x a | a x c + b x a | b x c = a x a | a ( b + c) | b x c (menggunakan hukum distributif) = a x a | a x 10 | b x c = a x a | a0 | b x c = a x a + a | 0 | b x c (sesuai dengan aturan notasi pagar) = a x (a + 1) || b x c (karena dibelakang pagar terdapat angka 0 maka boleh dihilangkan dan pagar bisa digabungkan)
Perkalian 2(dua) digit : AB X CB dengan A+C =10 ab x cb = ( a | b ) x ( c | b ) = a x c | a x b + b x c | b x b = a x c | (a+c) x b | b x b (menggunakan aturan distribusi) = a x c | 10 x b | b x b = a x c | b0 | b x b = (a x c) + b | 0 | b x b (sesuai dengan aturan notasi pagar) = (a x c) + b || b x b (karena dibelakang pagar terdapat angka 0 maka boleh dihilangkan dan pagar bisa digabungkan)
Perkalian 2(dua) digit : AB X C1 ab x c1 = ( a | b ) x ( c | 1) = a x c | a x 1 + b x c | b x 1 = a x c | a + b x c | b = ac | a + bc | b = (ac x 10) + a + bc | b (membuka 1 pagar paling depan dengan dikalikan dengan 10) = ac0 + a + bc | b
Perkalian bilangan 2(digit) x 3(tiga) digit : AB X CDE ab x cde = (a|b) x (cd|e)
= a x cd | a x e + b x cd | b x e
Perkalian bilangan 3(tiga) digit : ABC X DEF
abc x def
= (ab|c) x (de|f)
= ab x de | ab x f + c x de | c x f
Perkalian antara 9(sembilan) digit : A0BA0BA0B x C0DC0DC0D
a0b x c0d
= a||b x c||d = ac|| ad + bc || bd
Perkalian antar 15(lima belas) digit : 19A019A019A019A x 19B019B019B019B dengan A+B =10 19a x 19b= (2|| -b) x (2||-a) Penjelasan: a+b= 10, jadi 200-a= 19b dan 200-b=19a
Dengan memakai rumus dasar perkalian maka: = 2x2 || -2a x -2b || ab = 4 || -2(a+b) || ab = 4|| - 2 x 10 || ab = 400 – 20 || ab = 38 || ab

## METODE
Pengembangan game dimulai sesuai tahapan dalam metode Scrum sebagai berikut. Dalam tahap backlog dilakukan perencanaan, requirement kebutuhan berupa kuesioner, perencanaan materi, dan perencanaan daftar kerja berdasarkan waktu. Materi dibangun sesuai dengan metode Konstruksionis. Materi dibagi menjadi 2 (dua) bagian, yaitu bagian Latihan ( Assesment ) dan bagian Pembelajaran ( Learning ). Materi disusun sesuai dengan 6 (enam) elemen dalam metode Konstruksionis. Elemen situation dibuat dengan membuat alur cerita dalam permainan, sehingga player akan dikondisikan sedemikian rupa dalam game . Pada elemen grouping materi dibagi per grup sesuai dengan tipe masing-masing soal. Tipe soal kemudian dibagi lagi sesuai dengan jumlah digit dalam tiap tipe soal. Pada elemen brigde soal yang diajarkan ataupun diberikan pada latihan disesuaikan dengan materi yang telah dipelajari user sesuai dengan silabus dalam lampiran. Pada elemen question pengujian dilakukan kepada player dalam bagian Latihan, yaitu pemain diberikan soal-soal namun terbatas waktu. Pada elemen exhibit nantinya setiap soal yang terjawab dengan benar akan diberikan penghargaan berupa simbol-simbol tertentu yang akan menandakan kemampuan user . Pada elemen reflection , simbol-simbol disimpan agar dapat menjadi refleksi bagi user untuk melihat kemampuan dirinya saat mengerjakan soal-soal. Alur perancangan aplikasi dapat dilihat pada Gambar 1.

## Gambar 1 Alur Perancangan
Pada tahapan sprint , daftar pekerjaan sesuai waktu mulai dikerjakan dan dilaksanakan sesuai dengan waktu yang ditargetkan. Dalam proses ini perubahan siginifikan tidak diijinkan. Kemudian setelah tahapan sprint , maka akan dilakukan pertemuan (tahap scrum meeting dilakukan) untuk membahas hasil kerja sprint dan dievaluasi. Pertemuan dilakukan dengan scrum master . Koreksi- koreksi kemudian dicatat untuk perbaikan selanjutnya. Proses Sprint dan Scrum Meeting akan terus berulang sampai mencapai hasil yang diharapkan sesuai dengan requirement . Tahapan selanjutnya adalah tahap demos . Proses dokumentasi dilakukan setelah hasil kerja yang disepakati dan proses sprint dan scrum meeting berakhir. Kemudian hasil akan didemonstrasikan dan diuji coba kepada user dengan kuesioner hasil .

## HASIL DAN PEMBAHASAN
Pada aplikasi game yang dibuat, penelitian membuat karakter dalam permainan. Karakter tersebut adalah Plica. Karakter Plica merupakan karakter yang tidak bisa dimainkan (non -playable character ). Daftar karakter dalam aplikasi game yang dibuat dapat dilihat pada Tabel 1.

## Tabel 1 Daftar Karakter
Gambar Keterangan Plica (Non-playable character)
Berikut ini adalah hasil aplikasi game edukasi perhitungan perkalian berdasarkan metode horizontal. Halaman utama merupakan halaman pembuka yang biasa terdapat pada aplikasi mobile sebelum masuk kepada game .

## Layar Home

## Gambar 2 Halaman Utama

## Layar Menu Main

## Layar Permainan
Layar permainan dibagi menjadi 3 halaman: halaman bermain (Gambar 4), halaman bermain saat pemain menjawab soal dengan benar (Gambr 5), dan halaman bermain saat pemain salah menjawab soal (Gambar 6).
Gambar 4 Halaman Bermain Gambar 5 Halaman Bermain Saat Menjawab Soal Dengan Benar Gambar 6 Halaman Bermain Saat Salah Menjawab Soal
Evaluasi dilakukan dengan membagikan kuesioner kepada mahasiswa BINUS, pelajar sekolah dasar, dan masyarakat umum di pameran “Pekan Produk Kreatif Daerah 2013” di Monas. Total responden yang menerima kuesioner sebanyak 50 (lima puluh) orang. Hasil kuesioner untuk mengevaluasi aplikasi dijabarkan sebagai berikut.
Tabel 2 Apakah game “Run Plica Run” telah memenuhi kebutuhan Anda sebagai media pembelajaran perkalian matematika?
Jawaban Jumlah Responden Presentase Ya 48 96% Tidak 2 4% Total 50 100%
Gambar 7 Apakah game “Run Plica Run” telah memenuhi kebutuhan Anda sebagai media pembelajaran perkalian matematika?
Tabel 3 Bagaimana tampilan desain karakter dan background pada game “Run Plica Run”?
Jawaban Jumlah Responden Presentase Sangat Menarik 4 8% Menarik 42 84% Kurang Menarik 4 8% Tidak Menarik 0 0 Total 50 100% Gambar 8 Bagaimana tampilan desain karakter dan background pada game “Run Plica Run”?
Tabel 4 Bagaimana gameplay pada game “Run Plica Run”?
Jawaban Jumlah Responden Presentase Sangat Menarik 8 16% Menarik 33 66% Kurang Menarik 9 18% Tidak Menarik 0 0 Total 50 100%
Gambar 9 Bagaimana gameplay pada game “Run Plica Run”?
Tabel 5 Apakah gameplay pada game “Run Plica Run” dapat dimainkan dengan mudah?
Jawaban Jumlah Responden Presentase Sangat Mudah 10 20% Mudah 32 64% Kurang Mudah 8 16% Tidak Mudah 0 0 Total 50 100% Gambar 10 Apakah gameplay pada game “Run Plica Run” dapat dimainkan dengan mudah?
Tabel 6 Apa sajakah kriteria yang telah terpenuhi dalam game “Run Plica Run” ?
Jawaban Jumlah Jawaban Konsistensi ( Karakter, Huruf, Warna, Posisi tombol ) 34 Memungkinkan penggunaan universal 33 Mengurangi beban ingatan jangka pendek 35 Memberikan umpan balik yang informatif 40 Memberikan dialog untuk keadaan akhir 28 Mencegah kesalahan 24 Mendukung internal locus of control 24 Memberikan pembalikan aksi yang mudah 34
Gambar 11 Apa sajakah kriteria yang telah terpenuhi dalam game “Run Plica Run” ?
Tabel 7 Apakah cara perhitungan METRIS (Metode Horizontal) dalam game “Run Plica Run” telah membantu Anda untuk mengerjakan soal perkalian Matematika dengan lebih cepat?
Jawaban Jumlah Responden Presentase Sangat Membantu 12 24% Membantu 35 70% Kurang Membantu 3 6% Tidak Membantu 0 0 Total 50 100%
Gambar 12 Apakah cara perhitungan METRIS (Metode Horizontal) dalam game “Run Plica Run” telah membantu Anda untuk mengerjakan soal perkalian Matematika dengan lebih cepat?
Tabel 8 Bagaimana pendapat Anda
mengenai game “Run Plica Run” secara keseluruhan?
Jawaban Jumlah Responden Presentase Sangat Menarik 9 18% Menarik 37 74% Kurang Menarik 4 8% Tidak Menarik 0 0 Total 50 100%
Gambar 13 Bagaimana pendapat Anda mengenai game “Run Plica Run” secara keseluruhan?

## SIMPULAN
Simpulan yang diperoleh dari pengembangan game “Run Plica Run” berbasis mobile sebagai berikut. Perama, game “Run Plica Run” merupakan single player mobile-based game berbasis HTML5 dan Javascript dengan memakai framework Phonegap yang berjalan pada sistem operasi Android dan didistribusikan melalui Google Play Store . Kedua, game “Run Plica Run” merupakan game edukasi 2 (dua) dimensi pada perkalian matematika yang mengajarkan Metode Horizontal pada metode pengerjaannya dengan menggunakan teks, gambar, suara, dan animasi ditujukan bagi siswa/siswi yang ingin menambah kemampuan dan mengasah pola berpikir di bidang perkalian matematika pada waktu yang terbatas. Ketiga, game “Run Plica Run” memberikan suasana belajar perkalian yang berbeda dan dapat menjadi sarana pembelajaran yang menarik dan menyenangkan bagi pengguna. Keempat, materi pembelajaran dalam game “Run Plica Run” dibangun dengan mengadopsi Metode Konstruksionis ( Constructivist ) dengan tampilan 2 (dua) dimensi. Kelima, jumlah digit perkalian pada game “Run Plica Run” adalah 2 (dua) digit, 3 (tiga) digit, 9 (sembilan) digit, dan 15 (lima belas) digit. Keenam, game “Run Plica Run” memiliki desain tampilan yang menarik baik, gameplay yang baik, serta player dapat memainkan game tanpa mengalami kesulitan yang bersifat teknik. Dapat dikatakan bahwa game “Run Plica Run” merupakan game yang dianggap menarik dan mendapat respon positif dari player . Ketujuh, melalui game “Run Plica Run” player merasa terbantu serta menyadari bahwa terdapat pola-pola bilangan pada perkalian matematika.
Sedangkan saran yang dapat digunakan bagi pengembang game selanjutnya adalah sebagai berikut. Pertama, memperbanyak variasi suara latar dalam game sehingga dapat membuat game lebih menarik. Kedua, membuat game “Run Plica Run” dengan 2(dua) bahasa pengantar yaitu bahasa Inggris dan bahasa Indonesia. Ketiga, membuat game “Run Plica Run” dapat dimainkan pada sistem operasi lain selain Android di mobile .

## DAFTAR PUSTAKA
Azizah, S. (2012). Pengaruh Metode Horizontal (METRIS) Terhadap Hasil Belajar Siswa Kelas III Pada Materi Perkalian. Skripsi. Universitas Pendidikan Indonesia.
Buckingham, D., & Scanlon, M. (2002). Education, Entertainment and Learning in the Home . Cambridge: Open University Press.
Farabi, I. (2013, 25 Feb). IDC dan App Annie: Pendapatan mobile game melebihi pendapatan game konsol portabel . Diakses 14 Mei 2013 dari http://www.trenologi.com/2013022511050/idc- dan-app-annie-pendapatan- mobile -game-melebihi-pendapatan-game-konsol/.
Goenawan, S. I. (2008) MetrisTM: Mencetak Einstein Cara Hebat Jadi Jenius . Jakarta: Metris Pustaka.
Herumawan. (2012). Belajar Matematika Metode Sigmetris . Diakses 24 Febuari 2013 dari http://lecturer.poliupg.ac.id/
Lavin-Mera, P., Torrente, J., Moreno-Ger, P., Pinto, J. A. V., Fernández-Manjón, B. (2009). Mobile game development for multiple device in education. International Journal of Emerging Technologies in Learning , 4 , 19–26.
Yerushalmy, M., & Ben-Zaken, O. (2004). Mobile Phones in Education: The case of mathematics . University of Haifa