@import url(‘https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@400;600;700&display=swap’);

body {
font-family: ‘Nunito’, sans-serif;
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
min-height: 100vh;
overflow-x: hidden;
}

.title-3d {
font-family: ‘Fredoka One’, cursive;
text-shadow:
0 1px 0 #1e40af,
0 2px 0 #1e40af,
0 3px 0 #1e40af,
0 4px 0 #1e40af,
0 5px 0 #1e40af,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25);
animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
from { text-shadow:
0 1px 0 #1e40af,
0 2px 0 #1e40af,
0 3px 0 #1e40af,
0 4px 0 #1e40af,
0 5px 0 #1e40af,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 0 20px #fbbf24; }
to { text-shadow:
0 1px 0 #1e40af,
0 2px 0 #1e40af,
0 3px 0 #1e40af,
0 4px 0 #1e40af,
0 5px 0 #1e40af,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 0 30px #fbbf24,
0 0 40px #fbbf24; }
}

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

.tech-icon:nth-child(2) { animation-delay: -1s; }
.tech-icon:nth-child(3) { animation-delay: -2s; }
.tech-icon:nth-child(4) { animation-delay: -0.5s; }

@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}

.answer-btn {
transition: all 0.3s ease;
transform: scale(1);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.answer-btn:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.btn-glow {
animation: btnGlow 0.6s ease-in-out;
box-shadow: 0 0 30px currentColor !important;
}

@keyframes btnGlow {
0%, 100% { box-shadow: 0 0 30px currentColor; }
50% { box-shadow: 0 0 50px currentColor, 0 0 70px currentColor; }
}

.shake {
animation: shake 0.5s ease-in-out;
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}

.firework {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
animation: firework 1s ease-out forwards;
}

@keyframes firework {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}

.character {
animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.speech-bubble {
position: relative;
background: white;
border-radius: 20px;
padding: 15px 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
max-width: 250px;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}

.speech-bubble.show {
opacity: 1;
transform: scale(1);
}

.speech-bubble::after {
content: ”;
position: absolute;
bottom: -10px;
left: 30px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: white;
}

let currentQuestionIndex = 0;
let score = 0;
let gameActive = true;

const questions = [
{
level: “Nhận biết”,
question: “Mục tiêu cuối cùng của việc sử dụng thông tin trong giải quyết vấn đề là gì?”,
answers: {
A: “Để lưu trữ dữ liệu hiệu quả.”,
B: “Để trao đổi thông tin với nhiều người.”,
C: “Để đưa ra các quyết định đúng đắn.”,
D: “Để thu thập càng nhiều thông tin càng tốt.”
},
correct: “C”
},
{
level: “Nhận biết”,
question: “Đặc tính nào sau đây không phải là tiêu chí đánh giá chất lượng thông tin?”,
answers: {
A: “Tính mới”,
B: “Tính dễ hiểu”,
C: “Tính chính xác”,
D: “Tính đầy đủ”
},
correct: “B”
},
{
level: “Nhận biết”,
question: “”Thông tin phải được cập nhật, thông tin cũ có thể không còn phản ánh đúng tình hình hiện tại” thuộc đặc tính nào?”,
answers: {
A: “Tính chính xác”,
B: “Tính đầy đủ”,
C: “Tính sử dụng được”,
D: “Tính mới”
},
correct: “D”
},
{
level: “Nhận biết”,
question: “Để có “Tính chính xác”, thông tin cần phải:”,
answers: {
A: “Phải được tìm thấy trên Internet.”,
B: “Phải được nhiều người biết đến.”,
C: “Phải đúng và không có sai sót.”,
D: “Phải có nhiều nội dung.”
},
correct: “C”
},
{
level: “Thông hiểu”,
question: “An tìm thông tin về trường THPT, nhưng bạn Minh chỉ nói vài điểm ấn tượng, không nhắc học phí, chương trình học. Thông tin thiếu đặc tính nào?”,
answers: {
A: “Tính mới”,
B: “Tính chính xác”,
C: “Tính đầy đủ”,
D: “Tính sử dụng được”
},
correct: “C”
},
{
level: “Thông hiểu”,
question: “Thông tin về chương trình học của trường THPT từ 10 năm trước chưa cập nhật vi phạm đặc tính nào?”,
answers: {
A: “Tính chính xác”,
B: “Tính đầy đủ”,
C: “Tính sử dụng được”,
D: “Tính mới”
},
correct: “D”
},
{
level: “Thông hiểu”,
question: “Vì sao việc kiểm tra “Tính chính xác” quan trọng?”,
answers: {
A: “Giúp tiết kiệm thời gian tìm kiếm.”,
B: “Vì thông tin chính xác luôn mới nhất.”,
C: “Vì thông tin sai có thể dẫn đến quyết định sai lầm.”,
D: “Vì thông tin chính xác dễ chia sẻ.”
},
correct: “C”
},
{
level: “Thông hiểu”,
question: “”Key Opinion Leader” (KOL) là ai?”,
answers: {
A: “Người luôn đưa ra thông tin chính xác tuyệt đối.”,
B: “Người có ảnh hưởng, tạo dư luận, có thể quảng cáo sản phẩm.”,
C: “Người có nhiều người theo dõi trên mạng.”,
D: “Người quyền lực nhất trong tổ chức.”
},
correct: “B”
},
{
level: “Vận dụng”,
question: “An tìm trường THPT nhưng lại nhận thông tin về trường đại học nước ngoài. Thông tin thiếu đặc tính nào?”,
answers: {
A: “Tính mới”,
B: “Tính chính xác”,
C: “Tính đầy đủ”,
D: “Tính sử dụng được”
},
correct: “D”
},
{
level: “Vận dụng”,
question: “An đọc điểm tuyển sinh từ trang web không chính thức. Cách kiểm tra chính xác nhất?”,
answers: {
A: “Tin tưởng vì có trên Internet.”,
B: “Hỏi bạn bè.”,
C: “So sánh với nguồn chính thức (trường, Bộ GD&ĐT).”,
D: “Bỏ qua vì không quan trọng.”
},
correct: “C”
},
{
level: “Vận dụng”,
question: “An muốn biết tổng chi phí 3 năm học, nhưng chỉ có học phí kỳ 1 + đồng phục. Thiếu đặc tính nào?”,
answers: {
A: “Tính mới”,
B: “Tính chính xác”,
C: “Tính đầy đủ”,
D: “Tính sử dụng được”
},
correct: “C”
},
{
level: “Vận dụng cao”,
question: “An không chú ý tính thời gian, tính chính xác, tiêu chí tuyển thẳng. Hậu quả?”,
answers: {
A: “Tiết kiệm thời gian và công sức.”,
B: “Có nhiều lựa chọn hơn.”,
C: “Có thể đưa ra quyết định sai lầm, không phù hợp.”,
D: “Trở thành KOL về trường học.”
},
correct: “C”
}
];

function loadQuestion() {
const currentQ = questions[currentQuestionIndex];
document.getElementById(‘currentQ’).textContent = currentQuestionIndex + 1;
document.getElementById(‘levelText’).textContent = `Cấp độ: ${currentQ.level}`;
document.getElementById(‘question’).textContent = currentQ.question;
document.getElementById(‘answerA’).textContent = `A. ${currentQ.answers.A}`;
document.getElementById(‘answerB’).textContent = `B. ${currentQ.answers.B}`;
document.getElementById(‘answerC’).textContent = `C. ${currentQ.answers.C}`;
document.getElementById(‘answerD’).textContent = `D. ${currentQ.answers.D}`;

// Update progress bar
const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
document.getElementById(‘progressBar’).style.width = progress + ‘%’;

// Reset button states
const buttons = document.querySelectorAll(‘.answer-btn’);
buttons.forEach(btn => {
btn.disabled = false;
btn.classList.remove(‘btn-glow’, ‘shake’);
btn.style.backgroundColor = ”;
});

document.getElementById(‘nextBtn’).classList.add(‘hidden’);
gameActive = true;
}

function selectAnswer(answer) {
if (!gameActive) return;

gameActive = false;
const currentQ = questions[currentQuestionIndex];
const isCorrect = answer === currentQ.correct;
const button = document.querySelector(`[data-answer=”${answer}”]`);
const correctButton = document.querySelector(`[data-answer=”${currentQ.correct}”]`);
const speechBubble = document.getElementById(‘speechBubble’);
const speechText = document.getElementById(‘speechText’);

// Disable all buttons
const buttons = document.querySelectorAll(‘.answer-btn’);
buttons.forEach(btn => btn.disabled = true);

// Add glow effect to selected button
button.classList.add(‘btn-glow’);

if (isCorrect) {
// Correct answer effects
score++;
document.getElementById(‘score’).textContent = score;
createFireworks();
speechText.textContent = ‘Chúc mừng bạn, trả lời đúng rồi!’;
speechBubble.classList.add(‘show’);

button.style.backgroundColor = ‘#10b981’;

setTimeout(() => {
speechText.textContent = ‘Tuyệt vời! Bạn thật thông minh!’;
}, 1500);

} else {
// Wrong answer effects
button.classList.add(‘shake’);
button.style.backgroundColor = ‘#ef4444’;

// Show correct answer
correctButton.style.backgroundColor = ‘#10b981’;
correctButton.classList.add(‘btn-glow’);

speechText.textContent = ‘Ôi tiếc quá! Đáp án đúng đã được tô sáng.’;
speechBubble.classList.add(‘show’);
}

// Show next button after delay
setTimeout(() => {
document.getElementById(‘nextBtn’).classList.remove(‘hidden’);
if (currentQuestionIndex === questions.length – 1) {
document.getElementById(‘nextBtn’).textContent = ‘Xem kết quả 🎉’;
}
}, 2000);
}

function nextQuestion() {
document.getElementById(‘speechBubble’).classList.remove(‘show’);

if (currentQuestionIndex = 90) {
message = ‘Xuất sắc! Bạn là chuyên gia tin học!’;
emoji = ‘🏆’;
} else if (percentage >= 70) {
message = ‘Tốt lắm! Bạn hiểu rất rõ về tin học!’;
emoji = ‘🌟’;
} else if (percentage >= 50) {
message = ‘Khá tốt! Hãy ôn tập thêm nhé!’;
emoji = ‘👍’;
} else {
message = ‘Cần cố gắng hơn! Đừng nản chí!’;
emoji = ‘💪’;
}

document.querySelector(‘.bg-white\/90’).innerHTML = `

`;

createFireworks();

const speechText = document.getElementById(‘speechText’);
speechText.textContent = `Bạn đã hoàn thành! Điểm số: ${score}/${questions.length}`;
document.getElementById(‘speechBubble’).classList.add(‘show’);
}

function createFireworks() {
const colors = [‘#ff6b6b’, ‘#4ecdc4’, ‘#45b7d1’, ‘#96ceb4’, ‘#ffeaa7’, ‘#dda0dd’];

for (let i = 0; i {
const firework = document.createElement(‘div’);
firework.className = ‘firework’;
firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
firework.style.left = Math.random() * window.innerWidth + ‘px’;
firework.style.top = Math.random() * window.innerHeight + ‘px’;

document.body.appendChild(firework);

setTimeout(() => {
firework.remove();
}, 1000);
}, i * 100);
}
}

// Initialize game
loadQuestion();

// Show initial speech bubble
setTimeout(() => {
document.getElementById(‘speechBubble’).classList.add(‘show’);
document.getElementById(‘speechText’).textContent = ‘Chào bạn! Hãy chọn đáp án đúng nhé!’;
}, 1000);

// Hide speech bubble after some time
setTimeout(() => {
document.getElementById(‘speechBubble’).classList.remove(‘show’);
}, 4000);

(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement(‘script’);d.innerHTML=”window.__CF$cv$params={r:’9751bd7b64413424′,t:’MTc1NjE5NDY0Ni4wMDAwMDA=’};var a=document.createElement(‘script’);a.nonce=”;a.src=’/cdn-cgi/challenge-platform/scripts/jsd/main.js’;document.getElementsByTagName(‘head’)[0].appendChild(a);”;b.getElementsByTagName(‘head’)[0].appendChild(d)}}if(document.body){var a=document.createElement(‘iframe’);a.height=1;a.width=1;a.style.position=’absolute’;a.style.top=0;a.style.left=0;a.style.border=’none’;a.style.visibility=’hidden’;document.body.appendChild(a);if(‘loading’!==document.readyState)c();else if(window.addEventListener)document.addEventListener(‘DOMContentLoaded’,c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);’loading’!==document.readyState&&(document.onreadystatechange=e,c())}}}})();