Hello World!

import React, { useState } from 'react'; const questions = [ { id: 1, image: "🎣", statement: "Nelayan adalah contoh PROFESI karena membutuhkan sekolah tinggi bertahun-tahun.", isTrue: false, explanation: "Nelayan adalah MATA PENCAHARIAN. Profesi biasanya mensyaratkan pendidikan tinggi atau pelatihan khusus (seperti dokter atau pilot)." }, { id: 2, image: "👨‍⚕️", statement: "Dokter adalah sebuah PROFESI karena memerlukan pendidikan tinggi dan keahlian khusus di bidang medis.", isTrue: true, explanation: "Tepat sekali! Untuk menjadi dokter, seseorang harus kuliah di fakultas kedokteran selama bertahun-tahun." }, { id: 3, image: "🏖️", statement: "Mata pencaharian penduduk yang tinggal di pesisir pantai sebagian besar adalah petani padi.", isTrue: false, explanation: "Salah! Penduduk di pesisir pantai sebagian besar bermata pencaharian sebagai NELAYAN karena dekat dengan laut." }, { id: 4, image: "👩‍🏫", statement: "Guru merupakan sebuah PROFESI karena membutuhkan keahlian khusus dalam mendidik siswa.", isTrue: true, explanation: "Benar! Guru harus belajar ilmu pendidikan agar bisa mengajar dan mendidik siswa dengan baik." }, { id: 5, image: "💡", statement: "Semua profesi adalah mata pencaharian, tetapi tidak semua mata pencaharian adalah profesi.", isTrue: true, explanation: "Hebat! Profesi sudah pasti menghasilkan uang (mata pencaharian), tapi mata pencaharian seperti nelayan tidak disebut profesi karena tidak ada syarat pendidikan formal khusus." }, { id: 6, image: "⛰️", statement: "Menjadi petani teh biasanya adalah mata pencaharian penduduk yang tinggal di dataran rendah.", isTrue: false, explanation: "Kurang tepat! Tanaman teh tumbuh sangat subur di daerah sejuk, yaitu di DATARAN TINGGI." }, { id: 7, image: "✈️", statement: "Pilot adalah contoh PROFESI yang bertugas mengemudikan pesawat terbang.", isTrue: true, explanation: "Benar! Pilot harus menempuh sekolah penerbangan khusus dan memiliki lisensi terbang." }, { id: 8, image: "🥬", statement: "Pedagang sayur di pasar tradisional adalah contoh sebuah profesi yang memerlukan ijazah sarjana.", isTrue: false, explanation: "Pedagang sayur adalah MATA PENCAHARIAN yang mulia, tetapi tidak mewajibkan syarat ijazah atau pendidikan khusus." }, { id: 9, image: "🏛️", statement: "Arsitek adalah profesi yang memiliki keahlian khusus untuk merancang sebuah bangunan.", isTrue: true, explanation: "Betul! Arsitek harus belajar ilmu teknik arsitektur untuk bisa merancang bangunan yang kuat dan indah." }, { id: 10, image: "💰", statement: "Mata pencaharian adalah pekerjaan atau aktivitas yang dilakukan untuk memenuhi kebutuhan hidup sehari-hari.", isTrue: true, explanation: "Tepat! Apapun pekerjaannya, jika tujuannya untuk memenuhi kebutuhan hidup disebut mata pencaharian." }, { id: 11, image: "🏭", statement: "Pekerja atau buruh pabrik adalah contoh profesi yang mewajibkan seseorang memiliki gelar sarjana.", isTrue: false, explanation: "Buruh pabrik adalah MATA PENCAHARIAN. Biasanya tidak mensyaratkan gelar sarjana spesifik layaknya sebuah profesi." }, { id: 12, image: "👮", statement: "Polisi adalah profesi yang bertugas menjaga keamanan dan ketertiban masyarakat.", isTrue: true, explanation: "Benar! Untuk menjadi polisi, seseorang harus menempuh pendidikan khusus di akademi kepolisian." }, { id: 13, image: "🏙️", statement: "Di daerah perkotaan, mata pencaharian penduduknya biasanya sama semua, yaitu bertani.", isTrue: false, explanation: "Salah! Di perkotaan, mata pencaharian sangat BERAGAM (bermacam-macam), seperti pegawai kantor, pedagang, buruh, dan berbagai profesi lainnya." }, { id: 14, image: "🏥", statement: "Perawat adalah contoh profesi yang bekerja di bidang kesehatan untuk merawat orang sakit.", isTrue: true, explanation: "Benar sekali! Perawat menempuh pendidikan ilmu keperawatan yang mendalam." }, { id: 15, image: "🪑", statement: "Pengrajin kayu adalah contoh mata pencaharian yang sangat mengandalkan keterampilan tangan.", isTrue: true, explanation: "Betul! Pengrajin kayu bekerja dengan keahlian tangannya untuk membuat kursi, meja, atau lemari sebagai sumber penghasilannya." } ]; export default function App() { const [gameState, setGameState] = useState('start'); // start, playing, result const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); const [score, setScore] = useState(0); const [showExplanation, setShowExplanation] = useState(false); const [userAnsweredCorrectly, setUserAnsweredCorrectly] = useState(null); const startGame = () => { setGameState('playing'); setCurrentQuestionIndex(0); setScore(0); setShowExplanation(false); }; const handleAnswer = (answer) => { const currentQuestion = questions[currentQuestionIndex]; const isCorrect = answer === currentQuestion.isTrue; setUserAnsweredCorrectly(isCorrect); setShowExplanation(true); if (isCorrect) { setScore(score + 1); } }; const nextQuestion = () => { if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1); setShowExplanation(false); setUserAnsweredCorrectly(null); } else { setGameState('result'); } }; return ( {/* Header */} Kuis Pintar Kelas 4! 🎓 Mata Pencaharian vs Profesi {/* Main Container */} {/* START SCREEN */} {gameState === 'start' && ( 🤔 Uji Pengetahuanmu! Apakah kamu bisa membedakan mana yang termasuk profesi dan mana yang mata pencaharian biasa? Ada 15 pertanyaan menunggumu! Mulai Bermain! 🚀 )} {/* PLAYING SCREEN */} {gameState === 'playing' && ( {/* Progress Bar */} Soal {currentQuestionIndex + 1} / {questions.length} ⭐ Skor: {score} {/* Image/Icon */} {questions[currentQuestionIndex].image} {/* Statement */} "{questions[currentQuestionIndex].statement}" {/* Buttons */} {!showExplanation ? ( handleAnswer(true)} className="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-4 rounded-2xl text-xl shadow-md transition transform hover:-translate-y-1" > ✅ BENAR handleAnswer(false)} className="flex-1 bg-red-500 hover:bg-red-600 text-white font-bold py-4 rounded-2xl text-xl shadow-md transition transform hover:-translate-y-1" > ❌ SALAH ) : ( /* Explanation Section */ {userAnsweredCorrectly ? '🎉' : '🥺'} {userAnsweredCorrectly ? 'Jawabanmu Tepat!' : 'Oops, Kurang Tepat!'} {questions[currentQuestionIndex].explanation} {currentQuestionIndex < questions.length - 1 ? 'Lanjut ke Soal Berikutnya ➡️' : 'Lihat Hasil Akhir 🏆'} )} )} {/* RESULT SCREEN */} {gameState === 'result' && ( {score > 12 ? '🏆' : score > 7 ? '👍' : '📚'} Permainan Selesai! Skor Akhir Kamu: {score} / 15 {score === 15 ? 'Sempurna! Kamu master materi Profesi & Mata Pencaharian!' : score >= 10 ? 'Bagus sekali! Pemahamanmu sudah sangat mantap.' : 'Tetap semangat! Yuk baca-baca lagi bukunya dan coba lagi.'} 🔄 Main Lagi )} {/* Footer info */} Materi IPS Kelas 4 • Tema Pekerjaan ); }