Proyek 29 Artikel ⏱️ Estimasi Waktu Baca: 3 menit

Proyek Interaktif: Membangun Aplikasi Kuis Pilihan Ganda

Halo Sobat Jurnal Coding! Masih ingatkah kamu saat masa-masa sekolah dulu, di mana guru tiba-tiba mengadakan kuis kejutan? Apalagi jika kuisnya menggunakan platform interaktif seperti Kahoot. Sensasi deg-degan saat lagu Kahoot diputar, berlomba memencet tombol jawaban tercepat dengan teman sebangku, dan melihat nama kita naik di papan skor adalah momen yang sangat seru!

Pernahkah terlintas di pikiranmu: "Wah, keren banget ya aplikasi ini. Bagaimana ya cara membuat sistem kuis seperti ini dari nol?"

Jujur saja, saat pertama kali saya belajar JavaScript, membuat aplikasi kuis adalah salah satu target impian saya. Awalnya saya pikir membuat sistem kuis itu membutuhkan kode ribuan baris. Ternyata, setelah saya paham logikanya, aplikasi ini bisa dibuat hanya dalam hitungan puluhan baris kode!

Hari ini, kita akan mewujudkan impian itu. Kita akan naik level dari sekadar membuat fungsi matematika biasa, menjadi membuat Game Kuis Interaktif. Bahkan, untuk membuatnya semakin menegangkan, kita akan menambahkan fitur "Waktu Mundur" (Timer)!

### Langkah 1: Memori Komputer (Menyiapkan Bank Soal)

Pertama-tama, komputer harus tahu pertanyaan apa yang akan ditanyakan beserta jawaban yang benar. Bagaimana cara menyimpan banyak data pertanyaan ini secara rapi? Betul sekali, kita akan menggunakan kombinasi Array dan Object!

Array (laci susun) akan menyimpan daftar soal, dan Object (label) akan menyimpan detail dari setiap soal tersebut. Mari kita buat bank soal kita:

// Menyiapkan Bank Soal di dalam memori

const bankSoal = [

    { 

        pertanyaan: "Bahasa apa yang memberikan 'nyawa' interaktif pada website?", 

        pilihan: ["HTML", "CSS", "JavaScript", "Python"],

        jawabanBenar: "JavaScript" 

    },

    { 

        pertanyaan: "Apa kepanjangan dari HTML?", 

        pilihan: ["HyperText Markup Language", "Hot Mail", "Home Tool Markup Language", "Hyperlinks Text"],

        jawabanBenar: "HyperText Markup Language" 

    },

    { 

        pertanyaan: "Simbol apa yang digunakan untuk membungkus sebuah Array?", 

        pilihan: ["( )", "{ }", "< >", "[ ]"],

        jawabanBenar: "[ ]" 

    }

];

// Menyiapkan variabel untuk mencatat progres permainan

let skorPemain = 0;

let indeksSoalSaatIni = 0;

### Langkah 2: Mencocokkan Jawaban Layaknya Guru

Setelah soal disiapkan, kita butuh sebuah fungsi (Function) yang bertugas mengecek apakah tebakan pengguna sama dengan kunci jawaban di memori. Jika benar, tambahkan skornya. Jika salah, jangan tambahkan apa-apa.

Sistem ini bertindak layaknya seorang guru yang sedang memegang kertas kunci jawaban di tangan kirinya, dan kertas jawabanmu di tangan kanannya.

function cekJawaban(tebakanPemain) {

    // Mengambil kunci jawaban dari bank soal saat ini

    let jawabanAsli = bankSoal[indeksSoalSaatIni].jawabanBenar;

    // Membandingkannya menggunakan logika If/Else

    if (tebakanPemain === jawabanAsli) {

        skorPemain += 100;

        alert("Benar sekali! Skor kamu sekarang: " + skorPemain);

    } else {

        alert("Sayang sekali, jawabanmu salah. Kunci jawabannya adalah: " + jawabanAsli);

    }

    // Melanjutkan permainan ke soal berikutnya

    indeksSoalSaatIni++;

    // Cek apakah soal sudah habis?

    if (indeksSoalSaatIni < bankSoal.length) {

        tampilkanSoal(); // Fungsi untuk menampilkan soal selanjutnya

    } else {

        alert("Permainan Selesai! Total Skor Akhirmu: " + skorPemain);

    }

}

### Langkah 3: Menambahkan Elemen Kepanikan (Waktu Mundur)

Sebuah kuis tidak akan seru jika pemainnya bisa berleha-leha mencari jawaban di Google. Kita harus membuat mereka panik! Di sinilah kita menggunakan fitur sakti JavaScript bernama `setInterval`.

Fungsi ini akan menjalankan sebuah perintah berulang-ulang setiap 1000 milidetik (1 detik).

let waktuTersisa = 10; // Pemain punya waktu 10 detik per soal

let timerWaktu; // Variabel kosong untuk menyimpan mesin detaknya

function mulaiTimer() {

    timerWaktu = setInterval(function() {

        waktuTersisa--;

        console.log("Waktu tersisa: " + waktuTersisa + " detik");

        if (waktuTersisa <= 0) {

            // Waktu habis! Hentikan detak jamnya

            clearInterval(timerWaktu);

            alert("TETT! Waktu Habis!");

            // Anggap salah dan paksa lanjut ke soal berikutnya

            indeksSoalSaatIni++;

            // Logika lanjut soal...

        }

    }, 1000); // 1000 ms = 1 detik

}

### Merangkai Kepingan Puzzle

Melihat kode-kode di atas, saya harap kamu mulai merasakan momen "AHA!". Kita baru saja menggabungkan materi Array, Object, Logika If/Else, Variabel, dan Fungsi secara bersamaan. Inilah seninya programming. Setiap materi dasar yang kamu pelajari sebelumnya bagaikan kepingan balok Lego. Hari ini, kamu baru saja merakit kepingan-kepingan tersebut menjadi sebuah kastil yang indah!

Tugas selanjutnya untukmu: Hubungkan logika JavaScript murni ini dengan tampilan HTML (menggunakan DOM yang akan kita bahas di seri Kamus JS). Buatkan tombol A, B, C, D yang cantik menggunakan CSS, dan buat teks waktu mundurnya berwarna merah saat sisa waktu di bawah 3 detik. Selamat berkreasi dan buat teman-temanmu stres memainkan kuis buatanmu!