import React, { useState } from 'react';
import { CheckCircle2, XCircle, RotateCcw, Award } from 'lucide-react';
// Data soal kuis
const quizQuestions = [
{
question: "Siapakah khalifah pertama setelah wafatnya Nabi Muhammad SAW?",
options: ["Umar bin Khattab", "Abu Bakar As-Siddiq", "Utsman bin Affan", "Ali bin Abi Thalib"],
answer: "Abu Bakar As-Siddiq"
},
{
question: "Rukun Islam yang ketiga adalah...",
options: ["Membaca Syahadat", "Mendirikan Shalat", "Menunaikan Zakat", "Puasa di bulan Ramadhan"],
answer: "Menunaikan Zakat"
},
{
question: "Majas yang membandingkan benda mati seolah-olah memiliki sifat seperti manusia disebut majas...",
options: ["Hiperbola", "Personifikasi", "Metafora", "Simile"],
answer: "Personifikasi"
},
{
question: "Rumus kimia dari senyawa air murni adalah...",
options: ["CO2", "NaCl", "H2O", "O2"],
answer: "H2O"
},
{
question: "Proklamasi kemerdekaan Republik Indonesia dibacakan pada tanggal...",
options: ["1 Juni 1945", "17 Agustus 1945", "10 November 1945", "20 Mei 1908"],
answer: "17 Agustus 1945"
},
{
question: "Sifat wajib bagi Allah yang memiliki arti 'Terdahulu' (tidak ada permulaan) adalah...",
options: ["Wujud", "Qidam", "Baqa", "Mukhalafatu lil hawaditsi"],
answer: "Qidam"
},
{
question: "Organ dalam tubuh manusia yang berfungsi memompa darah ke seluruh tubuh adalah...",
options: ["Paru-paru", "Hati", "Ginjal", "Jantung"],
answer: "Jantung"
},
{
question: "Hasil perhitungan dari 15 x 3 - 10 adalah...",
options: ["25", "30", "35", "45"],
answer: "35"
},
{
question: "Ibukota dari provinsi Sulawesi Selatan adalah...",
options: ["Palu", "Kendari", "Manado", "Makassar"],
answer: "Makassar"
},
{
question: "Perang Badar, yang merupakan salah satu perang besar dalam sejarah Islam, terjadi pada tahun keberapa Hijriah?",
options: ["1 Hijriah", "2 Hijriah", "3 Hijriah", "4 Hijriah"],
answer: "2 Hijriah"
}
];
export default function App() {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [showScore, setShowScore] = useState(false);
const [score, setScore] = useState(0);
const [selectedOption, setSelectedOption] = useState('');
const [isAnswered, setIsAnswered] = useState(false);
const [userAnswers, setUserAnswers] = useState([]);
// Fungsi untuk menangani saat pengguna memilih jawaban
const handleOptionClick = (option) => {
if (isAnswered) return; // Mencegah klik ganda
setSelectedOption(option);
setIsAnswered(true);
const isCorrect = option === quizQuestions[currentQuestion].answer;
if (isCorrect) {
setScore(score + 10); // Setiap soal bernilai 10 poin
}
// Menyimpan rekam jejak jawaban
setUserAnswers([
...userAnswers,
{
question: quizQuestions[currentQuestion].question,
selected: option,
correct: quizQuestions[currentQuestion].answer,
isCorrect: isCorrect
}
]);
};
// Fungsi untuk lanjut ke soal berikutnya
const handleNextQuestion = () => {
const nextQuestion = currentQuestion + 1;
if (nextQuestion < quizQuestions.length) {
setCurrentQuestion(nextQuestion);
setSelectedOption('');
setIsAnswered(false);
} else {
setShowScore(true);
}
};
// Fungsi untuk mengulang kuis dari awal
const handleRestartQuiz = () => {
setCurrentQuestion(0);
setShowScore(false);
setScore(0);
setSelectedOption('');
setIsAnswered(false);
setUserAnswers([]);
};
// Kalkulasi persentase progres
const progressPercentage = ((currentQuestion + 1) / quizQuestions.length) * 100;
return (
<div className="min-h-screen bg-emerald-50 flex items-center justify-center p-4 font-sans text-slate-800">
<div className="bg-white rounded-2xl shadow-xl w-full max-w-lg overflow-hidden border border-emerald-100 relative">
{/* Header Section */}
<div className="bg-emerald-600 p-6 text-white text-center">
<h1 className="text-2xl font-bold">Kuis Pintar Siswa MA</h1>
{!showScore && (
<p className="text-emerald-100 mt-1 text-sm">
Soal {currentQuestion + 1} dari {quizQuestions.length}
</p>
)}
</div>
{showScore ? (
/* Tampilan Skor Akhir */
<div className="p-6 md:p-8 flex flex-col items-center animate-in fade-in zoom-in duration-500">
<Award className="w-20 h-20 text-yellow-400 mb-4 drop-shadow-md" />
<h2 className="text-3xl font-extrabold text-slate-800 mb-2">Skor Kamu: {score}</h2>
<p className="text-lg text-slate-600 text-center mb-8">
{score >= 80 ? 'Luar biasa! Pertahankan prestasimu.' :
score >= 60 ? 'Bagus! Tingkatkan lagi belajarnya.' :
'Jangan menyerah, ayo belajar lebih giat lagi!'}
</p>
<div className="w-full mb-6">
<h3 className="font-semibold text-lg border-b pb-2 mb-3">Ringkasan Jawaban:</h3>
<div className="max-h-60 overflow-y-auto space-y-3 pr-2">
{userAnswers.map((ans, index) => (
<div key={index} className="p-3 bg-slate-50 rounded-lg text-sm border border-slate-100">
<p className="font-medium text-slate-700 mb-1">{index + 1}. {ans.question}</p>
<div className="flex items-center gap-2">
{ans.isCorrect ? (
<CheckCircle2 className="w-4 h-4 text-emerald-500" />
) : (
<XCircle className="w-4 h-4 text-rose-500" />
)}
<span className={ans.isCorrect ? "text-emerald-600" : "text-rose-600 line-through"}>
{ans.selected}
</span>
</div>
{!ans.isCorrect && (
<p className="text-emerald-600 mt-1 text-xs font-semibold">
Jawaban benar: {ans.correct}
</p>
)}
</div>
))}
</div>
</div>
<button
onClick={handleRestartQuiz}
className="flex items-center justify-center w-full gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-6 rounded-xl transition-all active:scale-95"
>
<RotateCcw className="w-5 h-5" />
Coba Lagi
</button>
</div>
) : (
/* Tampilan Soal Kuis */
<div className="p-6 md:p-8">
{/* Progress Bar */}
<div className="w-full bg-slate-100 rounded-full h-2 mb-6">
<div
className="bg-emerald-500 h-2 rounded-full transition-all duration-500 ease-out"
style={{ width: `${progressPercentage}%` }}
></div>
</div>
{/* Pertanyaan */}
<h2 className="text-xl md:text-2xl font-bold mb-6 text-slate-800 leading-snug">
{quizQuestions[currentQuestion].question}
</h2>
{/* Pilihan Jawaban */}
<div className="flex flex-col space-y-3">
{quizQuestions[currentQuestion].options.map((option, index) => {
// Logika gaya tombol berdasarkan status jawaban (benar/salah)
let buttonStyle = "bg-white border-2 border-slate-200 text-slate-700 hover:border-emerald-500 hover:bg-emerald-50";
if (isAnswered) {
if (option === quizQuestions[currentQuestion].answer) {
buttonStyle = "bg-emerald-100 border-2 border-emerald-500 text-emerald-800"; // Jawaban Benar disorot
} else if (option === selectedOption) {
buttonStyle = "bg-rose-100 border-2 border-rose-500 text-rose-800"; // Jawaban Salah yang dipilih
} else {
buttonStyle = "bg-slate-50 border-2 border-slate-100 text-slate-400 opacity-50"; // Sisa jawaban di-disable
}
}
return (
<button
key={index}
onClick={() => handleOptionClick(option)}
disabled={isAnswered}
className={`flex items-center justify-between w-full text-left font-medium py-4 px-5 rounded-xl transition-all duration-200 ${buttonStyle}`}
>
<span>{option}</span>
{isAnswered && option === quizQuestions[currentQuestion].answer && (
<CheckCircle2 className="w-5 h-5 text-emerald-600 animate-in zoom-in" />
)}
{isAnswered && option === selectedOption && option !== quizQuestions[currentQuestion].answer && (
<XCircle className="w-5 h-5 text-rose-600 animate-in zoom-in" />
)}
</button>
);
})}
</div>
{/* Tombol Lanjut */}
{isAnswered && (
<div className="mt-8 animate-in slide-in-from-bottom-2 fade-in duration-300">
<button
onClick={handleNextQuestion}
className="w-full bg-slate-800 hover:bg-slate-900 text-white font-bold py-4 px-6 rounded-xl transition-all active:scale-95 shadow-lg"
>
{currentQuestion === quizQuestions.length - 1 ? 'Lihat Nilai Akhir' : 'Lanjut ke Soal Berikutnya'}
</button>
</div>
)}
</div>
)}
</div>
</div>
);
}
