0% found this document useful (0 votes)

10 views36 pages

Possessive Adjective Adventure Guide

This document is an HTML template for an educational web application titled 'Possessive Adjective Adventure' aimed at 7th-grade students. It includes various styling elements using Tailwind CSS, animations, and interactive components for a memory game and other activities. The design incorporates a vibrant color scheme and user-friendly interface elements to enhance the learning experience.

Uploaded by

Ismia Agustina

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

10 views36 pages

Possessive Adjective Adventure Guide

Uploaded by

Ismia Agustina

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">
<title>Possessive Adjective Adventure - Kelas 7 SMP</title>

<script src="[Link]

<link rel="stylesheet" href="[Link]
awesome/6.4.0/css/[Link]">

<style>
@import url('[Link]
family=Comic+Neue:wght@400;700&family=Bangers&family=Chewy&family=Fredoka:wght@400;
700&display=swap');

/* --- GLOBAL STYLES --- */

body {
font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
overflow-x: hidden;
margin: 0;
padding: 0;
background-color: #be185d;
color: #333;
user-select: none;
-webkit-tap-highlight-color: transparent;
/* Custom Cursor removed as requested */
}

/* --- MAGIC SPARKLES --- */

.sparkle {
position: fixed;
width: 10px;
height: 10px;
background-color: gold;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: sparkle-anim 0.8s linear forwards;
box-shadow: 0 0 5px orange;
}

@keyframes sparkle-anim {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(0) translate(10px, 20px); opacity: 0; }
}

/* --- SCENE TRANSITIONS --- */

.scene-container {
animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpFade {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Canvas Background Layer */
#bg-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}

/* Main Container */
#app-container {
position: relative;
z-index: 10;
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
}

/* --- NEUMORPHISM UI --- */

.neumorph-panel {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
border: 4px solid #60a5fa;
box-shadow: 10px 10px 20px rgba(0,0,0,0.2),
-5px -5px 15px rgba(255,255,255,0.3);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
width: 100%;
}

.neumorph-btn {
background: linear-gradient(145deg, #3b82f6, #2563eb);
color: white;
border: none;
border-radius: 15px;
font-weight: bold;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2),
-2px -2px 5px rgba(255,255,255,0.3);
transition: all 0.2s ease;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}

.neumorph-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 7px 7px 14px rgba(0,0,0,0.25);
filter: brightness(1.1);
}
.neumorph-btn:active {
transform: translateY(2px);
box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2);
}

.[Link] { background: linear-gradient(145deg, #f59e0b,

#d97706); }
.[Link] { background: linear-gradient(145deg, #ef4444,
#dc2626); }
.[Link] { background: linear-gradient(145deg, #10b981,
#059669); }

/* Mood Selection Styles */

.mood-btn { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.[Link] {
transform: scale(1.2);
background: #fef3c7;
box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1);
border: 4px solid #f59e0b;
}

/* --- ANIMATIONS --- */

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes popIn {
0% { transform: scale(0); opacity: 0; }
80% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.animate-pop { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32,
1.275) forwards; }

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.shake { animation: shake 0.3s ease-in-out; }

.hidden-scene { display: none !important; }

@keyframes wave-text {
0%, 100% { transform: rotate(-3deg) translateY(0); }
50% { transform: rotate(3deg) translateY(-5px); }
}
.animate-wave-text { animation: wave-text 3s ease-in-out infinite; }

@keyframes cloud-float {
0% { transform: translateX(-150px); opacity: 0; }
10% { opacity: 0.8; }
90% { opacity: 0.8; }
100% { transform: translateX(100vw); opacity: 0; }
}
.cloud-anim {
position: absolute;
color: rgba(255, 255, 255, 0.8);
animation: cloud-float linear infinite;
z-index: 1;
}

@keyframes bird-fly {
0% { transform: translateX(-50px) translateY(50px) scale(0.5); opacity:
0; }
10% { opacity: 1; }
50% { transform: translateX(50vw) translateY(0px) scale(0.7); }
100% { transform: translateX(100vw) translateY(50px) scale(0.5);
opacity: 0; }
}
.bird-anim {
position: absolute;
color: #fef08a;
animation: bird-fly linear infinite;
z-index: 2;
}

@keyframes btn-cloud-move {
0% { transform: translateX(-50px); opacity: 0; }
20% { opacity: 0.6; }
80% { opacity: 0.6; }
100% { transform: translateX(250px); opacity: 0; }
}
.btn-cloud-anim {
position: absolute;
color: rgba(255, 255, 255, 0.7);
animation: btn-cloud-move linear infinite;
pointer-events: none;
}

@keyframes march-right {
0% { transform: translateX(-50px); }
100% { transform: translateX(450px); }
}
.ant-walker { animation: march-right linear infinite; }

@keyframes balloonFloat {
0% { bottom: -150px; transform: translateX(0) rotate(0deg); }
25% { transform: translateX(10px) rotate(2deg); }
50% { transform: translateX(-10px) rotate(-2deg); }
75% { transform: translateX(10px) rotate(1deg); }
100% { bottom: 120%; transform: translateX(0) rotate(0deg); }
}

.balloon-item {
position: absolute;
width: 90px;
height: 110px;
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
font-size: 1.1rem;
cursor: pointer;
box-shadow: inset -10px -10px 20px rgba(0,0,0,0.1), 5px 10px 15px
rgba(0,0,0,0.2);
z-index: 20;
transition: transform 0.1s;
animation: balloonFloat linear forwards;
text-align: center;
line-height: 1.1;
padding: 5px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.balloon-item::after { content: ''; position: absolute; bottom: -30px;
left: 50%; width: 2px; height: 30px; background: rgba(255,255,255,0.7); transform:
translateX(-50%); }
.balloon-item::before { content: ''; position: absolute; bottom: -4px;
left: 50%; width: 10px; height: 6px; background: inherit; transform: translateX(-
50%); border-radius: 2px; }
.balloon-item:active { transform: scale(0.95); }
.balloon-pop { animation: popAnim 0.2s forwards !important; }
@keyframes popAnim { 0% { transform: scale(1); opacity: 1; } 50%
{ transform: scale(1.4); opacity: 0.8; } 100% { transform: scale(0); opacity:
0; } }

@keyframes pulse-ring { 0% { transform: scale(0.8); box-shadow: 0 0 0 0

rgba(59, 130, 246, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px
rgba(59, 130, 246, 0); } 100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(59,
130, 246, 0); } }
.animate-pulse-ring { animation: pulse-ring 2s infinite; }

@keyframes emoji-float-up { 0% { transform: translateY(0) scale(0.5);

opacity: 1; } 100% { transform: translateY(-150px) scale(1.5) rotate(20deg);
opacity: 0; } }
.celebration-emoji { position: fixed; pointer-events: none; z-index: 100;
animation: emoji-float-up 1.5s ease-out forwards; }

/* Memory Game */
.memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap:
10px; perspective: 1000px; width: 100%; max-width: 600px; margin: 0 auto; }
@media (min-width: 768px) { .memory-grid { grid-template-columns: repeat(4,
1fr); gap: 15px; } }
.memory-card { background-color: transparent; aspect-ratio: 3/4; cursor:
pointer; position: relative; transform-style: preserve-3d; transition: transform
0.5s; }
.[Link] { transform: rotateY(180deg); }
.memory-card .front-face, .memory-card .back-face { width: 100%; height:
100%; position: absolute; backface-visibility: hidden; border-radius: 12px;
display: flex; flex-direction: column; justify-content: center; align-items:
center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-weight: bold; font-size:
1.2rem; user-select: none; }
.memory-card .front-face { background: linear-gradient(135deg, #fff,
#f0f9ff); transform: rotateY(180deg); border: 4px solid #3b82f6; color: #1e40af; }
.memory-card .back-face { background: linear-gradient(135deg, #f472b6,
#db2777); background-image: radial-gradient(circle, rgba(255,255,255,0.2) 2px,
transparent 2px); background-size: 10px 10px; border: 4px solid #fff; color: white;
font-size: 2rem; }
.[Link] .front-face { background: #dcfce7; border-color:
#22c55e; color: #15803d; animation: pulse-ring 1s infinite; }

/* Game 1 */
.drop-zone { transition: all 0.3s ease; }
.[Link] { background-color: #dbeafe; border-color: #3b82f6;
transform: scale(1.02); }
.draggable-item { cursor: pointer; transition: all 0.2s; }
.[Link] { background: #fcd34d; transform: scale(1.1)
rotate(5deg); box-shadow: 0 10px 15px rgba(0,0,0,0.2); border: 2px solid #b45309;
z-index: 50; }

/* Progress Bar */
.progress-bar-container { width: 100%; height: 20px; background: #e5e7eb;
border-radius: 999px; overflow: hidden; border: 3px solid white; box-shadow: inset
0 2px 4px rgba(0,0,0,0.1); }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg,
#34d399, #10b981); width: 0%; transition: width 0.5s ease; }

.text-3d { text-shadow: 4px 4px 0 #1e3a8a, 6px 6px 5px rgba(0,0,0,0.3); }

.font-alasassy-style { font-family: 'Bangers', cursive; letter-spacing:
3px; text-transform: uppercase; text-shadow: 3px 3px 0px #b45309, 6px 6px 0px
#78350f, 8px 8px 10px rgba(0,0,0,0.4); }

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #fcd34d; border-radius: 4px; }
</style>
</head>
<body>

<div id="nav-bar" class="fixed top-4 right-4 z-50 flex gap-2 md:gap-3
hidden-scene">
<button onclick="toggleMusic()" class="neumorph-btn px-3 py-2 md:px-4
text-xs md:text-sm bg-purple-500 rounded-full hover:bg-purple-600 transition-
colors">
<i id="music-icon" class="fas fa-volume-mute"></i> Musik
</button>
<button onclick="goBack()" class="neumorph-btn danger px-3 py-2 md:px-4
text-xs md:text-sm rounded-full">
<i class="fas fa-arrow-left"></i> Menu
</button>
</div>

<div id="modal-confirm" class="fixed inset-0 z-[60] hidden flex items-
center justify-center bg-black/50 backdrop-blur-sm p-4">
<div class="bg-white p-6 md:p-8 rounded-2xl shadow-2xl text-center max-
w-sm w-full mx-auto transform scale-100 animate-pop border-4 border-yellow-400">
<div class="text-6xl mb-4">🤔</div>
<h2 class="text-2xl font-bold text-gray-800 mb-4">Keluar dari game?
</h2>
<p class="text-gray-600 mb-6">Progress permainanmu akan hilang.</p>
<div class="flex gap-4 justify-center">
<button onclick="closeConfirmModal()" class="neumorph-btn px-6
py-2 bg-gray-400">Batal</button>
<button onclick="confirmExitGame()" class="neumorph-btn danger
px-6 py-2">Ya, Keluar</button>
</div>
</div>
</div>

<div class="relative z-10 mb-2 animate-pop mt-10 lg:mt-4">
<h2 class="text-4xl md:text-5xl lg:text-6xl text-yellow-300 font-
alasassy-style mb-4 animate-wave-text inline-block filter drop-shadow-lg stroke-
black">Welcome to English Class</h2>

<div class="animate-float mt-2 lg:mt-6">
<h1 class="text-6xl md:text-9xl lg:text-[10rem] leading-none
select-none pointer-events-none" style="font-family: 'Chewy', cursive;">
<div class="transform -rotate-3 hover:scale-105 transition
duration-300 z-10 relative">
<span class="block text-red-500 tracking-wider"
style="text-shadow: 5px 5px 0 #7f1d1d, -2px -2px 0 #fff; -webkit-text-stroke: 3px
black;">POSSESSIVE</span>
</div>
<div class="transform rotate-2 hover:scale-105 transition
duration-300 z-20 relative mt-[-10px] md:mt-[-20px] lg:mt-[-30px]">
<span class="block text-yellow-400 tracking-wider"
style="text-shadow: 5px 5px 0 #b45309, -2px -2px 0 #fff; -webkit-text-stroke: 3px
black;">ADJECTIVE</span>
</div>
<div class="transform -rotate-2 hover:scale-105 transition
duration-300 z-10 relative mt-[-5px] md:mt-[-15px] lg:mt-[-20px]">
<span class="block text-green-500 tracking-wider"
style="text-shadow: 5px 5px 0 #14532d, -2px -2px 0 #fff; -webkit-text-stroke: 3px
black;">ADVENTURE</span>
</div>
</h1>
</div>
</div>

<button onclick="navigate('menu'); startMusicOnInteraction();
speakText('Welcome to Possessive Adjective Adventure');" class="absolute bottom-16
left-4 md:left-8 lg:bottom-24 lg:left-20 z-30 neumorph-btn px-16 py-5 lg:px-20
lg:py-6 text-3xl lg:text-4xl animate-pop hover:scale-110 transition shadow-xl
border-4 border-green-500 !bg-gradient-to-br !from-green-700 !to-green-900 text-
white relative overflow-visible group !rounded-full">
<div class="absolute -top-8 -right-8 lg:-top-12 lg:-right-12 text-
6xl lg:text-8xl animate-bounce group-hover:rotate-12 transition duration-300 filter
drop-shadow-md">🚀</div>
Let's Start!
</button>
<p class="text-white mt-4 opacity-80 text-sm absolute bottom-4 left-1/2
transform -translate-x-1/2 z-20 font-bold bg-pink-600/30 px-3 py-1 rounded-full
lg:text-lg">Created for Grade 7 SMP</p>
</div>

<h2 class="text-5xl font-bold text-pink-600 mb-10 border-b-8

border-white inline-block pb-4 pt-2 relative z-10 drop-shadow-md tracking-wider bg-
yellow-300 px-10 rounded-full transform -rotate-2 shadow-xl hover:scale-105
transition" style="font-family: 'Fredoka', sans-serif;">Main Menu</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6

relative z-10 w-full">

<button onclick="navigate('objective')" class="neumorph-btn p-6
flex flex-col items-center gap-3 !bg-gradient-to-br !from-green-400/80 !to-green-
600/80 hover:!from-green-500/90 hover:!to-green-700/90 group border-4 border-green-
200/50 relative overflow-hidden shadow-lg transform transition hover:scale-105
backdrop-blur-md !rounded-tl-[50px] !rounded-br-[50px] !rounded-tr-lg !rounded-bl-
lg">
<div class="absolute top-2 left-2 text-3xl animate-bounce
pointer-events-none" style="animation-duration: 2s;">🐛</div>
<div class="absolute bottom-8 right-2 text-2xl animate-
wiggle pointer-events-none transform rotate-12">🐞</div>
<div class="bg-white/30 p-4 rounded-full group-hover:bg-
white/40 transition backdrop-blur-sm"><i class="fas fa-bullseye text-5xl text-white
drop-shadow-md"></i></div>
<span class="text-xl text-white font-bold drop-shadow-sm
relative z-10">Tujuan</span>
<div class="absolute -bottom-1 left-0 w-full text-center
text-lg opacity-80 pointer-events-none">🌱🌿🌱🌿🌱</div>
</button>

<button onclick="navigate('material')" class="neumorph-btn p-6

flex flex-col items-center gap-3 !bg-gradient-to-br !from-sky-300/80 !to-sky-500/80
hover:!from-sky-400/90 hover:!to-sky-600/90 group border-4 border-sky-200/50
relative overflow-hidden shadow-lg transform transition hover:scale-105 backdrop-
blur-md !rounded-[50px]">
<div class="absolute top-4 right-4 text-3xl animate-float
pointer-events-none transform rotate-12">✈️</div>
<div class="absolute bottom-4 left-4 text-3xl animate-pulse
pointer-events-none" style="animation-duration: 1.5s;">🚁</div>
<i class="fas fa-cloud btn-cloud-anim text-2xl top-2 left-
2" style="animation-duration: 8s;"></i>
<i class="fas fa-cloud btn-cloud-anim text-3xl bottom-4
left-0" style="animation-duration: 12s; animation-delay: 2s;"></i>
<div class="bg-white/30 p-4 rounded-full group-hover:bg-
white/40 transition backdrop-blur-sm relative z-10"><i class="fas fa-book-open
text-5xl text-white drop-shadow-md"></i></div>
<span class="text-xl text-white font-bold drop-shadow-sm
relative z-10">Materi</span>
</button>
<button onclick="navigate('games-menu')" class="neumorph-btn p-
6 flex flex-col items-center gap-3 !bg-gradient-to-br !from-yellow-300/80 !to-
yellow-500/80 hover:!from-yellow-400/90 hover:!to-yellow-600/90 group border-4
border-yellow-200/50 relative overflow-hidden shadow-lg transform transition
hover:scale-105 backdrop-blur-md !rounded-tr-[50px] !rounded-bl-[50px] !rounded-tl-
lg !rounded-br-lg">
<div class="absolute top-2 left-2 text-3xl animate-wiggle
pointer-events-none transform -rotate-12">👻</div>
<div class="absolute bottom-8 right-2 text-3xl animate-
bounce pointer-events-none" style="animation-duration: 1.2s;">👾</div>
<div class="absolute -bottom-4 left-1/2 transform -
translate-x-1/2 w-40 h-20 opacity-70 pointer-events-none">
<svg viewBox="0 0 100 50" class="w-full h-full"><path
d="M5,50 A45,45 0 0,1 95,50" fill="none" stroke="#ef4444" stroke-width="5" /><path
d="M10,50 A40,40 0 0,1 90,50" fill="none" stroke="#f97316" stroke-width="5" /><path
d="M15,50 A35,35 0 0,1 85,50" fill="none" stroke="#eab308" stroke-width="5" /><path
d="M20,50 A30,30 0 0,1 80,50" fill="none" stroke="#22c55e" stroke-width="5" /><path
d="M25,50 A25,25 0 0,1 75,50" fill="none" stroke="#3b82f6" stroke-width="5" /><path
d="M30,50 A20,20 0 0,1 70,50" fill="none" stroke="#a855f7" stroke-width="5"
/></svg>
</div>
<div class="bg-white/30 p-4 rounded-full group-hover:bg-
white/40 transition backdrop-blur-sm relative z-10"><i class="fas fa-gamepad text-
5xl text-white drop-shadow-md"></i></div>
<span class="text-xl text-white font-bold drop-shadow-sm
relative z-10">Games</span>
</button>

<button onclick="navigate('closing')" class="neumorph-btn p-6

flex flex-col items-center gap-3 !bg-gradient-to-br !from-pink-500/80 !to-pink-
700/80 hover:!from-pink-600/90 hover:!to-pink-800/90 group border-4 border-pink-
300/50 relative overflow-hidden shadow-lg transform transition hover:scale-105
backdrop-blur-md !rounded-t-[50px] !rounded-b-xl">
<div class="absolute top-2 right-2 text-3xl animate-pulse
pointer-events-none transform rotate-12">🐝</div>
<div class="absolute bottom-8 left-2 text-3xl animate-
float pointer-events-none transform -scale-x-100">🦋</div>
<div class="absolute top-2 left-2 text-2xl opacity-80
animate-spin pointer-events-none" style="animation-duration: 8s;">🌸</div><div
class="absolute bottom-2 right-2 text-2xl opacity-80 animate-pulse pointer-events-
none">🌺</div>
<div class="bg-white/30 p-4 rounded-full group-hover:bg-
white/40 transition backdrop-blur-sm relative z-10"><i class="fas fa-list-alt text-
5xl text-white drop-shadow-md"></i></div>
<span class="text-xl text-white font-bold drop-shadow-sm
relative z-10">Ringkasan</span>
</button>
</div>
</div>
</div>

<h2 class="text-3xl font-bold text-green-800 mb-6 uppercase

tracking-wider relative z-10">Tujuan Pembelajaran</h2>
<div class="bg-white/80 p-6 rounded-xl border-2 border-green-300
shadow-sm mb-6 relative z-10 backdrop-blur-sm">
<p class="text-2xl text-gray-700 leading-relaxed font-
bold">"Siswa mampu mengenali dan menggunakan <br><span class="text-green-700 bg-
yellow-100 px-3 py-1 rounded inline-block mt-2 transform -rotate-1 border border-
yellow-300">Possessive Adjective</span><br>(Kata Sifat Kepemilikan) dengan
benar."</p>
</div>
<h3 class="text-green-600 font-bold mb-4 relative z-10">Kata Kunci
(Klik untuk dengar 🔊):</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-lg font-bold
text-green-900 relative z-10">
<button onclick="speakText('My')" class="bg-green-100 p-3
rounded shadow-sm hover:scale-105 transition border border-green-200 flex items-
center justify-center gap-2"><i class="fas fa-volume-up text-green-600"></i> My
(Ku)</button>
<button onclick="speakText('Your')" class="bg-green-100 p-3
rounded shadow-sm hover:scale-105 transition border border-green-200 flex items-
center justify-center gap-2"><i class="fas fa-volume-up text-green-600"></i> Your
(Mu)</button>
<button onclick="speakText('His')" class="bg-green-100 p-3
rounded shadow-sm hover:scale-105 transition border border-green-200 flex items-
center justify-center gap-2"><i class="fas fa-volume-up text-green-600"></i> His
(Dia Lk)</button>
<button onclick="speakText('Her')" class="bg-green-100 p-3
rounded shadow-sm hover:scale-105 transition border border-green-200 flex items-
center justify-center gap-2"><i class="fas fa-volume-up text-green-600"></i> Her
(Dia Pr)</button>
<button onclick="speakText('Its')" class="bg-green-100 p-3
rounded shadow-sm hover:scale-105 transition border border-green-200 flex items-
center justify-center gap-2"><i class="fas fa-volume-up text-green-600"></i> Its
(Hewan)</button>
<button onclick="speakText('Our')" class="bg-green-100 p-3
rounded shadow-sm hover:scale-105 transition border border-green-200 flex items-
center justify-center gap-2"><i class="fas fa-volume-up text-green-600"></i> Our
(Kami)</button>
<button onclick="speakText('Their')" class="bg-green-100 p-3
rounded shadow-sm hover:scale-105 transition border border-green-200 flex items-
center justify-center gap-2"><i class="fas fa-volume-up text-green-600"></i> Their
(Mereka)</button>
</div>
<button onclick="navigate('material')" class="mt-8 neumorph-btn px-
8 py-3 bg-green-600 hover:bg-green-700 relative z-10 border-2 border-green-
400">Next <i class="fas fa-arrow-right ml-2"></i></button>
</div>
</div>

<h2 class="text-3xl font-bold text-center text-rose-700 mb-6

border-b-4 border-rose-400 pb-2 drop-shadow-md relative z-10">Materi
Pembelajaran</h2>
<div class="flex flex-col md:flex-row gap-6 flex-grow relative z-
10">
<div class="w-full md:w-1/4 flex flex-col gap-2 bg-white/40 p-4
rounded-xl border-4 border-pink-200/60 backdrop-blur-md shadow-lg">
<h3 class="font-bold text-center text-pink-700 border-b-2
border-pink-300 pb-2 mb-2 text-shadow-sm">Subject ➔ Possessive</h3>
<div id="pronoun-list" class="space-y-2 overflow-y-auto
max-h-60 md:max-h-full pr-1"></div>
</div>
<div class="w-full md:w-3/4 flex flex-col">
<div id="slide-display" class="flex-grow bg-white/50
rounded-xl border-4 border-white/60 p-6 relative overflow-hidden flex flex-col
items-center text-center shadow-xl transition-all duration-500 backdrop-blur-md">
<div class="z-10 w-full flex flex-col items-center h-
full justify-center">
<div id="mat-icon" class="text-9xl mb-4 animate-
float filter drop-shadow-md"></div>
<h3 id="mat-title" class="text-6xl font-extrabold
text-blue-700 mb-2 font-comic text-3d"></h3>
<p id="mat-desc" class="text-2xl text-gray-800
font-bold mb-6 bg-white/60 px-4 py-2 rounded-lg backdrop-blur-sm shadow-sm"></p>
<div class="bg-yellow-50/60 border-2 border-yellow-
300/60 rounded-lg p-4 h-56 overflow-y-auto text-left w-full shadow-sm relative
backdrop-blur-sm">
<h4 class="font-bold text-yellow-900 mb-3 text-
center border-b border-yellow-200/60 pb-1 sticky top-0 bg-yellow-50/80 z-10 text-sm
md:text-base rounded"><i class="fas fa-headphones-alt text-blue-600 mr-2 animate-
bounce"></i> Klik kalimat untuk mendengarkan!</h4>
<ul id="mat-examples" class="list-none space-y-
2 text-lg text-gray-900 font-bold px-2 pb-2"></ul>
</div>
</div>
</div>
<div class="flex justify-between items-center mt-4 bg-
white/30 p-2 rounded-xl backdrop-blur-sm border border-white/40">
<button onclick="prevSlide()" class="neumorph-btn px-6
py-3 bg-gray-400 hover:bg-gray-500 border-2 border-white"><i class="fas fa-chevron-
left"></i> Prev</button>
<span id="slide-indicator" class="font-bold text-2xl
text-rose-800 font-mono bg-white/60 px-4 py-1 rounded shadow-inner border-2 border-
pink-200">1/7</span>
<button onclick="nextSlide()" class="neumorph-btn px-6
py-3 bg-pink-500 border-2 border-white">Next <i class="fas
fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
</div>

<div id="scene-games-menu" class="hidden-scene scene-container w-full max-
w-4xl mx-auto text-center">
<div class="neumorph-panel p-10 relative overflow-hidden bg-gradient-
to-br from-yellow-100 via-yellow-50 to-orange-100">
<div class="absolute inset-0 w-full h-full pointer-events-none z-
0">
<div class="absolute -top-20 left-1/2 transform -translate-x-
1/2 w-[120%] h-[300px] opacity-30">
<svg viewBox="0 0 200 100" class="w-full h-full"
preserveAspectRatio="none"><path d="M0,100 A100,100 0 0,1 200,100" fill="none"
stroke="#ef4444" stroke-width="8" /><path d="M10,100 A90,90 0 0,1 190,100"
fill="none" stroke="#f97316" stroke-width="8" /><path d="M20,100 A80,80 0 0,1
180,100" fill="none" stroke="#eab308" stroke-width="8" /><path d="M30,100 A70,70 0
0,1 170,100" fill="none" stroke="#22c55e" stroke-width="8" /><path d="M40,100
A60,60 0 0,1 160,100" fill="none" stroke="#3b82f6" stroke-width="8" /><path
d="M50,100 A50,50 0 0,1 150,100" fill="none" stroke="#a855f7" stroke-width="8"
/></svg>
</div>
<div class="absolute top-10 left-10 text-5xl opacity-60
animate-bounce">☁️</div>
<div class="absolute top-20 right-20 text-6xl opacity-50
animate-float">☁️</div>
<div class="absolute bottom-10 left-1/4 text-4xl text-yellow-
500 opacity-60 animate-pulse">✨</div>
</div>
<h2 class="text-4xl font-bold text-orange-600 mb-2 relative z-10
drop-shadow-sm border-b-4 border-orange-200 inline-block pb-2">Game Zone</h2>
<div class="flex flex-col md:flex-row gap-6 justify-center relative
z-10">
<button onclick="startGame(1)" class="neumorph-btn p-8 text-xl
flex-1 hover:scale-105 transition flex flex-col items-center justify-center gap-4
border-4 border-yellow-200 shadow-xl !bg-gradient-to-br !from-yellow-300 !to-
yellow-500 hover:!from-yellow-400 hover:!to-yellow-600 relative overflow-hidden
group !rounded-tl-[40px] !rounded-br-[40px]">
<div class="absolute -bottom-2 left-0 w-full flex justify-
center gap-1 text-2xl opacity-90 pointer-events-none select-none"><span
class="transform translate-y-1">🌱</span><span class="text-xl mt-2 transform -
translate-y-1">🌸</span><span class="transform translate-y-1">🌿</span></div>
<div class="absolute top-3 left-3 text-xl opacity-60
animate-spin pointer-events-none">🌻</div>
<div class="text-6xl filter drop-shadow-md relative z-10">🧩
</div><span class="font-bold text-white text-shadow relative z-10">Pasangkan
Kata</span><span class="text-sm opacity-90 font-normal bg-black/10 px-2 py-1
rounded relative z-10">Drag & Drop / Click</span>
</button>
<button onclick="startGame(2)" class="neumorph-btn p-8 text-xl
flex-1 hover:scale-105 transition flex flex-col items-center justify-center gap-4
border-4 border-green-200 shadow-xl !bg-gradient-to-br !from-green-400 !to-green-
600 hover:!from-green-500 hover:!to-green-700 relative overflow-hidden group !
rounded-[40px]">
<div class="absolute -bottom-2 left-0 w-full flex justify-
center gap-1 text-2xl opacity-90 pointer-events-none select-none"><span
class="transform translate-y-1">🌱</span><span class="text-xl mt-2 transform -
translate-y-1">🌿</span></div>
<div class="absolute top-4 left-4 text-xl opacity-60
animate-bounce pointer-events-none">🐞</div>
<div class="text-6xl filter drop-shadow-md relative z-10">🎈
</div><span class="font-bold text-white text-shadow relative z-10">Tangkap
Balon</span><span class="text-sm opacity-90 font-normal bg-black/10 px-2 py-1
rounded relative z-10">Pilihan Ganda</span>
</button>
<button onclick="startGame(3)" class="neumorph-btn p-8 text-xl
flex-1 hover:scale-105 transition flex flex-col items-center justify-center gap-4
border-4 border-pink-300 shadow-xl !bg-gradient-to-br !from-pink-500 !to-pink-700
hover:!from-pink-600 hover:!to-pink-800 relative overflow-hidden group !rounded-tr-
[40px] !rounded-bl-[40px]">
<div class="absolute -bottom-2 left-0 w-full flex justify-
center gap-1 text-2xl opacity-90 pointer-events-none select-none"><span
class="transform translate-y-1 hover:animate-bounce">🌷</span><span class="text-xl
mt-2 transform -translate-y-1">🍃</span></div>
<div class="text-6xl filter drop-shadow-md relative z-
10">🃏</div><span class="font-bold text-white text-shadow relative z-10">Memory
Match</span><span class="text-sm opacity-90 font-normal bg-black/10 px-2 py-1
rounded relative z-10">Ingatan Kuat</span>
</button>
</div>
</div>
</div>

<div id="scene-game1" class="hidden-scene scene-container w-full max-w-6xl
mx-auto">
<div class="flex justify-between items-center mb-4 bg-white/90 p-3
rounded-xl shadow-lg border-2 border-purple-200 relative z-20">
<h2 class="text-2xl font-bold text-purple-700"><i class="fas fa-
puzzle-piece mr-2"></i> Pasangkan Kata!</h2>
<div class="text-xl font-bold bg-purple-100 px-4 py-1 rounded-lg
text-purple-800">Score: <span id="score-g1" class="text-2xl">0</span></div>
</div>
<div class="neumorph-panel p-6 bg-pink-50 flex flex-col md:flex-row
gap-6 min-h-[60vh] relative overflow-hidden">
<div class="absolute inset-0 w-full h-full pointer-events-none z-
0">
<div class="absolute top-4 left-4 text-6xl opacity-30 animate-
bounce">📚</div><div class="absolute bottom-10 right-10 text-6xl opacity-30 animate-
wiggle transform -rotate-12">✏️</div><div class="absolute top-1/2 left-2 text-5xl
opacity-20 animate-float">🎒</div><div class="absolute top-6 right-20 text-5xl
opacity-20 animate-spin-slow">📏</div><div class="absolute bottom-4 left-1/3 text-5xl
opacity-20 animate-pulse">✂️</div>
</div>
<div class="w-full md:w-3/4 relative z-10">
<h3 class="text-center text-gray-500 mb-2 text-sm italic font-
bold bg-white/50 inline-block px-4 py-1 rounded-full backdrop-blur-sm">Klik jawaban
di kanan, lalu klik kotak kosong di kiri.</h3>
<div id="g1-drop-area" class="grid grid-cols-1 sm:grid-cols-2
gap-4 h-full content-start"></div>
</div>
<div class="w-full md:w-1/4 bg-white/90 backdrop-blur-sm rounded-xl
p-4 border-4 border-dashed border-blue-400 flex flex-col shadow-inner relative z-
10">
<h3 class="text-center font-bold mb-4 text-blue-600 uppercase
border-b pb-2">Pilihan Jawaban</h3>
<div id="g1-drag-area" class="flex flex-wrap justify-center
gap-3 content-start"></div>
<div id="g1-message" class="mt-auto text-center font-bold text-
lg min-h-[2rem]"></div>
</div>
</div>
<button id="btn-finish-g1" onclick="finishGame(1)" class="hidden
neumorph-btn w-full mt-4 py-3 bg-green-500 text-xl shadow-lg animate-bounce
relative z-20">Next <i class="fas fa-check-circle"></i></button>
</div>

<div id="scene-game2" class="hidden-scene scene-container w-full max-w-5xl
mx-auto">
<div class="neumorph-panel p-0 relative overflow-hidden bg-gradient-to-
b from-sky-300 to-sky-100 min-h-[80vh] flex flex-col border-4 border-sky-400">
<div class="absolute inset-0 w-full h-full pointer-events-none
select-none z-0">
<i class="fas fa-cloud cloud-anim text-8xl text-white/60"
style="top: 10%; left: -100px; animation-duration: 40s;"></i>
<i class="fas fa-cloud cloud-anim text-9xl text-white/50"
style="bottom: 20%; left: -200px; animation-duration: 55s; animation-delay:
5s;"></i>
</div>
<div class="relative z-30 p-4 flex justify-between items-center bg-
white/40 backdrop-blur-md border-b border-white/50 shadow-sm">
<span class="font-bold text-blue-800 text-xl flex items-center
gap-2"><i class="fas fa-parachute-box text-blue-600"></i> Tangkap Balon!</span>
<div class="flex gap-4"><span class="font-bold text-blue-800
bg-white/60 px-3 py-1 rounded-lg">Soal: <span id="g2-q-num">1</span>/10</span><span
class="font-bold text-green-700 bg-green-100/90 px-3 py-1 rounded-lg border border-
green-200">Score: <span id="score-g2">0</span></span></div>
</div>
<div class="progress-bar-container h-2 rounded-none bg-blue-200
border-none"><div id="g2-progress" class="progress-bar-fill
!bg-blue-500"></div></div>
<div id="g2-sky-zone" class="relative flex-grow w-full overflow-
hidden z-10 h-full min-h-[400px]"></div>

<p class="text-gray-500 text-sm font-bold uppercase mb-1

tracking-wider">Pertanyaan:</p>
<p id="g2-question" class="text-2xl md:text-3xl font-bold text-
blue-900 leading-snug font-comic"></p>
</div>
<div id="g2-feedback" class="absolute inset-0 z-40 hidden flex-col
items-center justify-center bg-black/40 backdrop-blur-sm">
<div class="bg-white p-8 rounded-3xl shadow-2xl text-center
max-w-sm animate-pop border-4 border-blue-300 relative">
<div id="g2-face" class="text-8xl mb-4
animate-bounce"></div>
<h2 id="g2-msg" class="text-3xl font-bold mb-4"></h2>
<button onclick="nextG2Question()" class="neumorph-btn px-
10 py-3 text-xl shadow-xl bg-blue-500 hover:bg-blue-600 text-white border-2 border-
white">Next <i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>

<div id="scene-game3" class="hidden-scene scene-container w-full max-w-5xl
mx-auto">
<div class="neumorph-panel p-8 flex flex-col items-center gap-4 min-h-
[80vh] bg-gradient-to-br from-pink-100 to-purple-100 border-4 border-pink-300">
<div class="w-full flex justify-between items-center bg-white/60
p-4 rounded-xl backdrop-blur-md shadow-sm mb-4">
<h2 class="text-2xl font-bold text-pink-700 flex items-center
gap-2"><span class="text-3xl">🃏</span> Jodohkan Kartu!</h2>
<div class="flex gap-4">
<div class="text-lg font-bold text-purple-700 bg-purple-
100 px-3 py-1 rounded-lg border border-purple-200">Matches: <span id="g3-
matches">0</span>/6</div>
<div class="text-lg font-bold text-green-700 bg-green-100
px-3 py-1 rounded-lg border border-green-200">Score: <span
id="score-g3">0</span></div>
</div>
</div>
<div class="w-full flex justify-center items-start flex-grow"><div
id="g3-board" class="memory-grid"></div></div>
<div id="g3-info" class="text-gray-500 font-bold text-lg animate-
pulse mt-4">Klik kartu untuk mencari pasangannya!</div>
<button onclick="navigate('games-menu')" class="neumorph-btn bg-
gray-400 text-white py-2 px-6 mt-2">Keluar</button>
<div id="g3-win-overlay" class="absolute inset-0 z-50 hidden flex-
col items-center justify-center bg-black/60 backdrop-blur-sm rounded-2xl">
<div class="bg-white p-8 rounded-3xl shadow-2xl text-center
max-w-sm animate-pop border-4 border-pink-400">
<div class="text-8xl mb-4 animate-bounce">🎉</div>
<h2 class="text-4xl font-bold text-pink-600 mb-2">Hebat!
</h2>
<p class="text-gray-600 mb-6 font-bold">Semua kartu cocok!
</p>
<button onclick="navigate('evaluation');
calculateFinal();" class="neumorph-btn secondary px-10 py-3 text-xl shadow-xl
border-2 border-white">Lanjut</button>
</div>
</div>
</div>
</div>

<div id="scene-evaluation" class="hidden-scene scene-container w-full max-
w-3xl mx-auto text-center">
<div class="neumorph-panel p-10 bg-gradient-to-b from-blue-50 to-white
relative overflow-hidden">
<i class="fas fa-certificate text-yellow-100 text-9xl absolute -
top-10 -right-10 transform rotate-12"></i>
<h2 class="text-4xl font-bold text-blue-800 mb-6 relative z-
10">Rapor Petualangan</h2>
<div class="w-48 h-48 mx-auto bg-gradient-to-br from-yellow-300 to-
yellow-500 rounded-full flex flex-col items-center justify-center border-8 border-
white shadow-2xl mb-6 relative z-10">
<span class="text-sm font-bold text-yellow-900 uppercase">Total
Score</span>
<span id="final-score" class="text-7xl font-extrabold text-
white text-3d">0</span>
</div>
<h3 id="motivation-text" class="text-2xl font-bold text-pink-600
mb-8 animate-pulse bg-white/80 inline-block px-4 py-1 rounded"></h3>
<div class="grid grid-cols-3 gap-4 mb-8 text-sm md:text-base
relative z-10">
<div class="bg-pink-100 p-4 rounded-xl border border-pink-
200"><div class="font-bold text-pink-800 mb-1">Game 1</div><div class="text-xs
text-pink-600 mb-2">Drag & Drop</div><div id="res-g1" class="text-2xl font-black
text-pink-700">0</div></div>
<div class="bg-blue-100 p-4 rounded-xl border border-blue-
200"><div class="font-bold text-blue-800 mb-1">Game 2</div><div class="text-xs
text-blue-600 mb-2">Quiz</div><div id="res-g2" class="text-2xl font-black text-
blue-700">0</div></div>
<div class="bg-green-100 p-4 rounded-xl border border-green-
200"><div class="font-bold text-green-800 mb-1">Game 3</div><div class="text-xs
text-green-600 mb-2">Memory</div><div id="res-g3" class="text-2xl font-black text-
green-700">0</div></div>
</div>
<div class="flex flex-col md:flex-row justify-center gap-4 relative
z-10">
<button onclick="[Link]()" class="neumorph-btn px-8
py-3 bg-gray-500 text-gray-100"><i class="fas fa-redo"></i> Ulangi</button>
<button onclick="navigate('closing')" class="neumorph-btn
secondary px-8 py-3 text-lg shadow-lg">Ringkasan Akhir <i class="fas fa-arrow-
right"></i></button>
</div>
</div>
</div>

<div id="scene-closing" class="hidden-scene scene-container w-full max-w-
4xl mx-auto text-center">
<div class="neumorph-panel p-10 relative overflow-hidden bg-gradient-
to-br from-purple-100 to-fuchsia-100">
<div class="absolute inset-0 w-full h-full pointer-events-none
select-none z-0"><div class="absolute -top-5 -left-5 text-7xl opacity-20 animate-
spin" style="animation-duration: 25s;">🌸</div><div class="absolute top-20 right-5
text-5xl opacity-30 animate-float" style="animation-duration: 5s;">🌺</div><div
class="absolute bottom-10 left-10 text-4xl opacity-30 animate-bounce"
style="animation-duration: 3s;">🌷</div></div>
<h2 class="text-4xl font-bold text-purple-800 mb-6 border-b-4
border-purple-300 inline-block pb-2 relative z-10">Ringkasan Materi</h2>
<div class="bg-white/80 p-6 rounded-xl border-2 border-purple-200
text-left grid grid-cols-1 md:grid-cols-2 gap-4 text-xl mb-8 shadow-inner relative
z-10 backdrop-blur-sm">
<div class="flex items-center gap-2 border-b border-purple-100
pb-2"><span class="bg-purple-500 text-white w-8 h-8 rounded-full flex items-center
justify-center text-sm font-bold shadow-sm">1</span> I ➔ <b class="text-purple-
600">My</b></div>
<div class="flex items-center gap-2 border-b border-purple-100
pb-2"><span class="bg-purple-500 text-white w-8 h-8 rounded-full flex items-center
justify-center text-sm font-bold shadow-sm">2</span> You ➔ <b class="text-purple-
600">Your</b></div>
<div class="flex items-center gap-2 border-b border-purple-100
pb-2"><span class="bg-purple-500 text-white w-8 h-8 rounded-full flex items-center
justify-center text-sm font-bold shadow-sm">3</span> He ➔ <b class="text-purple-
600">His</b></div>
<div class="flex items-center gap-2 border-b border-purple-100
pb-2"><span class="bg-purple-500 text-white w-8 h-8 rounded-full flex items-center
justify-center text-sm font-bold shadow-sm">4</span> She ➔ <b class="text-purple-
600">Her</b></div>
<div class="flex items-center gap-2 border-b border-purple-100
pb-2"><span class="bg-purple-500 text-white w-8 h-8 rounded-full flex items-center
justify-center text-sm font-bold shadow-sm">5</span> It ➔ <b class="text-purple-
600">Its</b></div>
<div class="flex items-center gap-2 border-b border-purple-100
pb-2"><span class="bg-purple-500 text-white w-8 h-8 rounded-full flex items-center
justify-center text-sm font-bold shadow-sm">6</span> We ➔ <b class="text-purple-
600">Our</b></div>
<div class="flex items-center gap-2 border-b border-purple-100
pb-2"><span class="bg-purple-500 text-white w-8 h-8 rounded-full flex items-center
justify-center text-sm font-bold shadow-sm">7</span> They ➔ <b class="text-purple-
600">Their</b></div>
</div>
<h3 class="text-2xl font-bold text-purple-700 mb-8 relative z-
10">Satu langkah lagi sebelum selesai...</h3>
<button onclick="navigate('feedback')" class="neumorph-btn
secondary px-12 py-3 text-xl hover:scale-105 shadow-xl relative z-10 !bg-gradient-
to-br !from-purple-500 !to-fuchsia-600 hover:!from-purple-600 hover:!to-fuchsia-700
border-2 border-purple-200">Berikan Feedback <i class="fas fa-comment-dots ml-
2"></i></button>
</div>
</div>

<div id="scene-feedback" class="hidden-scene scene-container w-full max-w-
3xl mx-auto text-center">
<div class="neumorph-panel p-10 relative overflow-hidden bg-gradient-
to-br from-pink-100 via-rose-50 to-pink-200">
<div class="absolute inset-0 w-full h-full pointer-events-none
select-none z-0">
<div class="absolute bottom-0 left-0 w-full text-3xl opacity-60
flex justify-between overflow-hidden whitespace-nowrap transform translate-y-
2"><span>🌱🌿🌷🌱🌿🌻🌱🌿🌷🌱🌿🌻🌱🌿🌷🌱🌿</span></div>
<div class="absolute top-10 left-10 text-5xl opacity-30
animate-spin">🌸</div><div class="absolute top-20 right-10 text-4xl opacity-40
animate-float">🌺</div>
</div>
<div class="relative z-10">
<h2 class="text-3xl font-bold text-rose-700 mb-2 drop-shadow-
sm">Refleksi Belajar</h2>
<p class="text-xl text-rose-800 mb-8 font-semibold">Bagaimana
perasaanmu setelah belajar hari ini?</p>
<div class="flex justify-center gap-4 md:gap-8 mb-8 flex-wrap">
<button onclick="selectMood(this, 'happy')" class="mood-btn
neumorph-btn p-4 rounded-3xl flex flex-col items-center gap-2 border-4 border-pink-
400 !bg-gradient-to-br !from-pink-500 !to-pink-700 hover:!from-pink-600 hover:!to-
pink-800 shadow-lg transform transition hover:scale-110 group">
<div class="w-16 h-16 filter drop-shadow-md group-
hover:animate-bounce"><svg viewBox="0 0 100 100"><defs><radialGradient
id="gradHappy" cx="40%" cy="40%" r="55%" fx="25%" fy="25%"><stop offset="0%" stop-
color="#fef08a" /><stop offset="100%" stop-color="#eab308"
/></radialGradient></defs><circle cx="50" cy="50" r="45" fill="url(#gradHappy)"
stroke="#ca8a04" stroke-width="2"/><path d="M25,35 L30,20 L35,35 L50,40 L35,45
L30,60 L25,45 L10,40 Z" fill="#1d4ed8" transform="scale(0.8)
translate(15,10)"/><path d="M65,35 L70,20 L75,35 L90,40 L75,45 L70,60 L65,45 L50,40
Z" fill="#1d4ed8" transform="scale(0.8) translate(35,10)"/><path d="M25,65 Q50,90
75,65" fill="#be123c" stroke="#9f1239" stroke-width="2"/><path d="M30,65 Q50,75
70,65" fill="white" opacity="0.6"/><circle cx="20" cy="55" r="5" fill="#f43f5e"
opacity="0.4"/><circle cx="80" cy="55" r="5" fill="#f43f5e"
opacity="0.4"/></svg></div>
<span class="text-base text-white font-bold tracking-
wide">Senang</span>
</button>
<button onclick="selectMood(this, 'neutral')" class="mood-
btn neumorph-btn p-4 rounded-3xl flex flex-col items-center gap-2 border-4 border-
pink-400 !bg-gradient-to-br !from-pink-500 !to-pink-700 hover:!from-pink-600
hover:!to-pink-800 shadow-lg transform transition hover:scale-110 group">
<div class="w-16 h-16 filter drop-shadow-md group-
hover:rotate-12 transition"><svg viewBox="0 0 100 100"><defs><radialGradient
id="gradNeutral" cx="40%" cy="40%" r="55%" fx="25%" fy="25%"><stop offset="0%"
stop-color="#fde047" /><stop offset="100%" stop-color="#d97706"
/></radialGradient></defs><circle cx="50" cy="50" r="45" fill="url(#gradNeutral)"
stroke="#b45309" stroke-width="2"/><circle cx="35" cy="40" r="6"
fill="#374151"/><circle cx="65" cy="40" r="6" fill="#374151"/><line x1="35" y1="70"
x2="65" y2="70" stroke="#374151" stroke-width="4" stroke-linecap="round"/><line
x1="30" y1="30" x2="40" y2="30" stroke="#374151" stroke-width="2"/><line x1="60"
y1="30" x2="70" y2="30" stroke="#374151" stroke-width="2"/></svg></div>
<span class="text-base text-white font-bold tracking-
wide">Biasa</span>
</button>
<button onclick="selectMood(this, 'confused')" class="mood-
btn neumorph-btn p-4 rounded-3xl flex flex-col items-center gap-2 border-4 border-
pink-400 !bg-gradient-to-br !from-pink-500 !to-pink-700 hover:!from-pink-600
hover:!to-pink-800 shadow-lg transform transition hover:scale-110 group">
<div class="w-16 h-16 filter drop-shadow-md group-
hover:animate-wiggle"><svg viewBox="0 0 100 100"><defs><radialGradient
id="gradConfused" cx="40%" cy="40%" r="55%" fx="25%" fy="25%"><stop offset="0%"
stop-color="#fef9c3" /><stop offset="100%" stop-color="#ca8a04"
/></radialGradient></defs><circle cx="50" cy="50" r="45" fill="url(#gradConfused)"
stroke="#a16207" stroke-width="2"/><circle cx="35" cy="40" r="7"
fill="#374151"/><circle cx="65" cy="38" r="5" fill="#374151"/><path d="M28,28
Q35,20 42,28" fill="none" stroke="#374151" stroke-width="2"/><line x1="60" y1="28"
x2="70" y2="30" stroke="#374151" stroke-width="2"/><path d="M35,70 Q45,60 50,70
T65,70" fill="none" stroke="#374151" stroke-width="3" stroke-linecap="round"/><path
d="M75,25 Q70,20 75,15 Q80,20 75,25" fill="#60a5fa" opacity="0.8"/></svg></div>
<span class="text-base text-white font-bold tracking-
wide">Bingung</span>
</button>
</div>
<div class="mb-8">
<label class="block text-left text-lg font-bold text-rose-
800 mb-2 ml-2">Pesan atau Kesan (Opsional):</label>
<textarea id="feedback-text" class="w-full p-4 rounded-xl
border-2 border-rose-300 focus:border-rose-500 outline-none text-gray-700 shadow-
inner bg-white/60 resize-none font-sans" rows="3" placeholder="Tuliskan
pengalamanmu di sini..."></textarea>
</div>
<button onclick="submitFeedback()" class="neumorph-btn success
px-10 py-3 text-xl w-full md:w-auto shadow-lg border-2 border-green-400 !bg-
gradient-to-br !from-green-500 !to-green-700 hover:!from-green-600 hover:!to-green-
800">Kirim & Selesai <i class="fas fa-paper-plane"></i></button>
</div>
</div>
</div>

<div id="scene-final" class="hidden-scene scene-container w-full max-w-4xl
mx-auto text-center">
<div class="neumorph-panel p-10 md:p-16 flex flex-col items-center
justify-center min-h-[70vh] relative overflow-visible bg-white/80">
<div class="absolute inset-0 pointer-events-none overflow-hidden
rounded-2xl">
<div class="absolute top-10 left-10 text-4xl animate-bounce"
style="animation-duration: 2s;">🎉</div>
<div class="absolute top-20 right-20 text-5xl animate-spin"
style="animation-duration: 5s;">✨</div>
<div class="absolute bottom-10 left-20 text-4xl animate-
pulse">🎊</div>
</div>
<div class="text-9xl mb-6 animate-bounce filter drop-shadow-xl">🎉
</div>
<h2 class="text-5xl font-bold text-blue-800 mb-6 drop-shadow-
sm">Thank You!</h2>
<p class="text-2xl text-gray-600 mb-12 font-bold">Kamu telah
menyelesaikan petualangan ini dengan hebat.<br>Sampai jumpa lagi!</p>
<button onclick="[Link]()" class="neumorph-btn px-14 py-4
text-xl !bg-gradient-to-br !from-pink-600 !to-pink-800 hover:!from-pink-700 hover:!
to-pink-900 border-4 border-pink-400 relative overflow-visible group shadow-2xl
transition transform hover:scale-110 mb-4">
<div class="absolute -top-5 -left-5 text-5xl animate-spin
pointer-events-none" style="animation-duration: 12s;">🌸</div><div class="absolute -
bottom-4 -right-5 text-5xl animate-bounce pointer-events-none" style="animation-
duration: 3s;">🌺</div><div class="absolute top-1/2 -right-8 transform -translate-y-
1/2 text-4xl animate-pulse pointer-events-none">🌷</div><div class="absolute -
bottom-6 left-1/2 transform -translate-x-1/2 text-3xl animate-wiggle pointer-
events-none">🌻</div>
<span class="text-white drop-shadow-md leading-none tracking-
wider" style="font-family: 'Bangers', cursive; font-size: 3rem;">Main Lagi</span>
</button>
</div>
</div>

</div>

function startMusicOnInteraction() { initAudio(); }

const state = {
scene: 'welcome',
musicOn: false,
scores: { g1: 0, g2: 0, g3: 0 },
slides: { current: 0 },
g2Index: 0,
g3Pos: 1,
g3QuestionIdx: 0,
g1Selection: null,
feedback: { mood: '', text: '' }
};

// PARALLAX & SPARKLES

[Link]('mousemove', (e) => {
// Sparkles
if ([Link]() < 0.1) {
const sparkle = [Link]('div');
[Link] = 'sparkle';
[Link] = [Link] + 'px';
[Link] = [Link] + 'px';
[Link](sparkle);
setTimeout(() => [Link](), 800);
}

// Parallax on Welcome Screen

if ([Link] === 'welcome') {
const moveX = ([Link] - [Link]/2) * 0.02;
const moveY = ([Link] - [Link]/2) * 0.02;

const sky = [Link]('welcome-sky');

const school = [Link]('welcome-school');
if (sky) [Link] = `translate(${moveX}px, ${moveY}px)`;
if (school) [Link] = `translate(${-moveX * 0.5}px,
${-moveY * 0.5}px)`;
}
});

// EASTER EGG
function toggleSunGlasses() {
const glasses = [Link]('sun-glasses');
if (glasses) {
[Link]('hidden');
playClick();
}
}

const feedbackMessages = {
correct: ["Excellent! 🌟", "Great Job! 👍", "Spot On! 🎯", "You're
Amazing! 🚀", "Fantastic! 🔥", "Wow, Cool! 🤩", "Perfect Score! 💯", "Perfect! ✨"],
wrong: ["Try Again! 💪", "Almost There! 🤏", "Don't Give Up! ✨", "Oops,
Not Quite 🙈", "Keep Going! 🌈", "Think Again 🤔", "Not Quite, Try Again! 🚀"]
};

function getRandomFeedback(isCorrect) {
const list = isCorrect ? [Link] :
[Link];
return list[[Link]([Link]() * [Link])];
}

function playApplause() {
if (![Link] && !audioCtx) return;
playCorrect();
const now = [Link];
for (let i = 0; i < 15; i++) {
const source = [Link]();
[Link] = noiseBuffer;
const gain = [Link]();
const filter = [Link]();
[Link] = 'bandpass';
[Link] = 800 + [Link]() * 400;
const start = now + [Link]() * 0.4;
const duration = 0.1 + [Link]() * 0.05;
[Link](0, start);
[Link](0.15, start + 0.01);
[Link](0.001, start + duration);
[Link](filter); [Link](gain);
[Link]([Link]);
[Link](start); [Link](start + duration + 0.1);
}
}

function triggerCelebration() {
const emojis = ['👏', '🎉', '🌟', '🤩', '💯', '✨'];
const container = [Link];
for (let i = 0; i < 15; i++) {
const el = [Link]('div');
[Link] = emojis[[Link]([Link]() * [Link])];
[Link] = 'celebration-emoji text-4xl md:text-6xl';
[Link] = [Link]() * 80 + 10 + 'vw';
[Link] = [Link]() * 60 + 20 + 'vh';
[Link] = [Link]() * 0.5 + 's';
[Link](el);
setTimeout(() => [Link](), 1500);
}
}

function speakText(input, defaultLang = 'en-US') {

if (![Link]) return;
[Link]();
const queue = [Link](input) ? input : [{ text: input, lang:
defaultLang }];
[Link](item => {
const utterance = new SpeechSynthesisUtterance([Link]);
[Link] = [Link] || defaultLang;
[Link] = 0.9; [Link] = 1.1; [Link] = 1;
const voices = [Link]();
if ([Link] > 0) {
const targetLang = [Link];
const specificVoice = [Link](v => [Link] === targetLang)
|| [Link](v => [Link](targetLang));
if (specificVoice) [Link] = specificVoice;
}
[Link](utterance);
});
}

function playTone(freq, type, duration, vol = 0.1) {

if (!audioCtx) return;
const osc = [Link]();
const gainNode = [Link]();
[Link] = type;
[Link](freq, [Link]);
[Link](0, [Link]);
[Link](vol, [Link] +
0.05);
[Link](0.001, [Link]
+ duration);
[Link](gainNode);
[Link]([Link]);
[Link]();
[Link]([Link] + duration);
}

function startBGM() {
if (bgmInterval) clearInterval(bgmInterval);
playMelodySequence();
bgmInterval = setInterval(playMelodySequence, 1900);
}

function stopBGM() {
if (bgmInterval) { clearInterval(bgmInterval); bgmInterval = null; }
}

function playMelodySequence() {
if (![Link]) return;
const volume = 0.07;
const type = 'square';
// Funky Loop
playTone(523.25, type, 0.1, volume);
setTimeout(() => playTone(659.25, type, 0.1, volume), 150);
setTimeout(() => playTone(783.99, type, 0.1, volume), 300);
setTimeout(() => playTone(880.00, type, 0.2, volume), 450);
setTimeout(() => playTone(698.46, type, 0.1, volume), 700);
setTimeout(() => playTone(587.33, type, 0.1, volume), 850);
setTimeout(() => playTone(493.88, type, 0.1, volume), 1000);
setTimeout(() => playTone(392.00, type, 0.1, volume), 1150);
setTimeout(() => playTone(523.25, type, 0.1, volume), 1400);
setTimeout(() => playTone(783.99, type, 0.1, volume), 1550);
setTimeout(() => playTone(1046.50, type, 0.3, volume), 1700);
}

function playCorrect() { if([Link] || audioCtx) { playTone(600,

'sine', 0.1, 0.2); setTimeout(() => playTone(800, 'sine', 0.3, 0.2), 100); } }
function playWrong() { if([Link] || audioCtx) { playTone(200,
'sawtooth', 0.2, 0.15); setTimeout(() => playTone(150, 'sawtooth', 0.3, 0.15),
150); } }
function playClick() { if([Link] || audioCtx) { playTone(400,
'triangle', 0.1, 0.1); } }

function toggleMusic() {
initAudio();
[Link] = ![Link];
const btn = [Link]('music-icon');
if ([Link]) { [Link] = "fas fa-volume-up"; startBGM(); }
else { [Link] = "fas fa-volume-mute"; stopBGM(); }
}

const materials = [
{ sub: 'I', poss: 'My', icon: ' ', bg: 'bg-pink-100/50', desc:
'Digunakan ketika "SAYA" memiliki sesuatu.', examples: ["I have a book. It is
<b>my</b> book.", "This is <b>my</b> new bag.", "<b>My</b> name is Budi.", "I love
<b>my</b> cat."] },
{ sub: 'You', poss: 'Your', icon: '🫵', bg: 'bg-green-100/50', desc:
'Digunakan ketika "KAMU" memiliki sesuatu.', examples: ["You have a pen. It is
<b>your</b> pen.", "Is this <b>your</b> bike?", "Open <b>your</b> book.", "Wash
<b>your</b> hands."] },
{ sub: 'He', poss: 'His', icon: '👦', bg: 'bg-blue-100/50', desc: 'Milik
DIA (Laki-laki).', examples: ["He has a car. It is <b>his</b> car.", "<b>His</b>
hair is short.", "He likes <b>his</b> job.", "Budi plays <b>his</b> guitar."] },
{ sub: 'She', poss: 'Her', icon: '👧', bg: 'bg-purple-100/50', desc:
'Milik DIA (Perempuan).', examples: ["She has a doll. It is <b>her</b> doll.",
"<b>Her</b> dress is red.", "Sinta cooks <b>her</b> food.", "She loves <b>her</b>
mom."] },
{ sub: 'It', poss: 'Its', icon: '🐱', bg: 'bg-orange-100/50', desc:
'Milik HEWAN atau BENDA.', examples: ["The cat eats <b>its</b> food.", "The tree
loses <b>its</b> leaves.", "The dog wags <b>its</b> tail.", "The car has <b>its</b>
wheels."] },
{ sub: 'We', poss: 'Our', icon: '', bg: 'bg-teal-100/50', desc: 'Milik
KITA/KAMI.', examples: ["We have a house. It is <b>our</b> house.", "This is
<b>our</b> class.", "We love <b>our</b> country.", "<b>Our</b> teacher is
nice."] },
{ sub: 'They', poss: 'Their', icon: '👥', bg: 'bg-red-100/50', desc:
'Milik MEREKA.', examples: ["They have books. Those are <b>their</b> books.",
"<b>Their</b> house is big.", "They play with <b>their</b> friends.", "Look at
<b>their</b> shoes."] }
];

const g1Data = [
{ id: 1, q: "I have a pen. It is ___ pen.", a: "My" }, { id: 2, q: "You
look tired. Wash ___ face.", a: "Your" },
{ id: 3, q: "He is smart. ___ grades are good.", a: "His" }, { id: 4,
q: "She is a singer. ___ voice is nice.", a: "Her" },
{ id: 5, q: "The cat is hungry. This is ___ food.", a: "Its" }, { id:
6, q: "We live here. This is ___ house.", a: "Our" },
{ id: 7, q: "They are students. ___ school is big.", a: "Their" },
{ id: 8, q: "Budi (Boy) lost ___ bag.", a: "His" }
];

const g2Data = [
{ q: "I have a brother. ___ name is Andi.", opts: ["My", "His", "Her"],
a: 1 }, { q: "We are students. This is ___ class.", opts: ["Their", "Our", "We"],
a: 1 },
{ q: "She washes ___ hands.", opts: ["Her", "She", "His"], a: 0 }, { q:
"You must do ___ homework.", opts: ["You", "My", "Your"], a: 2 },
{ q: "The dog hurts ___ leg.", opts: ["It", "Its", "His"], a: 1 }, { q:
"They visit ___ grandmother.", opts: ["Their", "There", "They"], a: 0 },
{ q: "I love ___ country, Indonesia.", opts: ["My", "Me", "I"], a: 0 },
{ q: "Doni and Dini are twins. ___ birthday is in May.", opts: ["His", "Her",
"Their"], a: 2 },
{ q: "Look at the tree! ___ leaves are green.", opts: ["It", "Its",
"My"], a: 1 }, { q: "Mr. Budi drives ___ car to work.", opts: ["Her", "Him",
"His"], a: 2 }
];

const memoryData = [
{ id: 1, text: "I", pair: "My" }, { id: 1, text: "My", pair: "I" },
{ id: 2, text: "You", pair: "Your" }, { id: 2, text: "Your", pair: "You" },
{ id: 3, text: "He", pair: "His" }, { id: 3, text: "His", pair: "He" },
{ id: 4, text: "She", pair: "Her" }, { id: 4, text: "Her", pair: "She" },
{ id: 5, text: "We", pair: "Our" }, { id: 5, text: "Our", pair: "We" },
{ id: 6, text: "They", pair: "Their" }, { id: 6, text: "Their", pair: "They" }
];

function navigate(sceneId) {
playClick();
[Link]('.scene-container').forEach(el =>
[Link]('hidden-scene'));
[Link](`scene-${sceneId}`).[Link]('hidden-
scene');

const nav = [Link]('nav-bar');

if (sceneId === 'welcome') [Link]('hidden-scene'); else
[Link]('hidden-scene');

[Link] = sceneId;
[Link](0, 0);

if (sceneId === 'material') renderSlide(0);

if (sceneId === 'games-menu') { /* reset games? */ }
}

function closeConfirmModal() {
playClick();
[Link]('modal-confirm').[Link]('hidden');
[Link]('modal-confirm').[Link]('flex');
}

function confirmExitGame() { playClick(); closeConfirmModal();

navigate('games-menu'); }

function nextSlide() { renderSlide([Link] + 1 <

[Link] ? [Link] + 1 : 0); playClick(); }
function prevSlide() { renderSlide([Link] - 1 >= 0 ?
[Link] - 1 : [Link] - 1); playClick(); }

function startGame(id) { playClick(); if (id === 1) initGame1(); if (id ===

2) initGame2(); if (id === 3) initGame3(); navigate(`game${id}`); }

function initGame1() {
[Link].g1 = 0;
updateScoreDisplay('g1');
[Link]('btn-finish-g1').[Link]('hidden');
const questions = [...g1Data].sort(() => 0.5 - [Link]()).slice(0,
6);
const answers = [Link](q => ({ val: q.a, id: [Link] })).sort(() =>
0.5 - [Link]());
const dropArea = [Link]('g1-drop-area');

// Updated to include Flower Sticker in each Drop Zone

[Link] = [Link](q => `
<div class="drop-zone bg-white/90 backdrop-blur-sm p-4 rounded-lg
border-2 border-gray-300 shadow-sm flex flex-col justify-center items-center
cursor-pointer hover:border-blue-400 relative overflow-hidden" data-id="${[Link]}"
onclick="handleDropZoneClick(this)">
<div class="absolute top-1 right-1 text-xl opacity-60">🌸</div>
<p class="text-lg font-bold text-center pointer-events-none
text-gray-800 relative z-10">${[Link]('___', '<span class="inline-block w-12
border-b-2 border-black">?</span>')}</p>
<div class="filled-answer hidden mt-2 text-blue-600 font-bold
text-xl bg-blue-100 px-3 py-1 rounded relative z-10"></div>
</div>
`).join('');

const dragArea = [Link]('g1-drag-area');

[Link] = [Link](a => `<button class="draggable-item
neumorph-btn px-4 py-2 text-lg m-1 !bg-gradient-to-br !from-sky-400 !to-sky-500
hover:!from-sky-500 hover:!to-sky-600 border-2 border-sky-200 text-white shadow-md"
data-val="${[Link]}" data-id="${[Link]}"
onclick="handleAnswerClick(this)">${[Link]}</button>`).join('');
}

function initGame2() {
[Link].g2 = 0; state.g2Index = 0; updateScoreDisplay('g2');
renderG2Question();
}

function checkG2Answer(idx, balloonEl) {

function initGame3() {
[Link].g3 = 0; matchCount = 0; updateScoreDisplay('g3');
[Link]('g3-matches').textContent = 0;
[Link]('g3-win-overlay').[Link]('hidden');
[Link]('g3-win-overlay').[Link]('flex');
const board = [Link]('g3-board'); [Link] =
'';
const cards = [...memoryData].sort(() => 0.5 - [Link]());
[Link](item => {
const card = [Link]('div');
[Link]('memory-card'); [Link] = [Link];

// Added Flower Sticker to Memory Cards

[Link] = `
<div class="front-face relative">
<div class="absolute top-1 right-1 text-sm
opacity-50">🌹</div>
<div class="text-3xl mb-1 text-pink-500">❓</div>
${[Link]}
</div>
<div class="back-face relative">
<div class="absolute top-1 left-1 text-xs
opacity-50">🌸</div>
<i class="fas fa-star text-yellow-300 drop-shadow-md"></i>
</div>
`;

[Link]('click', flipCard); [Link](card);

});
}

let hasFlippedCard = false; let lockBoard = false; let firstCard,

secondCard; let matchCount = 0;

function flipCard() {
if (lockBoard) return; if (this === firstCard) return;
[Link]('flip'); playClick();
if (!hasFlippedCard) { hasFlippedCard = true; firstCard = this; return;
}
secondCard = this; checkForMatch();
}

function checkForMatch() {
let isMatch = [Link] === [Link];
if (isMatch) { disableCards(); } else { unflipCards(); }
}

function unflipCards() {
lockBoard = true; playWrong();
setTimeout(() => { [Link]('flip');
[Link]('flip'); resetBoard(); }, 1000);
}

function resetBoard() { [hasFlippedCard, lockBoard] = [false, false];

[firstCard, secondCard] = [null, null]; }

function finishGame(id) { navigate('games-menu'); }

function updateScoreDisplay(game) { [Link](`score-$
{game}`).textContent = [Link][game]; }

function calculateFinal() {
[Link]('res-g1').textContent = [Link].g1;
[Link]('res-g2').textContent = [Link].g2;
[Link]('res-g3').textContent = [Link].g3;
const total = [Link].g1 + [Link].g2 + [Link].g3;
[Link]('final-score').textContent = total;
const mt = [Link]('motivation-text');
if (total > 200) [Link] = "Luar Biasa! Kamu Juara! 🏆"; else if
(total > 100) [Link] = "Bagus Sekali! Terus Belajar! 👍"; else
[Link] = "Jangan Menyerah! Coba Lagi! 💪";
}

function selectMood(btn, mood) {

playClick(); [Link] = mood;
[Link]('.mood-btn').forEach(b =>
[Link]('selected')); [Link]('selected');
}

function submitFeedback() {
playClick(); [Link] = [Link]('feedback-
text').value;
navigate('final'); playApplause(); setTimeout(() => speakText("Thank
You!"), 500);
}

// --- VISUALS ---

Kelas 7: Petualangan Kata Ganti
No ratings yet
Kelas 7: Petualangan Kata Ganti
58 pages
E-Time Store Webpage Design
No ratings yet
E-Time Store Webpage Design
74 pages
E-Time Store Web Design Template
No ratings yet
E-Time Store Web Design Template
72 pages
E-Time Store Admin Panel Design
No ratings yet
E-Time Store Admin Panel Design
60 pages
E-Time Store Admin Panel Design
No ratings yet
E-Time Store Admin Panel Design
60 pages
CC
No ratings yet
CC
21 pages
Futuristic BioLink Design Template
No ratings yet
Futuristic BioLink Design Template
20 pages
HeightSync Pro: Futuristic Design Elements
No ratings yet
HeightSync Pro: Futuristic Design Elements
13 pages
Chzzios Premium Scriptable Overview
No ratings yet
Chzzios Premium Scriptable Overview
21 pages
Vivek Kumar Pradhan's Portfolio
No ratings yet
Vivek Kumar Pradhan's Portfolio
23 pages
Futuristic BioLink Design
No ratings yet
Futuristic BioLink Design
12 pages
Cilemce Home Design Collection PDF
No ratings yet
Cilemce Home Design Collection PDF
28 pages
Gemini Style for Nexuss AI Interface
No ratings yet
Gemini Style for Nexuss AI Interface
26 pages
Ashika's Naruto-Themed Birthday Webpage
No ratings yet
Ashika's Naruto-Themed Birthday Webpage
9 pages
New Year Adventure for Friends
No ratings yet
New Year Adventure for Friends
16 pages
Master Business Studies
No ratings yet
Master Business Studies
170 pages
Student Success Guidance Platform
No ratings yet
Student Success Guidance Platform
16 pages
LuxVPN: DDoS Protected VPN Service
No ratings yet
LuxVPN: DDoS Protected VPN Service
14 pages
External Hack Animation Effects
No ratings yet
External Hack Animation Effects
20 pages
External Hack Animation Effects
No ratings yet
External Hack Animation Effects
11 pages
External Hack Animation Effects
No ratings yet
External Hack Animation Effects
19 pages
Cyberpunk Drone Delivery Animation
No ratings yet
Cyberpunk Drone Delivery Animation
28 pages
TENSHI App Download Page
No ratings yet
TENSHI App Download Page
6 pages
Jishnu Network Welcome Page
No ratings yet
Jishnu Network Welcome Page
6 pages
Software de Gestión de Mudanzas MX
No ratings yet
Software de Gestión de Mudanzas MX
13 pages
Velgrow Media Website Design Guide
No ratings yet
Velgrow Media Website Design Guide
12 pages
NTH Diwali Wishes Design Template
No ratings yet
NTH Diwali Wishes Design Template
12 pages
SMK Dr. Soetomo Surabaya Overview
No ratings yet
SMK Dr. Soetomo Surabaya Overview
34 pages
Card Wars Game Download Page
No ratings yet
Card Wars Game Download Page
14 pages
Fractal.Hub: Brainrot Community Hub
No ratings yet
Fractal.Hub: Brainrot Community Hub
24 pages
Bajrang Dal Shravasti Overview
No ratings yet
Bajrang Dal Shravasti Overview
15 pages
NTH Diwali Wishes Design
No ratings yet
NTH Diwali Wishes Design
9 pages
Cost Accounting
No ratings yet
Cost Accounting
114 pages
Prime Properties Ethiopia Login/Register
No ratings yet
Prime Properties Ethiopia Login/Register
80 pages
Ucapan Natal & Tahun Baru 2026
No ratings yet
Ucapan Natal & Tahun Baru 2026
25 pages
GlitchWall Control Panel Setup
No ratings yet
GlitchWall Control Panel Setup
31 pages
استكشف توأم روحك: مطابقة الأرواح
No ratings yet
استكشف توأم روحك: مطابقة الأرواح
12 pages
ENSA-B System Monitor Interface
No ratings yet
ENSA-B System Monitor Interface
113 pages
PHPGames Free Play Promo Guide
No ratings yet
PHPGames Free Play Promo Guide
5 pages
EchoLog: User Profile Overview
No ratings yet
EchoLog: User Profile Overview
27 pages
Flash USDT Cryptocurrency Overview
No ratings yet
Flash USDT Cryptocurrency Overview
73 pages
Taxation (Direct & Indirect)
No ratings yet
Taxation (Direct & Indirect)
97 pages
Dark Legend Tool 2.0 Overview
No ratings yet
Dark Legend Tool 2.0 Overview
33 pages
Premium NEET Study Notes Online
No ratings yet
Premium NEET Study Notes Online
375 pages
Interactive Web Experience UI Code
No ratings yet
Interactive Web Experience UI Code
20 pages
Web Test 3
No ratings yet
Web Test 3
78 pages
Document
No ratings yet
Document
58 pages
Loxs Security Scan Report Summary
No ratings yet
Loxs Security Scan Report Summary
10 pages
Right
No ratings yet
Right
16 pages
Index
No ratings yet
Index
19 pages
Modern Creative Portfolio Design
No ratings yet
Modern Creative Portfolio Design
19 pages
Master Auditing With Structured Excellence
No ratings yet
Master Auditing With Structured Excellence
124 pages
Next-Gen Biotech for One Health
No ratings yet
Next-Gen Biotech for One Health
31 pages
Bridge Expert
No ratings yet
Bridge Expert
30 pages
Semana 12 Mejorado
No ratings yet
Semana 12 Mejorado
19 pages
Theme Switcher Animation Design
No ratings yet
Theme Switcher Animation Design
14 pages
Chzzios Premium WebView Panel
No ratings yet
Chzzios Premium WebView Panel
6 pages
Beauty's Eternal Joy in Keats' Poetry
No ratings yet
Beauty's Eternal Joy in Keats' Poetry
11 pages
Lotus Seed, The - Sherry Garland
0% (1)
Lotus Seed, The - Sherry Garland
19 pages
Androgenesis and Protoplast Culture Insights
67% (3)
Androgenesis and Protoplast Culture Insights
54 pages
Kid's Box Level 5 Unit 8 Crossword
No ratings yet
Kid's Box Level 5 Unit 8 Crossword
1 page
Pyq Neet 2024
No ratings yet
Pyq Neet 2024
44 pages
Maangchi's Korean Cooking Cookbook
100% (3)
Maangchi's Korean Cooking Cookbook
52 pages
CRISPR Bean
No ratings yet
CRISPR Bean
16 pages
Take Home Quiz on Central Tendency
100% (1)
Take Home Quiz on Central Tendency
2 pages
Aleuroplast in Pharmaceutical Botany
No ratings yet
Aleuroplast in Pharmaceutical Botany
22 pages
7th Grade Life Science Cells Assessment
No ratings yet
7th Grade Life Science Cells Assessment
15 pages
ATCC-Mycology Guide PDF
100% (1)
ATCC-Mycology Guide PDF
35 pages
Types and Mechanisms of Respiration
No ratings yet
Types and Mechanisms of Respiration
8 pages
Wooden Pallet Specs for Banana Boxes
No ratings yet
Wooden Pallet Specs for Banana Boxes
3 pages
PNC00005
No ratings yet
PNC00005
23 pages
Understanding Independent Assortment Ratios
No ratings yet
Understanding Independent Assortment Ratios
2 pages
NCERT Solutions For Class 7 Science Chapter 10 - Life Processes in Plants
No ratings yet
NCERT Solutions For Class 7 Science Chapter 10 - Life Processes in Plants
22 pages
Faktor Teknologi dalam Usahatani Kentang
No ratings yet
Faktor Teknologi dalam Usahatani Kentang
8 pages
Overview of Steroids and Their Functions
No ratings yet
Overview of Steroids and Their Functions
34 pages
2015 Non Thermal Plasma Seeds Stimulation
No ratings yet
2015 Non Thermal Plasma Seeds Stimulation
16 pages
IIT Gandhinagar Faculty Housing Design
No ratings yet
IIT Gandhinagar Faculty Housing Design
11 pages
Ag Science Final Exam Study Guide
No ratings yet
Ag Science Final Exam Study Guide
2 pages
UBKV M.Sc. Admission Notification 2019
No ratings yet
UBKV M.Sc. Admission Notification 2019
7 pages
Vegetable List and Personal Preferences
No ratings yet
Vegetable List and Personal Preferences
1 page
In Vitro Somaclonal Variation in Strawberry
No ratings yet
In Vitro Somaclonal Variation in Strawberry
8 pages
Serenoa Repens for Prostate Health
No ratings yet
Serenoa Repens for Prostate Health
9 pages
Tractor Maintenance at Indolampung Workshop
No ratings yet
Tractor Maintenance at Indolampung Workshop
59 pages
Essential Tools for Rice Production
No ratings yet
Essential Tools for Rice Production
15 pages
A2 Biology: Populations & Ecosystems Guide
No ratings yet
A2 Biology: Populations & Ecosystems Guide
36 pages
Life Processes in Organisms Explained
No ratings yet
Life Processes in Organisms Explained
69 pages
Dicot Families: Cruciferae & Malvaceae Overview
No ratings yet
Dicot Families: Cruciferae & Malvaceae Overview
9 pages

Possessive Adjective Adventure Guide

Uploaded by

Possessive Adjective Adventure Guide

Uploaded by

<!

/* --- GLOBAL STYLES --- */

/* --- MAGIC SPARKLES --- */

/* --- SCENE TRANSITIONS --- */

/* --- NEUMORPHISM UI --- */

.[Link] { background: linear-gradient(145deg, #f59e0b,

/* Mood Selection Styles */

/* --- ANIMATIONS --- */

.hidden-scene { display: none !important; }

@keyframes pulse-ring { 0% { transform: scale(0.8); box-shadow: 0 0 0 0

@keyframes emoji-float-up { 0% { transform: translateY(0) scale(0.5);

.text-3d { text-shadow: 4px 4px 0 #1e3a8a, 6px 6px 5px rgba(0,0,0,0.3); }

::-webkit-scrollbar { width: 8px; }

<h2 class="text-5xl font-bold text-pink-600 mb-10 border-b-8

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6

<button onclick="navigate('material')" class="neumorph-btn p-6

<button onclick="navigate('closing')" class="neumorph-btn p-6

<h2 class="text-3xl font-bold text-green-800 mb-6 uppercase

<h2 class="text-3xl font-bold text-center text-rose-700 mb-6

<p class="text-gray-500 text-sm font-bold uppercase mb-1

function startMusicOnInteraction() { initAudio(); }

// PARALLAX & SPARKLES

// Parallax on Welcome Screen

const sky = [Link]('welcome-sky');

function speakText(input, defaultLang = 'en-US') {

function playTone(freq, type, duration, vol = 0.1) {

function playCorrect() { if([Link] || audioCtx) { playTone(600,

const nav = [Link]('nav-bar');

if (sceneId === 'material') renderSlide(0);

function confirmExitGame() { playClick(); closeConfirmModal();

function nextSlide() { renderSlide([Link] + 1 <

function startGame(id) { playClick(); if (id === 1) initGame1(); if (id ===

// Updated to include Flower Sticker in each Drop Zone

const dragArea = [Link]('g1-drag-area');

function checkG2Answer(idx, balloonEl) {

// Added Flower Sticker to Memory Cards

[Link]('click', flipCard); [Link](card);

let hasFlippedCard = false; let lockBoard = false; let firstCard,

function resetBoard() { [hasFlippedCard, lockBoard] = [false, false];

function finishGame(id) { navigate('games-menu'); }

function selectMood(btn, mood) {

// --- VISUALS ---

You might also like