Proyek 29 Artikel ⏱️ Estimasi Waktu Baca: 7 menit

Proyek Web: Membangun Aplikasi Kuis Interaktif Pintar

Halo Sobat Jurnal Coding! Selamat datang kembali di kategori Proyek yang penuh dengan tantangan seru.

Setelah sukses membangun aplikasi pengingat waktu, generator motivasi, dan bahkan sebuah game klasik melawan komputer pada artikel-artikel sebelumnya, kini saatnya kita menaikkan standar permainan. Mari kita buat sebuah aplikasi yang tidak hanya menghibur, tetapi juga bisa digunakan untuk menguji kecerdasan pengunjung situsmu: Aplikasi Kuis Interaktif!

Pernahkah kamu mengikuti ujian daring (online) atau sekadar bermain kuis tebak-tebakan di media sosial? Di balik pertanyaan yang muncul bergantian dan skor akhir yang dihitung secara otomatis, terdapat sebuah alur logika pemrograman yang sangat indah. Sebagai seorang calon pengembang web profesional, memahami bagaimana data pertanyaan disimpan dan bagaimana skor dihitung adalah keahlian yang sangat berharga di dunia industri.

Pada proyek kali ini, kita akan merakit sebuah mesin kuis. Kita akan membuat sebuah kumpulan data (Array) yang berisi daftar pertanyaan, pilihan ganda, dan jawaban yang benar. Mesin JavaScript kita akan bertindak sebagai seorang wasit atau pembawa acara yang akan menampilkan pertanyaan satu per satu, memeriksa jawaban dari pengguna, mencatat poin, dan memberikan nilai akhir setelah semua pertanyaan selesai dijawab.

Siapkan segelas minuman hangat, lenturkan jari-jarimu, dan mari kita mulai merakit mesin penguji kecerdasan ini!

Langkah 1: Menyiapkan Panggung Ujian (HTML)

Sama seperti proyek pengembangan perangkat lunak lainnya, kita harus membangun kerangka antarmuka pengguna terlebih dahulu. Kita membutuhkan sebuah wadah besar untuk menampilkan teks pertanyaan, dan sebuah area khusus untuk menampilkan barisan tombol interaktif berisi pilihan jawaban.

Silakan buat file baru dan tuliskan struktur dasar HTML berikut ini:

<div id="wadah-kuis">

    <h1>Kuis Pengetahuan Coding</h1>

    <div id="area-pertanyaan">

        <h2 id="teks-pertanyaan">Pertanyaan akan muncul di sini...</h2>

        <div id="tombol-jawaban" class="grup-tombol">

            <!-- Tombol pilihan ganda akan dimunculkan oleh JavaScript -->

        </div>

    </div>

    <div id="area-hasil" style="display: none;">

        <h2>Kuis Selesai!</h2>

        <p>Skor Akhir Kamu: <span id="skor-akhir">0</span></p>

        <button id="tombol-ulang">Mainkan Lagi</button>

    </div>

</div>

Jika kamu perhatikan secara saksama, ada satu area (yaitu area-hasil) yang sengaja kita sembunyikan dari awal menggunakan aturan gaya inline display: none;. Area papan hasil ini hanya boleh muncul setelah pengguna menyelesaikan seluruh pertanyaan. Sangat logis dan terstruktur, bukan?

Langkah 2: Memberikan Nuansa Mewah pada Panggung (CSS)

Tampilan polos hitam putih tentu tidak akan membuat pengunjung tertarik untuk menjawab kuis panjang. Mari kita berikan sentuhan sihir CSS bergaya desain Glassmorphism agar aplikasi kita terlihat seperti sistem ujian canggih dari masa depan.

body {

    background-color: #0f172a;

    color: #f8fafc;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    font-family: sans-serif;

    margin: 0;

}

#wadah-kuis {

    background: rgba(255, 255, 255, 0.05);

    padding: 40px;

    border-radius: 16px;

    width: 90%;

    max-width: 600px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

    border: 1px solid rgba(255, 255, 255, 0.1);

    text-align: center;

}

h1 {

    color: #00ffff;

    margin-bottom: 30px;

}

.grup-tombol {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 30px;

}

.tombol-pilihan {

    background-color: transparent;

    color: #f8fafc;

    border: 2px solid #00ffff;

    padding: 15px;

    font-size: 16px;

    border-radius: 8px;

    cursor: pointer;

    transition: 0.3s;

}

.tombol-pilihan:hover {

    background-color: #00ffff;

    color: #0f172a;

    font-weight: bold;

}

#tombol-ulang {

    background-color: #00ffff;

    color: #0f172a;

    border: none;

    padding: 15px 30px;

    font-size: 18px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: bold;

    margin-top: 20px;

}

Cobalah simpan dan buka file tersebut di peramban web kamu! Antarmukamu kini dihiasi oleh kotak gelap elegan dengan tombol-tombol yang memancarkan pendaran biru sian cerah setiap kali disentuh oleh kursor. Tampilan yang sangat mewah dan profesional! Namun, panggung ini belum memiliki satupun pertanyaan. Mari kita bangun sistem kecerdasannya.

Langkah 3: Menyuntikkan Otak Sang Pembawa Acara (JavaScript)

Di sinilah letak jantung proyek aplikasi kuis kita. Kita harus menyimpan daftar pertanyaan di dalam sebuah kumpulan data. Setelah itu, kita menyuruh JavaScript untuk menampilkan pertanyaan pertama, mendeteksi klik jawaban dari pengguna, menghitung perolehan skor, lalu beralih secara otomatis ke pertanyaan selanjutnya.

Jika semua pertanyaan sudah habis terjawab, mesin harus menampilkan skor akhirnya. Silakan pelajari secara perlahan dan tempelkan logika JavaScript menakjubkan berikut ini:

const kumpulanPertanyaan = [

    {

        tanya: "Bahasa pemrograman apa yang bertugas memberi gaya visual pada website?",

        jawaban: [

            { teks: "HTML", benar: false },

            { teks: "Python", benar: false },

            { teks: "CSS", benar: true },

            { teks: "C++", benar: false }

        ]

    },

    {

        tanya: "Apa peran utama JavaScript dalam sebuah website?",

        jawaban: [

            { teks: "Menyimpan data di server database", benar: false },

            { teks: "Membuat halaman menjadi interaktif", benar: true },

            { teks: "Merancang warna dominan tombol", benar: false },

            { teks: "Menyusun kerangka paragraf teks", benar: false }

        ]

    },

    {

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

        jawaban: [

            { teks: "Kurung Kurawal {}", benar: false },

            { teks: "Kurung Siku []", benar: true },

            { teks: "Kurung Biasa ()", benar: false },

            { teks: "Tanda Petik Ganda", benar: false }

        ]

    }

];

const elemenPertanyaan = document.getElementById("teks-pertanyaan");

const elemenTombolJawaban = document.getElementById("tombol-jawaban");

const areaPertanyaan = document.getElementById("area-pertanyaan");

const areaHasil = document.getElementById("area-hasil");

const elemenSkor = document.getElementById("skor-akhir");

const tombolUlang = document.getElementById("tombol-ulang");

let indeksPertanyaanSaatIni = 0;

let skorPemain = 0;

function mulaiKuis() {

    indeksPertanyaanSaatIni = 0;

    skorPemain = 0;

    areaPertanyaan.style.display = "block";

    areaHasil.style.display = "none";

    tampilkanPertanyaan();

}

function tampilkanPertanyaan() {

    bersihkanLayar();

    let pertanyaanSekarang = kumpulanPertanyaan[indeksPertanyaanSaatIni];

    elemenPertanyaan.innerText = pertanyaanSekarang.tanya;

    pertanyaanSekarang.jawaban.forEach(function(pilihan) {

        const tombolBaru = document.createElement("button");

        tombolBaru.innerText = pilihan.teks;

        tombolBaru.classList.add("tombol-pilihan");

        if (pilihan.benar === true) {

            tombolBaru.dataset.benar = pilihan.benar;

        }

        tombolBaru.addEventListener("click", tanganiPilihan);

        elemenTombolJawaban.appendChild(tombolBaru);

    });

}

function bersihkanLayar() {

    while (elemenTombolJawaban.firstChild) {

        elemenTombolJawaban.removeChild(elemenTombolJawaban.firstChild);

    }

}

function tanganiPilihan(kejadian) {

    const tombolTerpilih = kejadian.target;

    const apakahBenar = tombolTerpilih.dataset.benar === "true";

    if (apakahBenar) {

        skorPemain = skorPemain + 10;

    }

    indeksPertanyaanSaatIni++;

    if (indeksPertanyaanSaatIni < kumpulanPertanyaan.length) {

        tampilkanPertanyaan();

    } else {

        tampilkanHasil();

    }

}

function tampilkanHasil() {

    areaPertanyaan.style.display = "none";

    areaHasil.style.display = "block";

    elemenSkor.innerText = skorPemain;

}

tombolUlang.addEventListener("click", mulaiKuis);

// Jalankan sistem kuis saat pertama kali halaman web dibuka

mulaiKuis();

Membedah Logika Kuis: Mengapa Sistem Ini Sangat Cerdas?

Bagi kamu yang baru pertama kali melihat struktur data sekompleks ini, jangan panik! Mari kita bedah bersama menggunakan bahasa manusia sehari-hari. Di awal baris kode, kita membuat sebuah lemari penyimpanan raksasa bernama kumpulanPertanyaan. Di dalam lemari tersebut, terdapat beberapa kotak objek yang masing-masing dengan rapi menyimpan teks pertanyaan beserta daftar jawabannya.

Lalu, kita menggunakan fungsi sakti bernama document.createElement untuk mencetak tombol-tombol jawaban secara gaib. Ya, kita sama sekali tidak menulis elemen tombol jawaban tersebut di dalam kerangka HTML secara fisik, melainkan kita menyuruh JavaScript untuk merakitnya langsung berdasarkan data yang ada di dalam lemari kumpulanPertanyaan. Teknik luar biasa ini membuat aplikasimu menjadi sangat dinamis. Kamu bisa menambahkan seratus atau bahkan seribu pertanyaan baru ke dalam lemari tersebut, dan kodemu tidak akan rusak sama sekali!

Saat pengguna mengeklik sebuah tombol, fungsi tanganiPilihan akan segera bertindak layaknya seorang wasit yang teliti. Ia memeriksa apakah tombol yang ditekan memiliki penanda jawaban benar. Jika jawaban tersebut terbukti benar, mesin akan menambahkan sepuluh poin berharga ke dalam kantong pemain. Setelah itu, wasit akan menaikkan angka indeks untuk membersihkan layar dan berpindah ke pertanyaan berikutnya.

Begitu angka indeks mencapai batas akhir daftar pertanyaan (artinya soal sudah habis), wasit akan menutup layar pertanyaan utama secara paksa dan memunculkan papan skor yang selama ini disembunyikan. Sangat jenius, sistematis, dan pastinya memberikan kepuasan batin tersendiri saat memainkannya!

Kesimpulan Proyek

Selamat dan berikan apresiasi tertinggi untuk dirimu sendiri! Kamu baru saja merakit salah satu komponen dasar dari sistem Ujian Berbasis Komputer. Proyek ini membuktikan bahwa kamu mulai menguasai pengelolaan struktur objek yang rumit, perulangan koleksi data, dan manipulasi elemen di layar secara terus-menerus.

Kembangkan aplikasi buatanmu ini menjadi portofolio yang membanggakan. Cobalah menambahkan gambar ilustrasi di setiap pertanyaan, atau berikan suara sorakan tepuk tangan saat jawaban yang dipilih benar. Dunia pemrograman sangat luas tanpa batas, dan kamu bebas mengubah aturan mainnya sesuka hatimu. Sampai jumpa di proyek Jurnal Coding berikutnya, dan teruslah berlatih merangkai baris demi baris kode!