<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Chia nhóm học viên ngẫu nhiên</h1>
<div class="input-section">
<label for="students">Danh sách học viên (mỗi người một dòng):</label>
<textarea id="students" rows="10">
Võ Phú Vinh
Nguyễn Hoàng Việt
Dương Thị Quỳnh Như
Lê Thị Mến
Phạm Thị Mỹ Duyên
Huỳnh Thị Ngọc Quyên
Nguyễn Văn Trung
Huỳnh Văn Nguyên
Nguyễn Trọng Quốc
Nguyễn Văn Thắng
Lê Thị Lý
Dương Ngọc Hương Trà
Nguyễn Thị Kim Thành
Mai Thị Hoàng Trang
Lê Thị Liên
Hồ Thị Cẩm Vân
Nguyễn Trúc Quỳnh
Trương Thị Diện
Hà Thị Vân
Lê Thị Hoa Phấn
Nguyễn Thị Thái Ngân
Nguyễn Ngọc Thọ
Nguyễn Thị Phương Lan
Nguyễn Thị Bảo Ngọc
Phan Quốc Khánh
Huỳnh Phương
Nguyễn Hoàng Lam
Võ Đình Nhẫn
Bùi Hồng Ngọc
Nguyễn Thị Bạch Yến
Cung Thùy Trâm
Nguyễn Quang Sáng
Lê Thị Mai
Trần Thị Bích Đào
Nguyễn Đức Hậu
Nguyễn Duy Khôi
</textarea>
</div>
<div class="control-section">
<label for="num-groups">Số lượng nhóm muốn chia (1-10):</label>
<select id="num-groups">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<button onclick="divideGroups()">Chia Nhóm</button>
</div>
<div class="results-section">
<h2>Kết Quả Chia Nhóm</h2>
<div id="group-results">
<p>Nhập danh sách và nhấn "Chia Nhóm" để xem kết quả.</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f7f6;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
.container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
}
h1, h2 {
color: #333;
text-align: center;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Quan trọng để padding không làm tăng chiều rộng */
resize: vertical;
font-size: 14px;
}
.control-section {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap; /* Cho màn hình nhỏ */
}
select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.results-section h2 {
margin-top: 0;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
#group-results {
margin-top: 20px;
}
.group {
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 15px;
margin-bottom: 15px;
background-color: #f9f9f9;
}
.group-header {
font-size: 18px;
font-weight: bold;
color: #007bff;
margin-bottom: 10px;
}
.group ul {
list-style-type: none;
padding-left: 0;
}
.group ul li {
padding: 5px 0;
border-bottom: 1px dotted #ccc;
}
.group ul li:last-child {
border-bottom: none;
}
// Hàm Fisher-Yates shuffle để xáo trộn mảng một cách ngẫu nhiên
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
// Chọn một phần tử ngẫu nhiên từ 0 đến i
const j = Math.floor(Math.random() * (i + 1));
// Hoán đổi phần tử array[i] và array[j]
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function divideGroups() {
// 1. Lấy dữ liệu từ giao diện
const studentsText = document.getElementById('students').value;
const numGroups = parseInt(document.getElementById('num-groups').value, 10);
const resultsDiv = document.getElementById('group-results');
// 2. Xử lý danh sách học viên
// Tách chuỗi thành mảng các dòng, loại bỏ dòng trống và khoảng trắng thừa
let students = studentsText.split('\n')
.map(name => name.trim())
.filter(name => name !== '');
// Kiểm tra điều kiện
if (students.length === 0) {
resultsDiv.innerHTML = '<p style="color: red;">Vui lòng nhập danh sách học viên.</p>';
return;
}
if (numGroups > students.length) {
resultsDiv.innerHTML = `<p style="color: orange;">Số nhóm (${numGroups}) không thể lớn hơn số học viên (${students.length}). Vui lòng chọn lại.</p>`;
return;
}
// 3. Xáo trộn ngẫu nhiên
const shuffledStudents = shuffleArray(students);
// 4. Chia nhóm
let groups = [];
for (let i = 0; i < numGroups; i++) {
groups.push([]); // Khởi tạo mảng trống cho mỗi nhóm
}
// Phân bổ lần lượt từng học viên vào các nhóm theo thứ tự đã xáo trộn
shuffledStudents.forEach((student, index) => {
const groupIndex = index % numGroups; // Logic chia đều: 0, 1, 2, ..., numGroups-1, 0, 1, ...
groups[groupIndex].push(student);
});
// 5. Hiển thị kết quả ra HTML
let outputHTML = '';
groups.forEach((group, index) => {
// Tạo danh sách học viên trong nhóm
const studentList = group.map(student => `<li>${student}</li>`).join('');
outputHTML += `
<div class="group">
<div class="group-header">Nhóm ${index + 1} (${group.length} thành viên)</div>
<ul>
${studentList}
</ul>
</div>
`;
});
resultsDiv.innerHTML = outputHTML;
}