Scribd
Upload
2 views34 pages

Code

The document is an HTML structure for a children's programming game titled 'Nhà Lập Trình Nhí - Cấu Trúc Tuần Tự'. It includes various animations, styles, and interactive elements to engage users, such as buttons to start the game and view rules. The game involves teams answering questions within a time limit, with points awarded for correct answers.

Uploaded by

lhcvcqbgm
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views34 pages

Code

The document is an HTML structure for a children's programming game titled 'Nhà Lập Trình Nhí - Cấu Trúc Tuần Tự'. It includes various animations, styles, and interactive elements to engage users, such as buttons to start the game and view rules. The game involves teams answering questions within a time limit, with points awarded for correct answers.

Uploaded by

lhcvcqbgm
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

doctype html>
<html lang="vi" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nhà Lập Trình Nhí - Cấu Trúc Tuần Tự</title>
<script src="[Link]
<script src="/_sdk/element_sdk.js"></script>
<script src="/_sdk/data_sdk.js"></script>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Fredoka:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet">
<style>
body {
box-sizing: border-box;
font-family: 'Fredoka', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
*{
font-family: 'Fredoka', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(5deg); }
}
@keyframes spin-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes bounce-in {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes countdown-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes confetti-fall {
0% {
transform: translateY(0) rotateZ(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotateZ(360deg);
opacity: 0;
}
}
@keyframes glow-pulse {
0%, 100% { text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
50% { text-shadow: 0 0 30px rgba(251, 191, 36, 0.9); }
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes floating-animal {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.1; }
50% { transform: translateY(-30px) scale(1.1); opacity: 0.15; }
}

.float-animation { animation: float 3s ease-in-out infinite; }


.spin-animation { animation: spin-slow 8s linear infinite; }
.bounce-animation { animation: bounce 2s ease-in-out infinite; }
.wiggle-animation { animation: wiggle 2s ease-in-out infinite; }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.shake { animation: shake 0.5s ease-in-out; }
.bounce-in { animation: bounce-in 0.6s ease-out; }
.countdown-critical { animation: countdown-pulse 0.5s ease-in-out infinite; color:
#ef4444; }
.topic-btn {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.topic-btn:hover:not(.locked):not(.completed) {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.[Link] {
background: linear-gradient(135deg, #10b981, #059669) !important;
cursor: pointer;
}
.[Link] {
background: linear-gradient(135deg, #6b7280, #4b5563) !important;
cursor: not-allowed;
opacity: 0.7;
}
.team-dragon {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border: 3px solid #d97706;
}
.team-phoenix {
background: linear-gradient(135deg, #ef4444, #f97316);
border: 3px solid #dc2626;
}
.answer-btn {
transition: all 0.2s ease;
}
.answer-btn:hover:not(:disabled) {
transform: scale(1.02);
}
.[Link] {
background: linear-gradient(135deg, #10b981, #059669) !important;
animation: bounce-in 0.5s ease-out;
}
.[Link] {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
animation: shake 0.5s ease-in-out;
}
.card-3d {
box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 5px 15px rgba(0,0,0,0.1);
}

/* Hình nền trang chủ với động vật */


#page-home {
background: linear-gradient(135deg, #a78bfa 0%, #f687b3 25%, #fb923c 50%, #34d399
75%, #60a5fa 100%);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;
position: relative;
overflow: hidden;
}

.animal-bg-home {
position: absolute;
font-size: 6rem;
opacity: 0.12;
animation: floating-animal 4s ease-in-out infinite;
pointer-events: none;
}

/* Hình nền trang chọn chủ đề */


#page-topics {
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe
75%, #00f2fe 100%);
background-size: 400% 400%;
animation: gradient-shift 20s ease infinite;
position: relative;
overflow: hidden;
}

.animal-bg-topics {
position: absolute;
font-size: 7rem;
opacity: 0.08;
animation: floating-animal 5s ease-in-out infinite;
pointer-events: none;
}

/* Hình nền modal luật chơi */


.animal-bg-rules {
position: absolute;
font-size: 6rem;
opacity: 0.1;
animation: floating-animal 3s ease-in-out infinite;
pointer-events: none;
}

/* Hình nền trang câu hỏi */


#page-question {
background: linear-gradient(135deg, #ffa751 0%, #ffe259 25%, #ffbe61 50%, #ff6e40
75%, #ff5722 100%);
background-size: 400% 400%;
animation: gradient-shift 18s ease infinite;
position: relative;
overflow: hidden;
}

.animal-bg-question {
position: absolute;
font-size: 7rem;
opacity: 0.08;
animation: floating-animal 4s ease-in-out infinite;
pointer-events: none;
}

/* Hình nền trang kết thúc */


#page-end {
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 25%, #a6c0fe 50%, #f68084
75%, #fa709a 100%);
background-size: 400% 400%;
animation: gradient-shift 20s ease infinite;
position: relative;
overflow: hidden;
}

.animal-bg-end {
position: absolute;
font-size: 8rem;
opacity: 0.08;
animation: floating-animal 5s ease-in-out infinite;
pointer-events: none;
}
</style>
<style>@view-transition { navigation: auto; }</style>
</head>
<body class="h-full m-0 p-0 overflow-auto">
<div id="app" class="w-full min-h-full"><!-- TRANG 1: TRANG CHỦ -->
<div id="page-home" class="min-h-full flex flex-col items-center justify-center p-4
relative"><!-- Động vật nền -->
<div class="animal-bg-home" style="top: 5%; left: 5%; animation-delay: 0s;">
🦁
</div>
<div class="animal-bg-home" style="top: 15%; right: 10%; animation-delay: 0.5s;">
🐯
</div>
<div class="animal-bg-home" style="bottom: 20%; left: 8%; animation-delay: 1s;">
🐻
</div>
<div class="animal-bg-home" style="bottom: 10%; right: 5%; animation-delay: 1.5s;">
🦊
</div>
<div class="animal-bg-home" style="top: 40%; right: 3%; animation-delay: 2s;">
🐨
</div>
<div class="text-center max-w-4xl mx-auto relative z-10">
<div class="mb-8 float-animation">
<div class="text-8xl mb-6">
🤖
</div>
<div class="flex justify-center gap-6 text-6xl"><span></span> <span>💻</span>
<span>👦</span>
</div>
</div>
<h1 id="main-title-display" class="text-4xl md:text-5xl font-extrabold text-white mb-3 drop-
shadow-lg">🎮 NHÀ LẬP TRÌNH NHÍ</h1>
<h2 class="text-2xl md:text-3xl font-bold text-yellow-300 mb-8 drop-shadow-md">📚 BÀI
10: CẤU TRÚC TUẦN TỰ</h2>
<div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 mb-8 inline-block">
<p class="text-white text-lg font-medium">📖 Tin học lớp 5 - Kết nối tri thức</p>
</div>
<div class="flex flex-col gap-4 items-center"><button onclick="startGame()" class="px-8
py-4 bg-gradient-to-r from-green-400 to-emerald-500 text-white text-xl font-bold rounded-full
shadow-lg hover:shadow-xl transform hover:scale-105 transition-all pulse-glow"> ▶️BẮT
ĐẦU TRÒ CHƠI </button> <button onclick="showRules()" class="px-6 py-3 bg-gradient-to-r
from-blue-400 to-cyan-500 text-white text-lg font-bold rounded-full shadow-lg hover:shadow-
xl transform hover:scale-105 transition-all"> 📘 GIỚI THIỆU LUẬT CHƠI </button>
</div>
</div>
</div><!-- MODAL LUẬT CHƠI -->
<div id="rules-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-
center justify-center z-50 p-4 overflow-y-auto">
<div class="bg-white rounded-3xl p-8 max-w-2xl w-full my-4 card-3d bounce-in relative
overflow-hidden"><!-- Động vật nền modal -->
<div class="animal-bg-rules" style="top: -20px; right: -20px;">
🦁
</div>
<div class="animal-bg-rules" style="bottom: -30px; left: -20px;">
🐯
</div>
<div class="animal-bg-rules" style="top: 50%; right: -40px;">
🐨
</div>
<div class="relative z-10">
<h2 class="text-3xl font-bold text-purple-600 mb-6 text-center">📘 LUẬT CHƠI</h2>
<div class="space-y-4 text-gray-700">
<div class="flex items-start gap-4 p-4 bg-yellow-50 rounded-xl"><span class="text-3xl
flex-shrink-0">🐉</span>
<div>
<p class="font-bold text-yellow-600 text-lg">ĐỘI RỒNG VÀNG</p>
<p class="text-sm text-gray-600">Màu vàng - xanh lá</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 bg-red-50 rounded-xl"><span class="text-3xl flex-
shrink-0">🦅</span>
<div>
<p class="font-bold text-red-600 text-lg">ĐỘI PHƯỢNG ĐỎ</p>
<p class="text-sm text-gray-600">Màu đỏ - cam</p>
</div>
</div>
<div class="bg-purple-50 p-5 rounded-xl">
<h3 class="font-bold text-purple-600 mb-3 text-lg"> CÁCH CHƠI:</h3>
<ul class="text-sm space-y-2">
<li>✅ Mỗi đội lần lượt chọn chủ đề</li>
<li> Có 15 giây để trả lời mỗi câu hỏi</li>
<li>✅ Trả lời đúng: +10 điểm, ô chuyển màu xanh</li>
<li>❌ Trả lời sai hoặc hết giờ: ô bị khóa, xem lại được</li>
<li>🏆 Đội có điểm cao hơn chiến thắng!</li>
</ul>
</div>
</div><button onclick="hideRules()" class="mt-6 w-full py-3 bg-gradient-to-r from-purple-
500 to-pink-500 text-white font-bold rounded-full hover:opacity-90 transition-all text-lg"> ✨
ĐÃ HIỂU, BẮT ĐẦU THÔI! </button>
</div>
</div>
</div><!-- TRANG 2: CHỌN CHỦ ĐỀ -->
<div id="page-topics" class="min-h-full p-6 hidden relative"><!-- Động vật nền -->
<div class="animal-bg-topics" style="top: 5%; left: 5%; animation-delay: 0s;">
🦁
</div>
<div class="animal-bg-topics" style="top: 20%; right: 8%; animation-delay: 0.5s;">
🐯
</div>
<div class="animal-bg-topics" style="bottom: 25%; left: 10%; animation-delay: 1s;">
🐻
</div>
<div class="animal-bg-topics" style="bottom: 15%; right: 8%; animation-delay: 1.5s;">
🦊
</div>
<div class="animal-bg-topics" style="top: 50%; right: 2%; animation-delay: 2s;">
🐨
</div>
<div class="max-w-7xl mx-auto relative z-10"><!-- SCORE & TURN SECTION -->
<div class="flex flex-col md:flex-row justify-center items-stretch gap-4 mb-8"><!-- Team
Dragon -->
<div class="team-dragon rounded-3xl p-6 w-full md:w-72 text-center card-3d flex flex-col
justify-center">
<div class="text-5xl mb-3">
🐉
</div>
<p class="font-bold text-white text-lg">ĐỘI RỒNG VÀNG</p>
<p id="dragon-score" class="text-5xl font-extrabold text-white my-3">0</p>
<div class="flex gap-3 justify-center mb-4"><button
onclick="addDragonScore()" class="w-12 h-12 bg-white text-yellow-600 font-
bold rounded-full hover:bg-yellow-100 text-lg flex items-center justify-center
transition-all shadow-md">➕</button> <button onclick="subDragonScore()"
class="w-12 h-12 bg-white text-yellow-600 font-bold rounded-full hover:bg-
yellow-100 text-lg flex items-center justify-center transition-all shadow-
md">➖</button>
</div>
</div><!-- Turn Indicator -->
<div id="turn-indicator" class="bg-white rounded-3xl px-8 py-6 card-3d w-full md:w-72
flex flex-col justify-center">
<p class="text-base font-bold text-purple-600 text-center mb-2">🎯 LƯỢT CHƠI</p>
<p id="current-turn" class="text-2xl font-extrabold text-center text-purple-600 mb-4">ĐỘI
RỒNG VÀNG 🐉</p><button onclick="switchTeamManual()" class="w-full px-4 py-3 bg-
purple-600 text-white font-bold rounded-xl hover:bg-purple-700 transition-all text-sm
shadow-md"> 🔄 ĐỔI ĐỘI </button>
</div><!-- Team Phoenix -->
<div class="team-phoenix rounded-3xl p-6 w-full md:w-72 text-center card-3d flex flex-
col justify-center">
<div class="text-5xl mb-3">
🦅
</div>
<p class="font-bold text-white text-lg">ĐỘI PHƯỢNG ĐỎ</p>
<p id="phoenix-score" class="text-5xl font-extrabold text-white my-3">0</p>
<div class="flex gap-3 justify-center mb-4"><button
onclick="addPhoenixScore()" class="w-12 h-12 bg-white text-red-600 font-bold
rounded-full hover:bg-red-100 text-lg flex items-center justify-center transition-
all shadow-md">➕</button> <button onclick="subPhoenixScore()" class="w-12
h-12 bg-white text-red-600 font-bold rounded-full hover:bg-red-100 text-lg flex
items-center justify-center transition-all shadow-md">➖</button>
</div>
</div>
</div><!-- TITLE -->
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-8 drop-shadow-lg">📚
CHỌN CHỦ ĐỀ ÔN TẬP</h2><!-- TOPICS GRID -->
<div id="topics-grid" class="grid grid-cols-3 md:grid-cols-5 gap-4 mb-8 justify-items-
center">
</div><!-- ACTION BUTTONS -->
<div class="flex flex-wrap justify-center gap-4"><button onclick="goHome()" class="px-6
py-3 bg-gradient-to-r from-gray-500 to-gray-600 text-white font-bold rounded-full
hover:opacity-90 transition-all shadow-lg text-sm md:text-base"> 🏠 VỀ TRANG CHỦ
</button> <button onclick="showReview()" class="px-6 py-3 bg-gradient-to-r from-blue-500
to-cyan-500 text-white font-bold rounded-full hover:opacity-90 transition-all shadow-lg text-
sm md:text-base"> 📘 KIỂM TRA CÂU HỎI </button> <button onclick="endGame()" class="px-
6 py-3 bg-gradient-to-r from-red-500 to-red-600 text-white font-bold rounded-full
hover:opacity-90 transition-all shadow-lg text-sm md:text-base"> KẾT THÚC TRÒ CHƠI
</button>
</div>
</div>
</div><!-- TRANG 3: CÂU HỎI -->
<div id="page-question" class="min-h-full p-6 hidden relative"><!-- Động vật nền -->
<div class="animal-bg-question" style="top: 5%; left: 5%; animation-delay: 0s;">
🐻
</div>
<div class="animal-bg-question" style="top: 15%; right: 10%; animation-delay: 0.5s;">
🦊
</div>
<div class="animal-bg-question" style="bottom: 20%; left: 8%; animation-delay: 1s;">
🐨
</div>
<div class="animal-bg-question" style="bottom: 10%; right: 5%; animation-delay: 1.5s;">
🦁
</div>
<div class="max-w-4xl mx-auto relative z-10"><!-- SCORE BAR -->
<div class="flex justify-between items-center mb-6 text-white">
<div class="bg-yellow-500/90 rounded-full px-6 py-3 font-bold text-lg shadow-lg">
🐉 <span id="q-dragon-score">0</span>
</div>
<div id="q-turn-badge" class="bg-purple-600/90 rounded-full px-6 py-3 font-bold text-lg
shadow-lg">
🎯 ĐỘI RỒNG VÀNG
</div>
<div class="bg-red-500/90 rounded-full px-6 py-3 font-bold text-lg shadow-lg">
🦅 <span id="q-phoenix-score">0</span>
</div>
</div><!-- QUESTION CARD -->
<div class="bg-white rounded-3xl p-8 card-3d"><!-- Topic Badge -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl p-4 mb-6
text-center">
<p class="text-sm opacity-90 font-semibold">Chủ đề</p>
<h3 id="topic-title" class="text-xl font-bold">Khái niệm cấu trúc tuần tự</h3>
</div><!-- Timer -->
<div class="flex justify-center mb-6">
<div class="bg-gray-100 rounded-full px-8 py-4 inline-block">
<p class="text-gray-500 text-sm font-semibold text-center"> Thời gian</p>
<p id="timer" class="text-5xl font-extrabold text-purple-600 text-center">15</p>
</div>
</div><!-- Question -->
<div class="bg-blue-50 rounded-2xl p-6 mb-6 border-2 border-blue-200">
<p id="question-text" class="text-xl font-semibold text-gray-800 text-center leading-
relaxed">Câu hỏi sẽ hiển thị ở đây</p>
</div><!-- Answers -->
<div id="answers-container" class="grid grid-cols-1 gap-4 mb-6">
</div>
</div><!-- BACK BUTTON -->
<div class="mt-6 flex justify-center"><button onclick="goToTopics()" class="px-8 py-3 bg-
white/90 text-purple-600 font-bold rounded-full hover:bg-white transition-all shadow-lg text-
base"> ◀️VỀ TRANG CHỦ ĐỀ </button>
</div>
</div>
</div><!-- MODAL PHẢN HỒI -->
<div id="feedback-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-
center justify-center z-50 p-4">
<div id="feedback-content" class="bg-white rounded-3xl p-8 max-w-md w-full text-center
card-3d bounce-in">
<div id="feedback-icon" class="text-7xl mb-4">
✅
</div>
<h3 id="feedback-title" class="text-2xl font-bold mb-3">CHÍNH XÁC!</h3>
<p id="feedback-message" class="text-gray-600 mb-6 text-lg">Đội được cộng 10 điểm!
</p>
<div id="feedback-explanation" class="bg-blue-50 rounded-xl p-4 mb-6 text-left border-2
border-blue-200">
<p class="text-sm text-gray-700 leading-relaxed"><span class="font-bold text-blue-
600">💡 Giải thích:</span><br><span id="explanation-text">Giải thích kiến thức</span></p>
</div><button id="feedback-btn" onclick="closeFeedback()" class="w-full py-3 bg-
gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-full hover:opacity-90
transition-all text-lg"> TIẾP TỤC ▶️</button>
</div>
</div><!-- MODAL KIỂM TRA CÂU HỎI -->
<div id="review-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-
center justify-center z-50 p-4 overflow-y-auto">
<div class="bg-white rounded-3xl p-8 max-w-2xl w-full my-4 card-3d">
<h2 class="text-3xl font-bold text-purple-600 mb-6 text-center">📘 KIỂM TRA CÂU HỎI
ĐÃ TRẢ LỜI</h2>
<div id="review-list" class="space-y-4 max-h-[60vh] overflow-y-auto mb-6">
</div><button onclick="hideReview()" class="w-full py-3 bg-gradient-to-r from-purple-500
to-pink-500 text-white font-bold rounded-full hover:opacity-90 transition-all text-lg"> ✖️ĐÓNG
</button>
</div>
</div><!-- TRANG KẾT THÚC -->
<div id="page-end" class="min-h-full flex flex-col items-center justify-center p-4 hidden
relative"><!-- Động vật nền -->
<div class="animal-bg-end" style="top: 5%; left: 5%; animation-delay: 0s;">
🦁
</div>
<div class="animal-bg-end" style="top: 20%; right: 8%; animation-delay: 0.5s;">
🐯
</div>
<div class="animal-bg-end" style="bottom: 25%; left: 10%; animation-delay: 1s;">
🐻
</div>
<div class="animal-bg-end" style="bottom: 15%; right: 8%; animation-delay: 1.5s;">
🦊
</div>
<div class="animal-bg-end" style="top: 50%; right: 2%; animation-delay: 2s;">
🐨
</div>
<div class="bg-white rounded-3xl p-8 max-w-lg w-full text-center card-3d bounce-in
relative z-10">
<div class="text-7xl mb-6">
🏆
</div>
<h2 id="winner-text" class="text-3xl font-bold text-purple-600 mb-8">KẾT QUẢ</h2>
<div class="grid grid-cols-2 gap-6 mb-8">
<div class="team-dragon rounded-3xl p-6 flex flex-col items-center justify-center">
<div class="text-5xl mb-3">
🐉
</div>
<p class="font-bold text-white text-base mb-2">RỒNG VÀNG</p>
<p id="final-dragon" class="text-4xl font-extrabold text-white">0</p>
</div>
<div class="team-phoenix rounded-3xl p-6 flex flex-col items-center justify-center">
<div class="text-5xl mb-3">
🦅
</div>
<p class="font-bold text-white text-base mb-2">PHƯỢNG ĐỎ</p>
<p id="final-phoenix" class="text-4xl font-extrabold text-white">0</p>
</div>
</div>
<p class="text-gray-600 mb-8 text-lg"> CẢ HAI ĐỘI ĐỀU RẤT CỐ GẮNG!</p>
<div class="flex flex-col gap-3"><button onclick="resetGame()" class="w-full py-3 bg-
gradient-to-r from-green-400 to-emerald-500 text-white font-bold rounded-full hover:opacity-
90 transition-all text-lg"> 🔁 CHƠI LẠI </button> <button onclick="goHome()" class="w-full
py-3 bg-gradient-to-r from-gray-400 to-gray-500 text-white font-bold rounded-full
hover:opacity-90 transition-all text-lg"> 🏠 VỀ TRANG CHỦ </button>
</div>
</div>
</div>
</div>
<script>
// Audio context
const audioContext = new ([Link] || [Link])();

function playSound(frequency, duration, type = 'sine') {


try {
const osc = [Link]();
const gain = [Link]();
[Link](gain);
[Link]([Link]);

[Link] = frequency;
[Link] = type;

[Link](0.3, [Link]);
[Link](0.01, [Link] + duration);

[Link]([Link]);
[Link]([Link] + duration);
} catch (e) {
[Link]('Audio không khả dụng');
}
}

function playCorrectSound() {
playSound(523.25, 0.1);
setTimeout(() => playSound(659.25, 0.1), 100);
setTimeout(() => playSound(783.99, 0.2), 200);
}

function playWrongSound() {
playSound(200, 0.15);
setTimeout(() => playSound(150, 0.15), 100);
}

function playClickSound() {
playSound(440, 0.05);
}

const defaultConfig = {
main_title: 'NHÀ LẬP TRÌNH NHÍ',
timer_seconds: '15',
background_color: '#667eea',
surface_color: '#ffffff',
text_color: '#374151',
primary_action_color: '#8b5cf6',
secondary_action_color: '#06b6d4'
};

let config = { ...defaultConfig };

const topics = [
{ id: 1, name: "Gấu Nâu", icon: "🐻", question: "Cấu trúc tuần tự là gì?", answers: ["Các
bước được thực hiện theo đúng thứ tự từ đầu đến cuối", "Các bước làm ngẫu nhiên", "Chỉ
làm bước cuối", "Không cần theo thứ tự"], correct: 0, explanation: "Cấu trúc tuần tự là các
bước được thực hiện theo đúng thứ tự từ đầu đến cuối, không bỏ qua bước nào." },
{ id: 2, name: "Sư Tử Vàng", icon: "🦁", question: "Đặc điểm nào ĐÚNG về cấu trúc tuần
tự?", answers: ["Các bước thực hiện lần lượt theo thứ tự", "Có thể bỏ qua bước nào cũng
được", "Thực hiện bước nào trước cũng được", "Chỉ cần làm bước quan trọng nhất"],
correct: 0, explanation: "Đặc điểm quan trọng của cấu trúc tuần tự là các bước được thực
hiện lần lượt theo đúng thứ tự đã định." },
{ id: 3, name: "Thỏ Trắng", icon: "🐰", question: "Vì sao cần thực hiện công việc theo
đúng trình tự?", answers: ["Để đạt kết quả mong muốn", "Để làm nhanh hơn", "Để tiết kiệm
công sức", "Để người khác khen"], correct: 0, explanation: "Thực hiện đúng trình tự giúp ta
đạt được kết quả mong muốn và tránh sai sót." },
{ id: 4, name: "Cáo Xảo Quyệt", icon: "🦊", question: "Khi nấu mì gói, việc nào cần làm
TRƯỚC?", answers: ["Đun sôi nước", "Cho mì vào", "Ăn mì", "Rửa bát"], correct: 0,
explanation: "Khi nấu mì, ta cần đun sôi nước trước rồi mới cho mì vào - đây là cấu trúc
tuần tự." },
{ id: 5, name: "Ếch Xanh", icon: "🐸", question: "Sắp xếp đúng: Thức dậy → ? → Đi học",
answers: ["Ăn sáng", "Ngủ tiếp", "Xem tivi", "Đá bóng"], correct: 0, explanation: "Trình tự
sinh hoạt buổi sáng: Thức dậy → Ăn sáng → Đi học." },
{ id: 6, name: "Cú Thông Thái", icon: "🦉", question: "Khi làm bài kiểm tra, bước đầu tiên
là gì?", answers: ["Đọc kỹ đề bài", "Viết ngay câu trả lời", "Nộp bài", "Hỏi bạn bên cạnh"],
correct: 0, explanation: "Khi làm bài kiểm tra, bước đầu tiên là đọc kỹ đề bài để hiểu yêu
cầu." },
{ id: 7, name: "Rùa Chậm Rãi", icon: "🐢", question: "Để bật máy tính, bước đầu tiên là
gì?", answers: ["Bật công tắc nguồn", "Mở phần mềm", "Đăng nhập", "Tắt máy"], correct: 0,
explanation: "Để sử dụng máy tính, bước đầu tiên là bật công tắc nguồn." },
{ id: 8, name: "Khỉ Thông Minh", icon: "🐵", question: "Khi gặp bài toán khó, em nên làm
gì TRƯỚC?", answers: ["Đọc kỹ đề, tìm hiểu yêu cầu", "Viết đáp số ngay", "Bỏ qua không
làm", "Chép bài bạn"], correct: 0, explanation: "Khi giải bài toán, bước đầu tiên là đọc kỹ đề
và tìm hiểu yêu cầu." },
{ id: 9, name: "Vịt Vàng", icon: "🦆", question: "Khi đánh răng, thứ tự đúng là gì?",
answers: ["Lấy bàn chải → Cho kem → Đánh răng → Súc miệng", "Súc miệng → Đánh răng
→ Cho kem", "Đánh răng → Lấy bàn chải", "Cho kem → Súc miệng → Đánh răng"], correct:
0, explanation: "Thứ tự đánh răng: Lấy bàn chải → Cho kem → Đánh răng → Súc miệng." },
{ id: 10, name: "Sâu Bé Nhỏ", icon: "🐛", question: "Trình tự nào SAI khi rửa tay?",
answers: ["Lau khô → Xoa xà phòng → Mở vòi nước", "Mở vòi nước → Xoa xà phòng →
Rửa sạch → Lau khô", "Làm ướt tay → Xoa xà phòng → Rửa sạch", "Mở vòi → Làm ướt
tay → Xoa xà phòng"], correct: 0, explanation: "Lau khô trước khi rửa là sai! Trình tự đúng:
Mở vòi → Xoa xà phòng → Rửa → Lau khô." },
{ id: 11, name: "Công Tước", icon: "🦚", question: "Khi viết một đoạn văn, bước đầu tiên
là gì?", answers: ["Xác định chủ đề, lập dàn ý", "Viết ngay câu đầu tiên", "Kiểm tra chính tả",
"Nộp bài cho cô giáo"], correct: 0, explanation: "Bước đầu tiên khi viết văn là xác định chủ
đề và lập dàn ý." },
{ id: 12, name: "Bướm Xinh", icon: "🦋", question: "Khi hoàn thành bài vẽ, bước CÓ CUỐI
CÙNG là gì?", answers: ["Kiểm tra và hoàn thiện bài", "Phác thảo hình", "Vẽ màu nền",
"Chuẩn bị để vẽ"], correct: 0, explanation: "Bước cuối cùng khi vẽ là kiểm tra và hoàn thiện
bài." },
{ id: 13, name: "Bạch Tuộc", icon: "🐙", question: "Câu nào SAI về cấu trúc tuần tự?",
answers: ["Có thể làm bước nào trước cũng được", "Các bước phải theo thứ tự", "Không
được bỏ qua bước nào", "Mỗi bước đều quan trọng"], correct: 0, explanation: "Sai vì trong
cấu trúc tuần tự, các bước phải theo đúng thứ tự, không thể làm tùy ý." },
{ id: 14, name: "Ưng Hung", icon: "🦅", question: "Trong lập trình, cấu trúc tuần tự giúp
gì?", answers: ["Thực hiện các lệnh theo đúng thứ tự", "Làm chương trình chạy nhanh hơn",
"Giảm số dòng code", "Không cần quan trọng"], correct: 0, explanation: "Trong lập trình, cấu
trúc tuần tự giúp máy tính thực hiện các lệnh theo đúng thứ tự." },
{ id: 15, name: "Sư Tử Dũng Cảm", icon: "🦁", question: "Cấu trúc tuần tự giúp chúng ta
điều gì?", answers: ["Làm việc có kế hoạch, đạt kết quả tốt", "Làm việc nhanh hơn nhưng
không cần thứ tự", "Bỏ qua các bước không cần thiết", "Chỉ làm những việc mình thích"],
correct: 0, explanation: "Cấu trúc tuần tự giúp ta làm việc có kế hoạch, logic và đạt kết quả
tốt nhất." }
];

let gameState = {
dragonScore: 0,
phoenixScore: 0,
currentTeam: 'dragon',
topicsStatus: {},
currentTopic: null,
timerInterval: null,
timeLeft: 15,
gameStarted: false,
answeredQuestions: [],
dragonLifelines: 3,
phoenixLifelines: 3
};

// Background music management


let currentBgMusic = null;
let bgGainNode = null;
let bgOscillators = [];

function stopBackgroundMusic() {
if ([Link] > 0) {
[Link](osc => {
try { [Link](); } catch(e) {}
});
bgOscillators = [];
}
if (currentBgMusic) {
clearInterval(currentBgMusic);
currentBgMusic = null;
}
if (bgGainNode) {
[Link]([Link], [Link]);
[Link](0, [Link] + 0.5);
}
}
function playBackgroundMusic(type) {
stopBackgroundMusic();

try {
bgGainNode = [Link]();
[Link]([Link]);
[Link](0.08, [Link]);

if (type === 'home') {


createHomeMusic(bgGainNode);
} else if (type === 'game') {
createGameMusic(bgGainNode);
} else if (type === 'question') {
createQuestionMusic(bgGainNode);
} else if (type === 'end') {
createEndMusic(bgGainNode);
}
} catch (e) {
[Link]('Audio không khả dụng');
}
}

function createHomeMusic(gainNode) {
const melody = [
{ freq: 261.63, dur: 400 },
{ freq: 329.63, dur: 400 },
{ freq: 392.00, dur: 400 },
{ freq: 329.63, dur: 400 },
{ freq: 261.63, dur: 400 },
{ freq: 329.63, dur: 400 },
{ freq: 392.00, dur: 800 }
];

let noteIndex = 0;
currentBgMusic = setInterval(() => {
const note = melody[noteIndex % [Link]];
const osc = [Link]();
const envGain = [Link]();

[Link](envGain);
[Link](gainNode);

[Link] = [Link];
[Link] = 'sine';

[Link](0, [Link]);
[Link](0.5, [Link] + 0.1);
[Link](0, [Link] + ([Link] /
1000 - 0.05));

[Link]([Link]);
[Link]([Link] + ([Link] / 1000));

[Link](osc);
noteIndex++;
}, 400);
}

function createGameMusic(gainNode) {
const melody = [
{ freq: 349.23, dur: 200 },
{ freq: 440.00, dur: 200 },
{ freq: 523.25, dur: 400 },
{ freq: 440.00, dur: 200 },
{ freq: 349.23, dur: 200 },
{ freq: 392.00, dur: 400 }
];

let noteIndex = 0;
currentBgMusic = setInterval(() => {
const note = melody[noteIndex % [Link]];
const osc = [Link]();
const envGain = [Link]();

[Link](envGain);
[Link](gainNode);

[Link] = [Link];
[Link] = 'triangle';

[Link](0, [Link]);
[Link](0.6, [Link] + 0.08);
[Link](0, [Link] + ([Link] /
1000 - 0.02));

[Link]([Link]);
[Link]([Link] + ([Link] / 1000));

[Link](osc);
noteIndex++;
}, 200);
}

function createQuestionMusic(gainNode) {
const melody = [
{ freq: 246.94, dur: 300 },
{ freq: 329.63, dur: 300 },
{ freq: 392.00, dur: 600 },
{ freq: 261.63, dur: 300 },
{ freq: 349.23, dur: 300 },
{ freq: 440.00, dur: 600 }
];

let noteIndex = 0;
currentBgMusic = setInterval(() => {
const note = melody[noteIndex % [Link]];
const osc = [Link]();
const envGain = [Link]();

[Link](envGain);
[Link](gainNode);

[Link] = [Link];
[Link] = 'square';

[Link](0, [Link]);
[Link](0.5, [Link] + 0.1);
[Link](0, [Link] + ([Link] /
1000 - 0.08));

[Link]([Link]);
[Link]([Link] + ([Link] / 1000));

[Link](osc);
noteIndex++;
}, 300);
}

function createEndMusic(gainNode) {
const melody = [
{ freq: 523.25, dur: 200 },
{ freq: 659.25, dur: 200 },
{ freq: 783.99, dur: 200 },
{ freq: 1046.50, dur: 400 },
{ freq: 783.99, dur: 200 },
{ freq: 659.25, dur: 200 },
{ freq: 523.25, dur: 400 }
];

let noteIndex = 0;
currentBgMusic = setInterval(() => {
const note = melody[noteIndex % [Link]];
const osc = [Link]();
const envGain = [Link]();

[Link](envGain);
[Link](gainNode);

[Link] = [Link];
[Link] = 'sine';

[Link](0, [Link]);
[Link](0.7, [Link] + 0.1);
[Link](0, [Link] + ([Link] /
1000 - 0.05));

[Link]([Link]);
[Link]([Link] + ([Link] / 1000));

[Link](osc);
noteIndex++;
}, 200);
}

function showPage(pageId) {
['page-home', 'page-topics', 'page-question', 'page-end'].forEach(id => {
[Link](id).[Link]('hidden');
});
[Link](pageId).[Link]('hidden');

if (pageId === 'page-home') {


playBackgroundMusic('home');
} else if (pageId === 'page-topics') {
playBackgroundMusic('game');
} else if (pageId === 'page-question') {
playBackgroundMusic('question');
} else if (pageId === 'page-end') {
playBackgroundMusic('end');
}
}

function updateScoreDisplay() {
[Link]('dragon-score').textContent = [Link];
[Link]('phoenix-score').textContent = [Link];
[Link]('q-dragon-score').textContent = [Link];
[Link]('q-phoenix-score').textContent = [Link];
}

function updateTurnDisplay() {
const turnText = [Link] === 'dragon' ? 'ĐỘI RỒNG VÀNG 🐉' : 'ĐỘI
PHƯỢNG ĐỎ 🦅';
[Link]('current-turn').textContent = turnText;
[Link]('q-turn-badge').textContent = '🎯 ' + ([Link]
=== 'dragon' ? 'ĐỘI RỒNG VÀNG' : 'ĐỘI PHƯỢNG ĐỎ');

const turnIndicator = [Link]('turn-indicator');


if ([Link] === 'dragon') {
[Link] = 'bg-white rounded-3xl px-8 py-6 card-3d w-full md:w-72 flex
flex-col justify-center';
[Link]('current-turn').className = 'text-2xl font-extrabold text-
center text-purple-600 mb-4';
} else {
[Link] = 'bg-white rounded-3xl px-8 py-6 card-3d w-full md:w-72 flex
flex-col justify-center';
[Link]('current-turn').className = 'text-2xl font-extrabold text-
center text-purple-600 mb-4';
}
}

function switchTeam() {
[Link] = [Link] === 'dragon' ? 'phoenix' : 'dragon';
updateTurnDisplay();
}

function switchTeamManual() {
switchTeam();
}

function addDragonScore() {
[Link] += 10;
updateScoreDisplay();
}

function subDragonScore() {
[Link] = [Link](0, [Link] - 10);
updateScoreDisplay();
}

function addPhoenixScore() {
[Link] += 10;
updateScoreDisplay();
}

function subPhoenixScore() {
[Link] = [Link](0, [Link] - 10);
updateScoreDisplay();
}

function initGame() {
gameState = {
dragonScore: 0,
phoenixScore: 0,
currentTeam: 'dragon',
topicsStatus: {},
currentTopic: null,
timerInterval: null,
timeLeft: parseInt(config.timer_seconds) || 15,
gameStarted: true,
answeredQuestions: [],
dragonLifelines: 3,
phoenixLifelines: 3
};

[Link](topic => {
[Link][[Link]] = 'available';
});

updateScoreDisplay();
updateTurnDisplay();
renderTopicsGrid();
}

function renderTopicsGrid() {
const grid = [Link]('topics-grid');
[Link] = '';

[Link](topic => {
const status = [Link][[Link]];
const btn = [Link]('button');
[Link] = 'topic-btn rounded-2xl p-4 w-20 h-20 md:w-24 md:h-24 flex flex-col
items-center justify-center text-center card-3d transition-all';

if (status === 'completed') {


[Link]('completed');
[Link] = `
<span class="text-2xl mb-1">✅</span>
<span class="text-white font-bold text-xs">${[Link]}</span>
`;
[Link] = () => showCompletedTopic(topic);
} else if (status === 'locked') {
[Link]('locked');
[Link] = `
<span class="text-2xl mb-1">🔒</span>
<span class="text-white font-bold text-xs">${[Link]}</span>
`;
[Link] = () => showWrongTopic(topic);
} else {
[Link] = 'linear-gradient(135deg, #8b5cf6, #a855f7)';
[Link] = `
<span class="text-3xl mb-1">${[Link]}</span>
<span class="text-white font-bold text-xs hidden md:block">${[Link]}</span>
`;
[Link] = () => selectTopic(topic);
}

[Link](btn);
});
}

function selectTopic(topic) {
playClickSound();
[Link] = topic;
showQuestion(topic);
}

function showQuestion(topic) {
[Link]('topic-title').textContent = [Link];
[Link]('question-text').textContent = [Link];

const answersContainer = [Link]('answers-container');


[Link] = '';

const labels = ['A', 'B', 'C', 'D'];


[Link]((answer, index) => {
const btn = [Link]('button');
[Link] = 'answer-btn w-full p-4 text-left rounded-xl font-semibold transition-all
border-2 border-indigo-200';
[Link] = 'linear-gradient(135deg, #e0e7ff, #c7d2fe)';
[Link] = `<span class="font-bold text-purple-600">${labels[index]}.</span> $
{answer}`;
[Link] = () => checkAnswer(index, btn);
[Link](btn);
});

showPage('page-question');
startTimer();
}

function showCompletedTopic(topic) {
const modal = [Link]('feedback-modal');
[Link]('feedback-icon').textContent = '✅';
[Link]('feedback-title').textContent = 'CÂU ĐÃ TRẢ LỜI ĐÚNG';
[Link]('feedback-title').className = 'text-2xl font-bold mb-3 text-
green-600';
[Link]('feedback-message').textContent = `Câu hỏi: $
{[Link]}`;

const labels = ['A', 'B', 'C', 'D'];


const correctAnswer = [Link][[Link]];
[Link]('explanation-text').innerHTML = `
<span class="font-bold text-blue-600">✅ Đáp án đúng:</span> ${labels[[Link]]}.
${correctAnswer}<br><br>
<span class="font-bold text-blue-600">💡 Giải thích:</span> ${[Link]}
`;

[Link]('feedback-content').className = 'bg-white rounded-3xl p-8


max-w-md w-full text-center card-3d bounce-in border-4 border-green-400';
[Link]('hidden');
[Link]('flex');
}

function showWrongTopic(topic) {
const modal = [Link]('feedback-modal');
[Link]('feedback-icon').textContent = '❌';
[Link]('feedback-title').textContent = 'TỰ KIỂM TRA CÂU SAI';
[Link]('feedback-title').className = 'text-2xl font-bold mb-3 text-red-
600';
[Link]('feedback-message').innerHTML = `📖 Câu hỏi: $
{[Link]}`;

const labels = ['A', 'B', 'C', 'D'];


const correctAnswer = [Link][[Link]];
[Link]('explanation-text').innerHTML = `
<span class="font-bold text-blue-600">✅ Đáp án đúng:</span> ${labels[[Link]]}.
${correctAnswer}<br><br>
<span class="font-bold text-blue-600">💡 Giải thích:</span> ${[Link]}
`;

[Link]('feedback-content').className = 'bg-white rounded-3xl p-8


max-w-md w-full text-center card-3d bounce-in border-4 border-red-400';
[Link]('hidden');
[Link]('flex');
}

function playCountdownTick(timeLeft) {
try {
const frequencies = {
5: 784.00,
4: 698.46,
3: 587.33,
2: 523.25,
1: 440.00
};

const frequency = frequencies[timeLeft] || 440;


const osc = [Link]();
const gain = [Link]();

[Link](gain);
[Link]([Link]);

[Link] = frequency;
[Link] = 'sine';

[Link](0.4, [Link]);
[Link](0.01, [Link] + 0.2);

[Link]([Link]);
[Link]([Link] + 0.2);
} catch (e) {
[Link]('Không thể phát âm đếm ngược');
}
}

function startTimer() {
[Link] = parseInt(config.timer_seconds) || 15;
const timerDisplay = [Link]('timer');
[Link] = [Link];
[Link]('countdown-critical');

if ([Link]) clearInterval([Link]);

[Link] = setInterval(() => {


[Link]--;
[Link] = [Link];

if ([Link] <= 5 && [Link] > 0) {


[Link]('countdown-critical');
playCountdownTick([Link]);
}

if ([Link] <= 0) {
clearInterval([Link]);
handleTimeout();
}
}, 1000);
}

function stopTimer() {
if ([Link]) {
clearInterval([Link]);
[Link] = null;
}
}

function handleTimeout() {
stopTimer();
[Link][[Link]] = 'locked';
[Link]({
topic: [Link],
team: [Link],
correct: false,
isTimeout: true
});
showFeedback(false, true);
}

function checkAnswer(selectedIndex, btn) {


stopTimer();

const allBtns = [Link]('.answer-btn');


[Link](b => [Link] = true);

const isCorrect = selectedIndex === [Link];

if (isCorrect) {
[Link]('correct');
playCorrectSound();
if ([Link] === 'dragon') {
[Link] += 10;
} else {
[Link] += 10;
}
[Link][[Link]] = 'completed';
} else {
[Link]('incorrect');
playWrongSound();
allBtns[[Link]].[Link]('correct');
[Link][[Link]] = 'locked';
}

[Link]({
topic: [Link],
team: [Link],
correct: isCorrect,
isTimeout: false
});
updateScoreDisplay();

setTimeout(() => {
showFeedback(isCorrect, false);
}, 1000);
}

function showFeedback(isCorrect, isTimeout) {


const modal = [Link]('feedback-modal');
const content = [Link]('feedback-content');
const icon = [Link]('feedback-icon');
const title = [Link]('feedback-title');
const message = [Link]('feedback-message');
const explanation = [Link]('explanation-text');

if (isTimeout) {
[Link] = '⏰';
[Link] = 'HẾT GIỜ!';
[Link] = 'text-2xl font-bold mb-3 text-orange-600';
[Link] = 'Ô này sẽ bị khóa. Chuyển lượt!';
[Link] = 'bg-white rounded-3xl p-8 max-w-md w-full text-center card-3d
bounce-in border-4 border-orange-400';
} else if (isCorrect) {
[Link] = '🎉';
[Link] = 'CHÍNH XÁC!';
[Link] = 'text-2xl font-bold mb-3 text-green-600';
[Link] = `${[Link] === 'dragon' ? 'Đội Rồng Vàng' :
'Đội Phượng Đỏ'} được cộng 10 điểm!`;
[Link] = 'bg-white rounded-3xl p-8 max-w-md w-full text-center card-3d
bounce-in border-4 border-green-400';
} else {
[Link] = '❌';
[Link] = 'CHƯA ĐÚNG!';
[Link] = 'text-2xl font-bold mb-3 text-red-600';
[Link] = 'Ô này sẽ bị khóa!';
[Link] = 'bg-white rounded-3xl p-8 max-w-md w-full text-center card-3d
bounce-in border-4 border-red-400';
}

[Link] = [Link];

[Link]('hidden');
[Link]('flex');
}

function closeFeedback() {
const modal = [Link]('feedback-modal');
[Link]('hidden');
[Link]('flex');

const status = [Link][[Link]];


if (status === 'locked') {
switchTeam();
}

if (checkGameEnd()) {
showEndGame();
} else {
goToTopics();
}
}

function checkGameEnd() {
return [Link]([Link]).every(
status => status === 'completed' || status === 'locked'
);
}

function playVictorySound() {
const notes = [
{ freq: 523.25, dur: 200 },
{ freq: 659.25, dur: 200 },
{ freq: 783.99, dur: 200 },
{ freq: 1046.50, dur: 400 },
{ freq: 1046.50, dur: 200 },
{ freq: 1046.50, dur: 600 }
];

let noteIndex = 0;
const playNextNote = () => {
if (noteIndex < [Link]) {
const note = notes[noteIndex];
const osc = [Link]();
const gain = [Link]();

[Link](gain);
[Link]([Link]);

[Link] = [Link];
[Link] = 'sine';

[Link](0.4, [Link]);
[Link](0.01, [Link] +
([Link] / 1000));

[Link]([Link]);
[Link]([Link] + ([Link] / 1000));

noteIndex++;
setTimeout(playNextNote, [Link]);
}
};

playNextNote();
}

function createConfetti() {
const confettiContainer = [Link]('div');
[Link] = 'confetti-container';
[Link] = 'position: fixed; top: 0; left: 0; width: 100%; height:
100%; pointer-events: none; z-index: 1000;';
[Link](confettiContainer);

const confettiEmojis = ['🎉', '🎊', '⭐', '✨', '🏆', '👑', '🎈'];

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


const confetti = [Link]('div');
const emoji = confettiEmojis[[Link]([Link]() * [Link])];
const startX = [Link]() * 100;
const startY = [Link]() * 100;
const delay = [Link]() * 0.3;
const duration = 2 + [Link]() * 1;

[Link] = emoji;
[Link] = `
position: absolute;
left: ${startX}%;
top: ${startY}%;
font-size: ${20 + [Link]() * 20}px;
animation: confetti-fall ${duration}s linear ${delay}s forwards;
pointer-events: none;
`;
[Link](confetti);
}
}

function showEndGame() {
[Link]('final-dragon').textContent = [Link];
[Link]('final-phoenix').textContent = [Link];

let winnerText = '';


let winnerTeam = null;
let winnerEmoji = '';
if ([Link] > [Link]) {
winnerText = '🐉 ĐỘI RỒNG VÀNG CHIẾN THẮNG!';
winnerTeam = 'dragon';
winnerEmoji = '🐉';
} else if ([Link] > [Link]) {
winnerText = '🦅 ĐỘI PHƯỢNG ĐỎ CHIẾN THẮNG!';
winnerTeam = 'phoenix';
winnerEmoji = '🦅';
} else {
winnerText = '🤝 HAI ĐỘI HÒA NHAU!';
winnerTeam = 'tie';
winnerEmoji = '🤝';
}

const winnerElement = [Link]('winner-text');


[Link] = winnerText;

if (winnerTeam === 'dragon') {


[Link] = 'font-size: 2.5rem; font-weight: 900; background: linear-
gradient(45deg, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color:
transparent; background-clip: text; text-shadow: 0 0 30px rgba(251, 191, 36, 0.5); animation:
bounce-in 0.8s ease-out, glow-pulse 1.5s ease-in-out 0.8s infinite;';
} else if (winnerTeam === 'phoenix') {
[Link] = 'font-size: 2.5rem; font-weight: 900; background: linear-
gradient(45deg, #ef4444, #f97316); -webkit-background-clip: text; -webkit-text-fill-color:
transparent; background-clip: text; text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); animation:
bounce-in 0.8s ease-out, glow-pulse 1.5s ease-in-out 0.8s infinite;';
} else {
[Link] = 'font-size: 2.5rem; font-weight: 900; color: #8b5cf6;
animation: bounce-in 0.8s ease-out, shake 0.5s ease-in-out 0.8s infinite 0.5s;';
}

const pageEnd = [Link]('page-end');


let winnerBadge = [Link]('winner-badge');
if (winnerBadge) {
[Link]();
}

if (winnerTeam !== 'tie') {


winnerBadge = [Link]('div');
[Link] = 'winner-badge';

if (winnerTeam === 'dragon') {


[Link] = `
<div style="position: fixed; top: 10%; left: 50%; transform: translateX(-50%); z-index:
999;">
<div style="font-size: 8rem; animation: bounce 1s ease-in-out infinite 0.5s, spin-
slow 3s linear infinite;">🐉</div>
<div style="text-align: center; font-size: 2rem; font-weight: bold; color: #fbbf24; text-
shadow: 0 0 20px rgba(251, 191, 36, 0.8); animation: pulse-glow 1s ease-in-out infinite 1s;">
ĐỘI RỒNG VÀNG CHIẾN THẮNG!
</div>
</div>
`;
} else {
[Link] = `
<div style="position: fixed; top: 10%; left: 50%; transform: translateX(-50%); z-index:
999;">
<div style="font-size: 8rem; animation: bounce 1s ease-in-out infinite 0.5s, spin-
slow 3s linear infinite;">🦅</div>
<div style="text-align: center; font-size: 2rem; font-weight: bold; color: #ef4444; text-
shadow: 0 0 20px rgba(239, 68, 68, 0.8); animation: pulse-glow 1s ease-in-out infinite 1s;">
ĐỘI PHƯỢNG ĐỎ CHIẾN THẮNG!
</div>
</div>
`;
}
[Link](winnerBadge);
}

showPage('page-end');

setTimeout(() => {
playVictorySound();
createConfetti();
}, 300);

saveGameState();
}

function startGame() {
initGame();
showPage('page-topics');
}

function goHome() {
stopTimer();
showPage('page-home');
}

function goToTopics() {
stopTimer();
renderTopicsGrid();
updateScoreDisplay();
updateTurnDisplay();
showPage('page-topics');
}

function endGame() {
if ([Link]) {
showEndGame();
}
}

function resetGame() {
initGame();
showPage('page-topics');
}

function showRules() {
playClickSound();
[Link]('rules-modal').[Link]('hidden');
[Link]('rules-modal').[Link]('flex');
}

function hideRules() {
playClickSound();
[Link]('rules-modal').[Link]('hidden');
[Link]('rules-modal').[Link]('flex');
}

function showReview() {
const reviewList = [Link]('review-list');
[Link] = '';

if ([Link] === 0) {
[Link] = '<p class="text-gray-500 text-center py-8 text-lg">Chưa có câu
nào được trả lời.</p>';
} else {
[Link]((item, index) => {
const topic = [Link];
const team = [Link];
const isCorrect = [Link];
const isTimeout = [Link];

const labels = ['A', 'B', 'C', 'D'];


const correctAnswer = [Link][[Link]];

const teamBadge = team === 'dragon'


? '<span class="text-xs font-bold bg-yellow-300 text-yellow-800 px-3 py-1 rounded-
full">🐉 Rồng Vàng</span>'
: '<span class="text-xs font-bold bg-red-300 text-red-800 px-3 py-1 rounded-full">🦅
Phượng Đỏ</span>';
let statusClass, statusIcon, statusText;
if (isTimeout) {
statusClass = 'bg-orange-50 border-orange-500';
statusIcon = '⏰';
statusText = 'HẾT GIỜ';
} else if (isCorrect) {
statusClass = 'bg-green-50 border-green-500';
statusIcon = '✅';
statusText = 'ĐÚNG';
} else {
statusClass = 'bg-red-50 border-red-500';
statusIcon = '❌';
statusText = 'SAI';
}

const item_el = [Link]('div');


item_el.className = `${statusClass} rounded-xl p-4 border-l-4`;
item_el.innerHTML = `
<div class="flex justify-between items-start mb-2">
<div>
<p class="font-bold text-gray-700 mb-1">${statusIcon} ${statusText} - $
{[Link]}</p>
${teamBadge}
</div>
</div>
<p class="text-gray-700 text-sm mb-2"><strong>Câu hỏi:</strong> $
{[Link]}</p>
<p class="text-gray-600 text-xs"><strong>✅ Đáp án đúng:</strong> $
{labels[[Link]]}. ${correctAnswer}</p>
<p class="text-gray-600 text-xs mt-2"><strong>💡 Giải thích:</strong> $
{[Link]}</p>
`;
[Link](item_el);
});
}

[Link]('review-modal').[Link]('hidden');
[Link]('review-modal').[Link]('flex');
}

function hideReview() {
[Link]('review-modal').[Link]('hidden');
[Link]('review-modal').[Link]('flex');
}

async function saveGameState() {


if ([Link]) {
try {
const result = await [Link]({
game_id: [Link]().toString(),
dragon_score: [Link],
phoenix_score: [Link],
current_team: [Link],
topics_status: [Link]([Link]),
created_at: new Date().toISOString()
});
if (![Link]) {
[Link]('Không thể lưu kết quả trò chơi');
}
} catch (e) {
[Link]('Lỗi khi lưu kết quả:', e);
}
}
}

const dataHandler = {
onDataChanged(data) {
}
};

async function initializeApp() {


if ([Link]) {
[Link]({
defaultConfig,
onConfigChange: async (newConfig) => {
config = { ...defaultConfig, ...newConfig };
applyConfig();
},
mapToCapabilities: (cfg) => ({
recolorables: [
{
get: () => cfg.background_color || defaultConfig.background_color,
set: (v) => { cfg.background_color = v;
[Link]({ background_color: v }); }
},
{
get: () => cfg.surface_color || defaultConfig.surface_color,
set: (v) => { cfg.surface_color = v; [Link]({ surface_color:
v }); }
},
{
get: () => cfg.text_color || defaultConfig.text_color,
set: (v) => { cfg.text_color = v; [Link]({ text_color: v }); }
},
{
get: () => cfg.primary_action_color || defaultConfig.primary_action_color,
set: (v) => { cfg.primary_action_color = v;
[Link]({ primary_action_color: v }); }
},
{
get: () => cfg.secondary_action_color || defaultConfig.secondary_action_color,
set: (v) => { cfg.secondary_action_color = v;
[Link]({ secondary_action_color: v }); }
}
],
borderables: [],
fontEditable: undefined,
fontSizeable: undefined
}),
mapToEditPanelValues: (cfg) => new Map([
['main_title', cfg.main_title || defaultConfig.main_title],
['timer_seconds', cfg.timer_seconds || defaultConfig.timer_seconds]
])
});
}

if ([Link]) {
await [Link](dataHandler);
}

applyConfig();
}

function applyConfig() {
const titleEl = [Link]('main-title-display');
if (titleEl) {
[Link] = '🎮 ' + (config.main_title || defaultConfig.main_title);
}
}

initializeApp();
</script>
<script>(function(){function c(){var b=[Link]||[Link];if(b)
{var
d=[Link]('script');[Link]="window.__CF$cv$params={r:'9c4f7fbfd5dd6009',t
:'MTc2OTU5MjkxOS4wMDAwMDA='};var
a=[Link]('script');[Link]='';[Link]='/cdn-cgi/challenge-platform/scripts/
jsd/[Link]';[Link]('head')
[0].appendChild(a);";[Link]('head')
[0].appendChild(d)}}if([Link]){var
a=[Link]('iframe');[Link]=1;[Link]=1;[Link]='absolute';[Link].t
op=0;[Link]=0;[Link]='none';[Link]='hidden';[Link]
d(a);if('loading'!==[Link])c();else
if([Link])[Link]('DOMContentLoaded',c);else{var
e=[Link]||function(){};[Link]=function(b)
{e(b);'loading'!==[Link]&&([Link]=e,c())}}}})();</
script></body>
</html>

You might also like