KLIK IDE GURU

<!DOCTYPE html>

<head>

<title>🚀 EduQuest — Kolaborasi di Dunia Maya</title>

<style>

:root {

--yellow: #FFD93D;

--orange: #FF6B35;

--pink: #FF6BA8;

--purple: #7C3AED;

--purple-light: #A78BFA;

--blue: #3B82F6;

--blue-light: #93C5FD;

--green: #22C55E;

--green-light: #86EFAC;

--red: #EF4444;

--red-light: #FCA5A5;

--bg: #FFF9F0;

--card: #FFFFFF;

--text: #1E1B4B;

--text-light: #6B7280;

--shadow: 0 8px 32px rgba(124,58,237,0.13);

--radius: 24px;

--radius-sm: 14px;

}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {

font-family: 'Nunito', sans-serif;

background: var(--bg);

min-height: 100vh;

overflow-x: hidden;

position: relative;

}

/* ===== BACKGROUND DECO ===== */

.bg-deco {

position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;

}

.bubble {

position: absolute; border-radius: 50%; opacity: 0.13;

animation: floatBubble linear infinite;

}

@keyframes floatBubble {

0% { transform: translateY(110vh) scale(0.7); opacity: 0; }

10% { opacity: 0.13; }

90% { opacity: 0.13; }

100% { transform: translateY(-20vh) scale(1.1); opacity: 0; }

}

/* ===== SCREENS ===== */

.screen {

display: none; min-height: 100vh; position: relative; z-index: 1;

padding: 24px 16px; max-width: 700px; margin: 0 auto;

flex-direction: column; align-items: center;

}

.screen.active { display: flex; }

/* ===== HEADER ===== */

.app-header {

width: 100%; display: flex; align-items: center; justify-content: space-between;

margin-bottom: 10px;

}

.app-logo {

font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 26px;

background: linear-gradient(135deg, var(--purple), var(--pink));

-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

letter-spacing: -0.5px;

}

.back-btn {

background: white; border: 3px solid var(--purple-light); color: var(--purple);

font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px;

border-radius: 50px; padding: 8px 18px; cursor: pointer;

transition: all 0.18s; box-shadow: 0 3px 10px rgba(124,58,237,0.13);

}

.back-btn:hover { background: var(--purple); color: white; transform: translateY(-2px); }

/* ===== TOPIC SCREEN ===== */

.topic-hero { text-align: center; margin: 10px 0 24px; }

.topic-hero .wave-emoji { font-size: 72px; display: block; animation: bounce 1.5s ease-in-out infinite; }

@keyframes bounce {

0%,100% { transform: translateY(0); }

50% { transform: translateY(-14px); }

}

.topic-hero h1 {

font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 34px;

color: var(--text); line-height: 1.15; margin: 8px 0 6px;

}

.topic-hero p { font-size: 17px; color: var(--text-light); font-weight: 600; }

.topic-grid { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; }

.topic-card {

background: var(--card); border-radius: var(--radius); padding: 24px 20px;

box-shadow: var(--shadow); border: 3px solid transparent;

cursor: pointer; transition: all 0.22s; position: relative; overflow: hidden;

display: flex; align-items: center; gap: 18px;

animation: slideInUp 0.5s ease both;

}

.topic-card::before {

content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.22s;

background: linear-gradient(135deg, rgba(124,58,237,0.07), rgba(255,107,168,0.07));

}

.topic-card:hover { transform: translateY(-5px) scale(1.02); border-color: var(--purple-light); box-shadow: 0 16px 40px rgba(124,58,237,0.18); }

.topic-card:hover::before { opacity: 1; }

.topic-card:active { transform: scale(0.98); }

.topic-icon { font-size: 58px; flex-shrink: 0; line-height: 1; }

.topic-info h3 { font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 22px; color: var(--text); margin-bottom: 4px; }

.topic-info p { font-size: 15px; color: var(--text-light); font-weight: 600; line-height: 1.4; }

.topic-badge {

position: absolute; top: 14px; right: 14px; background: var(--yellow);

color: var(--text); font-weight: 800; font-size: 12px; border-radius: 50px;

padding: 4px 12px; border: 2px solid rgba(0,0,0,0.07);

}

@keyframes slideInUp {

from { opacity: 0; transform: translateY(30px); }

to { opacity: 1; transform: translateY(0); }

}

/* ===== GAME SCREEN ===== */

.game-topbar {

width: 100%; background: white; border-radius: var(--radius); padding: 14px 20px;

box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px;

margin-bottom: 16px; flex-wrap: wrap;

}

.score-pill {

background: linear-gradient(135deg, var(--yellow), var(--orange));

color: white; font-weight: 800; font-size: 18px; border-radius: 50px;

padding: 6px 18px; display: flex; align-items: center; gap: 6px;

box-shadow: 0 3px 10px rgba(255,107,53,0.3); flex-shrink: 0;

}

.progress-wrap { flex: 1; min-width: 120px; }

.progress-label { font-weight: 800; font-size: 14px; color: var(--text-light); margin-bottom: 5px; }

.progress-bar-bg {

background: #EDE9FE; border-radius: 50px; height: 12px; overflow: hidden;

}

.progress-bar-fill {

background: linear-gradient(90deg, var(--purple-light), var(--purple));

height: 100%; border-radius: 50px; transition: width 0.5s cubic-bezier(.34,1.56,.64,1);

}

.learning-goal {

width: 100%; background: linear-gradient(135deg, #EDE9FE, #FCE7F3);

border-radius: var(--radius-sm); padding: 13px 18px; margin-bottom: 16px;

border-left: 5px solid var(--purple);

}

.learning-goal .lbl { font-size: 12px; font-weight: 800; color: var(--purple); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px; }

.learning-goal p { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; }

.question-card {

width: 100%; background: var(--card); border-radius: var(--radius); padding: 28px 22px 22px;

box-shadow: var(--shadow); border: 3px solid #EDE9FE; margin-bottom: 16px;

animation: slideInCard 0.42s cubic-bezier(.34,1.56,.64,1) both;

}

@keyframes slideInCard {

from { opacity: 0; transform: translateY(40px) scale(0.95); }

to { opacity: 1; transform: translateY(0) scale(1); }

}

.q-emoji {

font-size: 80px; display: block; text-align: center; margin-bottom: 16px;

animation: qBounce 2s ease-in-out infinite;

}

@keyframes qBounce {

0%,100% { transform: translateY(0) rotate(-3deg); }

50% { transform: translateY(-10px) rotate(3deg); }

}

.q-text {

font-family: 'Baloo 2', cursive; font-weight: 700; font-size: 22px;

color: var(--text); text-align: center; line-height: 1.4;

}

.answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

.ans-btn {

background: white; border: 3px solid #EDE9FE; border-radius: var(--radius-sm);

padding: 16px 12px; cursor: pointer; transition: all 0.18s;

font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 17px;

color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 8px;

text-align: center; line-height: 1.3; box-shadow: 0 3px 12px rgba(0,0,0,0.06);

min-height: 90px; justify-content: center;

}

.ans-btn .a-emoji { font-size: 32px; }

.ans-btn:hover:not(:disabled) {

border-color: var(--purple-light); background: #FAF5FF;

transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 20px rgba(124,58,237,0.15);

}

.ans-btn:active:not(:disabled) { transform: scale(0.97); }

.ans-btn:disabled { cursor: not-allowed; }

.ans-btn.correct {

background: #DCFCE7; border-color: var(--green); color: #15803D;

animation: popIn 0.4s cubic-bezier(.34,1.56,.64,1);

}

.ans-btn.wrong {

background: #FEE2E2; border-color: var(--red); color: #B91C1C;

animation: shake 0.5s ease;

}

.ans-btn.reveal {

background: #DCFCE7; border-color: var(--green); color: #15803D;

animation: pulseReveal 0.6s ease;

}

@keyframes popIn {

0% { transform: scale(0.9); }

60% { transform: scale(1.08); }

100% { transform: scale(1); }

}

@keyframes shake {

0%,100% { transform: translateX(0); }

20% { transform: translateX(-8px) rotate(-1deg); }

40% { transform: translateX(8px) rotate(1deg); }

60% { transform: translateX(-5px); }

80% { transform: translateX(5px); }

}

@keyframes pulseReveal {

0% { transform: scale(1); }

50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(34,197,94,0.4); }

100% { transform: scale(1); }

}

.teacher-bar {

width: 100%; display: flex; align-items: center; gap: 10px;

background: linear-gradient(135deg, var(--purple), var(--blue));

border-radius: var(--radius-sm); padding: 10px 16px; margin-bottom: 16px;

color: white;

}

.teacher-avatar { font-size: 32px; }

.teacher-info .t-name { font-weight: 800; font-size: 16px; }

.teacher-info .t-title { font-size: 13px; opacity: 0.85; }

/* ===== OVERLAY ===== */

.overlay {

position: fixed; inset: 0; background: rgba(30,27,75,0.55); z-index: 100;

display: none; align-items: center; justify-content: center; padding: 20px;

backdrop-filter: blur(3px);

}

.overlay.active { display: flex; }

.feedback-card {

background: white; border-radius: var(--radius); padding: 36px 28px;

max-width: 380px; width: 100%; text-align: center;

box-shadow: 0 30px 80px rgba(0,0,0,0.2);

animation: popIn 0.45s cubic-bezier(.34,1.56,.64,1);

}

.feedback-emoji { font-size: 80px; display: block; margin-bottom: 10px; animation: bounce 1s ease-in-out infinite; }

.feedback-title {

font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 30px; margin-bottom: 8px;

}

.feedback-title.correct { color: var(--green); }

.feedback-title.wrong { color: var(--red); }

.feedback-msg { font-size: 17px; font-weight: 600; color: var(--text-light); margin-bottom: 6px; line-height: 1.4; }

.correct-ans-info {

background: #DCFCE7; border-radius: var(--radius-sm); padding: 12px 16px; margin: 12px 0;

font-weight: 700; font-size: 16px; color: #15803D; display: none;

}

.feedback-next {

background: linear-gradient(135deg, var(--purple), var(--blue));

color: white; border: none; border-radius: 50px; padding: 14px 36px;

font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 20px;

cursor: pointer; margin-top: 16px; box-shadow: 0 6px 20px rgba(124,58,237,0.35);

transition: all 0.18s; width: 100%;

}

.feedback-next:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(124,58,237,0.45); }

.feedback-next:active { transform: scale(0.97); }

/* ===== CONFETTI ===== */

.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }

.confetti-piece {

position: absolute; top: -20px; width: 10px; height: 10px; border-radius: 2px;

animation: confettiFall linear forwards;

opacity: 0;

}

@keyframes confettiFall {

0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }

80% { opacity: 1; }

100% { transform: translateY(110vh) rotate(720deg) scale(0.5); opacity: 0; }

}

/* ===== RESULT SCREEN ===== */

.result-hero { text-align: center; margin: 10px 0 20px; }

.result-trophy { font-size: 100px; display: block; animation: bounce 1.5s ease-in-out infinite; }

.result-title {

font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 36px;

background: linear-gradient(135deg, var(--orange), var(--pink));

-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

margin: 8px 0 4px;

}

.result-subtitle { font-size: 18px; color: var(--text-light); font-weight: 700; }

.stars-row { display: flex; gap: 12px; justify-content: center; margin: 18px 0; }

.star-icon { font-size: 52px; filter: grayscale(1) opacity(0.3); transition: all 0.4s; }

.star-icon.lit { filter: none; animation: starPop 0.5s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes starPop {

0% { transform: scale(0) rotate(-30deg); }

70% { transform: scale(1.2) rotate(5deg); }

100% { transform: scale(1) rotate(0); }

}

.score-card {

background: linear-gradient(135deg, var(--purple), var(--blue));

border-radius: var(--radius); padding: 24px; text-align: center;

color: white; width: 100%; margin-bottom: 16px;

box-shadow: 0 10px 30px rgba(124,58,237,0.3);

}

.score-big { font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 64px; line-height: 1; }

.score-label { font-size: 18px; font-weight: 700; opacity: 0.85; margin-top: 4px; }

.motive-card {

background: white; border-radius: var(--radius); padding: 20px 22px;

border: 3px solid var(--yellow); width: 100%; margin-bottom: 20px;

box-shadow: var(--shadow); text-align: center;

font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.5;

}

.result-btns { display: flex; gap: 12px; width: 100%; flex-wrap: wrap; }

.btn-primary {

flex: 1; min-width: 140px; background: linear-gradient(135deg, var(--purple), var(--blue));

color: white; border: none; border-radius: 50px; padding: 16px 24px;

font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 18px;

cursor: pointer; box-shadow: 0 6px 20px rgba(124,58,237,0.3);

transition: all 0.18s; text-align: center;

}

.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(124,58,237,0.4); }

.btn-primary:active { transform: scale(0.97); }

.btn-secondary {

flex: 1; min-width: 140px; background: white;

color: var(--purple); border: 3px solid var(--purple-light); border-radius: 50px; padding: 14px 24px;

font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 18px;

cursor: pointer; box-shadow: var(--shadow); transition: all 0.18s; text-align: center;

}

.btn-secondary:hover { background: var(--purple); color: white; transform: translateY(-3px); }

/* ===== RESPONSIVE ===== */

@media (max-width: 480px) {

.topic-hero h1 { font-size: 26px; }

.q-text { font-size: 19px; }

.ans-btn { font-size: 15px; min-height: 80px; padding: 12px 8px; }

.ans-btn .a-emoji { font-size: 26px; }

.score-big { font-size: 52px; }

.result-title { font-size: 28px; }

}

@media (max-width: 360px) {

.answers-grid { grid-template-columns: 1fr; }

}

</style>

</head>

<body>

<div class="app-logo">🚀 EduQuest</div>

</div>

<h1>Pilih Topik Belajar</h1>

<p>Ayo uji pengetahuanmu! Pilih topik di bawah ini 👇</p>

</div>

<h3>Kolaborasi di Dunia Maya</h3>

<p>Pelajari cara kerja sama tim secara online dengan efektif dan aman</p>

</div>

</div>

<h3>Keamanan Digital</h3>

<p>Segera hadir — lindungi dirimu di dunia digital</p>

</div>

<span class="topic-badge">Segera</span>

</div>

<h3>Media Sosial Sehat</h3>

<p>Segera hadir — bijak bermedia sosial</p>

</div>

<span class="topic-badge">Segera</span>

</div>

<h3>Kreativitas Digital</h3>

<p>Segera hadir — ekspresikan kreativitasmu secara digital</p>

</div>

<span class="topic-badge">Segera</span>

</div>

<div class="app-logo">🚀 EduQuest</div>

</div>

<div class="t-name">Pak Purwanto</div>

<div class="t-title">Guru Informatika & TIK</div>

</div>

</div>

<div class="lbl">🎯 Tujuan Pembelajaran</div>

<p id="learningGoalText">Memahami prinsip kolaborasi efektif di dunia maya</p>

</div>

<div class="q-text" id="qText">Memuat soal...</div>

</div>

</div>

<div class="app-logo">🚀 EduQuest</div>

</div>

<h1 class="result-title" id="resultTitle">Luar Biasa!</h1>

<p class="result-subtitle" id="resultSubtitle">Kamu berhasil menyelesaikan kuis!</p>

</div>

</div>

</div>

<div class="motive-card" id="motive">Terus semangat belajar! 🌟</div>

<button class="btn-primary" onclick="retryGame()">🔁 Ulangi Kuis</button>

<button class="btn-secondary" onclick="goHome()">🏠 Menu Utama</button>

</div>

<div class="feedback-title" id="fbTitle">Benar!</div>

<div class="feedback-msg" id="fbMsg">Hebat sekali!</div>

<button class="feedback-next" id="feedbackNextBtn" onclick="nextQuestion()">Lanjut ➡️</button>

</div>

// ===== DATA SOAL =====

const topicData = {

kolaborasi: {

title: "Kolaborasi di Dunia Maya",

goal: "Memahami prinsip, etika, dan alat kolaborasi online yang efektif & bertanggung jawab",

questions: [

{

emoji: "💬",

text: "Apa yang dimaksud dengan kolaborasi di dunia maya?",

answers: [

{ emoji: "🤝", text: "Bekerja sama secara online menggunakan teknologi digital", correct: true },

{ emoji: "🎮", text: "Bermain game online bersama teman", correct: false },

{ emoji: "📺", text: "Menonton video streaming bersama-sama", correct: false },

{ emoji: "🛒", text: "Berbelanja online secara bersamaan", correct: false }

]

{

emoji: "📋",

text: "Platform mana yang paling tepat untuk mengerjakan dokumen bersama secara real-time?",

answers: [

{ emoji: "📝", text: "Google Docs", correct: true },

{ emoji: "📧", text: "Email biasa", correct: false },

{ emoji: "🖨️", text: "Mesin fotokopi", correct: false },

{ emoji: "📰", text: "Koran digital", correct: false }

]

{

emoji: "🗣️",

text: "Ketika berdiskusi online, sikap yang paling tepat adalah...",

answers: [

{ emoji: "😤", text: "Memotong pembicaraan orang lain karena ingin cepat selesai", correct: false },

{ emoji: "👂", text: "Mendengarkan pendapat orang lain dan merespons dengan sopan", correct: true },

{ emoji: "😴", text: "Diam saja dan tidak ikut berpartisipasi", correct: false },

{ emoji: "😠", text: "Meledek pendapat teman yang berbeda", correct: false }

]

{

emoji: "📅",

text: "Dalam proyek kelompok online, apa yang harus disepakati terlebih dahulu?",

answers: [

{ emoji: "🎲", text: "Siapa yang paling pintar di kelompok", correct: false },

{ emoji: "🎯", text: "Pembagian tugas, tenggat waktu, dan alat komunikasi", correct: true },

{ emoji: "🏆", text: "Siapa yang akan mendapat nilai terbaik", correct: false },

{ emoji: "🎨", text: "Warna favorit masing-masing anggota", correct: false }

]

{

emoji: "🔒",

text: "Mengapa penting menjaga kerahasiaan data proyek kelompok secara online?",

answers: [

{ emoji: "🤫", text: "Agar tidak dicuri atau disalahgunakan pihak lain", correct: true },

{ emoji: "😎", text: "Supaya terlihat eksklusif di media sosial", correct: false },

{ emoji: "💸", text: "Supaya bisa dijual ke teman lain", correct: false },

{ emoji: "😴", text: "Tidak penting, data boleh dibagikan ke siapa saja", correct: false }

]

{

emoji: "⏰",

text: "Apa arti 'netiquette' dalam konteks kolaborasi online?",

answers: [

{ emoji: "🌐", text: "Nama salah satu aplikasi chatting", correct: false },

{ emoji: "📡", text: "Jenis koneksi internet berkecepatan tinggi", correct: false },

{ emoji: "🤝", text: "Etika dan tata krama dalam berkomunikasi di internet", correct: true },

{ emoji: "🎮", text: "Teknik bermain game online", correct: false }

]

{

emoji: "📩",

text: "Saat mengirim pesan di grup kerja online, sebaiknya kamu...",

answers: [

{ emoji: "✅", text: "Menulis pesan yang jelas, singkat, dan relevan dengan topik", correct: true },

{ emoji: "📢", text: "Mengirim pesan sebanyak-banyaknya agar dilihat", correct: false },

{ emoji: "🤷", text: "Menggunakan huruf kapital semua agar terlihat tegas", correct: false },

{ emoji: "😜", text: "Hanya mengirim emoji tanpa penjelasan", correct: false }

]

{

emoji: "🤔",

text: "Apa keuntungan utama kolaborasi online dibanding pertemuan tatap muka?",

answers: [

{ emoji: "🏖️", text: "Bisa santai di pantai sambil kerja", correct: false },

{ emoji: "🌍", text: "Bisa bekerja sama dengan orang dari mana saja tanpa batasan jarak", correct: true },

{ emoji: "💤", text: "Bisa tidur sambil mengerjakan tugas", correct: false },

{ emoji: "🎉", text: "Selalu lebih menyenangkan dari kerja biasa", correct: false }

]

{

emoji: "⚠️",

text: "Apa yang harus dilakukan jika ada anggota kelompok yang tidak aktif dalam proyek online?",

answers: [

{ emoji: "🗑️", text: "Langsung dikeluarkan dari kelompok tanpa diskusi", correct: false },

{ emoji: "😤", text: "Memposting keluhan di media sosial", correct: false },

{ emoji: "💬", text: "Menghubungi secara pribadi dengan sopan untuk menanyakan kendalanya", correct: true },

{ emoji: "🏃", text: "Mengabaikannya dan mengerjakan semua sendiri", correct: false }

]

{

emoji: "🌟",

text: "Apa manfaat memberikan umpan balik (feedback) yang konstruktif dalam tim online?",

answers: [

{ emoji: "😢", text: "Membuat anggota tim merasa buruk tentang dirinya", correct: false },

{ emoji: "🚀", text: "Membantu tim memperbaiki pekerjaan dan berkembang bersama", correct: true },

{ emoji: "😴", text: "Tidak ada manfaatnya, lebih baik diam saja", correct: false },

{ emoji: "🤐", text: "Hanya cocok untuk guru, bukan untuk sesama siswa", correct: false }

]

}

]

}

};

// ===== STATE =====

let currentTopic = null;

let currentQuestions = [];

let currentQIndex = 0;

let score = 0;

let answered = false;

const QUESTIONS_PER_SESSION = 6;

const POINTS_PER_CORRECT = 100;

// ===== UTILS =====

function shuffle(arr) {

const a = [...arr];

for (let i = a.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

[a[i], a[j]] = [a[j], a[i]];

}

return a;

}

function showScreen(id) {

document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));

document.getElementById(id).classList.add('active');

window.scrollTo(0, 0);

}

// ===== BUBBLES BG =====

function initBubbles() {

const container = document.getElementById('bgDeco');

container.innerHTML = '';

const colors = ['#FFD93D','#FF6B35','#FF6BA8','#7C3AED','#3B82F6','#22C55E'];

for (let i = 0; i < 14; i++) {

const b = document.createElement('div');

b.className = 'bubble';

const size = 40 + Math.random() * 120;

b.style.cssText = `

width:${size}px; height:${size}px;

background:${colors[Math.floor(Math.random()*colors.length)]};

left:${Math.random()*100}%;

animation-duration:${8+Math.random()*14}s;

animation-delay:${Math.random()*10}s;

container.appendChild(b);

}

// ===== CONFETTI =====

function launchConfetti(count = 60) {

const container = document.getElementById('confettiContainer');

const colors = ['#FFD93D','#FF6B35','#FF6BA8','#7C3AED','#3B82F6','#22C55E','#F472B6','#34D399'];

for (let i = 0; i < count; i++) {

const p = document.createElement('div');

p.className = 'confetti-piece';

const size = 8 + Math.random() * 10;

p.style.cssText = `

left:${Math.random()*100}%;

width:${size}px; height:${size}px;

background:${colors[Math.floor(Math.random()*colors.length)]};

border-radius:${Math.random()>0.5?'50%':'2px'};

animation-duration:${1.5+Math.random()*2}s;

animation-delay:${Math.random()*0.6}s;

container.appendChild(p);

setTimeout(() => p.remove(), 4000);

}

// ===== GAME FLOW =====

function startTopic(topicId) {

currentTopic = topicId;

score = 0;

currentQIndex = 0;

answered = false;

const topic = topicData[topicId];

const shuffled = shuffle(topic.questions);

currentQuestions = shuffled.slice(0, QUESTIONS_PER_SESSION).map(q => ({

...q,

answers: shuffle(q.answers)

}));

document.getElementById('learningGoalText').textContent = topic.goal;

document.getElementById('qTotal').textContent = QUESTIONS_PER_SESSION;

document.getElementById('scoreDisplay').textContent = '0';

showScreen('screenGame');

renderQuestion();

}

function renderQuestion() {

answered = false;

const q = currentQuestions[currentQIndex];

const total = currentQuestions.length;

document.getElementById('qNum').textContent = currentQIndex + 1;

document.getElementById('progressFill').style.width = ((currentQIndex / total) * 100) + '%';

document.getElementById('qEmoji').textContent = q.emoji;

document.getElementById('qText').textContent = q.text;

const grid = document.getElementById('answersGrid');

grid.innerHTML = '';

q.answers.forEach((ans, i) => {

const btn = document.createElement('button');

btn.className = 'ans-btn';

btn.innerHTML = `<span class="a-emoji">${ans.emoji}</span><span>${ans.text}</span>`;

btn.style.animationDelay = (i * 0.07) + 's';

btn.onclick = () => handleAnswer(ans, btn);

grid.appendChild(btn);

});

// Re-trigger slide animation

const card = document.getElementById('questionCard');

card.style.animation = 'none';

card.offsetHeight;

card.style.animation = '';

}

function handleAnswer(ans, btn) {

if (answered) return;

answered = true;

const allBtns = document.querySelectorAll('.ans-btn');

allBtns.forEach(b => b.disabled = true);

if (ans.correct) {

btn.classList.add('correct');

score += POINTS_PER_CORRECT;

document.getElementById('scoreDisplay').textContent = score;

launchConfetti(50);

showFeedback(true, ans);

} else {

btn.classList.add('wrong');

// highlight correct

const q = currentQuestions[currentQIndex];

allBtns.forEach((b, i) => {

if (q.answers[i].correct) b.classList.add('reveal');

});

showFeedback(false, ans);

}

const correctMessages = [

"Keren banget! Kamu benar! 🎉",

"Wah, jago sekali! Jawaban tepat! 💪",

"Mantap jiwa! Benar sekali! 🔥",

"Luar biasa! Kamu memang pintar! ⚡",

"Yes! Itu jawaban yang tepat! 🚀"

];

const wrongMessages = [

"Hampir benar! Jangan menyerah ya! 💪",

"Tenang, masih banyak soal lagi! Semangat! 🌈",

"Salah sedikit, tapi kamu pasti bisa! 🤗",

"Yuk belajar lagi, kamu pasti bisa lebih baik! 📚",

"Jangan sedih! Ini kesempatan belajar! ✨"

];

function showFeedback(isCorrect, ans) {

const overlay = document.getElementById('feedbackOverlay');

const fbEmoji = document.getElementById('fbEmoji');

const fbTitle = document.getElementById('fbTitle');

const fbMsg = document.getElementById('fbMsg');

const correctInfo = document.getElementById('correctAnsInfo');

if (isCorrect) {

fbEmoji.textContent = ['🎉','🏆','⭐','🥳','🎊'][Math.floor(Math.random()*5)];

fbTitle.textContent = 'Benar! ✅';

fbTitle.className = 'feedback-title correct';

fbMsg.textContent = correctMessages[Math.floor(Math.random()*correctMessages.length)];

correctInfo.style.display = 'none';

} else {

fbEmoji.textContent = ['😅','💡','🤔','📖','🧐'][Math.floor(Math.random()*5)];

fbTitle.textContent = 'Hampir Benar! ❌';

fbTitle.className = 'feedback-title wrong';

fbMsg.textContent = wrongMessages[Math.floor(Math.random()*wrongMessages.length)];

const q = currentQuestions[currentQIndex];

const correctAns = q.answers.find(a => a.correct);

correctInfo.style.display = 'block';

correctInfo.textContent = `✅ Jawaban benar: ${correctAns.emoji} ${correctAns.text}`;

}

overlay.classList.add('active');

}

function nextQuestion() {

document.getElementById('feedbackOverlay').classList.remove('active');

currentQIndex++;

if (currentQIndex >= currentQuestions.length) {

showResult();

} else {

renderQuestion();

}

function showResult() {

const total = currentQuestions.length;

const maxScore = total * POINTS_PER_CORRECT;

const pct = score / maxScore;

let trophy, title, subtitle, motive, stars;

if (pct >= 0.9) {

trophy = '🏆'; title = 'Luar Biasa!'; subtitle = 'Kamu adalah bintang kelas!';

motive = '⭐ Nilai sempurna! Kamu benar-benar menguasai materi ini. Terus pertahankan dan bantu teman-temanmu!';

stars = 3;

} else if (pct >= 0.6) {

trophy = '🥈'; title = 'Bagus Sekali!'; subtitle = 'Pengetahuanmu sudah baik!';

motive = '💪 Kerja keras! Kamu hampir sempurna. Pelajari lagi bagian yang belum dikuasai dan kamu pasti bisa lebih baik!';

stars = 2;

} else {

trophy = '📚'; title = 'Terus Belajar!'; subtitle = 'Masih ada yang perlu dipelajari!';

motive = '🌈 Jangan menyerah! Setiap orang belajar dengan kecepatan berbeda. Coba lagi dan kamu pasti bisa lebih baik!';

stars = 1;

}

document.getElementById('resultTrophy').textContent = trophy;

document.getElementById('resultTitle').textContent = title;

document.getElementById('resultSubtitle').textContent = subtitle;

document.getElementById('finalScore').textContent = score;

document.getElementById('maxScore').textContent = maxScore;

document.getElementById('motive').textContent = motive;

// Stars animation

['star1','star2','star3'].forEach((id, i) => {

const el = document.getElementById(id);

el.classList.remove('lit');

if (i < stars) {

setTimeout(() => el.classList.add('lit'), 400 + i * 250);

}

});

if (stars >= 2) launchConfetti(80);

showScreen('screenResult');

}

function retryGame() {

if (currentTopic) startTopic(currentTopic);

}

function goHome() {

document.getElementById('feedbackOverlay').classList.remove('active');

showScreen('screenTopic');

}

// ===== INIT =====

initBubbles();

</script>

</body>

</html>

KLIK IDE GURU

Minggu, 24 Mei 2026

Tidak ada komentar:

Posting Komentar

Laporkan Penyalahgunaan

Label