Ok mình sẽ nâng cấp cho bạn một Telegram Mini App dạng Quiz (trắc nghiệm vui) + tích hợp quảng cáo Monetag để giữ chân user lâu hơn và tăng doanh thu .
Code mẫu index.html (Quiz + Monetag)
Cách triển khai
Bộ này bạn có thể dễ dàng đổi câu hỏi quiz, hoặc nâng cấp thành game mini khác.
Bạn có muốn mình viết thêm bản game HTML5 đơn giản (VD: đập chuột, đoán số, random lucky spin) để giữ user lâu hơn nữa không?
Code mẫu index.html (Quiz + Monetag)
Code:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Mini App Quiz + Monetag</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background: #f9f9fb;
margin: 0;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
}
.quiz-box {
background: white;
border-radius: 15px;
padding: 20px;
margin: 20px auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
max-width: 500px;
}
.question {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
.option {
display: block;
background: #0088cc;
color: white;
padding: 12px;
border-radius: 10px;
margin: 10px 0;
text-decoration: none;
cursor: pointer;
}
.option:hover {
background: #0077b5;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: green;
}
#ad-box {
margin: 25px auto;
max-width: 320px;
min-height: 50px;
}
</style>
</head>
<body>
<h1> Quiz Vui + Monetag</h1>
<div class="quiz-box" id="quiz">
<div class="question" id="question">Câu hỏi sẽ hiện ở đây</div>
<div id="options"></div>
<div id="result"></div>
</div>
<!-- Quảng cáo Monetag -->
<div id="ad-box">
<!-- Thay script bằng mã Monetag của bạn -->
<script src="https://example.monetag.com/ad-code.js"></script>
</div>
<!-- Telegram API -->
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>
let tg = window.Telegram.WebApp;
tg.expand(); // mở rộng toàn màn hình
// Dữ liệu Quiz (có thể thay bằng câu hỏi khác)
const quizData = [
{
question: "Thủ đô của Việt Nam là gì?",
options: ["Hà Nội", "Hồ Chí Minh", "Đà Nẵng"],
correct: "Hà Nội"
},
{
question: "2 + 2 = ?",
options: ["3", "4", "5"],
correct: "4"
},
{
question: "Trái đất quay quanh gì?",
options: ["Mặt Trăng", "Mặt Trời", "Sao Hỏa"],
correct: "Mặt Trời"
}
];
let currentQuestion = 0;
function loadQuiz() {
let q = quizData[currentQuestion];
document.getElementById("question").textContent = q.question;
let optionsHTML = "";
q.options.forEach(opt => {
optionsHTML += `<div class="option" onclick="checkAnswer('${opt}')">${opt}</div>`;
});
document.getElementById("options").innerHTML = optionsHTML;
document.getElementById("result").textContent = "";
}
function checkAnswer(answer) {
let correct = quizData[currentQuestion].correct;
if(answer === correct) {
document.getElementById("result").textContent = "✅ Chính xác!";
} else {
document.getElementById("result").textContent = "❌ Sai rồi!";
}
// Tự động qua câu tiếp theo sau 1.5s
setTimeout(() => {
currentQuestion++;
if(currentQuestion < quizData.length) {
loadQuiz();
} else {
document.getElementById("quiz").innerHTML = "<h2> Bạn đã hoàn thành quiz!</h2>";
}
}, 1500);
}
// Khởi động quiz
loadQuiz();
</script>
</body>
</html>
Code:
Cách triển khai
- Thay script Monetag ở phần https://example.monetag.com/ad-code.js bằng code bạn lấy từ Monetag Dashboard.
- Upload file này lên Vercel / Netlify / GitHub Pages (HTTPS).
- Vào BotFather:
- /setdomain → dán link hosting.
- /setmenubutton → nhập JSON:
{
"type": "web_app",
"text": "Chơi Quiz ",
"web_app": { "url": "https://myquizapp.vercel.app" }
}
- Vào bot → bấm “Chơi Quiz ” → app mở ra, user chơi quiz, quảng cáo Monetag hiển thị → bạn kiếm tiền.
Bộ này bạn có thể dễ dàng đổi câu hỏi quiz, hoặc nâng cấp thành game mini khác.
Bạn có muốn mình viết thêm bản game HTML5 đơn giản (VD: đập chuột, đoán số, random lucky spin) để giữ user lâu hơn nữa không?
