Bikin Aplikasi Kuis Pilihan Ganda Simpel dengan HTML, JavaScript, PHP, dan MySQL

Pernah kepikiran pengen bikin aplikasi kuis sendiri buat seru-seruan atau mungkin buat bantu belajar? Nah, kali ini kita bakal bongkar cara bikin aplikasi kuis pilihan ganda yang simpel banget, pakai kombinasi HTML, JavaScript, PHP, dan MySQL. Jangan khawatir, kita bakal bahasnya santai aja biar gampang dicerna!

1. Fondasi Aplikasi Kita: HTML (Struktur Bangunan)

Pertama-tama, kita butuh HTML sebagai kerangka utama. Ini ibarat pondasi dan dinding rumah kita. Di sini, kita bakal bikin tampilan kuisnya, mulai dari judul, pertanyaan, pilihan jawaban, sampai tombol untuk submit.

HTML
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplikasi Kuis Sederhana</title>
    <link rel="stylesheet" href="style.css"> </head>
<body>
    <div class="container">
        <h1>Kuis Pengetahuan Umum</h1>
        <form id="quizForm">
            <div id="questionsContainer">
                <p>Loading pertanyaan...</p>
            </div>
            <button type="submit" id="submitQuiz">Submit Jawaban</button>
        </form>
        <div id="result" style="display:none;">
            <h2>Hasil Kuis Kamu:</h2>
            <p>Skor: <span id="score"></span></p>
        </div>
    </div>
    <script src="script.js"></script> </body>
</html>

Di sini, kita siapkan div dengan ID questionsContainer yang nantinya akan diisi pertanyaan dari database. Ada juga div result yang akan muncul setelah kuis selesai.

2. Otak Aplikasi Kita: JavaScript (Bikin Interaktif!)

JavaScript ini ibarat otaknya. Dia yang bikin kuis kita jadi interaktif. Tugasnya antara lain:

Mengambil pertanyaan dari database (via PHP).
Menampilkan pertanyaan dan pilihan jawaban di HTML.
Mengecek jawaban yang dipilih.
Menghitung skor.
Menampilkan hasil kuis.

JavaScript
// script.js
document.addEventListener('DOMContentLoaded', function() {
    const questionsContainer = document.getElementById('questionsContainer');
    const quizForm = document.getElementById('quizForm');
    const resultDiv = document.getElementById('result');
    const scoreSpan = document.getElementById('score');
    let questions = [];

    // Fungsi untuk memuat pertanyaan dari server
    async function loadQuestions() {
        try {
            const response = await fetch('get_questions.php'); // Nanti kita bikin file PHP ini
            questions = await response.json();
            displayQuestions();
        } catch (error) {
            console.error('Error loading questions:', error);
            questionsContainer.innerHTML = '<p>Gagal memuat pertanyaan. Silakan coba lagi nanti.</p>';
        }
    }

    // Fungsi untuk menampilkan pertanyaan di halaman
    function displayQuestions() {
        questionsContainer.innerHTML = ''; // Kosongkan container sebelumnya
        questions.forEach((q, index) => {
            const questionDiv = document.createElement('div');
            questionDiv.classList.add('question-item');
            questionDiv.innerHTML = `
                <p><strong>${index + 1}. ${q.question_text}</strong></p>
                ${q.choices.map(choice => `
                    <label>
                        <input type="radio" name="question_${q.id}" value="${choice}">
                        ${choice}
                    </label><br>
                `).join('')}
            `;
            questionsContainer.appendChild(questionDiv);
        });
    }

    // Handle submit kuis
    quizForm.addEventListener('submit', function(event) {
        event.preventDefault();
        let score = 0;
        questions.forEach(q => {
            const selectedAnswer = document.querySelector(`input[name="question_${q.id}"]:checked`);
            if (selectedAnswer && selectedAnswer.value === q.correct_answer) {
                score++;
            }
        });

        questionsContainer.style.display = 'none';
        document.getElementById('submitQuiz').style.display = 'none';
        scoreSpan.textContent = `${score} / ${questions.length}`;
        resultDiv.style.display = 'block';
    });

    // Panggil fungsi untuk memuat pertanyaan saat halaman pertama kali dimuat
    loadQuestions();
});

Di sini, kita pakai fetch untuk mengambil data pertanyaan dari get_questions.php. Setelah itu, pertanyaan akan ditampilkan secara dinamis.

3. Jantung Aplikasi Kita: PHP (Server-side Logic)

PHP ini adalah jantungnya. Dia yang berkomunikasi dengan database dan menyediakan data yang dibutuhkan oleh JavaScript. Kita akan punya dua file PHP sederhana:

db_connect.php: Untuk koneksi ke database.
get_questions.php: Untuk mengambil data pertanyaan dari database.

a. db_connect.php (Koneksi Database)

PHP
<?php
// db_connect.php
$servername = "localhost"; // Biasanya localhost untuk development
$username = "root"; // Ganti dengan username MySQL kamu
$password = ""; // Ganti dengan password MySQL kamu
$dbname = "quiz_app"; // Nama database yang akan kita buat

// Buat koneksi
$conn = new mysqli($servername, $username, $password, $dbname);

// Cek koneksi
if ($conn->connect_error) {
    die("Koneksi gagal: " . $conn->connect_error);
}
?>

b. get_questions.php (Ambil Pertanyaan)

PHP
<?php
// get_questions.php
include 'db_connect.php';

header('Content-Type: application/json');

$sql = "SELECT id, question_text, option_a, option_b, option_c, option_d, correct_answer FROM questions";
$result = $conn->query($sql);

$questions = [];

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $choices = [$row['option_a'], $row['option_b'], $row['option_c'], $row['option_d']];
        // Acak pilihan jawaban agar tidak selalu sama urutannya
        shuffle($choices);
        $questions[] = [
            'id' => $row['id'],
            'question_text' => $row['question_text'],
            'choices' => $choices,
            'correct_answer' => $row['correct_answer']
        ];
    }
}

echo json_encode($questions);

$conn->close();
?>

File get_questions.php ini akan mengambil semua pertanyaan dari tabel questions di database dan mengembalikannya dalam format JSON yang bisa dibaca oleh JavaScript.

4. Gudang Data Kita: MySQL (Penyimpanan Soal)

MySQL ini ibarat gudang penyimpanan data kita. Semua pertanyaan, pilihan jawaban, dan kunci jawabannya akan kita simpan di sini.

Kita perlu membuat sebuah database dan tabel untuk menyimpan soal-soal kuis. Kamu bisa pakai phpMyAdmin atau mysql command line.

a. Membuat Database:

SQL

CREATE DATABASE quiz_app;
USE quiz_app;

b. Membuat Tabel questions:

SQL
CREATE TABLE questions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    question_text TEXT NOT NULL,
    option_a VARCHAR(255) NOT NULL,
    option_b VARCHAR(255) NOT NULL,
    option_c VARCHAR(255) NOT NULL,
    option_d VARCHAR(255) NOT NULL,
    correct_answer VARCHAR(255) NOT NULL
);

c. Mengisi Data Contoh:

SQL
INSERT INTO questions (question_text, option_a, option_b, option_c, option_d, correct_answer) VALUES
('Siapakah presiden pertama Indonesia?', 'Soekarno', 'Soeharto', 'BJ Habibie', 'Joko Widodo', 'Soekarno'),
('Apa ibu kota Indonesia?', 'Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Jakarta'),
('Berapakah 2 + 2?', '3', '4', '5', '6', '4');

Kamu bisa menambahkan soal-soal lain sesuai keinginanmu.

Sedikit Sentuhan Cantik: CSS (Biar Enggak Polos-Polos Banget)

Meskipun fokus kita di fungsionalitas, sedikit sentuhan CSS bisa bikin aplikasi kita lebih enak dilihat. Buat file style.css dan tambahkan beberapa aturan dasar:

CSS
/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
}

h1, h2 {
    text-align: center;
    color: #333;
}

.question-item {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #f9f9f9;
}

label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

input[type="radio"] {
    margin-right: 10px;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

button:hover {
    background-color: #0056b3;
}

#result {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #d4edda;
    background-color: #d4edda;
    color: #155724;
    border-radius: 5px;
}

Cara Menjalankan Aplikasi Ini

Siapkan Lingkungan Server: Kamu butuh web server seperti Apache atau Nginx dan PHP serta MySQL. Cara termudah adalah menginstal paket seperti XAMPP atau Laragon (untuk Windows) atau MAMP (untuk macOS).
Simpan File: Buat folder baru di dalam direktori htdocs (jika pakai XAMPP) atau www (jika pakai Laragon). Beri nama quiz_app (atau nama lain sesukamu). Kemudian, simpan semua file (index.html, script.js, style.css, db_connect.php, get_questions.php) di dalam folder tersebut.
Buat Database: Buka phpMyAdmin (biasanya di http://localhost/phpmyadmin/), buat database bernama quiz_app, dan jalankan SQL query untuk membuat tabel questions serta mengisi data contoh.
Akses Aplikasi: Buka browser-mu dan ketik http://localhost/quiz_app/index.html (sesuaikan dengan nama folder yang kamu buat).

Tentu saja, ini masih sangat dasar. Kamu bisa kembangkan lagi dengan fitur-fitur keren lainnya seperti:

Timer kuis.
Menyimpan skor pengguna.
Halaman admin untuk menambah/mengedit soal.
Desain yang lebih responsif.

Contoh

Aplikasinya -1-

Aplikasinya -2-

Tips dan Trick Disekitar Kita