<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teyvat Science: Petualangan Gerak & Gaya</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Poppins & Genshin-like vibe -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
genshin: {
dark: '#121629',
card: '#1e2337',
border: '#3a4163',
gold: '#f3c653',
goldHover: '#ffd76a',
accent: '#47d1d8',
blueDark: '#0b0f19',
pu purprple: '#b275ff',
pyro: '#ef4444',
hydro:
'#3b82f6',
anemo: '#10b981',
cryo: '#67e8f9',
electro: '#a855f7',
geo: '#eab308',
dendro: '#84cc16'
}
},
fontFamily: {
sans: ['Poppins', 'sans-serif'],
}
}
}
}
</script>
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #0b0f19;
color: #e5e7eb;
overflow-x: hidden;
background-image: radial-gradient(circle at 50% 20%, #1a2238 0%, #0b0f19 100%);
min-height: 100vh;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #121629;
}
::-webkit-scrollbar-thumb {
background: #3a4163;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #f3c653;
}
.glow-gold {
box-shadow: 0 0 20px rgba(243, 198, 83, 0.4);
}
.glow-blue {
box-shadow: 0 0 20px rgba(71, 209, 216, 0.4);
}
.genshin-panel {
background: linear-gradient(135deg, rgba(30, 35, 55, 0.95) 0%, rgba(18, 22, 41, 0.98) 100%);
border: 2px solid #3a4163;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
}
.genshin-button {
background: linear-gradient(to bottom, #f3c653, #d9a735);
color: #121629;
font-weight: 700;
border: 1px solid #fff5c0;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(243, 198, 83, 0.3);
}
.genshin-button:hover {
background: linear-gradient(to bottom, #ffd76a, #f3c653);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(243, 198, 83, 0.5);
}
.genshin-button:active {
transform: translateY(1px);
}
.genshin-button-blue {
background: linear-gradient(to bottom, #47d1d8, #2a9ea5);
color: #0b0f19;
font-weight: 700;
border: 1px solid #a5f3fc;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(71, 209, 216, 0.3);
}
.genshin-button-blue:hover {
background: linear-gradient(to bottom, #67e8f9, #47d1d8);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(71, 209, 216, 0.5);
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.pulse-glow {
animation: pulseGlow 2s ease-in-out infinite;
}
</style>
</head>
<body class="min-h-screen flex flex-col justify-between select-none">
<!-- Top Header / Navigation Bar -->
<header class="w-full bg-genshin-card border-b border-genshin-border px-4 py-3 sticky top-0 z-50 shadow-md">
<div class="max-w-7xl mx-auto flex flex-wrap justify-between items-center">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-yellow-500 to-amber-300 flex items-center justify-center text-genshin-dark font-black text-xl shadow-lg border border-amber-200">
<i class="fa-solid fa-atom"></i>
</div>
<div>
<h1 class="text-base md:text-lg font-bold text-genshin-gold tracking-wide">Teyvat Science</h1>
<p class="text-xs text-slate-400">SMPN 4 Banjar • Guru: Ketut Supeksa, S.Pd</p>
</div>
</div>
<!-- In-game Status Header (Hidden on landing page) -->
<div id="game-status-bar" class="hidden items-center space-x-4 md:space-x-6 mt-2 sm:mt-0">
<div class="flex items-center space-x-2 bg-genshin-dark px-3 py-1.5 rounded-full border border-genshin-border">
<i class="fa-solid fa-coins text-genshin-gold animate-bounce"></i>
<span id="score-display" class="font-bold text-genshin-gold">0</span>
<span class="text-xs text-slate-400">Mora</span>
</div>
<div class="flex items-center space-x-2 bg-genshin-dark px-3 py-1.5 rounded-full border border-genshin-border">
<i class="fa-solid fa-gem text-cyan-400"></i>
<span id="primogem-display" class="font-bold text-cyan-400">0</span>
<span class="text-xs text-slate-400">Primogems</span>
</div>
<div class="flex items-center space-x-2 bg-genshin-dark px-3 py-1.5 rounded-full border border-genshin-border">
<i class="fa-solid fa-heart text-red-500"></i>
<div class="w-20 bg-slate-700 h-2.5 rounded-full overflow-hidden">
<div id="hp-bar" class="bg-red-500 h-full w-full transition-all duration-300"></div>
</div>
<span id="hp-text" class="text-xs font-bold text-red-400">100/100</span>
</div>
</div>
</div>
</header>
<!-- Main Container -->
<main class="flex-grow flex items-center justify-center p-4 md:p-6 max-w-6xl mx-auto w-full">
<!-- SCREEN 1: LOGIN / IDENTITAS SISWA -->
<div id="screen-login" class="w-full max-w-xl genshin-panel rounded-2xl p-6 md:p-8 relative overflow-hidden">
<div class="absolute -right-16 -top-16 w-48 h-48 bg-amber-500/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -left-16 -bottom-16 w-48 h-48 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="text-center mb-6">
<span class="bg-amber-500/20 text-genshin-gold text-xs font-semibold px-3 py-1 rounded-full border border-amber-500/30 uppercase tracking-widest">Fase D • Kelas 7 IPA</span>
<h2 class="text-2xl md:text-3xl font-extrabold text-white mt-2">Petualangan Gerak & Gaya</h2>
<p class="text-sm text-slate-300 mt-1">Eksplorasi Hukum Newton & Jenis Gaya di Dunia Teyvat bersama Paimon dan Para Traveler!</p>
</div>
<form id="form-login" class="space-y-4">
<div>
<label class="block text-sm font-medium text-slate-300 mb-1"><i class="fa-solid fa-user text-genshin-gold mr-2"></i>Nama Lengkap Siswa</label>
<input type="text" id="input-name" required placeholder="Contoh: Kadek Ari Pratama"
class="w-full bg-genshin-dark border border-genshin-border rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-genshin-gold transition-colors text-base">
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-300 mb-1"><i class="fa-solid fa-graduation-cap text-genshin-gold mr-2"></i>Kelas</label>
<select id="input-class" required class="w-full bg-genshin-dark border border-genshin-border rounded-xl px-4 py-3 text-white focus:outline-none focus:border-genshin-gold transition-colors text-base">
<option value="" disabled selected>Pilih Kelas</option>
<option value="7A">Kelas 7A</option>
<option value="7B">Kelas 7B</option>
<option value="7C">Kelas 7C</option>
<option value="7D">Kelas 7D</option>
<option value="7E">Kelas 7E</option>
<option value="7F">Kelas 7F</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-300 mb-1"><i class="fa-solid fa-id-badge text-genshin-gold mr-2"></i>No Absen</label>
<input type="number" id="input-absen" min="1" max="50" required placeholder="Contoh: 18"
class="w-full bg-genshin-dark border border-genshin-border rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-genshin-gold transition-colors text-base">
</div>
</div>
<div class="pt-4">
<button type="submit" class="w-full genshin-button py-3.5 px-6 rounded-xl text-lg flex items-center justify-center space-x-3 shadow-lg">
<span>Mulai Petualangan</span>
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</form>
<div class="mt-6 pt-4 border-t border-slate-700/50 text-center text-xs text-slate-400">
<p>Mata Pelajaran: Ilmu Pengetahuan Alam (IPA) • SMPN 4 Banjar</p>
<p class="text-amber-300/80 mt-0.5">Guru Pengampu: Ketut Supeksa, S.Pd</p>
</div>
</div>
<!-- SCREEN 2: PILIH KARAKTER -->
<div id="screen-character" class="hidden w-full max-w-5xl genshin-panel rounded-2xl p-6 md:p-8">
<div class="text-center mb-6">
<span class="text-genshin-gold text-xs font-semibold uppercase tracking-widest">Pilih Pahlawan Teyvat-mu</span>
<h2 class="text-2xl md:text-3xl font-extrabold text-white mt-1">Siapa yang Akan Menemanimu Belajar?</h2>
<p class="text-sm text-slate-300 mt-1">Referensi resmi poster Teyvat. Pilih salah satu karakter di bawah untuk memulai!</p>
</div>
<!-- Reference Poster Showcase for Selection -->
<div class="mb-6 bg-slate-900 border-2 border-genshin-border rounded-2xl p-4 shadow-xl overflow-hidden">
<p class="text-xs text-amber-300 font-semibold mb-3 text-center"><i class="fa-solid fa-image mr-1"></i> Poster Resmi Referensi Karakter (Klik Tombol di Bawah untuk Memilih)</p>
<div class="relative w-full rounded-xl overflow-hidden border border-slate-700 shadow-inner max-h-[350px] flex items-center justify-center bg-slate-950">
<img src="https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png" alt="Genshin Impact Character Lineup Poster" class="w-full h-full object-contain max-h-[320px]">
</div>
</div>
<!-- Character Grid Selection Buttons -->
<div id="character-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-6 max-h-[40vh] overflow-y-auto p-1">
<!-- Dynamically populated via JS -->
</div>
<div class="flex justify-between items-center pt-4 border-t border-slate-700">
<button id="btn-back-to-login" class="bg-slate-700 hover:bg-slate-600 text-slate-200 font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm">
<i class="fa-solid fa-arrow-left mr-2"></i> Kembali
</button>
<button id="btn-start-game" disabled class="genshin-button px-8 py-3 rounded-xl text-base opacity-50 cursor-not-allowed">
Masuk ke Domain <i class="fa-solid fa-dungeon ml-2"></i>
</button>
</div>
</div>
<!-- SCREEN 3: OVERWORLD / DOMAIN SELECTOR -->
<div id="screen-overworld" class="hidden w-full max-w-5xl genshin-panel rounded-2xl p-6 md:p-8 relative">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 pb-4 border-b border-slate-700 gap-4">
<div class="flex items-center space-x-4">
<div id="selected-char-avatar" class="w-14 h-14 rounded-full border-2 border-genshin-gold bg-slate-800 flex items-center justify-center text-2xl shadow-lg">
⭐
</div>
<div>
<h3 id="player-welcome-text" class="text-xl font-bold text-white">Halo, Traveler!</h3>
<p class="text-xs text-genshin-gold font-medium" id="selected-char-name">Karakter: -</p>
</div>
</div>
<div class="bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2 text-xs flex items-center space-x-3">
<div class="flex items-center space-x-1.5">
<i class="fa-solid fa-user-graduate text-genshin-gold"></i>
<span id="info-nama-kelas" class="font-semibold text-slate-200">-</span>
</div>
<span class="text-slate-600">|</span>
<div class="flex items-center space-x-1.5">
<i class="fa-solid fa-chalkboard-user text-cyan-400"></i>
<span class="text-slate-300">Ketut Supeksa, S.Pd</span>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="text-lg font-bold text-white mb-2 flex items-center">
<i class="fa-solid fa-map text-amber-400 mr-2"></i> Pilih Domain Misi Gerak & Gaya (Fase D)
</h4>
<p class="text-xs text-slate-300">Selesaikan ketiga Domain di bawah ini untuk mendapatkan sertifikat kelulusan dari Akademi Sumeru & SMPN 4 Banjar!</p>
</div>
<!-- Domain Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<!-- Domain 1 -->
<div onclick="startDomain(1)" class="bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-amber-500/40 hover:border-amber-400 rounded-2xl p-5 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg group relative overflow-hidden">
<div class="absolute top-0 right-0 bg-amber-500/20 text-amber-300 text-[10px] font-bold px-3 py-1 rounded-bl-xl border-l border-b border-amber-500/30">BABAK 1</div>
<div class="w-12 h-12 rounded-xl bg-amber-500/20 border border-amber-500/40 flex items-center justify-center text-amber-400 text-xl mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-hand-fist"></i>
</div>
<h5 class="text-base font-bold text-white mb-1">Domain 1: Jenis Gaya</h5>
<p class="text-xs text-slate-400 mb-4">Eksplorasi Gaya Gesek, Gaya Otot, Gaya Magnet, dan Gaya Gravitasi di Teyvat.</p>
<div class="flex justify-between items-center text-xs pt-3 border-t border-slate-700">
<span id="domain1-status" class="text-amber-400 font-semibold"><i class="fa-solid fa-play mr-1"></i> Mulai Misi</span>
<span id="domain1-score" class="text-slate-400">Skor: 0/100</span>
</div>
</div>
<!-- Domain 2 -->
<div onclick="startDomain(2)" class="bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-cyan-500/40 hover:border-cyan-400 rounded-2xl p-5 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg group relative overflow-hidden">
<div class="absolute top-0 right-0 bg-cyan-500/20 text-cyan-300 text-[10px] font-bold px-3 py-1 rounded-bl-xl border-l border-b border-cyan-500/30">BABAK 2</div>
<div class="w-12 h-12 rounded-xl bg-cyan-500/20 border border-cyan-500/40 flex items-center justify-center text-cyan-400 text-xl mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-scale-balanced"></i>
</div>
<h5 class="text-base font-bold text-white mb-1">Domain 2: Hukum Newton</h5>
<p class="text-xs text-slate-400 mb-4">Pahami Hukum I, II, dan III Newton dalam petualangan sehari-hari di Mondstadt & Liyue.</p>
<div class="flex justify-between items-center text-xs pt-3 border-t border-slate-700">
<span id="domain2-status" class="text-cyan-400 font-semibold"><i class="fa-solid fa-play mr-1"></i> Mulai Misi</span>
<span id="domain2-score" class="text-slate-400">Skor: 0/100</span>
</div>
</div>
<!-- Domain 3 -->
<div onclick="startDomain(3)" class="bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-purple-500/40 hover:border-purple-400 rounded-2xl p-5 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg group relative overflow-hidden">
<div class="absolute top-0 right-0 bg-purple-500/20 text-purple-300 text-[10px] font-bold px-3 py-1 rounded-bl-xl border-l border-b border-purple-500/30">BABAK 3</div>
<div class="w-12 h-12 rounded-xl bg-purple-500/20 border border-purple-500/40 flex items-center justify-center text-purple-400 text-xl mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-gauge-high"></i>
</div>
<h5 class="text-base font-bold text-white mb-1">Domain 3: Kelajuan & Kecepatan</h5>
<p class="text-xs text-slate-400 mb-4">Uji kemampuan hitung gerak lurus beraturan (GLB) & percepatan di dunia Teyvat.</p>
<div class="flex justify-between items-center text-xs pt-3 border-t border-slate-700">
<span id="domain3-status" class="text-purple-400 font-semibold"><i class="fa-solid fa-play mr-1"></i> Mulai Misi</span>
<span id="domain3-score" class="text-slate-400">Skor: 0/100</span>
</div>
</div>
</div>
<!-- Certificate Button Banner -->
<div id="certificate-banner-container" class="hidden bg-gradient-to-r from-amber-500/20 via-yellow-500/10 to-amber-500/20 border border-amber-500/50 rounded-2xl p-5 flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 rounded-full bg-amber-500 text-genshin-dark flex items-center justify-center text-2xl font-bold shadow-lg animate-bounce">
<i class="fa-solid fa-award"></i>
</div>
<div>
<h5 class="text-base font-bold text-amber-300">Semua Domain Telah Ditaklukkan!</h5>
<p class="text-xs text-slate-300">Sertifikat kelulusan Akademik Teyvat Science siap diterbitkan.</p>
</div>
</div>
<button onclick="showCertificate()" class="genshin-button px-6 py-3 rounded-xl text-sm font-bold flex items-center space-x-2">
<i class="fa-solid fa-certificate"></i>
<span>Buka Sertifikat Kelulusan</span>
</button>
</div>
</div>
<!-- SCREEN 4: QUIZ / BATTLE DOMAIN -->
<div id="screen-quiz" class="hidden w-full max-w-3xl genshin-panel rounded-2xl p-6 md:p-8 relative">
<!-- Quiz Header -->
<div class="flex justify-between items-center mb-6 pb-3 border-b border-slate-700">
<div class="flex items-center space-x-3">
<button onclick="backToOverworld()" class="text-slate-400 hover:text-white transition-colors">
<i class="fa-solid fa-arrow-left text-lg"></i>
</button>
<div>
<h4 id="quiz-domain-title" class="text-base md:text-lg font-bold text-genshin-gold">Domain 1: Jenis-jenis Gaya</h4>
<p id="quiz-progress-text" class="text-xs text-slate-400">Pertanyaan 1 dari 5</p>
</div>
</div>
<div class="flex items-center space-x-2 bg-slate-800 px-3 py-1.5 rounded-xl border border-slate-700 text-xs">
<i class="fa-solid fa-star text-amber-400"></i>
<span id="quiz-score-live" class="font-bold text-amber-300">0 Poin</span>
</div>
</div>
<!-- Paimon Guide Box -->
<div class="bg-blue-950/40 border border-blue-500/30 rounded-2xl p-4 mb-6 flex items-start space-x-4">
<div class="w-12 h-12 rounded-full bg-blue-500/20 border border-blue-400/50 flex-shrink-0 flex items-center justify-center text-2xl floating">
🧚♀️
</div>
<div>
<div class="text-xs font-bold text-cyan-300 mb-1">Paimon (Pemandu Petualangan):</div>
<p id="paimon-dialog" class="text-xs md:text-sm text-slate-200 leading-relaxed">
"Wahai Traveler, perhatikan baik-baik soal di bawah ini! Guru Ketut Supeksa bilang konsep ini sangat penting untuk ulangan IPA kalian lho!"
</p>
</div>
</div>
<!-- Question Card -->
<div class="mb-6">
<h3 id="question-text" class="text-base md:text-lg font-bold text-white mb-4 leading-snug">
<!-- Pertanyaan dimuat di sini -->
</h3>
<!-- Options List -->
<div id="options-container" class="space-y-3">
<!-- Opsi jawaban dimuat di sini -->
</div>
</div>
<!-- Explanation Box (Hidden until answered) -->
<div id="explanation-box" class="hidden bg-slate-900/90 border rounded-2xl p-4 mt-4 transition-all">
<div class="flex items-center space-x-2 mb-1">
<i id="explanation-icon" class="fa-solid fa-circle-check text-green-400"></i>
<span id="explanation-title" class="font-bold text-sm text-white">Benar!</span>
</div>
<p id="explanation-text" class="text-xs md:text-sm text-slate-300 leading-relaxed mb-4">
<!-- Penjelasan IPA -->
</p>
<button onclick="nextQuestion()" class="w-full genshin-button py-2.5 rounded-xl text-sm font-bold flex items-center justify-center space-x-2">
<span id="next-btn-text">Lanjut Pertanyaan Berikutnya</span>
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- SCREEN 5: SERTIFIKAT KELULUSAN AKADEMI TEYVAT -->
<div id="screen-certificate" class="hidden w-full max-w-4xl genshin-panel rounded-2xl p-6 md:p-10 relative overflow-hidden">
<div class="absolute -right-20 -top-20 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -left-20 -bottom-20 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="text-center border-b border-amber-500/30 pb-6 mb-6">
<div class="inline-flex items-center space-x-2 bg-amber-500/20 text-amber-300 text-xs font-bold px-4 py-1.5 rounded-full border border-amber-500/40 mb-3">
<i class="fa-solid fa-award"></i>
<span>SERTIFIKAT RESMI AKADEMI TEYVAT & SMPN 4 BANJAR</span>
</div>
<h2 class="text-2xl md:text-4xl font-extrabold text-white tracking-wide">Sertifikat Kelulusan Sains</h2>
<p class="text-xs md:text-sm text-slate-300 mt-1">Diberikan sebagai penghargaan atas keberhasilan menyelesaikan misi materi Gerak & Gaya (Fase D)</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="bg-slate-900/80 border border-slate-700 rounded-xl p-4 flex flex-col justify-center">
<span class="text-xs text-slate-400">Identitas Siswa</span>
<h4 id="cert-nama" class="text-lg font-bold text-white mt-1">-</h4>
<p class="text-xs text-amber-300 mt-0.5">Kelas: <span id="cert-kelas">-</span> | No Absen: <span id="cert-absen">-</span></p>
</div>
<div class="bg-slate-900/80 border border-slate-700 rounded-xl p-4 flex items-center space-x-4">
<div id="cert-char-avatar" class="w-12 h-12 rounded-full border border-amber-400 bg-slate-800 overflow-hidden flex items-center justify-center">⭐</div>
<div>
<span class="text-xs text-slate-400">Karakter Pendamping</span>
<h4 id="cert-char-name" class="text-sm font-bold text-white mt-0.5">-</h4>
</div>
</div>
<div class="bg-slate-900/80 border border-slate-700 rounded-xl p-4 flex flex-col justify-center">
<span class="text-xs text-slate-400">Predikat Kelulusan</span>
<h4 id="cert-predikat" class="text-lg font-bold text-green-400 mt-1">Sangat Baik (A)</h4>
<p class="text-xs text-slate-400 mt-0.5">Mata Pelajaran IPA Kelas 7</p>
</div>
</div>
<!-- Domain Score breakdown -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
<div class="bg-amber-950/30 border border-amber-500/30 rounded-xl p-3 text-center">
<span class="text-xs text-amber-300 font-semibold">Domain 1 (Jenis Gaya)</span>
<h3 id="cert-score-1" class="text-xl font-extrabold text-white mt-1">0/100</h3>
</div>
<div class="bg-cyan-950/30 border border-cyan-500/30 rounded-xl p-3 text-center">
<span class="text-xs text-cyan-300 font-semibold">Domain 2 (Hukum Newton)</span>
<h3 id="cert-score-2" class="text-xl font-extrabold text-white mt-1">0/100</h3>
</div>
<div class="bg-purple-950/30 border border-purple-500/30 rounded-xl p-3 text-center">
<span class="text-xs text-purple-300 font-semibold">Domain 3 (Kelajuan & Kecepatan)</span>
<h3 id="cert-score-3" class="text-xl font-extrabold text-white mt-1">0/100</h3>
</div>
</div>
<div class="bg-gradient-to-r from-slate-900 to-amber-950/50 border border-slate-700 rounded-2xl p-5 mb-6 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-coins text-genshin-gold text-xl"></i>
<div>
<span class="text-[10px] text-slate-400 block">Total Mora Diperoleh</span>
<span id="cert-total-score" class="text-base font-bold text-genshin-gold">0</span>
</div>
</div>
<div class="flex items-center space-x-2 border-l border-slate-700 pl-4">
<i class="fa-solid fa-gem text-cyan-400 text-xl"></i>
<div>
<span class="text-[10px] text-slate-400 block">Primogems Bonus</span>
<span id="cert-total-primogem" class="text-base font-bold text-cyan-400">0</span>
</div>
</div>
</div>
<div class="text-right">
<span class="text-xs text-slate-300 block font-medium">Guru Pengampu Mata Pelajaran IPA:</span>
<span class="text-sm font-bold text-amber-300">Ketut Supeksa, S.Pd</span>
<span class="text-[11px] text-slate-400 block">SMPN 4 Banjar</span>
</div>
</div>
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-2">
<button onclick="backToOverworld()" class="w-full sm:w-auto bg-slate-700 hover:bg-slate-600 text-slate-200 font-semibold px-6 py-3 rounded-xl transition-colors text-sm">
<i class="fa-solid fa-arrow-left mr-2"></i> Kembali ke Overworld
</button>
<div class="flex space-x-3 w-full sm:w-auto">
<button onclick="window.print()" class="flex-1 sm:flex-none genshin-button-blue px-6 py-3 rounded-xl text-sm font-bold flex items-center justify-center space-x-2">
<i class="fa-solid fa-print"></i>
<span>Cetak / Simpan PDF</span>
</button>
<button onclick="resetGame()" class="flex-1 sm:flex-none bg-red-600/80 hover:bg-red-600 text-white font-bold px-6 py-3 rounded-xl text-sm transition-colors flex items-center justify-center space-x-2">
<i class="fa-solid fa-rotate-right"></i>
<span>Main Ulang</span>
</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="w-full bg-genshin-card border-t border-genshin-border py-3 px-4 text-center text-xs text-slate-400">
<p>Teyvat Science Game • Kurikulum Merdeka Fase D Kelas 7 • SMPN 4 Banjar</p>
<p class="text-amber-400/90 font-medium mt-0.5">Guru Pengampu: Ketut Supeksa, S.Pd</p>
</footer>
<!-- Script Game Logics -->
<script>
// Global Game State Initialization
let gameState = {
studentName: '',
studentClass: '',
studentAbsen: '',
selectedCharacter: null,
score: 0,
primogems: 0,
hp: 100,
currentDomain: 1,
currentQuestionIndex: 0,
domainScores: { 1: 0, 2: 0, 3: 0 },
domainCompleted: { 1: false, 2: false, 3: false }
};
// Data Domain Soal IPA Gerak & Gaya (Fase D - Kelas 7)
const domainsData = {
1: {
title: "Domain 1: Jenis-jenis Gaya",
questions: [
{
question: "Saat Aether mendorong kotak kargo di pelabuhan Liyue, terjadi gaya sentuh antara tangan Aether dan kotak tersebut. Gaya apakah ini?",
options: ["Gaya Magnet", "Gaya Otot", "Gaya Gravitasi", "Gaya Listrik"],
correct: 1,
explanation: "Benar! Gaya otot adalah gaya yang dihasilkan oleh kerja otot tubuh manusia atau hewan untuk mendorong, menarik, atau mengangkat benda."
},
{
question: "Paimon melihat buah Sunsettia jatuh dari pohon di Mondstadt langsung ke tanah akibat ditarik oleh gaya...",
options: ["Gaya Gesek", "Gaya Pegas", "Gaya Gravitasi Bumi", "Gaya Otot"],
correct: 2,
explanation: "Tepat sekali! Gaya gravitasi bumi adalah gaya tarik yang dialami oleh semua benda bermassa menuju ke pusat bumi."
},
{
question: "Ketika Kaeya meluncur di atas es Dragonspine, gesekan antara sepatu es dan permukaan es menjadi sangat kecil karena...",
options: ["Es sangat kasar", "Es sangat licin / koefisien gesek kecil", "Adanya gaya magnet", "Adanya dorongan angin"],
correct: 1,
explanation: "Benar! Permukaan es yang licin memperkecil gaya gesek sehingga benda lebih mudah meluncur."
},
{
question: "Gaya yang timbul karena dua permukaan benda saling bersentuhan langsung dan berlawanan arah dengan arah gerak benda disebut...",
options: ["Gaya Gesek", "Gaya Magnet", "Gaya Gravitasi", "Gaya Normal"],
correct: 0,
explanation: "Tepat! Gaya gesek selalu menentang arah gerak benda atau arah kecenderungan benda bergerak."
},
{
question: "Manakah di bawah ini yang merupakan contoh pemanfaatan Gaya Pegas?",
options: ["Memanah menggunakan busur panah", "Mendorong batu besar", "Menjemur pakaian di bawah matahari", "Menghidupkan lampu senter"],
correct: 0,
explanation: "Benar! Busur panah memanfaatkan sifat elastisitas tali busur (gaya pegas) untuk melontarkan anak panah."
}
]
},
2: {
title: "Domain 2: Hukum Newton tentang Gerak",
questions: [
{
question: "Hukum I Newton sering disebut juga sebagai hukum kelembaman (inersia). Manakah pernyataan yang paling tepat?",
options: [
"Benda yang diam akan cenderung tetap diam jika resultan gaya sama dengan nol",
"Percepatan berbanding lurus dengan gaya",
"Setiap aksi menimbulkan reaksi",
"Berat benda tergantung gravitasi"
],
correct: 0,
explanation: "Benar! Hukum I Newton menyatakan bahwa sifat kelembaman benda membuat benda mempertahankan keadaan diam atau gerak lurus beraturannya (Sigma F = 0)."
},
{
question: "Rumus matematis dari Hukum II Newton adalah F = m × a. Jika massa benda (m) besar dan percepatan (a) tetap, maka gaya (F) yang dibutuhkan adalah...",
options: ["Semakin kecil", "Semakin besar", "Tetap sama", "Nol"],
correct: 1,
explanation: "Tepat! Karena gaya berbanding lurus dengan massa benda (F = m × a), semakin besar massa benda, semakin besar pula gaya yang diperlukan."
},
{
question: "Ketika kamu mendayung perahu di danau Mondstadt, dayung mendorong air ke belakang, dan perahu bergerak ke depan. Ini adalah contoh dari...",
options: ["Hukum I Newton", "Hukum II Newton", "Hukum III Newton (Aksi-Reaksi)", "Hukum Archimedes"],
correct: 2,
explanation: "Benar! Hukum III Newton menyatakan bahwa jika benda A memberikan gaya pada benda B (aksi), maka benda B akan memberikan gaya yang sama besar namun berlawanan arah pada benda A (reaksi)."
},
{
question: "Mengapa penumpang di dalam gerobak kuda akan terdorong ke depan ketika kuda secara mendadak berhenti?",
options: [
"Karena Hukum I Newton (tubuh ingin mempertahankan gerak)",
"Karena ada gaya dorong angin",
"Karena gaya gravitasi hilang",
"Karena gaya gesek bertambah besar"
],
correct: 0,
explanation: "Tepat! Ini adalah inersia atau kelembaman tubuh yang mempertahankan kecepatan geraknya semula ke depan."
},
{
question: "Sebuah kotak bermassa 10 kg didorong dengan percepatan 2 m/s². Berdasarkan Hukum II Newton, berapakah gaya yang diberikan?",
options: ["5 Newton", "12 Newton", "20 Newton", "100 Newton"],
correct: 2,
explanation: "Benar! F = m × a = 10 kg × 2 m/s² = 20 Newton."
}
]
},
3: {
title: "Domain 3: Kelajuan, Kecepatan, & Percepatan",
questions: [
{
question: "Apakah perbedaan utama antara kelajuan dan kecepatan?",
options: [
"Kelajuan memiliki arah, kecepatan tidak",
"Kelajuan adalah besaran skalar (jarak/waktu), kecepatan adalah besaran vektor (perpindahan/waktu)",
"Kelajuan selalu lebih kecil dari kecepatan",
"Tidak ada perbedaan sama sekali"
],
correct: 1,
explanation: "Tepat sekali! Kelajuan memperhitungkan jarak tempuh total (skalar), sedangkan kecepatan memperhitungkan arah dan perpindahan posisi (vektor)."
},
{
question: "Aether berlari menempuh jarak 100 meter dalam waktu 20 detik. Berapakah kelajuan rata-rata Aether?",
options: ["2 m/s", "5 m/s", "10 m/s", "20 m/s"],
correct: 1,
explanation: "Benar! Kelajuan = Jarak / Waktu = 100 meter / 20 sekon = 5 m/s."
},
{
question: "Sebuah mobil Slime bergerak dengan kelajuan tetap pada lintasan lurus. Gerak benda ini disebut sebagai...",
options: ["GLBB Dipercepat", "GLBB Diperlambat", "GLB (Gerak Lurus Beraturan)", "Gerak Melingkar Beraturan"],
correct: 2,
explanation: "Tepat! Gerak Lurus Beraturan (GLB) adalah gerak benda pada lintasan lurus dengan kecepatan tetap (percepatan = 0)."
},
{
question: "Apa arti fisik dari percepatan (acceleration) bernilai positif?",
options: [
"Kecepatan benda semakin bertambah seiring waktu",
"Kecepatan benda berkurang",
"Benda dalam keadaan diam",
"Benda bergerak dengan kecepatan konstan"
],
correct: 0,
explanation: "Benar! Percepatan positif menunjukkan bahwa kecepatan benda bertambah tiap detiknya (GLBB dipercepat)."
},
{
question: "Jika sebuah objek mengalami percepatan konstan dari 0 hingga 20 m/s dalam waktu 4 detik, berapa percepatannya?",
options: ["2 m/s²", "4 m/s²", "5 m/s²", "80 m/s²"],
correct: 2,
explanation: "Benar! Percepatan (a) = (Kecepatan Akhir - Kecepatan Awal) / Waktu = (20 - 0) / 4 = 5 m/s²."
}
]
}
};
// Data Karakter Genshin Impact dengan Potret Resmi High-Resolution Sesuai Poster Referensi
const characters = [
{
id: 'aether',
name: 'Aether',
element: 'anemo',
desc: 'Traveler Utama • Elemen Anemo & Multi',
icon: 'fa-wind',
color: 'border-amber-500',
bg: 'from-amber-900/40 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Aether.png',
paimonGreeting: "Wahai Aether! Mari kita tunjukkan semangat belajar IPA kepada Pak Ketut Supeksa!"
},
{
id: 'lumine',
name: 'Lumine',
element: 'dendro',
desc: 'Traveler Utama • Elemen Dendro & Multi',
icon: 'fa-seedling',
color: 'border-yellow-400',
bg: 'from-yellow-900/40 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Lumine.png',
paimonGreeting: "Semangat Lumine! Kita pasti bisa menjawab semua teka-teki hukum Newton hari ini!"
},
{
id: 'paimon',
name: 'Paimon',
element: 'geo',
desc: 'Pemandu Terbaik • Makanan Darurat Kesayangan',
icon: 'fa-star',
color: 'border-cyan-400',
bg: 'from-cyan-900/40 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Paimon.png',
paimonGreeting: "Hehe! Paimon juga bisa ikut bertualang menjawab soal IPA kalau kamu pilih Paimon!"
},
{
id: 'diluc',
name: 'Diluc',
element: 'pyro',
desc: 'Master Ragnvindr • Elemen Pyro Membara',
icon: 'fa-fire',
color: 'border-red-500',
bg: 'from-red-900/40 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Diluc.png',
paimonGreeting: "Tuan Diluc yang keren! Kecepatan dan kekuatan Pyro-nya tidak tertandingi di Mondstadt!"
},
{
id: 'jean',
name: 'Jean',
element: 'anemo',
desc: 'Pelaksana Grand Master • Elemen Anemo',
icon: 'fa-feather',
color: 'border-teal-400',
bg: 'from-teal-900/40 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Jean.png',
paimonGreeting: "Jean sangat disiplin! Beliau pasti sangat teliti dalam menghitung percepatan dan gaya gesek."
},
{
id: 'kaeya',
name: 'Kaeya',
element: 'cryo',
desc: 'Kavaleri Kapten • Elemen Cryo',
icon: 'fa-snowflake',
color: 'border-sky-400',
bg: 'from-sky-900/40 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Kaeya.png',
paimonGreeting: "Kapten Kaeya yang misterius siap membantumu menaklukkan fisika dengan senyuman es!"
},
{
id: 'xiao',
name: 'Xiao',
element: 'anemo',
desc: 'Yaksha Penjaga • Elemen Anemo Penguasa',
icon: 'fa-wind',
color: 'border-emerald-500',
bg: 'from-emerald-900/40 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Xiao.png',
paimonGreeting: "Yak! Xiao melompat sangat tinggi menggunakan gaya otot dan gravitasi yang minimal!"
},
{
id: 'zhongli',
name: 'Zhongli',
element: 'geo',
desc: 'Archon Geo • Perisai Batu Tak Tergoyahkan',
icon: 'fa-shield-halved',
color: 'border-amber-600',
bg: 'from-amber-950 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Zhongli.png',
paimonGreeting: "Tuan Zhongli tahu semua tentang hukum alam dan batu-batu di bumi Teyvat!"
},
{
id: 'raiden',
name: 'Raiden Shogun',
element: 'electro',
desc: 'Archon Electro • Kecepatan Petir Abadi',
icon: 'fa-bolt',
color: 'border-purple-500',
bg: 'from-purple-900/40 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Raiden_Shogun.png',
paimonGreeting: "Kecepatan sambaran petir Shogun Raiden sangat relevan dengan materi kelajuan dan kecepatan kita!"
},
{
id: 'nahida',
name: 'Nahida',
element: 'dendro',
desc: 'Archon Dendro • Kebijaksanaan Sumeru',
icon: 'fa-brain',
color: 'border-lime-400',
bg: 'from-lime-950 to-slate-900',
imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Nahida.png',
paimonGreeting: "Kecerdasan Archon Nahida akan membimbing pikiran kita untuk memahami sains dengan mudah!"
}
];
// Inisialisasi Tampilan Karakter di Layar 2 dengan Potret Gambar Berkualitas Tinggi
function initCharacterGrid() {
const grid = document.getElementById('character-grid');
grid.innerHTML = '';
characters.forEach(char => {
const card = document.createElement('div');
card.className = `bg-slate-900/90 border-2 ${char.color} rounded-2xl p-2.5 cursor-pointer transition-all duration-200 hover:scale-105 flex flex-col items-center text-center group relative overflow-hidden shadow-lg`;
card.onclick = () => selectCharacter(char.id);
card.id = `char-card-${char.id}`;
card.innerHTML = `
<div class="w-16 h-16 rounded-xl bg-gradient-to-tr ${char.bg} border border-slate-700 overflow-hidden mb-1.5 relative flex items-center justify-center shadow-inner">
<img src="${char.imgUrl}" onerror="this.onerror=null; this.src='${char.fallbackImg}';" alt="${char.name}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
<div class="absolute bottom-0 inset-x-0 bg-black/70 text-[8px] text-amber-300 font-bold uppercase tracking-wider py-0.5">${char.element}</div>
</div>
<h5 class="font-bold text-white text-xs mb-0.5">${char.name}</h5>
<p class="text-[9px] text-slate-400 leading-tight line-clamp-1">${char.desc}</p>
`;
grid.appendChild(card);
});
}
function selectCharacter(id) {
characters.forEach(c => {
const el = document.getElementById(`char-card-${c.id}`);
if (el) el.classList.remove('ring-4', 'ring-amber-400', 'bg-amber-500/10');
});
const selectedEl = document.getElementById(`char-card-${id}`);
if (selectedEl) {
selectedEl.classList.add('ring-4', 'ring-amber-400', 'bg-amber-500/10');
}
gameState.selectedCharacter = characters.find(c => c.id === id);
const startBtn = document.getElementById('btn-start-game');
startBtn.disabled = false;
startBtn.classList.remove('opacity-50', 'cursor-not-allowed');
}
// Form Login Submit
document.getElementById('form-login').onsubmit = function(e) {
e.preventDefault();
const name = document.getElementById('input-name').value.trim();
const kelas = document.getElementById('input-class').value;
const absen = document.getElementById('input-absen').value;
if (!name || !kelas || !absen) {
alert("Mohon lengkapi Nama, Kelas, dan No Absen terlebih dahulu!");
return;
}
gameState.studentName = name;
gameState.studentClass = kelas;
gameState.studentAbsen = absen;
// Pindah ke Screen 2 (Pilih Karakter)
document.getElementById('screen-login').classList.add('hidden');
document.getElementById('screen-character').classList.remove('hidden');
initCharacterGrid();
};
// Tombol Kembali ke Login
document.getElementById('btn-back-to-login').onclick = function() {
document.getElementById('screen-character').classList.add('hidden');
document.getElementById('screen-login').classList.remove('hidden');
};
// Tombol Mulai dari Karakter ke Overworld
document.getElementById('btn-start-game').onclick = function() {
if (!gameState.selectedCharacter) return;
// Setup Overworld UI
document.getElementById('screen-character').classList.add('hidden');
document.getElementById('screen-overworld').classList.remove('hidden');
document.getElementById('game-status-bar').classList.remove('hidden');
document.getElementById('game-status-bar').classList.add('flex');
document.getElementById('player-welcome-text').innerText = `Halo, ${gameState.studentName}!`;
document.getElementById('selected-char-name').innerText = `Karakter: ${gameState.selectedCharacter.name} (${gameState.selectedCharacter.element.toUpperCase()})`;
document.getElementById('info-nama-kelas').innerText = `${gameState.studentName} (${gameState.studentClass} - Absen ${gameState.studentAbsen})`;
// Set Avatar ikon / gambar
const avatarEl = document.getElementById('selected-char-avatar');
avatarEl.innerHTML = `<img src="${gameState.selectedCharacter.imgUrl}" onerror="this.onerror=null; this.src='${gameState.selectedCharacter.fallbackImg}';" alt="${gameState.selectedCharacter.name}" class="w-full h-full object-cover">`;
avatarEl.className = "w-14 h-14 rounded-full border-2 border-genshin-gold bg-slate-800 overflow-hidden flex items-center justify-center shadow-lg";
updateStatusBar();
};
function updateStatusBar() {
document.getElementById('score-display').innerText = gameState.score;
document.getElementById('primogem-display').innerText = gameState.primogems;
document.getElementById('hp-bar').style.width = `${gameState.hp}%`;
document.getElementById('hp-text').innerText = `${gameState.hp}/100`;
}
// Mulai Domain Misi (1, 2, or 3)
function startDomain(domainNum) {
gameState.currentDomain = domainNum;
gameState.currentQuestionIndex = 0;
document.getElementById('screen-overworld').classList.add('hidden');
document.getElementById('screen-quiz').classList.remove('hidden');
loadQuestion();
}
function loadQuestion() {
const domain = domainsData[gameState.currentDomain];
const q = domain.questions[gameState.currentQuestionIndex];
document.getElementById('quiz-domain-title').innerText = domain.title;
document.getElementById('quiz-progress-text').innerText = `Pertanyaan ${gameState.currentQuestionIndex + 1} dari ${domain.questions.length}`;
document.getElementById('quiz-score-live').innerText = `${gameState.score} Poin`;
// Paimon Greeting
if (gameState.currentQuestionIndex === 0) {
document.getElementById('paimon-dialog').innerText = gameState.selectedCharacter.paimonGreeting;
} else {
document.getElementById('paimon-dialog').innerText = "Pertanyaan berikutnya semakin menantang! Tetap fokus ya, Traveler!";
}
document.getElementById('question-text').innerText = q.question;
const optionsContainer = document.getElementById('options-container');
optionsContainer.innerHTML = '';
q.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = 'w-full text-left bg-slate-800/90 hover:bg-slate-700/90 border border-slate-700 hover:border-amber-400 p-4 rounded-xl text-sm md:text-base text-slate-200 transition-all flex items-center justify-between group';
btn.innerHTML = `
<span>${opt}</span>
<i class="fa-solid fa-chevron-right text-slate-500 group-hover:text-amber-400 transition-colors"></i>
`;
btn.onclick = () => checkAnswer(idx);
optionsContainer.appendChild(btn);
});
document.getElementById('explanation-box').classList.add('hidden');
}
function checkAnswer(selectedIdx) {
const domain = domainsData[gameState.currentDomain];
const q = domain.questions[gameState.currentQuestionIndex];
const optionsContainer = document.getElementById('options-container');
const buttons = optionsContainer.getElementsByTagName('button');
// Disable all buttons after choice
for (let i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
if (i === q.correct) {
buttons[i].classList.remove('bg-slate-800/90', 'border-slate-700');
buttons[i].classList.add('bg-green-900/40', 'border-green-500', 'text-green-300');
} else if (i === selectedIdx && selectedIdx !== q.correct) {
buttons[i].classList.remove('bg-slate-800/90', 'border-slate-700');
buttons[i].classList.add('bg-red-900/40', 'border-red-500', 'text-red-300');
}
}
const isCorrect = (selectedIdx === q.correct);
const expBox = document.getElementById('explanation-box');
const expIcon = document.getElementById('explanation-icon');
const expTitle = document.getElementById('explanation-title');
const expText = document.getElementById('explanation-text');
expBox.classList.remove('hidden');
expText.innerText = q.explanation;
if (isCorrect) {
expBox.className = 'bg-green-950/40 border border-green-500/50 rounded-2xl p-4 mt-4 transition-all';
expIcon.className = 'fa-solid fa-circle-check text-green-400';
expTitle.className = 'font-bold text-sm text-green-300';
expTitle.innerText = 'Benar! Jawabanmu Luar Biasa!';
gameState.score += 20;
gameState.primogems += 5;
document.getElementById('paimon-dialog').innerText = "Hebat sekali! Paimon bangga kepadamu! Kamu mendapatkan Mora dan Primogems!";
} else {
expBox.className = 'bg-red-950/40 border border-red-500/50 rounded-2xl p-4 mt-4 transition-all';
expIcon.className = 'fa-solid fa-circle-xmark text-red-400';
expTitle.className = 'font-bold text-sm text-red-300';
expTitle.innerText = 'Kurang Tepat, Traveler!';
gameState.hp = Math.max(0, gameState.hp - 15);
document.getElementById('paimon-dialog').innerText = "Jangan menyerah! Pelajari penjelasan di bawah ini agar tidak salah lagi ya.";
}
updateStatusBar();
// Cek jika ini soal terakhir di domain
if (gameState.currentQuestionIndex === domain.questions.length - 1) {
document.getElementById('next-btn-text').innerText = "Selesaikan Domain Ini";
} else {
document.getElementById('next-btn-text').innerText = "Lanjut Pertanyaan Berikutnya";
}
}
function nextQuestion() {
const domain = domainsData[gameState.currentDomain];
gameState.currentQuestionIndex++;
if (gameState.currentQuestionIndex < domain.questions.length) {
loadQuestion();
} else {
// Domain selesai
gameState.domainScores[gameState.currentDomain] = 100;
gameState.domainCompleted[gameState.currentDomain] = true;
// Update status di overworld UI
document.getElementById(`domain${gameState.currentDomain}-status`).innerHTML = `<i class="fa-solid fa-circle-check text-green-400 mr-1"></i> Selesai`;
document.getElementById(`domain${gameState.currentDomain}-score`).innerText = `Skor: 100/100`;
// Cek apakah semua domain selesai
if (gameState.domainCompleted[1] && gameState.domainCompleted[2] && gameState.domainCompleted[3]) {
document.getElementById('certificate-banner-container').classList.remove('hidden');
}
backToOverworld();
}
}
function backToOverworld() {
document.getElementById('screen-quiz').classList.add('hidden');
document.getElementById('screen-certificate').classList.add('hidden');
document.getElementById('screen-overworld').classList.remove('hidden');
}
// Tampilkan Sertifikat
function showCertificate() {
document.getElementById('screen-overworld').classList.add('hidden');
document.getElementById('screen-quiz').classList.add('hidden');
document.getElementById('screen-certificate').classList.remove('hidden');
// Isi data sertifikat
document.getElementById('cert-nama').innerText = gameState.studentName;
document.getElementById('cert-kelas').innerText = gameState.studentClass;
document.getElementById('cert-absen').innerText = gameState.studentAbsen;
document.getElementById('cert-char-name').innerText = `${gameState.selectedCharacter.name} (${gameState.selectedCharacter.element.toUpperCase()})`;
document.getElementById('cert-char-avatar').innerHTML = `<img src="${gameState.selectedCharacter.imgUrl}" onerror="this.onerror=null; this.src='${gameState.selectedCharacter.fallbackImg}';" alt="${gameState.selectedCharacter.name}" class="w-full h-full object-cover">`;
document.getElementById('cert-char-avatar').className = "w-12 h-12 rounded-full border border-amber-400 bg-slate-800 overflow-hidden flex items-center justify-center";
document.getElementById('cert-score-1').innerText = `${gameState.domainScores[1]}/100`;
document.getElementById('cert-score-2').innerText = `${gameState.domainScores[2]}/100`;
document.getElementById('cert-score-3').innerText = `${gameState.domainScores[3]}/100`;
const totalMora = gameState.score * 500;
document.getElementById('cert-total-score').innerText = totalMora.toLocaleString();
document.getElementById('cert-total-primogem').innerText = gameState.primogems;
const avgScore = (gameState.domainScores[1] + gameState.domainScores[2] + gameState.domainScores[3]) / 3;
let predikat = "Sangat Baik (A)";
if (avgScore < 70) predikat = "Cukup (C)";
else if (avgScore < 85) predikat = "Baik (B)";
document.getElementById('cert-predikat').innerText = predikat;
}
function resetGame() {
if (confirm("Apakah kamu yakin ingin mengulang petualangan dari awal?")) {
location.reload();
}
}
</script>
</body>
</html>```