File "giao ly duc me Test.html"
Full path: E:/sites/Single15/tinmung2007/webroot/GIADINHTANHIEN/BanTinHangThang/2026/giao ly duc me Test.html
File size: 6.06 KiB (6210 bytes)
MIME-type:
Charset: utf-8
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Câu hỏi giáo lý</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #74ebd5, #9face6);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.quiz-container {
background: #ffffff;
width: 420px;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
text-align: center;
}
h1 {
color: #4a47a3;
}
.instruction {
font-size: 14px;
color: #555;
margin-bottom: 15px;
}
.question {
font-size: 18px;
margin-bottom: 20px;
color: #333;
}
.options button {
width: 100%;
padding: 10px;
margin: 8px 0;
font-size: 15px;
border: none;
border-radius: 8px;
cursor: pointer;
background: #f0f0f0;
transition: 0.3s;
}
.options button:hover {
background: #dcdcff;
}
.options button.correct {
background: #8bc34a;
color: white;
}
.options button.wrong {
background: #f44336;
color: white;
}
#next-btn, #restart-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 10px;
cursor: pointer;
background: #4a47a3;
color: white;
display: none;
}
#score {
font-size: 18px;
margin-top: 15px;
color: #333;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>Câu Hỏi Giáo Lý</h1>
<p class="instruction">Chọn đáp án đúng nhất cho mỗi câu hỏi</p>
<div class="question" id="question"></div>
<div class="options" id="options"></div>
<button id="next-btn" onclick="nextQuestion()">Câu tiếp theo</button>
<button id="restart-btn" onclick="restartQuiz()">Trở lại</button>
<div id="score"></div>
</div>
<script>
const quizData = [
{
question: "1. Chủ đề của năm 2026 của GDTH là gì?",
options: ["Đức Tin", "Đức Mẹ", "Sống đạo", "Đức Cậy"],
correct: 1
},
{
question: "2/Tín Điều Đức Maria là Mẹ Thiên Chúa do Công Đồng nào tuyên bố và vào năm nào?",
options: ["Vaticano I 1869", "Tridentino 1545", "Epheso 431", "Laterano 1123"],
correct: 2
},
{
question: "3/ Giáo hội Công giáo dạy về lòng sùng kính Đức Mẹ trong Hiến Chế Tín Lý số 53 là gì? ",
options: ["Tận Hiến", "Phó Thác", "tình con thảo", "Đơn Sơ"],
correct: 2
},
{
question: "Ngày lễ Đức Mẹ Dâng Chúa Giêsu trong Đền Thánh được cử hành để kỷ niệm biến cố nào?",
options: ["Chúa sinh ra", "Lạc Chúa", "Vượt qua", "dâng CG cho TC"],
correct: 3
},
{
question: "Vì sao ngày lễ này còn được gọi là “Lễ Nến",
options: ["Rước nến", "CG là ánh sáng", "Làm phép nến", "Rước Chúa Giêsu"],
correct: 1
},
{
question: "Hai nhân vật đã gặp Hài Nhi Giêsu trong Đền Thánh và nhận ra Người là Đấng Cứu Thế là ai?",
options: ["Adam và Eva", "Simon và Anna", "Phêrô và Phaolo", "Mục đồng và ba vua"],
correct: 1
}
];
let currentQuestion = 0;
let score = 0;
const questionEl = document.getElementById("question");
const optionsEl = document.getElementById("options");
const nextBtn = document.getElementById("next-btn");
const restartBtn = document.getElementById("restart-btn");
const scoreEl = document.getElementById("score");
function loadQuestion() {
nextBtn.style.display = "none";
questionEl.innerText = quizData[currentQuestion].question;
optionsEl.innerHTML = "";
quizData[currentQuestion].options.forEach((option, index) => {
const btn = document.createElement("button");
btn.innerText = option;
btn.onclick = () => selectAnswer(btn, index);
optionsEl.appendChild(btn);
});
}
function selectAnswer(button, index) {
const correctIndex = quizData[currentQuestion].correct;
const buttons = optionsEl.querySelectorAll("button");
buttons.forEach(btn => btn.disabled = true);
if (index === correctIndex) {
button.classList.add("correct");
score++;
} else {
button.classList.add("wrong");
buttons[correctIndex].classList.add("correct");
}
nextBtn.style.display = "inline-block";
}
function nextQuestion() {
currentQuestion++;
if (currentQuestion < quizData.length) {
loadQuestion();
} else {
showScore();
}
}
function showScore() {
questionEl.innerText = "Kết quả bài thi";
optionsEl.innerHTML = "";
nextBtn.style.display = "none";
restartBtn.style.display = "inline-block";
scoreEl.innerText = `Điểm của bạn: ${score} / ${quizData.length}`;
}
function restartQuiz() {
currentQuestion = 0;
score = 0;
scoreEl.innerText = "";
restartBtn.style.display = "none";
loadQuestion();
}
loadQuestion();
</script>
</body>
</html>