RANCANG BANGUN DOMINATEMYJS UNTUK PEMBELAJARAN JAVASCRIPT HTML DOCUMENT OBJECT MODEL MENGGUNAKAN METODE GAMIFIKASI OCTALYSIS

(1)

RANCANG BANGUN DOMINATEMYJS UNTUK PEMBELAJARAN JAVASCRIPT HTML DOCUMENT OBJECT MODEL MENGGUNAKAN METODE GAMIFIKASI

OCTALYSIS

SKRIPSI

Diajukan sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer (S.Kom.)

Daniel Indra Cahyadi 00000013157

PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG 2020

(2)

(3)

PERNYATAAN TIDAK MELAKUKAN PLAGIAT

Dengan ini saya:

Nama : Daniel Indra Cahyadi

NIM : 00000013157

Program Studi : Informatika

Fakultas : Teknik dan Informatika

menyatakan bahwa Skripsi yang berjudul “RANCANG BANGUN DOMINATEMYJS UNTUK PEMBELAJARAN JAVASCRIPT HTML DOCUMENT OBJECT MODEL MENGGUNAKAN METODE GAMIFIKASI OCTALYSIS” ini adalah karya ilmiah saya sendiri, bukan plagiat dari karya ilmiah yang ditulis oleh orang lain atau lembaga lain, dan semua karya ilmiah orang lain atau lembaga lain yang dirujuk dalam Skripsi ini telah disebutkan sumber kutipannya serta dicantumkan di Daftar Pustaka.

Jika di kemudian hari terbukti ditemukan kecurangan/ penyimpangan, baik dalam pelaksanaan Skripsi maupun dalam penulisan laporan Skripsi, saya bersedia menerima konsekuensi dinyatakan TIDAK LULUS untuk mata kuliah Skripsi yang telah saya tempuh.

Tangerang, 24 Maret 2020

Daniel Indra Cahyadi

(4)

PERNYATAAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Sebagai sivitas akademik Universitas Multimedia Nusantara, saya yang bertanda tangan di bawah ini:

Nama : Daniel Indra Cahyadi

NIM : 00000013157

Program Studi : Informatika

Fakultas : Teknik dan Informatika

Jenis Karya : Skripsi

Demi pengembangan ilmu pengetahuan, menyetujui dan memberikan izin kepada Universitas Multimedia Nusantara Hak Bebas Royalti Non-eksklusif (Non- exclusive Royalty-Free Right) atas karya ilmiah saya yang berjudul “RANCANG BANGUN DOMINATEMYJS UNTUK PEMBELAJARAN JAVASCRIPT HTML DOCUMENT OBJECT MODEL MENGGUNAKAN METODE GAMIFIKASI OCTALYSIS” beserta perangkat yang diperlukan.

Dengan Hak Bebas Royalti Non-eksklusif ini, pihak Universitas Multimedia Nusantara berhak menyimpan, mengalihmedia atau format-kan, mengelola dalam bentuk pangkalan data (database), merawat, dan mendistribusi dan menampilkan atau mempublikasikan karya ilmiah saya di internet atau media lain untuk kepentingan akademis, tanpa perlu meminta izin dari saya maupun memberikan royalti kepada saya, selama tetap mencantumkan nama saya sebagai penulis karya ilmiah tersebut.

Demikian pernyataan ini saya buat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.

Daniel Indra Cahyadi

(5)

KATA PENGANTAR

Puji syukur kepada Tuhan Yang Maha Esa atas berkat dan kuasa-Nya yang berlimpah sehingga laporan skripsi yang berjudul “Rancang Bangun DominateMyJS untuk Pembelajaran JavaScript HTML Document Object Model Menggunakan Metode Gamifikasi Octalysis” ini dapat diselesaikan tepat pada waktunya. Laporan skripsi ini disusun sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer (S.Kom.).

Penulis juga mengucapkan terima kasih kepada:

1. Dr. Ninok Leksono Rektor Universitas Multimedia Nusantara, yang memberi inspirasi bagi penulis untuk berprestasi,

2. Friska Natalia, S.Kom., M.T., Ph.D., Pembantu Rektor I Universitas Multimedia Nusantara,

3. Nunik Afriliana, S.Kom. MMSI, Ketua Program Studi Informatika Universitas Multimedia Nusantara, yang menerima penulis dengan baik untuk berkonsultasi,

4. Julio Christian Young, M.Kom. sebagai Pembimbing I dan Andre Rusli, S.Kom., M.Sc. sebagai pembimbing II yang telah membimbing pembuatan skripsi dan yang telah mengajar penulis tata cara menulis karya ilmiah dengan benar,

5. Kedua orang tua dan adik yang telah memberikan dukungan dan doa dalam penyelesaian skripsi ini,

(6)

6. Vincent Wendy, Listiani Liaw, Daniel Sukmana, Jesslyn Tanmas, Samuel Sandro Setiawan, Joshua Setiawan, serta semua rekan kerja di Kodefox yang telah mendukung dan memberi masukan dalam penyelesaian laporan ini.

Semoga Skripsi ini dapat bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi, bagi para pembaca.

Daniel Indra Cahyadi

(7)

RANCANG BANGUN DOMINATEMYJS UNTUK PEMBELAJARAN JAVASCRIPT HTML DOCUMENT OBJECT MODEL MENGGUNAKAN

METODE GAMIFIKASI OCTALYSIS

ABSTRAK

Penelitian ini bertujuan untuk merancang dan membangun sistem DominateMyJS sebagai media pembelajaran JavaScript HTML Document Object Model (DOM) menggunakan metode gamifikasi Octalysis, serta mengukur tingkat Behavioral Intention to Use dan immersion pengguna pada aplikasi. Keunggulannya adalah Octalysis memberikan struktur untuk menganalisis kekuatan yang mendorong motivasi manusia, disebut dengan Core Drives. Dengan menerapkan Core Drives pada aplikasi, dapat membuat pengguna termotivasi untuk menyelesaikan suatu tugas secara efisien melalui pengalaman yang interaktif. Aplikasi dibuat dengan memenuhi delapan Core Drives Octalysis Gamification dengan minimal satu kriteria pada setiap Core Drives. Pengujian aplikasi gamifikasi dilakukan terhadap sivitas akademika UMN dengan cara mengumpulkan feedback pengguna setelah menggunakan aplikasi DominateMyJS dan mengisi kuesioner yang didasarkan oleh Hedonic-Motivation System (HMSAM). Hasil evaluasi menyatakan penggguna sangat setuju bahwa aplikasi yang telah dirancang dapat meningkatkan penggunaan kembali aplikasi dengan persentase 80,13%, dan pengguna setuju bahwa pengguna dapat merasa terbawa suasana dalam menggunakan aplikasi DominateMyJS dengan persentase 72,10%. Dipercaya bahwa gamifikasi dengan framework Octalysis dapat memotivasi pengguna dan membuat pengalaman yang menyenangkan dalam proses pembelajaran JavaScript HTML DOM.

Kata kunci: gamifikasi, HMSAM, octalysis, penggunaan kembali, terbawa suasana.

(8)

DOMINATEMYJS DESIGN FOR JAVASCRIPT HTML DOCUMENT OBJECT MODEL LEARNING USING OCTALYSIS GAMIFICATION

METHOD

ABSTRACT

This research aims to design and build the DominateMyJS system as a learning medium for JavaScript HTML Document Object Model (DOM) using the Octalysis gamification method, and measuring the level of Behavioral Intention to Use and user immersion in the application. The advantage is that Octalysis lays out the structure for analyzing the driving force behind human motivation, called Core Drives. By implementing Core Drives in the application, can make users motivated to complete a task efficiently through an interactive experience. Application is made by fulfilling eight Core Drives Octalysis Gamification with at least one criterion in each Core Drives. Gamification application testing was conducted on UMN academics by collecting user feedback after using the DominateMyJS application and filling out a questionnaire based on the Hedonic-Motivation System (HMSAM). The evaluation results state that users strongly agree that the application that has been designed can increase behavioral intetion to use by a percentage of 80.13%, and users agree that users can feel the immersion in using the DominateMyJS application with a percentage of 72.10%. It is believed that gamification with the Octalysis framework can motivate users and create a pleasant experience in the learning process of JavaScript HTML DOM.

Keywords: behavioral intention to use, gamification, HMSAM, immersion, octalysis.

(9)

DAFTAR ISI

LEMBAR PENGESAHAN ... ii

PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... iii

PERNYATAAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS ... iv

KATA PENGANTAR ... v

ABSTRAK ... vii

ABSTRACT ... viii

DAFTAR ISI ... ix

DAFTAR GAMBAR ... xi

DAFTAR TABEL ... xii

DAFTAR RUMUS ... xiii

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Rumusan Masalah ... 4

1.3 Batasan Masalah ... 5

1.4 Tujuan Penelitian ... 5

1.5 Manfaat Penelitian ... 6

1.6 Sistematika Penulisan ... 6

BAB II LANDASAN TEORI ... 8

2.1 Gamifikasi ... 8

2.2 JavaScript ... 9

2.3 Document Object Model (DOM) ... 9

2.4 Octalysis ... 11

2.5 HMSAM ... 12

2.6 Skala Likert ... 13

BAB III METODOLOGI DAN PERANCANGAN APLIKASI ... 15

3.1 Metodologi Penelitian ... 15

3.2 Perancangan Aplikasi ... 17

3.2.1 Perancangan Gamifikasi ... 17

3.2.2 Model Aplikasi ... 19

3.2.3 Flowchart ... 22

3.2.4 Perancangan Entity Relatonship Diagram (ERD) ... 36

3.2.5 Perancangan Mockup ... 36

3.2.6 Perancangan Aset ... 45

BAB IV IMPLEMENTASI DAN UJI COBA ... 51

4.1 Spesifikasi Aplikasi ... 51

4.2 Implementasi Aplikasi ... 52

4.2.1 Authentication ... 52

4.2.2 Home ... 54

4.2.3 Shop ... 55

4.2.4 Leaderboard ... 56

4.2.5 Achievement ... 58

4.2.6 Profile ... 59

(10)

4.2.7 Level Selection ... 60

4.2.8 Game ... 61

4.3 Pengujian Aplikasi ... 63

4.4 Evaluasi Hasil Pengujian ... 74

BAB V SIMPULAN DAN SARAN ... 76

5.1 Simpulan ... 76

5.2 Saran ... 77

DAFTAR PUSTAKA ... 78

DAFTAR LAMPIRAN ... 80

(11)

DAFTAR GAMBAR

Gambar 2.1 Struktur JavaScript HTML DOM ... 10

Gambar 2.2 Visualisasi dari delapan Core Drives ... 11

Gambar 2.3 Diagram dari teori HMSAM ... 12

Gambar 3.1 Model Aplikasi Pembelajaran JavaScript HTML DOM ... 19

Gambar 3.2 Root Scene Flowchart ... 22

Gambar 3.3 Login Scene Flowchart ... 23

Gambar 3.4 Register Scene Flowchart ... 24

Gambar 3.5 Home Scene Flowchart ... 26

Gambar 3.6 Shop Scene Flowchart ... 27

Gambar 3.7 Leaderboard Scene Flowchart ... 28

Gambar 3.8 Achievement Scene Flowchart ... 30

Gambar 3.9 Profile Scene Flowchart ... 32

Gambar 3.10 Level Selection Scene Flowchart ... 33

Gambar 3.11 Game Scene Flowchart ... 34

Gambar 3.12 Entity Relationship Diagram (ERD) ... 36

Gambar 3.13 Mockup Sign In ... 37

Gambar 3.14 Mockup Register ... 37

Gambar 3.15 Mockup Home ... 38

Gambar 3.16 Mockup Shop ... 39

Gambar 3.17 Mockup Leaderboard ... 40

Gambar 3.18 Mockup Achievement ... 41

Gambar 3.19 Mockup Profile ... 42

Gambar 3.20 Mockup Level Selection ... 43

Gambar 3.21 Mockup Game ... 44

Gambar 3.22 Mockup Game ... 44

Gambar 4.1 Halaman Register ... 52

Gambar 4.2 Halaman Sign In ... 53

Gambar 4.3 Halaman Home ... 54

Gambar 4.4 Halaman Shop ... 55

Gambar 4.5 Halaman Leaderboard (Top 3) ... 56

Gambar 4.6 Halaman Leaderboard (posisi pengguna) ... 57

Gambar 4.7 Halaman Achievement ... 58

Gambar 4.8 Halaman Profile ... 59

Gambar 4.9 Halaman Level Selection ... 60

Gambar 4.10 Halaman Game (intro) ... 61

Gambar 4.11 Halaman Game (mulai) ... 62

Gambar 4.12 Halaman Game (selesai) ... 62

(12)

DAFTAR TABEL

Tabel 3.1 Daftar Ikon Aplikasi ... 45

Tabel 3.2 Daftar Aset Game ... 46

Tabel 3.3 Daftar Aset Avatar ... 47

Tabel 4.1 Daftar Pernyataan Kuesioner ... 64

Tabel 4.2 Jawaban Kuesioner Pengguna ... 66

Tabel 4.3 Persentase Jawaban Kuesioner Pengguna dengan Skala Likert ... 69

Tabel 4.4 Interval Nilai dan Kategori Jawaban ... 70

Tabel 4.5 Hasil Evaluasi Perceived Ease of Use ... 70

Tabel 4.6 Hasil Evaluasi Joy ... 71

Tabel 4.7 Hasil Evaluasi Curiosity ... 71

Tabel 4.8 Hasil Evaluasi Control ... 72

Tabel 4.9 Hasil Evaluasi Perceived Usefulness ... 73

Tabel 4.10 Hasil Evaluasi Immersion ... 73

Tabel 4.11 Hasil Evaluasi Behavioral Intention to Use ... 74

(13)

DAFTAR RUMUS

Rumus 2.1 Persentase Pernyataan Positif ... 14 Rumus 2.2 Persentase Pernyataan Negatif ... 14

(14)

DAFTAR LAMPIRAN

1. CV (curriculum vitae) 2. Reward Penyelesaian Level 3. Harga Avatar

4. Syarat Mendapatkan Achievement 5. Lembar Bimbingan Skripsi