tes

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Pilihan Ganda</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .quiz-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .quiz-header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .quiz-header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .quiz-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .quiz-content {
            padding: 40px;
        }

        .question-counter {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: center;
            font-weight: bold;
            color: #495057;
        }

        .question {
            font-size: 1.4rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 30px;
            line-height: 1.5;
        }

        .options {
            display: grid;
            gap: 15px;
            margin-bottom: 30px;
        }

        .option {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .option:hover {
            border-color: #4facfe;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.2);
        }

        .option.selected {
            background: #4facfe;
            color: white;
            border-color: #4facfe;
        }

        .option.correct {
            background: #28a745;
            color: white;
            border-color: #28a745;
        }

        .option.incorrect {
            background: #dc3545;
            color: white;
            border-color: #dc3545;
        }

        .option-text {
            font-size: 1.1rem;
            font-weight: 500;
        }

        .quiz-buttons {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 25px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-next {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        .btn-next:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
        }

        .btn-restart {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
        }

        .btn-restart:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(250, 112, 154, 0.3);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        .results {
            text-align: center;
            padding: 40px 20px;
        }

        .score {
            font-size: 3rem;
            font-weight: bold;
            color: #4facfe;
            margin-bottom: 20px;
        }

        .score-text {
            font-size: 1.2rem;
            color: #6c757d;
            margin-bottom: 30px;
        }

        .progress-bar {
            background: #e9ecef;
            height: 8px;
            border-radius: 4px;
            margin: 20px 0;
            overflow: hidden;
        }

        .progress-fill {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            height: 100%;
            transition: width 0.3s ease;
        }

        @media (max-width: 768px) {
            .quiz-header h1 {
                font-size: 2rem;
            }
            
            .quiz-content {
                padding: 20px;
            }
            
            .question {
                font-size: 1.2rem;
            }
            
            .option {
                padding: 15px;
            }
            
            .quiz-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <div class="quiz-header">
            <h1>🧠 Quiz Pilihan Ganda</h1>
            <p>Uji pengetahuan Anda dengan quiz interaktif ini!</p>
        </div>
        
        <div class="quiz-content">
            <div id="quiz-area">
                <div class="question-counter">
                    <span id="current-question">1</span> dari <span id="total-questions">5</span>
                </div>
                
                <div class="progress-bar">
                    <div class="progress-fill" id="progress-fill"></div>
                </div>
                
                <div class="question" id="question-text"></div>
                
                <div class="options" id="options-container"></div>
                
                <div class="quiz-buttons">
                    <button class="btn btn-next" id="next-btn" onclick="nextQuestion()" disabled>
                        Selanjutnya
                    </button>
                    <button class="btn btn-restart" id="restart-btn" onclick="restartQuiz()" style="display: none;">
                        Ulangi Quiz
                    </button>
                </div>
            </div>
            
            <div id="results-area" class="results" style="display: none;">
                <div class="score" id="final-score">0/0</div>
                <div class="score-text" id="score-message"></div>
                <button class="btn btn-restart" onclick="restartQuiz()">
                    Coba Lagi
                </button>
            </div>
        </div>
    </div>

    <script>
        // Data soal quiz - Anda bisa mengubah ini sesuai kebutuhan
        const quizData = [
            {
                question: "Siapa presiden pertama Indonesia?",
                options: ["Soekarno", "Soeharto", "Habibie", "Megawati"],
                correct: 0
            },
            {
                question: "Apa ibukota Indonesia?",
                options: ["Bandung", "Surabaya", "Jakarta", "Medan"],
                correct: 2
            },
            {
                question: "Berapa jumlah pulau di Indonesia?",
                options: ["13.466", "17.508", "15.000", "20.000"],
                correct: 1
            },
            {
                question: "Apa mata uang Indonesia?",
                options: ["Ringgit", "Rupiah", "Dollar", "Baht"],
                correct: 1
            },
            {
                question: "Kapan Indonesia merdeka?",
                options: ["17 Agustus 1945", "17 Agustus 1944", "20 Mei 1908", "1 Juni 1945"],
                correct: 0
            }
        ];

        let currentQuestion = 0;
        let score = 0;
        let answered = false;

        // Inisialisasi quiz
        function initQuiz() {
            currentQuestion = 0;
            score = 0;
            answered = false;
            document.getElementById('total-questions').textContent = quizData.length;
            showQuestion();
        }

        // Tampilkan pertanyaan
        function showQuestion() {
            const question = quizData[currentQuestion];
            document.getElementById('current-question').textContent = currentQuestion + 1;
            document.getElementById('question-text').textContent = question.question;
            
            // Update progress bar
            const progress = ((currentQuestion + 1) / quizData.length) * 100;
            document.getElementById('progress-fill').style.width = progress + '%';
            
            // Tampilkan opsi jawaban
            const optionsContainer = document.getElementById('options-container');
            optionsContainer.innerHTML = '';
            
            question.options.forEach((option, index) => {
                const optionElement = document.createElement('div');
                optionElement.className = 'option';
                optionElement.innerHTML = `<div class="option-text">${String.fromCharCode(65 + index)}. ${option}</div>`;
                optionElement.onclick = () => selectOption(index, optionElement);
                optionsContainer.appendChild(optionElement);
            });
            
            // Reset tombol
            document.getElementById('next-btn').disabled = true;
            answered = false;
        }

        // Pilih opsi jawaban
        function selectOption(selectedIndex, optionElement) {
            if (answered) return;
            
            const question = quizData[currentQuestion];
            const options = document.querySelectorAll('.option');
            
            // Hapus kelas selected dari semua opsi
            options.forEach(opt => opt.classList.remove('selected'));
            
            // Tambahkan kelas selected ke opsi yang dipilih
            optionElement.classList.add('selected');
            
            // Tampilkan jawaban yang benar dan salah
            options.forEach((opt, index) => {
                if (index === question.correct) {
                    opt.classList.add('correct');
                } else if (index === selectedIndex && selectedIndex !== question.correct) {
                    opt.classList.add('incorrect');
                }
            });
            
            // Update skor jika jawaban benar
            if (selectedIndex === question.correct) {
                score++;
            }
            
            answered = true;
            document.getElementById('next-btn').disabled = false;
            
            // Jika pertanyaan terakhir, ubah teks tombol
            if (currentQuestion === quizData.length - 1) {
                document.getElementById('next-btn').textContent = 'Lihat Hasil';
            }
        }

        // Pertanyaan berikutnya
        function nextQuestion() {
            if (currentQuestion < quizData.length - 1) {
                currentQuestion++;
                showQuestion();
            } else {
                showResults();
            }
        }

        // Tampilkan hasil
        function showResults() {
            document.getElementById('quiz-area').style.display = 'none';
            document.getElementById('results-area').style.display = 'block';
            
            const percentage = Math.round((score / quizData.length) * 100);
            document.getElementById('final-score').textContent = `${score}/${quizData.length}`;
            
            let message = '';
            if (percentage >= 80) {
                message = '🎉 Luar biasa! Anda sangat menguasai materi ini!';
            } else if (percentage >= 60) {
                message = '👍 Bagus! Pengetahuan Anda cukup baik.';
            } else if (percentage >= 40) {
                message = '📚 Tidak buruk, tapi masih bisa diperbaiki.';
            } else {
                message = '💪 Jangan menyerah! Coba pelajari lagi materinya.';
            }
            
            document.getElementById('score-message').textContent = `Skor Anda: ${percentage}% - ${message}`;
        }

        // Restart quiz
        function restartQuiz() {
            document.getElementById('quiz-area').style.display = 'block';
            document.getElementById('results-area').style.display = 'none';
            document.getElementById('next-btn').textContent = 'Selanjutnya';
            initQuiz();
        }

        // Mulai quiz saat halaman dimuat
        window.onload = function() {
            initQuiz();
        };
    </script>
</body>
</html>

Komentar

Posting Komentar

Postingan Populer