<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRẮC NGHIỆM CỦA ANH
😈
</title>
<style>
/* Reset và Khung Chung style Instagram Tối Giản */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Times New Roman', Times, serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
color: #000000;
transition: background-color 0.3s ease, color 0.3s ease;
padding: 20px;
overflow: hidden; /* Giữ chữ không bị văng ra ngoài khung màn hình khi
bay nhảy */
}
/* Khung nội dung chính */
.quiz-container {
width: 100%;
max-width: 450px;
text-align: center;
padding: 30px 20px;
}
/* Khung hình chữ nhật Trang Chủ */
.welcome-box {
border: none;
padding: 35px 20px;
border-radius: 15px;
margin-bottom: 35px;
background-color: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
/* Tiêu đề lớn */
h1 {
font-size: 28px;
font-weight: bold;
margin-bottom: 30px;
letter-spacing: 0.5px;
}
/* Câu hỏi & Câu đe dọa */
.question-text {
font-size: 22px;
font-weight: normal;
margin-bottom: 35px;
line-height: 1.5;
display: inline-block;
}
/* Nút hình viên thuốc */
.btn-pill {
display: block;
width: 100%;
font-family: 'Times New Roman', Times, serif;
background-color: #ffffff;
color: #000000;
border: none;
padding: 15px 20px;
margin-bottom: 18px;
font-size: 18px;
font-weight: normal;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s ease, opacity 0.2s ease, transform
0.2s ease;
}
.btn-pill:active {
transform: scale(0.98);
}
/* Nút Tiếp Tục ở Trang Chủ */
.btn-next {
background-color: #000000;
color: #ffffff;
margin-bottom: 0px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
font-weight: bold;
}
/* --- CÁC LEVEL "NỔI KHÙNG" CỦA WEB --- */
/* CẤP ÐỘ 1: Ấn Sai -> Màu Ðỏ tức giận */
body.angry-red-mode {
background-color: #ff3333 !important;
color: #ffffff !important;
}
body.angry-red-mode .btn-pill {
background-color: #ff3333 !important;
color: #ffffff !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}
/* Hiệu ứng Rung lắc giật nảy */
.shake-effect {
animation: shake 0.15s infinite;
}
@keyframes shake {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* CẤP ÐỘ MAX: Ấn Sai HẾT TẤT CẢ đáp án sai -> Chuyển màu Tím dỗi hờn
*/
body.angry-purple-mode {
background-color: #8b5cf6 !important; /* Tone tím */
color: #ffffff !important;
}
body.angry-purple-mode .btn-pill {
background-color: #8b5cf6 !important;
color: #ffffff !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}
/* Hiệu ứng Chạy lung tung khắp màn hình */
.chaotic-jump {
animation: chaotic-jump 0.4s infinite alternate ease-in-out;
}
@keyframes chaotic-jump {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-40px, 60px) rotate(-8deg); }
50% { transform: translate(70px, -40px) rotate(10deg); }
75% { transform: translate(-60px, -50px) rotate(-6deg); }
100% { transform: translate(55px, 45px) rotate(8deg); }
}
/* Luôn giữ đáp án ÐÚNG đứng im kể cả khi thế giới đang điên đảo */
.stay-calm {
animation: none !important;
transform: none !important;
opacity: 1 !important;
background-color: #ffffff !important;
color: #000000 !important;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4) !important;
}
/* --- TRANG TÍNH ÐIỂM --- */
body.result-bad {
background-color: #ff0000 !important;
color: #ffffff !important;
}
body.result-perfect {
background-color: #ffb3c1 !important;
color: #ffffff !important;
}
.result-text {
font-size: 40px;
font-weight: bold;
letter-spacing: 2px;
margin-top: 20px;
}
.score-display {
font-size: 22px;
margin-bottom: 10px;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="quiz-container" id="quizBox">
<!-- JS tự động render -->
</div>
<script>
const quizData = [
{
type: "welcome",
title: "TRẮC NGHIỆM CỦA ANH
😈
",
text: "TRẢ LỜI SAI THÌ ANH BIẾT TAY EM!"
},
{
type: "question",
id: 1,
question: "Mình quen nhau ngày mấy?",
answers: ["14/2/2026", "14/2/2025", "11/2/2026", "1/2/2025"],
correct: "14/2/2025"
},
{
type: "question",
id: 2,
question: "Mình nhắn tin bao lâu thì quen nhau?",
answers: ["1 tuần rưỡi", "10 tỷ năm", "1.209.600 giây", "1 ngày"],
correct: "1.209.600 giây"
},
{
type: "question",
id: 3,
question: "Lần đầu tiên mình đi ăn với nhau là ở đâu?",
answers: ["Mì bà Hơ", "Gogi", "Dokki", "Cơm tấm số 5"],
correct: "Mì bà Hơ"
},
{
type: "question",
id: 4,
question: "Vào dịp sinh nhật của anh, em đã tặng những gì?",
answers: ["Gấu bông", "Khuyên tai", "Áo thun", "Áo len", "Áo sơ mi tay
ngắn", "Gấu, Khuyên tai, Áo", "Tất cả cái trên"],
correct: "Gấu, Khuyên tai, Áo"
},
{
type: "question",
id: 5,
question: "Em đã bận áo màu gì vào buổi đi ăn sinh nhật của anh?",
answers: ["Ðỏ", "Xanh navy", "Tím", "Ðen", "Trắng"],
correct: "Xanh navy"
}
];
let currentPage = 0;
let score = 0;
let dynamicScoreTrack = [true, true, true, true, true];
let wrongAnswersClicked = 0; // Ðếm số đáp án sai đã bấm ở câu hiện tại
const quizBox = document.getElementById('quizBox');
function renderPage() {
// Dọn sạch mọi class gây màu nền hay hiệu ứng chuyển động khi sang
trang mới
document.body.className = "";
quizBox.className = "quiz-container";
wrongAnswersClicked = 0; // Reset bộ đếm lỗi câu mới
const data = quizData[currentPage];
if (data.type === "welcome") {
quizBox.innerHTML = `
<h1>${data.title}</h1>
<div class="welcome-box">
<div class="question-text" style="margin-bottom: 0px;">$
{data.text}</div>
</div>
<button class="btn-pill btn-next" onclick="nextPage()">Tiếp tục.</
button>
`;
}
else if (data.type === "question") {
let answersHTML = "";
data.answers.forEach(ans => {
const isCorrect = (ans === data.correct) ? "correct-target" :
"wrong-target";
answersHTML += `<button class="btn-pill ${isCorrect}"
onclick="handleAnswer(this, '${ans}')">${ans}</button>`;
});
quizBox.innerHTML = `
<div class="question-text" id="qText">${data.question}</div>
<div class="answers-box" id="aBox">${answersHTML}</div>
`;
}
}
function nextPage() {
currentPage++;
renderPage();
}
function handleAnswer(buttonElement, chosenAnswer) {
const currentQuestion = quizData[currentPage];
const totalWrongAnswers = currentQuestion.answers.length - 1; // Tổng
số đáp án sai của câu này
if (chosenAnswer === currentQuestion.correct) {
// CHỌN ÐÚNG:
if (dynamicScoreTrack[currentQuestion.id - 1] === true) {
score++;
}
if (currentPage < quizData.length - 1) {
nextPage();
} else {
showResult();
}
} else {
// CHỌN SAI:
dynamicScoreTrack[currentQuestion.id - 1] = false;
wrongAnswersClicked++; // Tăng số lượng đã bấm sai lên
// Làm mờ và vô hiệu hóa nút vừa bấm sai
buttonElement.style.opacity = "0.2";
buttonElement.style.cursor = "not-allowed";
buttonElement.disabled = true;
// KIỂM TRA ÐIỀU KIỆN ÐỂ BẬT CẤP ÐỘ LÀM LOẠN:
if (wrongAnswersClicked >= totalWrongAnswers) {
// Nếu đã bấm sai HẾT SẠCH tất cả đáp án sai có sẵn -> CHUYỂN
MÀU TÍM + CHẠY LUNG TUNG
document.body.className = "angry-purple-mode";
// Cho toàn bộ container chứa câu hỏi lẫn câu trả lời chạy lung tung
khắp nơi
quizBox.classList.remove('shake-effect');
quizBox.classList.add('chaotic-jump');
// Giữ riêng nút ÐÚNG đứng im cố định
const correctButton = document.querySelector('.correct-target');
if (correctButton) {
correctButton.classList.add('stay-calm');
}
} else {
// Nếu chỉ mới bấm sai bình thường -> CHUYỂN MÀU ÐỎ + RUNG
LẮC CHỮ
document.body.className = "angry-red-mode";
quizBox.classList.add('shake-effect');
}
}
}
function showResult() {
document.body.className = "";
quizBox.className = "quiz-container";
if (score === 5) {
document.body.classList.add('result-perfect');
quizBox.innerHTML = `
<div class="score-display">Kết quả: ${score}/5</div>
<div class="result-text">EM YÊU ANH <33</div>
`;
} else {
if (score < 3) {
document.body.classList.add('result-bad');
quizBox.innerHTML = `
<div class="score-display">Kết quả: ${score}/5</div>
<div class="result-text">ÐỒ TỒI</div>
`;
} else {
document.body.style.backgroundColor = "#000000";
document.body.style.color = "#ffffff";
quizBox.innerHTML = `
<div class="score-display">Kết quả: ${score}/5</div>
<div class="result-text" style="font-size:30px;">CŨNG TẠM
ÐƯỢC... <br>Nhưng chưa tài đâu
😀
</div>
`;
}
}
}
renderPage();
</script>
</body>
</html>
