import React, { useState, useEffect } from 'react';
// Data kuis (contoh, Anda bisa menambahkan hingga 40 soal)
const quizData = [
{
question: "Apa nama ibu kota Indonesia?",
options: ["Surabaya", "Bandung", "Jakarta", "Medan"],
answer: "Jakarta",
},
{
question: "Kata 'rajin' adalah lawan kata dari...",
options: ["pintar", "malas", "giat", "tekun"],
answer: "malas",
},
{
question: "Bacalah kalimat berikut: 'Ani pergi ke pasar membeli sayur.' Subjek dari kalimat tersebut adalah...",
options: ["Ani", "pergi", "pasar", "sayur"],
answer: "Ani",
},
{
question: "Penulisan huruf kapital yang benar terdapat pada kalimat...",
options: ["saya suka makan nasi goreng.", "Budi dan siti bermain bola.", "Indonesia adalah negara kepulauan.", "kota jakarta sangat ramai."],
answer: "Indonesia adalah negara kepulauan.",
},
{
question: "Pilihlah kata yang memiliki arti 'tempat tinggal'.",
options: ["sekolah", "kantor", "rumah", "toko"],
answer: "rumah",
},
{
question: "Apa arti dari peribahasa 'Berat sama dipikul, ringan sama dijinjing'?",
options: ["Bekerja sendiri lebih baik", "Hidup harus mandiri", "Saling membantu dalam suka dan duka", "Berhati-hati dalam setiap tindakan"],
answer: "Saling membantu dalam suka dan duka",
},
{
question: "Kata dasar dari 'pekerjaan' adalah...",
options: ["kerja", "bekerja", "kerjakan", "pekerja"],
answer: "kerja",
},
{
question: "Manakah kalimat yang menggunakan tanda baca koma (,) dengan benar?",
options: ["Ibu membeli sayur, buah, dan daging.", "Ayah membaca koran dan minum kopi.", "Adik bermain sepeda di taman.", "Kakak sedang belajar matematika."],
answer: "Ibu membeli sayur, buah, dan daging.",
},
{
question: "Sinonim dari kata 'cantik' adalah...",
options: ["jelek", "buruk", "indah", "kecil"],
answer: "indah",
},
{
question: "Bacalah paragraf berikut: 'Pohon mangga di depan rumahku berbuah lebat. Buahnya manis sekali.' Topik utama paragraf tersebut adalah...",
options: ["Buah-buahan", "Pohon mangga yang berbuah lebat", "Rumahku", "Rasa buah mangga"],
answer: "Pohon mangga yang berbuah lebat",
},
// Anda bisa menambahkan 30 soal lagi di sini untuk mencapai 40 soal
// Contoh:
// {
// question: "Apa nama hewan yang bisa terbang dan bertelur?",
// options: ["Kucing", "Ikan", "Burung", "Anjing"],
// answer: "Burung",
// },
];
function App() {
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [userAnswers, setUserAnswers] = useState(Array(quizData.length).fill(null));
const [isSubmitted, setIsSubmitted] = useState(false);
const [score, setScore] = useState(0);
const [studentEmail, setStudentEmail] = useState('');
const [teacherEmail, setTeacherEmail] = useState('');
const [classEmail, setClassEmail] = useState('');
const [showConfirmation, setShowConfirmation] = useState(false);
const [confirmationMessage, setConfirmationMessage] = useState('');
// Function to show a custom message box instead of alert()
const showMessageBox = (message) => {
setConfirmationMessage(message);
setShowConfirmation(true);
};
const closeMessageBox = () => {
setShowConfirmation(false);
setConfirmationMessage('');
};
const handleOptionSelect = (option) => {
const newAnswers = [...userAnswers];
newAnswers[currentQuestionIndex] = option;
setUserAnswers(newAnswers);
};
const handleNextQuestion = () => {
if (currentQuestionIndex < quizData.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
}
};
const handlePreviousQuestion = () => {
if (currentQuestionIndex > 0) {
setCurrentQuestionIndex(currentQuestionIndex - 1);
}
};
const handleSubmitQuiz = () => {
// Basic validation for emails
if (!studentEmail || !teacherEmail || !classEmail) {
showMessageBox("Harap lengkapi semua alamat email sebelum mengirimkan kuis.");
return;
}
// Calculate score
let newScore = 0;
for (let i = 0; i < quizData.length; i++) {
if (userAnswers[i] === quizData[i].answer) {
newScore++;
}
}
setScore(newScore);
setIsSubmitted(true);
};
const handleRetakeQuiz = () => {
setCurrentQuestionIndex(0);
setUserAnswers(Array(quizData.length).fill(null));
setIsSubmitted(false);
setScore(0);
setStudentEmail('');
setTeacherEmail('');
setClassEmail('');
};
return (
Kuis Bahasa Indonesia Kelas 4 SD
{showConfirmation && (
)}
{!isSubmitted ? (
<>
setStudentEmail(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
/>
setTeacherEmail(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
/>
setClassEmail(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
/>
Soal {currentQuestionIndex + 1} dari {quizData.length}
{quizData[currentQuestionIndex].question}
{quizData[currentQuestionIndex].options.map((option, index) => (
))}
{currentQuestionIndex === quizData.length - 1 ? (
) : (
)}
) : (
Kuis Selesai!
Skor Anda: {score} dari{" "}
{quizData.length}
Lembar Jawaban
{quizData.map((q, index) => (
{index + 1}. {q.question}
Jawaban Anda:{" "}
{userAnswers[index] || "Tidak dijawab"}
{userAnswers[index] !== q.answer && (
Jawaban Benar: {q.answer}
)}
))}
)}
);
}
export default App;
Tidak ada komentar:
Posting Komentar