Quiz Room Dashboard - Copy this Html, Bootstrap Component to your project

Bổ sung vào code sau của tôi:function showRoomDetails(quizId) { // Hiển thị phần quiz details const quizDetailsSection = document.getElementById('quiz details'); quizDetailsSection.style.display = 'block'; const roomListContainer = document.getElementById('quiz list body'); roomListContainer.innerHTML = ''; // Xóa nội dung cũ nếu có // Gọi API để lấy danh sách phòng thi (nhóm) theo quizId $.ajax({ url: apiUrl, type: "GET", data: { wstoken: "2d34540397cf85bcac6b40d927dbdc6a", wsfunction: "local_activitygroups_get_allowed_groups", activityid: quizId, // ID của quiz để lấy các nhóm phòng thi moodlewsrestformat: "json" }, success: function(response) { console.log("Danh sách phòng thi (nhóm):", response); // Xử lý và hiển thị danh sách phòng thi (nhóm) const rooms = response; // API trả về một mảng các nhóm rooms.forEach(room => { const roomCard = document.createElement('div'); roomCard.className = 'room card'; const roomName = document.createElement('h3'); roomName.textContent = room.name; // Tên nhóm đại diện cho phòng thi const totalCandidates = document.createElement('p'); totalCandidates.textContent = `Tổng số thí sinh: ${room.count || 'N/A'}`; // Tạo thanh tiến trình đơn giản để hiển thị tỷ lệ hoàn thành const progressBar = document.createElement('div'); progressBar.className = 'progress bar'; const completedDiv = document.createElement('div'); completedDiv.className = 'completed'; completedDiv.style.width = `${(room.completed / room.count) * 100}%`; completedDiv.textContent = ` Đã thi xong: ${room.completed} `; const inProgressDiv = document.createElement('div'); inProgressDiv.className = 'in progress'; inProgressDiv.style.width = `${(room.inProgress / room.count) * 100}%`; inProgressDiv.textContent = ` Đang thi: ${room.inProgress} `; const notStartedDiv = document.createElement('div'); notStartedDiv.className = 'not started'; notStartedDiv.style.width = `${(room.notStarted / room.count) * 100}%`; notStartedDiv.textContent = ` Chưa vào thi: ${room.notStarted} `; // Thêm các phần tử vào thanh tiến trình progressBar.appendChild(completedDiv); progressBar.appendChild(inProgressDiv); progressBar.appendChild(notStartedDiv); // Thêm các phần tử vào roomCard roomCard.appendChild(roomName); roomCard.appendChild(totalCandidates); roomCard.appendChild(progressBar); // Thêm roomCard vào container của danh sách phòng thi roomListContainer.appendChild(roomCard); }); }, error: function(error) { console.error("Lỗi khi gọi API để lấy danh sách phòng thi:", error); } }); }