Construct2 tutorial-kuis

Published on December 17th, 2017 | by Aditia Dwiperdana

0

Membuat game kuis pilihan ganda

Pada tutorial ini kita akan membuat sebuah permainan kuis dengan pilihan berganda. Beberapa pembaca artikel bertanya tentang cara mengacak jawaban yang ditampilkan dalam game. Sebagai tambahan, pada bagian berikutnya kita akan menambahkan fitur menyimpan pertanyaan di internet agar kita bisa menambahkan pertanyaan seiring waktu berjalan. Kita masih menggunakan Construct 2 pembuatan permainan ini.

Membuat fitur dasar

Kali ini kita hanya akan membuat fitur utama permainan kuis, yaitu menampilkan pertanyaan dan jawaban. Untuk ini kita hanya menggunakan objek teks, tapi kamu bisa menambahkan elemen visual seperti panel untuk masing-masing pilihan jawaban jika dirasa perlu.

  1. Buat proyek baru pada Construct 2, pilih menu File > New > pilih jenis template yang sesuai, misalnya HD landscape.
  2. Pada tampilan layout, buat sebuah objek teks baru untuk menampilkan pertanyaan dengan klik kanan > Insert new object > Text > beri nama ‘Pertanyaan’. Atur tampilan teks sesuai kebutuhan, misalnya ubah ukuran area teks, ukuran font, dan posisi tulisan (alignment) menjadi ‘center’.
  3. Buat objek bernama ‘Jawaban’ dengan cara yang sama seperti langkah 2.
  4. Tambahkan variabel instance dengan menekan tautan ‘Instance variables’ pada tabel properti, pilih Add new > beri nama ‘index’, jenisnya ‘number’, dan bernilai -1. Variabel ini akan kita gunakan untuk menyimpan index asli, karena nanti kita akan mengacak jawaban berdasarkan posisinya di layar. Kita membutuhkan index untuk memeriksa apakah jawaban tersebut benar atau salah.
  5. Salin objek jawaban secukupnya, dalam tutorial kita akan menggunakan total 4 jawaban.
  6. Buat dua variabel global, ‘JumlahPertanyaan’ dan ‘NomorPertanyaan’, masing-masing bernilai 10 dan -1. Kamu bisa membuat variabel global dengan klik kanan event sheet > Add global variable > beri nama, pilih jenis number, dan isi dengan nilai yang sesuai.

Membuat daftar pertanyaan dan jawaban

Untuk menampilkan banyak pertanyaan yang beragam, kita perlu menyimpan suatu daftar pertanyaan. Sementara ini kita akan menggunakan objek Array untuk menyimpan daftar teks pertanyaan dan jawaban. Nantinya kita akan menyimpan daftar soal dalam file terpisah. Array yang kita gunakan saat ini akan menjadi patokan struktur data pertanyaan dan jawaban.

  1. Buat dua array bernama DaftarPertanyaan dan DaftarJawaban, dengan cara klik kanan pada tampilan layout > Insert new object > Array.
  2. Buat event baru pada event sheet, Add event > System > On start of layout. Add action > DaftarPertanyaan > Set size > isi dengan JumlahPertanyaan, 2, 1. Array daftar pertanyaan akan berisi teks pertanyaan dan index jawaban yang benar.
  3. Add action > DaftarJawaban > Set size > isi dengan JumlahPertanyaan, 4, 1. Array ini akan menyimpan empat pilihan jawaban untuk masing-masing pertanyaan.
  4. Kita perlu mengisi kedua array itu dengan contoh pertanyaan dan jawaban (lihat gambar). Perhatikan indeks array, nilai pertama adalah baris, dan kita gunakan sebagai nomor pertanyaan. Nilai kedua adalah kolom, yang memiliki fungsi yang berbeda pada DaftarPertanyaan dan DaftarJawaban.

235 - on start event

Menampilkan pertanyaan dan jawaban

  1. Tambahkan objek fungsi agar kita bisa memanggil sebuah potongan kode dari beberapa bagian dalam permainan. Pada tampilan layout > Insert new object > Function.
  2. Buat fungsi baru di event sheet, Add event > Function > On function > beri nama “PertanyaanBerikutnya”. Fungsi ini akan mengubah teks pada objek-objek pertanyaan dan jawaban sesuai data pertanyaan berikutnya.
  3. Add action > System > Add to > pilih variabel NomorPertanyaan, dan isi nilai 1.
  4. Add action > Pertanyaan > Set text > isi dengan ‘DaftarPertanyaan.At(NomorPertanyaan,0)’. Di sini kita mengambil teks pertanyaan sesuai dengan nomor pertanyaan yang aktif.
  5. Tekan S untuk membuat sub event > System > For each > pilih objek Jawaban.
  6. Add action > Jawaban > Set text > isi dengan ‘DaftarJawaban.At(NomorPertanyaan,loopindex)’. Di sini kita mengisi jawaban sesuai dengan data pilihan jawaban.
  7. Add action > Jawaban > Set value > pilih variabel instance ‘index’ dan isi dengan loopindex. Di sini kita menyimpan informasi indeks asli.
  8. Tambahkan pemanggilan fungsi “PertanyaanBerikutnya” pada akhir event ‘On start of layout’. Lalu untuk mencoba transisi ke pertanyaan berikutnya, kita bisa panggil fungsi tersebut pada event seperti On Tap dari objek Touch.

235 - pertanyaan berikutnya

Pada bagian berikutnya kita akan mengacak pilihan jawaban dan pertanyaan.

Daftar pertanyaan online

Pada tutorial bagian kedua ini kita akan membuat fitur penyimpanan soal dalam file terpisah agar kita bisa menambahkan pertanyaan kapan saja tanpa harus mengubah kode permainan. Kita juga akan menyimpan file pertanyaan tersebut di internet agar semua orang yang memainkan permainan ini akan mendapatkan daftar pertanyaan yang sama dan terkini.

236 - json

File pertanyaan

Kita akan menyimpan pertanyaan dalam format yang disebut JSON, format data yang umum digunakan dalam aplikasi web. Pada dasarnya JSON adalah format untuk menyimpan data berupa daftar, lalu Construct 2 akan membaca file tersebut untuk diubah menjadi array. Format file JSON yang bisa kita gunakan bisa dilihat pada gambar. Tapi jika khawatir salah menulis kurung, koma, atau tanda petik, kita bisa membuat fungsi sementara untuk mengunduh sebuah array menjadi file JSON.

  1. Pastikan kamu sudah menambahkan objek Touch agar kita bisa mengolah interaksi tap dari pemain, Add event > Touch > On tap. Add action > pilih salah satu array, misalnya DaftarPertanyaaan > Download > beri nama file yang cukup jelas, misalnya “pertanyaan.json”
  2. Jika kamu buka file tersebut pada aplikasi teks editor seperti Notepad, kamu akan lihat format JSON seperti pada gambar. Kamu akan melihat banyak elemen berisi [0], itu karena kita atur urutan awal array menjadi 10, tapi kita hanya mengisi dua pertanyaan sebagai contoh.
  3. Lengkapi elemen-elemen yang bernilai 0 agar kita memilki daftar pertanyaan yang lebih lengkap. Ini akan kita butuhkan saat kita ingin mengacak pertanyaan yang ditemui oleh pemain dalam permainan kuis ini. Jika ingin memiliki lebih dari 10 pertanyaan, jangan lupa untuk mengubah ukuran array sesuai kebutuhan.
  4. Perlu diingat kalau kita memiliki dua array, DaftarPertanyaan dan DaftarJawaban. Kita perlu menyimpan keduanya dalam file yang berbeda.

Menyimpan file pertanyaan di internet

Setelah memiliki file pertanyaan jawaban yang terisi dengan lengkap, kita bisa menggunakan aplikasi seperti Dropbox untuk menyimpan file-file tersebut di internet. Dropbox biasanya digunakan untuk sinkronisasi file di beberapa komputer, dan agar file kita bisa diakses via internet. Kita akan membuat permainan kuis kita mengambil data pertanyaan dan jawaban dari internet.

  1. Kamu bisa mendaftar akun gratis di http://dropbox.com. Ikuti instruksi pengaturan awal mulai dari mengunduh, menginstall, dan seterusnya sampai kamu memiliki aplikasi Dropbox di komputer kamu.
  2. Buat sebuah folder baru untuk menyimpan kedua file JSON yang sudah kita buat dan pindahkan file-file tersebut ke folder ini. Kamu bisa memberi nama folder ini apa saja.
  3. Klik kanan salah satu file, lalu tekan tautan Share. Pada pop up yang muncul, tekan Copy Link untuk mengambil URL file.
  4. Kita perlu mengubah URL file tersebut agar bisa dibaca oleh Construct 2 menggunakan text editor. Misalnya tautan yang berhasil kita salin adalah “https://www.dropbox.com/s/l9k25zjx9v5gogm/pertanyaan.json?dl=0″, kita perlu ubah beberapa bagian agar menjadi tautan berikut: “https://dl.dropboxusercontent.com/s/l9k25zjx9v5gogm/pertanyaan.json”.
  5. Lakukan hal yang sama untuk file jawaban, misalnya kita beri nama ‘jawaban.json’.
  6. Selanjutnya, jika kita memperbarui kedua file itu, misalnya dengan menambahkan set pertanyaan baru, tautan di atas akan mengacu pada file terkini.

236 - share

Membaca file ke array

  1. Tambahkan objek AJAX pada tampilan layout dengan klik kanan > Insert new object > AJAX.
  2. Pada event ‘On start of layout’, buat aksi baru, Add action > AJAX > Request URL > masukkan tautan pertanyaan, bari nama tag ‘pertanyaan’. Lakukan hal yang sama untuk tautan jawaban.
  3. Hapus semua aksi untuk mengisi array yang sebelumnya kita buat.
  4. Buat event baru untuk mengolah pertanyaan, Add event > AJAX > On completed > isi tag dengan ‘pertanyaan’. Add action > DaftarPertanyaan > Load > isi dengan ‘AJAX.LastData’.
  5. Buat event yang sama dengan langkah 3 untuk daftar jawaban. Lalu tambahkan satu aksi untuk menampilkan pertanyaan, Add action > Function > Call function > isi dengan “PertanyaanBerikutnya”.

236 - event load

Jika sekarang kamu jalankan permainan dengan menekan tombol F5, kamu akan melihat permainan berjalan seperti sebelumnya, namun jika sekarang kamu perbarui file pertanyaan.json dan jawaban.json, pertanyaan dalam permainan akan terbarui juga secara otomatis.

Mengacak pertanyaan

Setelah memilki jawaban yang cukup banyak, kita perlu mengacak pertanyaan yang muncul di permainan. Selain untuk membuat pemain mendapatkan pengalaman yang berbeda setiap kali bermain, fitur ini juga memastikan semua pertanyaan akan muncul sebelum kita menampilkan pertanyaan yang sama.

Pada tutorial sebelumnya kita sudah membuat sebuah fungsi bernama “PertanyaanBerikutnya”, kita akan menambahkan logika mengacak pertanyaan pada fungsi tersebut. Kita perlu memastikan untuk tidak menampilkan nomor acak yang tidak ada di daftar pertanyaan, jadi kita perlu menyimpan jumlah pertanyaan sesuai dengan daftar pertanyaan yang kita miliki.

  1. Buat sebuah variabel global baru pada event sheet, tekan V > beri nama ‘JumlahPertanyaan’, dan beri nilai 1.
  2. Untuk mendapatkan jumlah pertanyaan dari daftar pertanyaan yang kita simpan di internet, kita perlu menambahkan sebuah aksi pada fungsi ‘On pertanyaan completed’. Add action > System > Set value > pilih variabel ‘JumlahPertanyaan’, isi nilai dengan ‘DaftarJawaban.width’. Ini akan menyimpan jumlah elemen pada file daftar pertanyaan.json yang sudah kita buat.
  3. Proses mengacak jawaban akan dilakukan pada fungsi ‘PertanyaanBerikutnya’. Hapus aksi ‘Add 1 to NomorPertanyaan’ dan buat aksi baru, Add action > System > Set value > pilih variabel ‘NomorPertanyaan’, isi nilai dengan ‘random(JumlahPertanyaan)’.

Sekarang jika permainkan dijalankan, fungsi ‘PertanyaanBerikutnya’ akan menampilkan pertanyaan acak, tidak lagi berurutan.

237 - acak pertanyaan

Mengacak jawaban

Dalam permainan dengan jenis kuis, penting untuk kita mengacak jawaban yang ditampilkan. Karena jika pertanyaan itu muncul lebih dari sekali, pemain bisa saja menghapal posisi jawaban tanpa mengerti bagaimana jawaban itu didapatkan. Hal itu sangat penting terutama untuk permainan edukasi yang bertujuan menguji kemampuan atau pemahaman pemain tentang suatu topik.

Ada banyak cara untuk mengacak jawaban, namun pada tutorial ini kita menggunakan cara yang paling sederhana, yaitu mengubah posisi objek jawaban pada layar. Cara ini menjadi sangat mudah karena tampilan jawaban pada permainan kita berurut ke bawah, sehingga untuk mengubah posisi sebuah jawaban kita cukup mengubah nilai posisi Y pada objek, tanpa perlu mengubah nilai X. Untuk susunan jawaban lain, misalnya dipisah dalam 2 baris dan 2 kolom, kamu perlu untuk mengubah nilai X dan Y objek yang bersangkutan.

Kita akan mengacak jawaban dengan menukar posisi sebuah objek Jawaban dengan Jawaban lain, dan hal ini akan kita lakukan beberapa kali. Untuk itu kita membutuhkan dua fungsi tambahan, ‘TukarPosisi’ dan ‘AcakPosisiJawaban’.

  1. Buat dua variabel global bernama ‘posisiA’ dan ‘posisiB’ dengan cara yang sama dengan sebelumnya.
  2. Buat fungsi pertama, add event > Function > On function > beri nama ‘TukarPosisi’.
  3. Tekan S untuk membuat subevent > System > Pick n-th instance > pilih objek Jawaban, isi nilai dengan ‘Function.Param(0)’. Subevent ini akan mengambil objek jawaban sesuai nilai yang dimasukkan sebagai parameter pertama. Add action > System > Set value > pilih ‘posisiA’, isi dengan ‘Jawaban.Y’.
  4. Kembali ke fungsi ‘TukarPosisi’, tekan S untuk membuat subevent kedua > System > Pick n-th object > pilih Jawaban, isi nilai dengan ‘Function.Param(1)’. Add action > System > Set value > pilih ‘posisiB’, isi idengan ‘Jawaban.Y’.
  5. Add action > pilih objek Jawaban > Set Y > isi dengan ‘posisiA’. Aksi ini akan mengatur posisi jawaban kedua dengan posisi jawaban pertama.
  6. Kembali ke fungsi ‘TukarPosisi’, tekan S untuk membuat subevent terakhir > System > Pick n-th object > pilih Jawaban, isi nilai dengan ‘Function.Param(0)’. Add action > Jawaban > Set Y > isi dengan ‘posisiB’. Aksi ini mengubah posisi jawaban pertama menjadi jawaban kedua.
  7. Buat fungsi ‘AcakPosisiJawaban’ seperti langkah 2, lalu tambahkan aksi untuk menukar posisi sebuah jawaban dengan jawaban lain. Contohnya: Add action > Function > Call function > isi ‘TukarPosisi’, klik add parameter lalu isi nilai 0, klik add parameter lalu isi ‘random(4)’ untuk mengacak posisi jawaban pertama dengan jawaban acak. Lakukan ini untuk setiap jawaban yang ada (lihat gambar).
  8. Terakhir, kita perlu memanggil fungsi ‘AcakPosisiJawaban’ pada fungsi ‘PertanyaanBerikutnya’. Add action > Function > Call function > isi dengan ‘AcakPosisiJawaban’.

237 - acak jawaban

Sekarang jika permainan dijalankan, pertanyaan dan jawaban akan muncul dengan acak.

Mencegah pertanyaan berulang

Kita sudah membuat pertanyaan muncul secara acak pada tutorial sebelumnya, tapi karena pertanyaan muncul secara acak, kita tidak bisa memastikan semua pertanyaan muncul dalam permainan. Pada tutorial kali ini kita akan menambahkan logika untuk memastikan semua pertanyaan muncul dan pertanyaan hanya akan berulang setelah semua pertanyaan dimunculkan. Lalu kita juga akan membuat logika sederhana untuk memeriksa jawaban pemain.

Mencatat kemunculan pertanyaan

Agar pertanyaan yang sama tidak muncul, kita perlu mencatat pertanyaan apa saja yang sudah pernah muncul. Kita bisa menggunakan array dan menggunakan nilai 0 dan 1 sebagai penanda. Nilai 0 artinya pertanyaan tersebut belum pernah muncul, jika sebaliknya, nilainya 1.

  1. Kita perlu buat sebuah array pada tampilan layout, klik kanan > Insert new object > Array > beri nama ‘SudahMuncul’.
  2. Lalu pindah ke Event sheet, kita tambahkan aksi untuk mengatur ukuran array tersebut. Pada event AJAX ‘On pertanyaan completed’ tambahkan aksi baru, Add action > SudahMuncul > Set size > isi X dengan variabel JumlahPertanyaan, Y dan Z dengan nilai 1.
  3. Kita juga memerlukan satu variabel baru untuk menyimpan jumlah pertanyaan yang sudah kita tampilkan sepanjang permainan. Variabel ini akan membantu kita mengetahui saat semua pertanyaan sudah ditampilkan. Klik kanan event sheet > Add global variable > beri nama ‘hitung’, jenisnya number, isi dengan 0.
  4. Logika menampilkan pertanyaan yang belum pernah muncul akan kita simpan pada fungsi ‘PertanyaanBerikutnya’. Temukan fungsi tersebut, lalu tekan S untuk membuat subevent baru > System > While. Tekan C untuk menambah kondisi > pilih array SudahMuncul > Compare at X > isi X dengan ‘NomorPertanyaan’, equal to, dan isi nilai 1. Ini adalah kondisi jika nilai pertanyaan acak sudah pernah dimunculkan sebelumnya.
  5. Salin aksi untuk menghasilkan nomor pertanyaan acak yang sudah kita buat di tutorial sebelumnya. (lihat gambar)
  6. Tekan X untuk membuat ‘Else’, yang akan dijalankan jika hasil acak belum pernah muncul sebelumnya. Pindahkan aksi mengubah teks pertanyaan dan pemanggilan fungsi acak jawaban. (lihat gambar)
  7. Tambahkan aksi baru, Add action > SudahMuncul > Set at X > isi X dengan NomorPertanyaan dan nilai 1. Add action > System > Add to > pilih variabel ‘hitung’ dan isi nilai 1.

Jika kita sudah menampilkan semua pertanyaan, kita perlu mengosongkan array ‘SudahMuncul’ dan mengembalikan variabel ‘hitung’ menjadi 0.

  1. Tekan S untuk membuat subevent di bawah Else > System > Compare variable > pilih ‘hitung’, greater or equal, isi nilai dengan ‘JumlahPertanyaan’. Add action > Set value > pilih ‘hitung’ > isi dengan 0.
  2. Tekan S untuk membuat subevent baru > System > Repeat > isi dengan nilai ‘JumlahPertanyaan’. Add action > SudahMuncul > Set at X > isi X dengan ‘loopindex’ dan isi nilai 0. Dua langkah tersebut akan mengembalikan array SudahMuncul dan variabel hitung ke kondisi awal.

238 - event acak pertanyaan

Memeriksa jawaban

Untuk memeriksa jawaban kita cukup membandingkan instance variable pada objek Jawaban yang dipilih pemain dengan nilai jawaban pada array DaftarPertanyaan yang sudah kita buat sebelumnya.

  1. Add event > Touch > On tap object > pilih objek ‘Jawaban’.
  2. Tekan S untuk membuat subevent > Jawaban > Compare instance variable > pilih ‘index’, equal to, dan isi nilai dengan ‘int(DaftarPertanyaan.At(NomorPertanyaan,1)’. Fungsi int() perlu kita gunakan karena angka yang dibaca dari JSON masih dianggap sebagai teks.
  3. Tambahkan aksi yang menandai pemain menjawab benar, misalnya ubah teks pertanyaan menjadi ‘Benar!’, lalu pindah ke pertanyaan berikutnya. Add action > Pertanyaan > Set text > isi dengan “BENAR!”.
  4. Add action > System > Wait > isi dengan nilai 1. Aksi ini akan membuat permainan menunggu 1 detik sebelum menjalankan aksi berikutnya.
  5. Add action > Function > Call function > isi dengan ‘PertanyaanBerikutnya’.
  6. Tekan X untuk membuat event ‘Else’, dan tambahkan aksi saat pemain menjawab salah (lihat gambar).

238 - event cek jawaban


Ikuti channel Gedebuk di Youtube untuk mendapatkan berbagai video tutorial pembuatan game! Klik saja tombol Subsribe di bawah ini.


Lebih suka tutorial tertulis seperti artikel ini?




Tags: , , ,


About the Author



Back to Top ↑