<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container">
<h2>Điền Từ Thích Hợp</h2>
<p id="question">
Hưng Đạo Vương có tên thật là Trần Quốc
<span class="drop-target" id="answer-slot" data-correct-answer="Tuấn"></span>.
</p>
<div id="options-container">
<div class="draggable" draggable="true" data-value="Tuấn">Tuấn</div>
<div class="draggable" draggable="true" data-value="Hoàng">Hoàng</div>
<div class="draggable" draggable="true" data-value="Toản">Toản</div>
</div>
<div id="feedback"></div>
</div>
<script src="script.js"></script>
</body>
</html>
/* style.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
margin: 0;
}
.quiz-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 600px;
text-align: center;
}
#question {
font-size: 1.2em;
margin-bottom: 40px;
}
/* Vùng Thả (Drop Target) */
.drop-target {
display: inline-block;
width: 100px; /* Chiều rộng ô trống */
height: 1.5em;
border: 2px dashed #ccc;
background-color: #f0f0f0;
line-height: 1.5em;
padding: 2px 5px;
vertical-align: middle;
color: #444;
font-weight: bold;
}
/* Hiệu ứng khi kéo một đối tượng qua Vùng Thả */
.drop-target.hovered {
border-color: #007bff;
background-color: #e6f0ff;
}
/* Khu vực Đáp án */
#options-container {
display: flex;
justify-content: space-around;
margin-top: 20px;
padding: 10px;
border-top: 1px solid #eee;
}
/* Đối tượng Kéo (Draggable Item) */
.draggable {
background-color: #007bff;
color: white;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: grab; /* Thay đổi con trỏ chuột */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: transform 0.1s;
}
/* Hiệu ứng khi đang kéo */
.dragging {
opacity: 0.5; /* Làm mờ đối tượng đang kéo */
border: 2px solid #0056b3;
}
#feedback {
margin-top: 20px;
font-weight: bold;
min-height: 20px;
}
.correct { color: green; }
.incorrect { color: red; }
// script.js
const draggables = document.querySelectorAll('.draggable');
const dropTarget = document.getElementById('answer-slot');
const feedback = document.getElementById('feedback');
let draggedItem = null;
// --- 1. Xử lý Đối tượng Kéo (Draggable Items) ---
draggables.forEach(draggable => {
// Khi bắt đầu kéo
draggable.addEventListener('dragstart', (e) => {
draggedItem = e.target;
e.target.classList.add('dragging');
// Lưu data-value của đối tượng kéo vào dataTransfer
e.dataTransfer.setData('text/plain', e.target.getAttribute('data-value'));
});
// Khi kết thúc kéo
draggable.addEventListener('dragend', (e) => {
e.target.classList.remove('dragging');
draggedItem = null;
});
});
// --- 2. Xử lý Vùng Thả (Drop Target) ---
// Ngăn chặn hành vi mặc định (cho phép thả)
dropTarget.addEventListener('dragover', (e) => {
e.preventDefault();
dropTarget.classList.add('hovered');
});
// Loại bỏ hiệu ứng hover khi kéo ra ngoài
dropTarget.addEventListener('dragleave', () => {
dropTarget.classList.remove('hovered');
});
// Khi thả đối tượng vào Vùng Thả
dropTarget.addEventListener('drop', (e) => {
e.preventDefault();
dropTarget.classList.remove('hovered');
// Lấy data đã lưu từ dragstart
const droppedValue = e.dataTransfer.getData('text/plain');
const correctAnswer = dropTarget.getAttribute('data-correct-answer');
// --- 3. Kiểm tra Đáp án ---
if (droppedValue === correctAnswer) {
// Đáp án ĐÚNG
dropTarget.textContent = droppedValue;
dropTarget.style.borderColor = 'green';
dropTarget.style.backgroundColor = '#e0ffe0';
feedback.textContent = 'Chính xác! Trần Quốc Tuấn.';
feedback.className = 'correct';
// Xóa đáp án đúng khỏi danh sách options để không kéo lại được
if (draggedItem) {
draggedItem.remove();
}
} else {
// Đáp án SAI
feedback.textContent = `Sai rồi. ${droppedValue} không phải là tên thật. Hãy thử lại.`;
feedback.className = 'incorrect';
// Trả lại đối tượng kéo về vị trí cũ (vì chúng ta không xóa nó)
// Trong trường hợp này, vì không thay thế phần tử DOM, đối tượng sẽ tự động ở lại khu vực options
}
});