<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/config/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container quiz-container">
<div class="card">
<div class="card-header text-white p-4 d-flex justify-content-between align-items-center">
<div>
<span class="badge bg-warning text-dark mb-1" id="quiz-subject">STEM</span>
<h5 class="mb-0" id="quiz-topic">Chủ đề</h5>
</div>
<div class="text-end">
<span class="fs-6 d-block">Điểm số</span>
<strong class="fs-4" id="quiz-points">0</strong>
</div>
</div>
<div class="card-body p-4">
<div class="mb-4">
<span class="text-muted fw-bold small uppercase d-block mb-1">CÂU HỎI ĐÚNG / SAI:</span>
<p class="fs-5 fw-semibold text-dark" id="question-text">Đang tải nội dung câu hỏi...</p>
</div>
<div id="options-group" class="mb-4"></div>
<div class="d-grid gap-2">
<button type="button" id="btn-submit" class="btn btn-primary btn-lg rounded-3">
<i class="fa-paper-plane me-2"></i>Nộp bài & Chấm điểm
</button>
</div>
<div id="result-alert" class="alert mt-4 d-none animate__animated animate__fadeIn" role="alert">
<h5 class="alert-heading d-flex align-items-center">
<span id="result-icon" class="me-2"></span>
<span id="result-title">Kết quả</span>
</h5>
<p class="mb-0" id="result-message"></p>
</div>
<div id="explanation-box" class="card bg-light mt-3 p-3">
<h6 class="text-info fw-bold"><i class="fa-lightbulb me-2"></i>Giải thích đáp án:</h6>
<p class="mb-0 text-secondary" id="explanation-text"></p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
body {
background-color: #f4f7f6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.quiz-container {
max-width: 700px;
margin: 50px auto;
}
.card {
border: none;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.card-header {
border-top-left-radius: 15px !important;
border-top-right-radius: 15px !important;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.option-label {
display: block;
padding: 15px 20px;
margin-bottom: 12px;
background-color: #fff;
border: 2px solid #e9ecef;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease-in-out;
font-weight: 500;
}
.option-label:hover {
background-color: #f8f9fa;
border-color: #b8c2cc;
}
/* Ẩn radio button mặc định để tùy biến */
.option-input {
display: none;
}
/* Hiệu ứng khi được chọn */
.option-input:checked + .option-label {
background-color: #e8f0fe;
border-color: #0d6efd;
color: #0b5ed7;
}
/* Trạng thái đáp án đúng sau khi chấm */
.is-correct {
background-color: #d1e7dd !important;
border-color: #a3cfbb !important;
color: #0f5132 !important;
}
/* Trạng thái đáp án học viên chọn sai */
.is-incorrect {
background-color: #f8d7da !important;
border-color: #f1aeb5 !important;
color: #842029 !important;
}
#explanation-box {
display: none;
border-left: 5px solid #0dcaf0;
}
// Giả lập dữ liệu nhận được từ file JSON câu hỏi STEM
const questionData = {
"id": "stem_q001",
"type": "true_false",
"subject": "STEM Robotics",
"topic": "Vi điều khiển & Tín hiệu PWM",
"question_text": "Trong lập trình vi điều khiển (như Arduino hay ESP32), chân PWM (Pulse Width Modulation) chỉ có thể xuất ra hai trạng thái duy nhất là 0V (LOW) và 5V/3.3V (HIGH).",
"options": [
{ "value": "true", "text": "Đúng" },
{ "value": "false", "text": "Sai" }
],
"correct_answer": "false",
"points": 10,
"explanation": "Sai. Chân PWM có khả năng điều chế độ rộng xung để giả lập tín hiệu tương tự (Analog), cho phép xuất ra các mức điện áp trung gian từ 0V đến mức tối đa (ví dụ từ 0V đến 3.3V) nhằm điều khiển tốc độ động cơ hoặc độ sáng của đèn LED, chứ không chỉ giới hạn ở hai trạng thái On/Off như chân Digital thông thường."
};
$(document).ready(function() {
// 1. Đổ dữ liệu từ đối tượng JSON vào giao diện HTML
$('#quiz-subject').text(questionData.subject);
$('#quiz-topic').text(questionData.topic);
$('#quiz-points').text(questionData.points + "đ");
$('#question-text').text(questionData.question_text);
$('#explanation-text').text(questionData.explanation);
// Render các nút lựa chọn Đúng / Sai
let optionsHtml = '';
questionData.options.forEach((option, index) => {
optionsHtml += `
<div>
<input type="radio" name="quiz_option" id="opt_${index}" value="${option.value}" class="option-input">
<label for="opt_${index}" class="option-label" data-value="${option.value}">
<i class="fa-regular ${option.value === 'true' ? 'fa-circle-check text-success' : 'fa-circle-xmark text-danger'} me-2"></i>
${option.text}
</label>
</div>
`;
});
$('#options-group').html(optionsHtml);
// 2. Xử lý logic khi bấm nút "Nộp bài & Chấm điểm"
$('#btn-submit').on('click', function() {
// Lấy giá trị option mà học viên đã chọn
const selectedAnswer = $('input[name="quiz_option"]:checked').val();
// Kiểm tra nếu học viên chưa chọn đáp án nào
if (!selectedAnswer) {
alert('Vui lòng chọn một phương án đáp án trước khi nộp bài!');
return;
}
// Vô hiệu hóa việc đổi đáp án và nút nộp bài sau khi đã nhấn chấm điểm
$('input[name="quiz_option"]').attr('disabled', true);
$(this).attr('disabled', true).addClass('disabled');
const correctAnswer = questionData.correct_answer;
const isUserCorrect = (selectedAnswer === correctAnswer);
// 3. Hiển thị trực quan đáp án Đúng/Sai trên các Label
$('.option-label').each(function() {
const labelValue = $(this).data('value');
// Tô xanh đáp án chuẩn hệ thống
if (labelValue === correctAnswer) {
$(this).addClass('is-correct');
$(this).append(' <i class="fa-solid fa-check float-end mt-1"></i>');
}
// Nếu học viên chọn sai, tô đỏ đáp án đã chọn đó
if (labelValue === selectedAnswer && !isUserCorrect) {
$(this).addClass('is-incorrect');
$(this).append(' <i class="fa-solid fa-xmark float-end mt-1"></i>');
}
});
// 4. Cấu hình Alert thông báo kết quả và điểm số nhận được
const $resultAlert = $('#result-alert');
$resultAlert.removeClass('d-none alert-success alert-danger');
if (isUserCorrect) {
$resultAlert.addClass('alert-success');
$('#result-icon').html('<i class="fa-solid fa-circle-check fs-4"></i>');
$('#result-title').text('Chính xác! Chúc mừng bạn.');
$('#result-message').html(`Bạn đã trả lời đúng câu hỏi này và nhận được trọn vẹn <strong>${questionData.points} điểm</strong>.`);
} else {
$resultAlert.addClass('alert-danger');
$('#result-icon').html('<i class="fa-solid fa-triangle-exclamation fs-4"></i>');
$('#result-title').text('Rất tiếc, câu trả lời chưa chính xác.');
$('#result-message').html('Bạn nhận được <strong>0 điểm</strong> cho câu hỏi này. Hãy đọc phần giải thích bên dưới để nắm vững kiến thức nhé.');
}
// Hiển thị khung giải thích chi tiết khoa học
$('#explanation-box').slideDown(400);
});
});