CodeIgniter

Membuat Quiz Sederhana Menggunakan Framework CodeIgniter

Ali Akbarby Ali Akbar

Quiz atau kuis merupakan suatu bentuk tes yang biasanya digunakan untuk mengukur pengetahuan atau kemampuan seseorang dalam suatu topik tertentu.

Saat ini, quiz menjadi sangat populer sebagai cara untuk menguji kemampuan seseorang secara online.

Membuat Quiz Sederhana Menggunakan Framework CodeIgniter

Dalam artikel ini, kita akan belajar bagaimana cara membuat sebuah quiz sederhana menggunakan Framework CodeIgniter.

Persyaratan

  1. PHP 7.x
  2. Framework CodeIgniter 3.x
  3. MySQL

Langkah 1: Membuat Database

Pertama-tama, kita akan membuat database untuk menyimpan informasi tentang quiz kita. Buka PHPMyAdmin atau alat sejenis lainnya dan buat sebuah database baru dengan nama quiz. Selanjutnya, buat tabel questions dengan struktur berikut:

CREATE TABLE questions (
    id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    question_text TEXT,
    option_a TEXT,
    option_b TEXT,
    option_c TEXT,
    option_d TEXT,
    correct_answer VARCHAR(1)
);

Tabel ini akan digunakan untuk menyimpan informasi tentang pertanyaan dan jawaban pada quiz kita. Ada enam kolom pada tabel ini:

id: sebagai primary key tabel
question: sebagai pertanyaan quiz
option_1, option_2, option_3, dan option_4: sebagai opsi jawaban
correct_answer: sebagai jawaban yang benar pada setiap pertanyaan

Kemudian tambahkan beberapa contoh soal:

INSERT INTO `questions` (`id`, `question_text`, `option_a`, `option_b`, `option_c`, `option_d`, `correct_answer`) VALUES
(1, 'Apa ibu kota Indonesia?', 'Jakarta', 'Bandung', 'Surabaya', 'Medan', 'A'),
(2, 'Siapakah presiden Indonesia saat ini?', 'Joko Widodo', 'Susilo Bambang Yudhoyono', 'Megawati Soekarnoputri', 'Gus Dur', 'A'),
(3, 'Negara mana yang memiliki ibu kota Tokyo?', 'Jepang', 'Korea Selatan', 'Taiwan', 'China', 'A'),
(4, 'Siapakah yang menemukan bola lampu?', 'Thomas Alva Edison', 'Nikola Tesla', 'Guglielmo Marconi', 'Alexander Graham Bell', 'A'),
(5, 'Berapakah hasil dari 5 + 3?', '8', '9', '10', '11', 'A'),
(6, 'Berapakah hasil dari 2 x 4?', '6', '8', '10', '12', 'B'),
(7, 'Apakah negara terbesar di dunia?', 'China', 'Rusia', 'Amerika Serikat', 'Australia', 'B'),
(8, 'Berapakah hasil dari 6 / 3?', '1', '2', '3', '4', 'B'),
(9, 'Siapakah yang menulis buku Sherlock Holmes?', 'Agatha Christie', 'Arthur Conan Doyle', 'Edgar Allan Poe', 'George R.R. Martin', 'B'),
(10, 'Negara mana yang terkenal dengan menara Pisa-nya?', 'Italia', 'Spanyol', 'Prancis', 'Jerman', 'A');

Langkah 2: Membuat Model

Setelah membuat tabel, selanjutnya kita akan membuat Model yang akan digunakan untuk mengambil dan menyimpan data dari database. Buatlah sebuah file dengan nama Quiz_model.php pada direktori application/models dan isi kode berikut:

<?php
class Quiz_model extends CI_Model {
 
    function __construct() {
        parent::__construct();
    }
 
    public function get_questions() {
        $query = $this->db->get('questions');
        return $query->result();
    }
 
}

Kode di atas akan mengambil data pertanyaan dan jawaban dari tabel questions dan mengembalikannya sebagai objek.

Langkah 3: Membuat Controller

Setelah membuat Model, selanjutnya kita akan membuat Controller untuk mengatur alur aplikasi. Buatlah sebuah file dengan nama Quiz.php pada direktori application/controllers dan isi kode berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Quiz extends CI_Controller {

    function __construct() {
        parent::__construct();
        $this->load->library('session');
        $this->load->helper('url');
        $this->load->model('Quiz_model');
    }

    public function index()
    {
        $data['questions'] = $this->Quiz_model->get_questions();
        $this->load->view('quiz_view',$data);
    }

    public function submit()
    {
        $name = $this->input->post('name');
        $email = $this->input->post('email');
        $answers = $this->input->post('answer');

        $questions = $this->Quiz_model->get_questions();

        $num_correct = 0;
        $num_incorrect = 0;

        foreach ($questions as $question) {
            $correct_answer = $question->correct_answer;

            if (isset($answers[$question->id])) {
                $user_answer = $answers[$question->id];

                if ($correct_answer == $user_answer) {
                    $num_correct++;
                } else {
                    $num_incorrect++;
                }
            }
        }

        $data['name'] = $name;
        $data['email'] = $email;
        $data['num_correct'] = $num_correct;
        $data['num_incorrect'] = $num_incorrect;
        $this->load->view('quiz_result', $data);
    }

}

Penjelasan

public function index()
{
    $data['questions'] = $this->Quiz_model->get_questions();
    $this->load->view('quiz_view',$data);
}

Fungsi index() ini digunakan untuk menampilkan halaman tes. Di dalam fungsi ini terdapat pemanggilan tiga helper yaitu database, session, dan url. Selain itu, juga terdapat pemanggilan view yang menampilkan halaman tes.

public function submit()
{
    $name = $this->input->post('name');
    $email = $this->input->post('email');
    $answers = $this->input->post('answer');

    $questions = $this->Quiz_model->get_questions();

    $num_correct = 0;
    $num_incorrect = 0;

    foreach ($questions as $question) {
        $correct_answer = $question->correct_answer;

        if (isset($answers[$question->id])) {
            $user_answer = $answers[$question->id];

            if ($correct_answer == $user_answer) {
                $num_correct++;
            } else {
                $num_incorrect++;
            }
        }
    }

    $data['name'] = $name;
    $data['email'] = $email;
    $data['num_correct'] = $num_correct;
    $data['num_incorrect'] = $num_incorrect;
    $this->load->view('quiz_result', $data);
}

Fungsi submit() digunakan untuk mengumpulkan jawaban dari tes dan menampilkan hasil tes. Di dalam fungsi ini terdapat tiga variabel yaitu $name, $email, dan $answers. $name dan $email berisi data pengguna yang mengikuti tes, sedangkan $answers berisi jawaban yang diberikan pengguna. Selanjutnya, dilakukan pengambilan data soal dari tabel questions dengan menggunakan get('questions').

Hasil pengambilan data disimpan dalam variabel $questions. Selanjutnya, dilakukan iterasi pada $questions menggunakan foreach. Di dalam setiap iterasi, dilakukan pengecekan jawaban pengguna dengan jawaban yang benar.

Jika jawaban benar, maka nilai variabel $num_correct bertambah 1, sedangkan jika jawaban salah, maka nilai variabel $num_incorrect bertambah 1.

Setelah selesai iterasi, dilakukan pembuatan array $data yang berisi nama, email, jumlah jawaban benar, dan jumlah jawaban salah. Array $data ini kemudian ditampilkan pada halaman hasil tes dengan menggunakan view pada cat/results.

Langkah 4: Membuat View

Setelah membuat Controller, selanjutnya kita akan membuat View untuk menampilkan data pertanyaan dan jawaban dari tabel questions, juga View untuk menampilkan hasil/result.

Buatlah sebuah file dengan nama quiz_view.php dan quiz_result.php pada direktori application/views dan isi kode berikut:

1. quiz_view.php

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h1>Test</h1>

        <div id="timer"></div>

        <form method="post" action="<?php echo site_url('quiz/submit'); ?>">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" name="name" id="name" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
               
                <input type="email" name="email" id="email" class="form-control" required>
            </div>

            <?php
            // Loop through questions and create form fields
            foreach ($questions as $question) {
                echo '<div class="form-group">';
                echo '<h3>' . $question->question_text . '</h3>';
                echo '<div class="radio">';
                echo '<label>';
                echo '<input type="radio" name="answer[' . $question->id . ']" value="A"> ' . $question->option_a;
                echo '</label>';
                echo '</div>';
                echo '<div class="radio">';
                echo '<label>';
                echo '<input type="radio" name="answer[' . $question->id . ']" value="B"> ' . $question->option_b;
                echo '</label>';
                echo '</div>';
                echo '<div class="radio">';
                echo '<label>';
                echo '<input type="radio" name="answer[' . $question->id . ']" value="C"> ' . $question->option_c;
                echo '</label>';
                echo '</div>';
                echo '<div class="radio">';
                echo '<label>';
                echo '<input type="radio" name="answer[' . $question->id . ']" value="D"> ' . $question->option_d;
                echo '</label>';
                echo '</div>';
                echo '</div>';
            }
        ?>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
    var countDownDate = new Date().getTime() + 3600000; // 1 hour
    var x = setInterval(function() {
        var now = new Date().getTime();
        var distance = countDownDate - now;
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        document.getElementById("timer").innerHTML = minutes + "m " + seconds + "s ";
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("timer").innerHTML = "TIME'S UP!";
            // Add code here to automatically submit the form
        }
    }, 1000);
</script>

</body>
</html>

2. quiz_result.php

<!DOCTYPE html>
<html>
<head>
    <title>Results</title>
</head>
<body>
    <div class="container">
        <h1>Results</h1>

        <p>Terima kasih, <?php echo $name; ?>, telah mengikuti tes!</p>

        <p>Anda menjawab <?php echo $num_correct; ?> pertanyaan dengan benar dan <?php echo $num_incorrect; ?> pertanyaan salah.</p>

        <p><a href="<?php echo site_url('quiz'); ?>">Mulai tes lagi</a></p>
    </div>
</body>
</html>

Itulah tutorial tentang bagaimana membuat kuis sederhana menggunakan CodeIgniter. Semoga tutorial ini dapat membantu Anda dalam mempelajari CodeIgniter dan membuat aplikasi web yang lebih kompleks.

Beberapa artikel lain dari blog ini terkait Framework CodeIgniter:

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

You might also like

Website Sekolah Dengan Codeigniter

Website Sekolah Dengan Codeigniter 3

Form Validasi dengan CodeIgniter 3

Form Validasi dengan CodeIgniter 3: Panduan Lengkap dan Praktis

Cara Menggunakan mPDF pada Framework CodeIgniter 3

Cara Menggunakan mPDF pada Framework CodeIgniter 3

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *