import React, { useState, useEffect } from 'react';
import { Clock, ArrowRight, ArrowLeft, Trophy, User, Building, CheckCircle2, XCircle, Printer, Award, BookOpen } from 'lucide-react';
// === BANK SOAL DARI MODUL 1 KEUANGAN NEGARA ===
const bankSoal = [
{
text: "Secara sederhana, apakah yang dimaksud dengan Keuangan Negara menurut Undang-Undang?",
options: [
{ text: "Semua hak dan kewajiban milik negara yang nilainya bisa dihitung dengan uang, termasuk segala kekayaannya", isCorrect: true },
{ text: "Hanya penerimaan pajak dan bukan pajak yang masuk ke kas negara", isCorrect: false },
{ text: "Anggaran yang disetujui DPR untuk membiayai operasional pemerintah pusat", isCorrect: false },
{ text: "Seluruh investasi pemerintah pada BUMN dan lembaga internasional", isCorrect: false },
{ text: "Hutang luar negeri dan dalam negeri untuk pembiayaan infrastruktur", isCorrect: false }
],
explanation: "Berdasarkan Modul Bab 1, Keuangan Negara adalah semua hak dan kewajiban milik negara yang nilainya bisa dihitung dengan uang, serta kekayaan yang menjadi milik negara akibat pelaksanaan hak dan kewajiban tersebut."
},
{
text: "Berikut ini yang termasuk dalam elemen 'Hak Negara' dalam ruang lingkup Keuangan Negara adalah...",
options: [
{ text: "Memungut pajak, mencetak dan mengedarkan uang, serta melakukan pinjaman", isCorrect: true },
{ text: "Menyelenggarakan layanan umum bagi masyarakat dan membayar utang", isCorrect: false },
{ text: "Mendirikan perusahaan swasta dan mengatur harga pasar", isCorrect: false },
{ text: "Menyediakan lapangan kerja bagi seluruh warga negara", isCorrect: false },
{ text: "Melakukan penyitaan aset bagi warga yang tidak membayar pajak", isCorrect: false }
],
explanation: "Sesuai ruang lingkupnya, Hak Negara meliputi hak untuk memungut pajak dari masyarakat, mencetak dan mengedarkan uang Rupiah, serta hak untuk mengajukan pinjaman/utang."
},
{
text: "Tanggung jawab pemerintah untuk membiayai berbagai layanan publik (pendidikan, kesehatan, infrastruktur) serta membayar tagihan atau utang diklasifikasikan sebagai...",
options: [
{ text: "Kewajiban Negara", isCorrect: true },
{ text: "Hak Negara", isCorrect: false },
{ text: "Pengeluaran Ekstra", isCorrect: false },
{ text: "Fungsi Alokasi", isCorrect: false },
{ text: "Belanja Modal", isCorrect: false }
],
explanation: "Kewajiban Negara adalah tanggung jawab pemerintah untuk membiayai layanan umum bagi masyarakat dan membayar tagihan atau utang kepada pihak ketiga."
},
{
text: "Kekayaan pihak lain yang dikuasai pemerintah termasuk dalam ruang lingkup Keuangan Negara. Contoh dari kekayaan ini adalah...",
options: [
{ text: "Harta pihak lain yang dikuasai pemerintah untuk kepentingan umum atau tugas pemerintahan", isCorrect: true },
{ text: "Gedung-gedung kementerian dan kendaraan dinas pejabat", isCorrect: false },
{ text: "Modal negara yang dipisahkan untuk BUMN/BUMD", isCorrect: false },
{ text: "Penerimaan Pajak Pertambahan Nilai", isCorrect: false },
{ text: "Surat Berharga Negara yang dibeli oleh investor asing", isCorrect: false }
],
explanation: "Kekayaan pihak lain yang dikuasai pemerintah mencakup harta milik pihak lain yang dikuasai untuk kepentingan umum/tugas pemerintahan, serta kekayaan yang didapat karena menggunakan fasilitas negara."
},
{
text: "Pemegang kekuasaan tertinggi dalam pengelolaan keuangan negara di Indonesia sebagai bagian dari kekuasaan pemerintahan adalah...",
options: [
{ text: "Presiden", isCorrect: true },
{ text: "Menteri Keuangan", isCorrect: false },
{ text: "Dewan Perwakilan Rakyat (DPR)", isCorrect: false },
{ text: "Badan Pemeriksa Keuangan (BPK)", isCorrect: false },
{ text: "Bank Indonesia (BI)", isCorrect: false }
],
explanation: "Sesuai UU Keuangan Negara dan materi Pendelegasian Kewenangan, kekuasaan pengelolaan keuangan negara dipegang oleh Presiden selaku Kepala Pemerintahan."
},
{
text: "Dalam pendelegasian kewenangan pengelolaan keuangan negara dari Presiden, Menteri Keuangan bertindak sebagai...",
options: [
{ text: "Pengelola Fiskal dan Wakil Pemerintah dalam kepemilikan kekayaan negara yang dipisahkan", isCorrect: true },
{ text: "Pengguna Anggaran dan Pengguna Barang Kementerian/Lembaga", isCorrect: false },
{ text: "Pemegang Kekuasaan Pengelolaan Keuangan Daerah", isCorrect: false },
{ text: "Auditor Independen Keuangan Negara", isCorrect: false },
{ text: "Pelaksana Kebijakan Moneter", isCorrect: false }
],
explanation: "Menteri Keuangan diberikan kuasa oleh Presiden sebagai Pengelola Fiskal, Bendahara Umum Negara, dan Wakil Pemerintah dalam kepemilikan kekayaan negara yang dipisahkan."
},
{
text: "Peran para Menteri dan Pimpinan Lembaga (selain Menteri Keuangan) dalam sistem pendelegasian pengelolaan keuangan negara adalah sebagai...",
options: [
{ text: "Pengguna Anggaran atau Pengguna Barang pada kementerian/lembaga yang dipimpinnya", isCorrect: true },
{ text: "Bendahara Umum Negara", isCorrect: false },
{ text: "Wakil Pemerintah dalam kepemilikan saham BUMN", isCorrect: false },
{ text: "Perumus kebijakan fiskal makro", isCorrect: false },
{ text: "Penilai kinerja pelaksanaan anggaran nasional", isCorrect: false }
],
explanation: "Menteri/Pimpinan Lembaga dikuasakan oleh Presiden untuk menjadi Pengguna Anggaran/Pengguna Barang pada Kementerian/Lembaga yang dipimpinnya masing-masing."
},
{
text: "Pendekatan yang digunakan dalam merumuskan definisi keuangan negara ditinjau dari beberapa aspek utama, yaitu...",
options: [
{ text: "Objek, Subjek, Proses, dan Tujuan", isCorrect: true },
{ text: "Perencanaan, Pelaksanaan, Pengawasan, dan Evaluasi", isCorrect: false },
{ text: "Hak, Kewajiban, Penerimaan, dan Pengeluaran", isCorrect: false },
{ text: "Makro, Mikro, Regional, dan Global", isCorrect: false },
{ text: "Hukum, Ekonomi, Sosial, dan Politik", isCorrect: false }
],
explanation: "Dalam teori dan Bab 1 Modul Keuangan Negara, pendekatan untuk merumuskan keuangan negara ditinjau dari sisi Objek, Subjek, Proses, dan Tujuan."
},
{
text: "Asas-asas Umum Pengelolaan Keuangan Negara meliputi hal-hal berikut, kecuali...",
options: [
{ text: "Asas Subsidiaritas", isCorrect: true },
{ text: "Asas Tahunan", isCorrect: false },
{ text: "Asas Universalitas", isCorrect: false },
{ text: "Asas Kesatuan", isCorrect: false },
{ text: "Asas Spesialitas", isCorrect: false }
],
explanation: "Asas-asas umum pengelolaan keuangan negara antara lain asas tahunan, universalitas, kesatuan, spesialitas, akuntabilitas, dan proporsionalitas. Asas subsidiaritas tidak termasuk dalam kaidah ini."
},
{
text: "Asas pengelolaan keuangan negara yang mengharuskan semua penerimaan dan pengeluaran negara disajikan secara utuh (tidak ada yang dicatat di luar anggaran/off-budget) adalah asas...",
options: [
{ text: "Universalitas", isCorrect: true },
{ text: "Kesatuan", isCorrect: false },
{ text: "Spesialitas", isCorrect: false },
{ text: "Tahunan", isCorrect: false },
{ text: "Akuntabilitas", isCorrect: false }
],
explanation: "Asas Universalitas mengharuskan agar setiap transaksi keuangan ditampilkan secara utuh/bruto dalam satu dokumen anggaran agar transparan."
}
];
// --- HELPER FUNCTION: SHUFFLE ARRAY ---
function shuffleArray(array) {
let shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
export default function App() {
// STATE MANAGEMENT
const [step, setStep] = useState('login'); // login, quiz, result
const [user, setUser] = useState({ name: '', instansi: '' });
const [errorMsg, setErrorMsg] = useState('');
const [questions, setQuestions] = useState([]);
const [currentIndex, setCurrentIndex] = useState(0);
const [userAnswers, setUserAnswers] = useState([]); // Array to track answers for each question
const [timeLeft, setTimeLeft] = useState(600); // 10 menit = 600 detik
const [score, setScore] = useState(0);
// LOGIC: Start Quiz
const handleStart = (e) => {
e.preventDefault();
if (!user.name.trim() || !user.instansi.trim()) {
setErrorMsg('Mohon isi Nama dan Instansi terlebih dahulu!');
return;
}
setErrorMsg('');
// Prepare questions (Shuffle questions, and shuffle options within questions)
const shuffledQuestions = shuffleArray(bankSoal).map(q => ({
...q,
options: shuffleArray(q.options)
}));
setQuestions(shuffledQuestions);
setUserAnswers(new Array(shuffledQuestions.length).fill(null));
setCurrentIndex(0);
setTimeLeft(600); // Reset timer
setScore(0);
setStep('quiz');
};
// LOGIC: Timer
useEffect(() => {
let timer;
if (step === 'quiz' && timeLeft > 0) {
timer = setInterval(() => {
setTimeLeft((prev) => prev - 1);
}, 1000);
} else if (timeLeft === 0 && step === 'quiz') {
handleFinish();
}
return () => clearInterval(timer);
}, [step, timeLeft]);
// LOGIC: Format Time
const formatTime = (seconds) => {
const m = Math.floor(seconds / 60).toString().padStart(2, '0');
const s = (seconds % 60).toString().padStart(2, '0');
return `${m}:${s}`;
};
// LOGIC: Select Answer
const handleAnswerSelect = (optionIndex, isCorrect) => {
// Prevent changing answer if already answered
if (userAnswers[currentIndex] !== null) return;
const newAnswers = [...userAnswers];
newAnswers[currentIndex] = {
selectedOptionIndex: optionIndex,
isCorrect: isCorrect
};
setUserAnswers(newAnswers);
};
// LOGIC: Navigation
const handleNext = () => {
if (currentIndex < questions.length - 1) {
setCurrentIndex(currentIndex + 1);
}
};
const handlePrev = () => {
if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1);
}
};
const handleFinish = () => {
let finalScore = 0;
userAnswers.forEach(ans => {
if (ans && ans.isCorrect) {
finalScore += 10; // 10 questions = max 100
}
});
setScore(finalScore);
setStep('result');
};
// LOGIC: Print Certificate
const handlePrint = () => {
window.print();
};
// === RENDER: LOGIN SCREEN ===
if (step === 'login') {
return (
Kuis Interaktif OAPBN
Modul 1: Konsep Dasar Keuangan Negara
{/* HEADER */}
{currentAnswer.isCorrect ? <>
)}
{/* NAVIGATION FOOTER */}
Peserta: {user.name}
{user.instansi}
Soal {currentIndex + 1} dari {questions.length}
{/* OPTIONS */}
{currentQ.text}
{currentQ.options.map((option, idx) => {
const label = String.fromCharCode(65 + idx); // A, B, C, D, E
// Styling logic based on answer status
let btnStyle = "border-gray-200 bg-white hover:border-blue-400 hover:bg-blue-50 text-gray-700";
if (isAnswered) {
if (option.isCorrect) {
btnStyle = "border-green-500 bg-green-50 text-green-800 ring-2 ring-green-500 ring-opacity-50"; // Correct answer highlighted
} else if (currentAnswer.selectedOptionIndex === idx && !option.isCorrect) {
btnStyle = "border-red-500 bg-red-50 text-red-800 ring-2 ring-red-500 ring-opacity-50"; // Wrong answer selected
} else {
btnStyle = "border-gray-200 bg-gray-50 opacity-60 text-gray-500 cursor-not-allowed"; // Other unselected wrong answers
}
}
return (
);
})}
{/* FEEDBACK BOX */}
{isAnswered && (
{currentAnswer.isCorrect ? <>
Pembahasan: {currentQ.explanation}
{currentIndex < questions.length - 1 ? (
) : (
)}
{/* Certificate Card */}
);
}
return null;
}
Sertifikat Kompetensi
KUIS INTERAKTIF MODUL OAPBN 2025
Diberikan kepada:
{user.name}
{user.instansi}
Telah menyelesaikan kuis evaluasi pemahaman Konsep Dasar Keuangan Negara dengan pencapaian akhir:
{score}
/ 100 POIN
Predikat: {predikat}
Modul: Konsep Dasar APBN
Tahun: 2025
Disahkan Oleh Sistem,
AI Evaluator OAPBN