22.35
Wartam, S.Pd
import React, { useState } from 'react';
// Fungsi helper untuk merender ekspresi matematika menjadi HTML
const renderMath = (text) => {
let formattedText = text;
let changed = true;
// Mengganti pangkat (misal: 2^3 menjadi 23)
// Menangani angka, variabel, atau ekspresi dalam kurung sebelum pangkat
// Menangani pangkat positif, negatif, atau dalam kurung
// Iterasi untuk menangani pangkat bersarang (misal: (a^m)^n)
while (changed) {
changed = false;
const newText = formattedText.replace(
/([a-zA-Z0-9_().]+)(\^)(\(?[-+]?[a-zA-Z0-9_]+\)?)/g,
(match, base, caret, exp) => {
// Hanya mengganti jika belum dalam tag untuk menghindari duplikasi
// dan memastikan ekspresi di dalam kurung sudah di-render jika ada pangkat di dalamnya
if (!base.includes('') && !exp.includes('')) {
changed = true;
return `${base}${exp}`;
}
return match; // Kembalikan yang asli jika sudah diformat
}
);
if (newText !== formattedText) {
formattedText = newText;
changed = true;
}
}
// Mengganti akar (misal: akar 2 menjadi √2)
formattedText = formattedText.replace(/akar (\d+)/g, '√$1');
// Mengganti akar pangkat n (misal: akar pangkat 5 dari 9 menjadi 5√9)
formattedText = formattedText.replace(/akar pangkat (\d+) dari ([\w\d]+)/g, '$1√$2');
// Mengganti "x" sebagai simbol perkalian
formattedText = formattedText.replace(/ x /g, ' × ');
// Mengganti ":" sebagai simbol pembagian
formattedText = formattedText.replace(/ : /g, ' ÷ ');
// Mengganti pecahan (misal: 1/16 menjadi 1⁄16, atau A / B menjadi A ⁄ B)
// Menggunakan spasi di sekitar slash untuk pecahan yang lebih kompleks agar tidak salah tangkap
formattedText = formattedText.replace(/(\d+)\s*\/\s*(\d+)/g, '$1⁄$2'); // Untuk angka saja
formattedText = formattedText.replace(/ \/ /g, ' ⁄ '); // Untuk slash dengan spasi di sekitarnya
return ;
};
// Komponen Reusable untuk Bagian Topik
const TopicSection = ({ title, material, examples, quizQuestions }) => {
return (
))}
{title}
Materi
{renderMath(material)}
Contoh Soal dan Pembahasan
{examples.map((example, index) => (Soal:
{renderMath(example.question)}
Pembahasan:
{renderMath(example.solution)}
Kuis Interaktif
{!quizCompleted ? (
<>
);
};
// Komponen Asesmen Interaktif
const Assessment = () => {
const allAssessmentQuestions = [
{
question: "Hasil dari 2^3 x 2^4 adalah...",
options: ["2^7", "2^12", "4^7", "4^12"],
correctAnswer: "2^7"
},
{
question: "Bentuk sederhana dari akar 72 adalah...",
options: ["6 akar 2", "2 akar 6", "36 akar 2", "2 akar 36"],
correctAnswer: "6 akar 2"
},
{
question: "Bentuk baku dari 0.0000056 adalah...",
options: ["5.6 x 10^(-5)", "5.6 x 10^(-6)", "5.6 x 10^5", "5.6 x 10^6"],
correctAnswer: "5.6 x 10^(-6)"
},
{
question: "Rasionalkan penyebut dari 3 / akar 5",
options: ["(3 akar 5) / 5", "3 akar 5", "(akar 5) / 5", "5 akar 3"],
correctAnswer: "(3 akar 5) / 5"
},
{
question: "Nilai dari (3^2)^3 adalah...",
options: ["3^5", "3^6", "9^3", "6^2"],
correctAnswer: "3^6"
},
{
question: "Tuliskan hasil dari 5^0.",
options: ["0", "1", "5", "Tidak terdefinisi"],
correctAnswer: "1"
},
{
question: "Sederhanakan akar 18 + akar 50.",
options: ["akar 68", "8 akar 2", "7 akar 2", "68"],
correctAnswer: "8 akar 2"
},
{
question: "Tuliskan 125,000,000 dalam bentuk baku.",
options: ["1.25 x 10^7", "1.25 x 10^8", "12.5 x 10^7", "0.125 x 10^9"],
correctAnswer: "1.25 x 10^8"
},
{
question: "Rasionalkan penyebut dari 2 / (3 - akar 2).",
options: ["(6 + 2 akar 2) / 7", "(6 - 2 akar 2) / 7", "2(3 + akar 2)", "2(3 - akar 2)"],
correctAnswer: "(6 + 2 akar 2) / 7"
}
];
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [userAnswers, setUserAnswers] = useState(Array(allAssessmentQuestions.length).fill(null));
const [score, setScore] = useState(0);
const [showResults, setShowResults] = useState(false);
const [quizStarted, setQuizStarted] = useState(false);
const handleAnswerSelect = (selectedOption) => {
const updatedAnswers = [...userAnswers];
updatedAnswers[currentQuestionIndex] = selectedOption;
setUserAnswers(updatedAnswers);
};
const handleNextQuestion = () => {
if (currentQuestionIndex < allAssessmentQuestions.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
} else {
calculateScore();
setShowResults(true);
}
};
const calculateScore = () => {
let newScore = 0;
allAssessmentQuestions.forEach((q, index) => {
if (userAnswers[index] === q.correctAnswer) {
newScore++;
}
});
setScore(newScore);
};
const handleRestartQuiz = () => {
setCurrentQuestionIndex(0);
setUserAnswers(Array(allAssessmentQuestions.length).fill(null));
setScore(0);
setShowResults(false);
setQuizStarted(false);
};
const currentQuestion = allAssessmentQuestions[currentQuestionIndex];
return (
{currentQuestionIndex + 1}. {renderMath(currentQuestion.question)}
{currentQuestion.options.map((option, index) => (
))}
{feedback && (
{feedback}
)} {showNextButton && ( )} ) : (
Kuis telah selesai! Kerja bagus! 🎉
)}
Asesmen Akhir
{!quizStarted ? (Klik "Mulai Asesmen" untuk memulai asesmen akhir. Anda akan menjawab {allAssessmentQuestions.length} soal pilihan ganda. Skor Anda akan ditampilkan setelah Anda menyelesaikan semua soal.
Asesmen Selesai!
Skor Anda: {score} dari {allAssessmentQuestions.length}
Soal {currentQuestionIndex + 1} dari {allAssessmentQuestions.length}. {renderMath(currentQuestion.question)}
{currentQuestion.options.map((option, index) => (
))}
{/* Tailwind CSS CDN */}
{currentPage === 'home' && (
)}
{topics.map(topic => (
currentPage === topic.id && (
);
}
export default App;
Selamat Datang di Modul Matematika!
Modul ini akan membantu Anda memahami konsep bilangan berpangkat dan bentuk akar, serta cara menyelesaikan berbagai operasi terkait. Gunakan navigasi di atas untuk menjelajahi materi, contoh soal, kuis interaktif, dan asesmen akhir.
Selamat belajar!
