by Quiz adalah salah satu cara untuk menguji pengetahuan dan kemampuan seseorang dalam suatu bidang tertentu. Pada tutorial ini, kita akan membuat quiz sederhana dengan menggunakan bahasa pemrograman PHP dan MySQLi.
Persiapan
Sebelum memulai, pastikan kamu sudah memiliki beberapa hal berikut:
- PHP versi 5.3 atau lebih tinggi
- MySQLi extension diaktifkan pada server
- Sebuah database MySQL yang berisi tabel quiz dengan struktur seperti di bawah ini:
CREATE TABLE `quiz` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`question` varchar(255) NOT NULL,
`type` enum('multiple_choice', 'essay') NOT NULL,
`option_a` varchar(255) DEFAULT NULL,
`option_b` varchar(255) DEFAULT NULL,
`option_c` varchar(255) DEFAULT NULL,
`option_d` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE user_answer (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
quiz_id INT(11) NOT NULL,
user_answer TEXT NOT NULL
);
Tabel quiz ini berisi data quiz yang akan ditampilkan pada halaman quiz. Kolom type digunakan untuk menentukan jenis pertanyaan, yaitu pilihan ganda atau esay. Jika jenis pertanyaan adalah pilihan ganda, maka kolom option_a hingga option_d digunakan untuk menampilkan opsi jawaban.
Tabel user_answer digunakan untuk menyimpan jawaban dari pengguna untuk setiap pertanyaan.
Berikut adalah contoh data untuk tabel quiz:
INSERT INTO quiz (question, option_a, option_b, option_c, option_d, answer, type) VALUES
("Siapa presiden pertama Indonesia?", "Soekarno", "Habibie", "Suharto", "Jokowi", "Soekarno", "multiple_choice"),
("Apa ibukota Indonesia?", "Jakarta", "Bandung", "Surabaya", "Semarang", "Jakarta", "multiple_choice"),
("Sebutkan tiga jenis batu mulia", "", "", "", "", "Nilam, Zamrud, Safir", "essay");
Langkah-langkah
1. Buat file conn.php dan masukkan kode di bawah ini. File ini berfungsi untuk membuat koneksi ke database MySQL:
<?php
// konfigurasi koneksi ke database MySQL
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'nama_database';
// membuat koneksi ke database MySQL
$conn = mysqli_connect($host, $username, $password, $database);
// mengecek apakah koneksi berhasil atau tidak
if (!$conn) {
die('Koneksi gagal: ' . mysqli_connect_error());
}
?>
Pastikan untuk mengganti nilai variabel $host, $username, $password, dan $database sesuai dengan konfigurasi database anda.
2. Buat file index.php dan masukkan kode di bawah ini. File ini akan menampilkan halaman quiz dengan semua data quiz dari tabel quiz:
<?php
// Panggil file koneksi ke database
require 'conn.php';
// Query untuk mengambil semua data quiz dari tabel quiz
$sql = "SELECT * FROM quiz";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1, h2, h3 {
margin-top: 0;
}
form {
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<form action="proses.php" method="POST">
<?php while ($row = $result->fetch_assoc()) { ?>
<h2><?= $row['question'] ?></h2>
<?php if ($row['type'] == "multiple_choice") { ?>
<input type="radio" name="<?= $row['id'] ?>" value="A"> <?= $row['option_a'] ?><br>
<input type="radio" name="<?= $row['id'] ?>" value="B"> <?= $row['option_b'] ?><br>
<input type="radio" name="<?= $row['id'] ?>" value="C"> <?= $row['option_c'] ?><br>
<input type="radio" name="<?= $row['id'] ?>" value="D"> <?= $row['option_d'] ?><br>
<?php } else { ?>
<textarea name="<?= $row['id'] ?>"></textarea>
<?php } ?>
<?php } ?>
<input type="submit" value="Kirim">
</form>
</body>
</html>
Dalam file index.php di atas, kita melakukan query ke database untuk mengambil semua data quiz dari tabel quiz.
Selanjutnya, kita menggunakan loop while untuk menampilkan setiap soal beserta pilihan jawabannya ke dalam form. Untuk setiap soal, kita menggunakan kondisi if untuk mengecek tipe soal.
Jika tipe soalnya adalah multiple_choice, kita akan menampilkan pilihan jawaban dengan menggunakan input radio.
Namun, jika tipe soalnya adalah essay, kita akan menampilkan input textarea untuk jawaban. Setelah semua soal ditampilkan, kita menambahkan tombol submit untuk mengirim jawaban pengguna ke halaman proses.php.
3. Buat file proses.php yang akan digunakan untuk memproses data quiz yang diinputkan oleh user. Isi file tersebut sebagai berikut:
<?php
// Panggil file koneksi ke database
require 'conn.php';
// Kosong tabel user_answer
$sql = "DELETE FROM user_answer";
$conn->query($sql);
// Loop melalui setiap pertanyaan
foreach ($_POST as $quiz_id => $user_answer) {
// Masukkan jawaban pengguna ke dalam tabel user_answer
$sql = "INSERT INTO user_answer (quiz_id, user_answer) VALUES ('$quiz_id', '$user_answer')";
$conn->query($sql);
}
// Tampilkan skor
$sql = "SELECT quiz.*, user_answer.user_answer FROM quiz LEFT JOIN user_answer ON quiz.id = user_answer.quiz_id";
$result = $conn->query($sql);
$num_correct = 0;
$num_incorrect = 0;
$total_score = 0;
while ($row = $result->fetch_assoc()) {
if ($row['type'] == "multiple_choice") {
// Jawaban untuk pertanyaan pilihan ganda
$correct_answer = $row['answer'];
$user_answer = $_POST[$row['id']];
// Periksa apakah jawaban pengguna benar atau salah
if ($user_answer == $correct_answer) {
$num_correct++;
$score = 10;
} else {
$num_incorrect++;
$score = 0;
}
} else {
// Jawaban untuk pertanyaan esai
$user_answer = $_POST[$row['id']];
$score = hitung_skor_esai($user_answer, $row['answer']);
if ($score > 0) {
$num_correct++;
} else {
$num_incorrect++;
}
}
// Tambahkan skor ke total skor
$total_score += $score;
}
// Fungsi untuk menghitung skor pertanyaan esai
function hitung_skor_esai($user_answer, $correct_answer) {
// Buat array kata-kata yang benar
$kata_benar = explode(" ", $correct_answer);
// Buat array kata-kata yang dijawab pengguna
$kata_jawaban = explode(" ", $user_answer);
// Hitung berapa banyak kata yang benar
$num_correct = 0;
foreach ($kata_jawaban as $kata) {
if (in_array($kata, $kata_benar)) {
$num_correct++;
}
}
// Hitung skor dan bulatkan ke 2 desimal
$skor = round(($num_correct / count($kata_benar)) * 10, 2);
return $skor;
}
// Tampilkan hasil
$num_questions = $num_correct + $num_incorrect;
if ($num_questions > 0) {
$skor_persen = round(($total_score / ($num_questions * 10)) * 100, 2);
} else {
$skor_persen = 0;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Hasil Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1, h2, h3 {
margin-top: 0;
}
table {
border-collapse: collapse;
margin-bottom: 20px;
}
td, th {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<h1>Hasil Quiz</h1>
<table>
<tr>
<th>Jumlah Pertanyaan</th>
<td><?= $num_questions ?></td>
</tr>
<tr>
<th>Jumlah Jawaban Benar</th>
<td><?= $num_correct ?></td>
</tr>
<tr>
<th>Jumlah Jawaban Salah</th>
<td><?= $num_incorrect ?></td>
</tr>
<tr>
<th>Skor Keseluruhan</th>
<td><?= $total_score ?></td>
</tr>
<tr>
<th>Skor Persentase</th>
<td><?= $skor_persen ?>%</td>
</tr>
</table>
<h2>Skor Pertanyaan Esai</h2>
<table>
<tr>
<th>Pertanyaan</th>
<th>Jawaban Pengguna</th>
<th>Jawaban Benar</th>
<th>Skor</th>
</tr>
<?php
// Query untuk mengambil semua jawaban pengguna untuk pertanyaan esai
$sql = "SELECT quiz.question, user_answer.user_answer, quiz.answer FROM quiz LEFT JOIN user_answer ON quiz.id = user_answer.quiz_id WHERE quiz.type = 'essay'";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
$user_answer = $row['user_answer'];
$correct_answer = $row['answer'];
$skor = hitung_skor_esai($user_answer, $correct_answer);
echo "<tr>";
echo "<td>" . $row['question'] . "</td>";
echo "<td>" . $user_answer . "</td>";
echo "<td>" . $correct_answer . "</td>";
echo "<td>" . round($skor) . "</td>";
echo "</tr>";
}
?>
</table>
</body>
</html>
4. Jalankan aplikasi quiz yang telah dibuat dengan membuka file index.php pada browser. Isilah semua pertanyaan dengan jawaban yang benar menurut Anda, lalu klik tombol “Kirim”.
5. Setelah tombol “Kirim” diklik, Anda akan diarahkan ke halaman hasil quiz (proses.php) yang menampilkan skor Anda dan jawaban yang benar dari setiap soal.
Dengan mengikuti tutorial di atas, Anda dapat membuat quiz sederhana dengan menggunakan bahasa pemrograman PHP dan MySQLi. Anda juga dapat mengembangkan aplikasi ini lebih lanjut dengan menambahkan fitur-fitur baru seperti pilihan untuk mengulang quiz atau menampilkan skor tertinggi. Selamat mencoba!
Artikel Terkait: Membuat Quiz Sederhana Menggunakan Framework CodeIgniter
Artikel PHP MySQL lainnya:
