<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kuis Sosiologi SMA</title> <script src="https://cdn.tailwindcss.com"></script> <style> @keyframes pulse-fast { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .animate-pulse-fast { animation: pulse-fast 0.8s infinite; } </style> </head> <body class="bg-slate-900 text-slate-100 min-h-screen flex items-center justify-center p-4 font-sans"> <div id="app" class="w-full max-w-2xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-6 md:p-8"> <!-- START SCREEN --> <div id="start-screen" class="text-center space-y-6 py-6"> <div class="inline-block p-4 bg-indigo-500/10 rounded-full text-indigo-400 mb-2"> <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> </svg> </div> <h1 class="text-3xl font-bold tracking-tight text-white">Kuis Sosiologi SMA</h1> <p class="text-slate-400 max-w-md mx-auto leading-relaxed"> Uji pengetahuan sosiologi kamu! Ada <span class="text-indigo-400 font-semibold">10 soal</span> dan waktu menjawab hanya <span class="text-amber-400 font-semibold">10 detik</span> per soal, dilengkapi efek suara. </p> <button onclick="startQuiz()" class="w-full sm:w-auto px-8 py-3.5 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-xl shadow-lg transition duration-200 transform active:scale-95"> Mulai Kuis Sekarang </button> </div> <!-- QUIZ SCREEN --> <div id="quiz-screen" class="hidden space-y-6"> <!-- Header Status --> <div class="flex justify-between items-center pb-4 border-b border-slate-700"> <div> <span class="text-xs uppercase tracking-wider text-slate-400">Pertanyaan</span> <p class="text-lg font-bold text-indigo-400"><span id="current-question-num">1</span> / 10</p> </div> <div class="flex items-center space-x-2"> <div id="timer-box" class="flex items-center space-x-1 px-3 py-1.5 rounded-lg bg-slate-700 font-mono text-xl font-bold text-amber-400"> <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <span id="timer-text">10</span>s </div> </div> </div> <!-- Progress Bar --> <div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden"> <div id="progress-bar" class="bg-indigo-500 h-full transition-all duration-1000 ease-linear" style="width: 100%;"></div> </div> <!-- Question Text --> <div class="min-h-[80px]"> <h2 id="question-text" class="text-lg md:text-xl font-medium text-slate-100 leading-snug"> <!-- Text soal akan dimuat secara dinamis --> </h2> </div> <!-- Options Grid --> <div id="options-container" class="grid grid-cols-1 gap-3"> <!-- Pilihan jawaban --> </div> </div> <!-- RESULT SCREEN --> <div id="result-screen" class="hidden text-center space-y-6 py-6"> <div class="inline-block p-4 bg-indigo-500/10 rounded-full text-indigo-400 mb-2"> <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <h2 class="text-3xl font-bold text-white">Hasil Kuis Kamu</h2> <div class="bg-slate-700/50 p-6 rounded-xl border border-slate-700 max-w-sm mx-auto space-y-2"> <p class="text-slate-400 text-sm">Skor Akhir</p> <p id="score-text" class="text-5xl font-extrabold text-indigo-400">0 / 100</p> <p id="accuracy-text" class="text-xs text-slate-400 mt-1">Benar 0 dari 10 soal</p> </div> <!-- Review / Detail Jawaban --> <div class="text-left max-h-60 overflow-y-auto pr-2 space-y-3" id="review-container"> <!-- Detail ringkasan jawaban --> </div> <button onclick="startQuiz()" class="w-full sm:w-auto px-8 py-3.5 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-xl shadow-lg transition duration-200 transform active:scale-95"> Coba Lagi </button> </div> </div> <script> const questions = [ { question: "Sosiologi dikenal sebagai ilmu yang mempelajari masyarakat. Siapakah tokoh yang dikenal sebagai 'Bapak Sosiologi'?", options: ["Karl Marx", "Auguste Comte", "Max Weber", "Emile Durkheim"], answer: 1, explanation: "Auguste Comte adalah tokoh yang pertama kali mencetuskan istilah Sosiologi." }, { question: "Proses sosial di mana dua kelompok atau lebih saling menyesuaikan diri dan mengurangi ketegangan disebut...", options: ["Akomodasi", "Asimilasi", "Akulturasi", "Amalgamasi"], answer: 0, explanation: "Akomodasi adalah bentuk interaksi sosial untuk menyelesaikan konflik dan mencapai keseimbangan." }, { question: "Perilaku menyimpang yang terjadi karena seseorang diberi label (cap) negatif oleh masyarakat dijelaskan oleh teori...", options: ["Anomie", "Labelling", "Diferensiasi Asosiasi", "Konflik"], answer: 1, explanation: "Teori Labelling (Edwin Lemert) menyatakan penyimpangan terbentuk akibat julukan/label dari masyarakat." }, { question: "Pembedaan masyarakat secara horizontal tanpa tingkatan hirarki (seperti suku, agama, ras) disebut...", options: ["Stratifikasi Sosial", "Diferensiasi Sosial", "Mobilitas Sosial", "Mobilitas Vertikal"], answer: 1, explanation: "Diferensiasi sosial adalah pengelompokan masyarakat secara sejajar/horizontal." }, { question: "Pencetus teori pembagian kelas sosial antara kaum Borjuis dan kaum Proletar adalah...", options: ["Max Weber", "Karl Marx", "Pitirim Sorokin", "Herbert Spencer"], answer: 1, explanation: "Karl Marx terkenal dengan gagasannya mengenai konflik kelas antara Pemilik Modal (Borjuis) dan Buruh (Proletar)." }, { question: "Fungsi lembaga keluarga yang berkaitan dengan meneruskan keturunan disebut fungsi...", options: ["Sosialisasi", "Afeksi", "Reproduksi", "Proteksi"], answer: 2, explanation: "Fungsi reproduksi bertujuan untuk melestarikan keturunan secara sah." }, { question: "Norma sosial yang tingkat sanksinya paling keras berupa hukum adat atau aturan adat yang mengikat dinamakan...", options: ["Cara (Usage)", "Kebiasaan (Folkways)", "Tata Kelakuan (Mores)", "Adat Istiadat (Custom)"], answer: 3, explanation: "Custom/Adat istiadat memiliki daya ikat paling kuat dan sanksi yang tegas dari masyarakat adat." }, { question: "Perubahan sosial yang berlangsung secara lambat dan memerlukan waktu yang lama disebut perubahan...", options: ["Revolusi", "Evolusi", "Inovasi", "Regress"], answer: 1, explanation: "Evolusi merupakan perubahan sosial yang terjadi secara perlahan dan membutuhkan kurun waktu panjang." }, { question: "Metode penelitian sosiologi yang mengutamakan pengumpulan data berupa angka-angka statistik disebut...", options: ["Kualitatif", "Kuantitatif", "Korelatif", "Komparatif"], answer: 1, explanation: "Metode kuantitatif mengukur data menggunakan variabel kuantitatif dan statistik." }, { question: "Suatu keadaan di mana masyarakat kehilangan nilai dan norma akibat perubahan sosial yang sangat cepat disebut...", options: ["Anomie", "Alienasi", "Disorganisasi", "Gegar Budaya (Culture Shock)"], answer: 0, explanation: "Anomie adalah kondisi tanpa norma (normlessness) ketika aturan lama tak berlaku dan aturan baru belum terbentuk." } ]; let currentQuestion = 0; let score = 0; let timer = null; let timeLeft = 10; let userAnswers = []; let audioCtx = null; // Inisialisasi Audio Context untuk efek suara sintetis function initAudio() { if (!audioCtx) { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } } // Efek Suara Benar function playCorrectSound() { initAudio(); const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); osc.type = 'sine'; osc.frequency.setValueAtTime(523.25, audioCtx.currentTime); // C5 osc.frequency.exponentialRampToValueAtTime(659.25, audioCtx.currentTime + 0.15); // E5 gain.gain.setValueAtTime(0.3, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3); osc.start(audioCtx.currentTime); osc.stop(audioCtx.currentTime + 0.3); } // Efek Suara Salah / Waktu Habis function playWrongSound() { initAudio(); const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); osc.type = 'sawtooth'; osc.frequency.setValueAtTime(220, audioCtx.currentTime); // A3 osc.frequency.exponentialRampToValueAtTime(130.81, audioCtx.currentTime + 0.25); // C3 gain.gain.setValueAtTime(0.3, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3); osc.start(audioCtx.currentTime); osc.stop(audioCtx.currentTime + 0.3); } function startQuiz() { initAudio(); currentQuestion = 0; score = 0; userAnswers = []; document.getElementById('start-screen').classList.add('hidden'); document.getElementById('result-screen').classList.add('hidden'); document.getElementById('quiz-screen').classList.remove('hidden'); loadQuestion(); } function loadQuestion() { clearInterval(timer); timeLeft = 10; const q = questions[currentQuestion]; document.getElementById('current-question-num').innerText = currentQuestion + 1; document.getElementById('question-text').innerText = q.question; const optionsContainer = document.getElementById('options-container'); optionsContainer.innerHTML = ''; q.options.forEach((option, index) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 rounded-xl bg-slate-700/60 hover:bg-indigo-600/40 border border-slate-600 hover:border-indigo-500 transition duration-150 flex items-center justify-between text-slate-200 font-medium"; btn.onclick = () => selectOption(index); btn.innerHTML = `<span>${option}</span><span class="w-6 h-6 rounded-full border border-slate-500 flex items-center justify-center text-xs text-slate-400">${String.fromCharCode(65 + index)}</span>`; optionsContainer.appendChild(btn); }); updateTimerUI(); timer = setInterval(() => { timeLeft--; updateTimerUI(); if (timeLeft <= 0) { clearInterval(timer); selectOption(null); // Waktu habis } }, 1000); } function updateTimerUI() { const timerText = document.getElementById('timer-text'); const timerBox = document.getElementById('timer-box'); const progressBar = document.getElementById('progress-bar'); timerText.innerText = timeLeft; progressBar.style.width = `${(timeLeft / 10) * 100}%`; if (timeLeft <= 3) { timerBox.classList.add('text-red-400', 'animate-pulse-fast'); timerBox.classList.remove('text-amber-400'); progressBar.classList.add('bg-red-500'); progressBar.classList.remove('bg-indigo-500'); } else { timerBox.classList.remove('text-red-400', 'animate-pulse-fast'); timerBox.classList.add('text-amber-400'); progressBar.classList.remove('bg-red-500'); progressBar.classList.add('bg-indigo-500'); } } function selectOption(selectedIndex) { clearInterval(timer); const q = questions[currentQuestion]; const isCorrect = selectedIndex === q.answer; if (isCorrect) { score += 10; playCorrectSound(); } else { playWrongSound(); } userAnswers.push({ question: q.question, selected: selectedIndex, correct: q.answer, options: q.options, explanation: q.explanation }); // Disable semua tombol sebentar sebelum pindah soal const buttons = document.getElementById('options-container').querySelectorAll('button'); buttons.forEach((btn, idx) => { btn.disabled = true; if (idx === q.answer) { btn.classList.add('bg-emerald-600/50', 'border-emerald-500', 'text-white'); } else if (idx === selectedIndex) { btn.classList.add('bg-rose-600/50', 'border-rose-500', 'text-white'); } }); setTimeout(() => { currentQuestion++; if (currentQuestion < questions.length) { loadQuestion(); } else { showResults(); } }, 800); } function showResults() { document.getElementById('quiz-screen').classList.add('hidden'); document.getElementById('result-screen').classList.remove('hidden'); document.getElementById('score-text').innerText = `${score} / 100`; document.getElementById('accuracy-text').innerText = `Benar ${score / 10} dari 10 soal`; const reviewContainer = document.getElementById('review-container'); reviewContainer.innerHTML = '<h3 class="text-sm font-semibold text-slate-300 mb-2">Pembahasan Soal:</h3>'; userAnswers.forEach((ans, idx) => { const isCorrect = ans.selected === ans.correct; const item = document.createElement('div'); item.className = `p-3 rounded-lg border text-xs leading-relaxed ${isCorrect ? 'bg-emerald-950/30 border-emerald-800/50' : 'bg-rose-950/30 border-rose-800/50'}`; const userChoice = ans.selected !== null ? ans.options[ans.selected] : 'Waktu Habis'; const correctChoice = ans.options[ans.correct]; item.innerHTML = ` <p class="font-medium text-slate-200">${idx + 1}. ${ans.question}</p> <p class="mt-1 ${isCorrect ? 'text-emerald-400' : 'text-rose-400'}">Jawaban Kamu: ${userChoice}</p> ${!isCorrect ? `<p class="text-emerald-400">Jawaban Benar: ${correctChoice}</p>` : ''} <p class="text-slate-400 mt-1 italic">${ans.explanation}</p> `; reviewContainer.appendChild(item); }); } </script> </body> </html> ```eof