Javascript Bag 7-3

Membuat Exam Generator

Selamat datang di Quiz 2 Exam Generator! Alat ini memungkinkan Anda membuat dan mengatur tes singkat dengan mudah. Mari kita jelajahi kode di balik pembuat tes ini agar Anda dapat memahaminya dengan lebih baik.

HTML Structure

Kami mulai dengan struktur HTML dasar yang mencakup elemen-elemen seperti input untuk pertanyaan, opsi jawaban, dan waktu, serta tombol untuk menambahkan pertanyaan dan menyelesaikan tes.

CSS Styling

Kode CSS memberikan tampilan yang sederhana dan responsif untuk aplikasi ini. Ini termasuk aturan untuk mengatur tata letak elemen, warna, dan gaya tombol.

List Buah Interaktif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz 2 Exam Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            text-align: center;
        }

        input[type="text"], input[type="number"] {
            width: 100%;
            margin-bottom: 10px;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #007bff;
            color: white;
        }

        .grayed-out {
            color: #aaa;
        }
    </style>
</head>
<body>
    <h1>Quiz 2 Exam Generator</h1>
    <input type="text" id="questionInput" placeholder="Masukkan pertanyaan">
    <input type="text" id="option1Input" placeholder="Opsi 1">
    <input type="text" id="option2Input" placeholder="Opsi 2">
    <input type="number" id="timeInput" placeholder="Masukkan waktu (detik)">
    <button id="addQuestionBtn" onclick="addQuestion()">Tambah Pertanyaan</button>
    <button id="finishTestBtn" onclick="finishTest()">Selesaikan Tes</button>
    <div id="tableContainer"></div>

    <script>
        var questions = [];

        function addQuestion() {
            var questionInput = document.getElementById('questionInput').value.trim();
            var option1Input = document.getElementById('option1Input').value.trim();
            var option2Input = document.getElementById('option2Input').value.trim();
            var timeInput = parseInt(document.getElementById('timeInput').value.trim());

            if (questionInput !== '' && option1Input !== '' && option2Input !== '' && !isNaN(timeInput) && timeInput > 0) {
                var question = {
                    question: questionInput,
                    options: [option1Input, option2Input],
                    time: timeInput,
                    timerId: null
                };

                questions.push(question);
                renderTable();
                clearInputs();
            } else {
                alert('Silakan lengkapi semua input dengan benar.');
            }
        }

        function renderTable() {
            var tableHtml = '<table>';
            tableHtml += '<tr><th>No.</th><th>Pertanyaan</th><th>Opsi</th><th>Waktu (detik)</th></tr>';

            for (var i = 0; i < questions.length; i++) {
                tableHtml += '<tr>';
                tableHtml += '<td>' + (i + 1) + '</td>';
                tableHtml += '<td>' + questions[i].question + '</td>';
                tableHtml += '<td>';
                
                // Menambahkan input radio untuk setiap opsi
                for (var j = 0; j < questions[i].options.length; j++) {
                    tableHtml += '<input type="radio" name="option' + i + '" value="' + questions[i].options[j] + '"> ' + questions[i].options[j] + '<br>';
                }

                tableHtml += '</td>';
                tableHtml += '<td id="timeCell' + i + '">' + questions[i].time + '</td>';
                tableHtml += '</tr>';
            }

            tableHtml += '</table>';
            document.getElementById('tableContainer').innerHTML = tableHtml;

            startTimerForNewQuestion();
        }

        function startTimerForNewQuestion() {
            var lastIndex = questions.length - 1;
            if (lastIndex > 0 && questions[lastIndex - 1].timerId !== null) {
                clearInterval(questions[lastIndex - 1].timerId); // Memberhentikan timer pertanyaan sebelumnya
            }
            startTimer(lastIndex);
        }

        function startTimer(index) {
            var timeCell = document.getElementById('timeCell' + index);
            var time = questions[index].time;

            questions[index].timerId = setInterval(function() {
                time--;

                if (time <= 0) {
                    clearInterval(questions[index].timerId);
                    timeCell.textContent = 'Waktu Habis';
                    timeCell.classList.add('grayed-out');

                    var radios = document.getElementsByName('option' + index);
                    for (var j = 0; j < radios.length; j++) {
                        radios[j].disabled = true;
                    }
                } else {
                    timeCell.textContent = time;
                }
            }, 1000);
        }

        function clearInputs() {
            document.getElementById('questionInput').value = '';
            document.getElementById('option1Input').value = '';
            document.getElementById('option2Input').value = '';
            document.getElementById('timeInput').value = '';
        }

        function finishTest() {
            clearIntervalAllTimers();
            disableAllInputs();
        }

        function clearIntervalAllTimers() {
            for (var i = 0; i < questions.length; i++) {
                clearInterval(questions[i].timerId);
            }
        }

        function disableAllInputs() {
            document.getElementById('questionInput').disabled = true;
            document.getElementById('option1Input').disabled = true;
            document.getElementById('option2Input').disabled = true;
            document.getElementById('timeInput').disabled = true;

            var allRadios = document.querySelectorAll('input[type="radio"]');
            allRadios.forEach(function(radio) {
                radio.disabled = true;
            });
        }
    </script>
</body>
</html>

JavaScript Functionality

Variabel questions: Digunakan untuk menyimpan daftar pertanyaan yang telah ditambahkan.
Fungsi addQuestion(): Memvalidasi dan menambahkan pertanyaan baru ke dalam daftar pertanyaan. Jika semua input telah diisi dengan benar, pertanyaan ditambahkan ke dalam array questions dan tabel yang menampilkan daftar pertanyaan diperbarui.
Fungsi renderTable(): Membuat tabel HTML dinamis yang menampilkan daftar pertanyaan yang telah ditambahkan beserta opsi jawaban dan waktu yang terkait.
Fungsi startTimerForNewQuestion() dan startTimer(index): Memulai penghitungan mundur untuk setiap pertanyaan yang ditambahkan. Timer diatur berdasarkan waktu yang ditentukan untuk setiap pertanyaan. Jika waktu habis, timer akan berhenti dan opsi jawaban akan dinonaktifkan.
Fungsi clearInputs(): Mengosongkan input setelah pertanyaan ditambahkan.
Fungsi finishTest(): Menghentikan semua timer dan menonaktifkan semua input setelah tes selesai.
Fungsi clearIntervalAllTimers() dan disableAllInputs(): Digunakan untuk menghentikan semua timer dan menonaktifkan semua input setelah tes selesai.

Kesimpulan

Dengan menggunakan HTML, CSS, dan JavaScript, Exam Generator ini memungkinkan pembuat tes untuk membuat tes dengan mudah dan mengatur waktu untuk setiap pertanyaan. Pengguna dapat menambahkan pertanyaan, mengatur opsi jawaban, dan menyelesaikan tes dengan cepat. Semoga penjelasan ini membantu Anda memahami cara kerja kode di balik Exam Generator ini!

Cari Blog Ini

Alpinn's HTML Tutorial

Javascript 7-3: Membuat Quiz Exam Generator

Javascript Bag 7-3

Membuat Exam Generator

HTML Structure

CSS Styling

List Buah Interaktif

JavaScript Functionality

Kesimpulan

Komentar

Posting Komentar

Postingan populer dari blog ini

Analisis Program To-Do list Sederhana

Ringkasan Capaian Pembelajaran SMK Jurusan Pengembangan Perangkat Lunak dan Gim (Fase E)

Javascript 8-5: Memodifikiasi Inventory Buah Menggunakan Paging

Javascript 8-3: Memahami Iterasi Array pada JavaScript dan Mini Proyek Penghitungan Min, Max, dan Rata-rata

Data Analytic dan Machine Learning

Simple Sunset Links Page Design - HTML & CSS Only

Javascript 8-2: Array Iteration dan Membuat Sorting Angka

Penjelasan Lengkap Tentang PHP Native dan PHP Framework

Javascript 7-2: String, Mengupgrade Mini Project Trayek.