Create a webpage and write a program in java script to show the result of student attendance on weekly basis for xyz subject. A total of 5 classes can be conducted in a week. The document should contain a form with radio buttons that allows teacher to select status of absence or presence for 5 students of class. The page also allows selecting data and time for which attendance is to be marked. On submitting attendance for a particular day it should prompt a message for successful entry. The program should display the output as:
- Total number of classes attended out of total number of classes conducted for each student.
- %age of attendance
- Buttons should be enabled and disabled as per conditions.
HTML Page
<!DOCTYPE html>
<head>
<title> M2-R5.1 Set 3 Question 3</title>
</head>
<body>
<h1>XYZ Subject Attendance</h1>
<form id=”attendanceForm”>
<label for=”dateTime”>Select Date and Time:</label>
<input type=”datetime-local” id=”dateTime” name=”dateTime” required>
<label>Student 1:
<input type=”radio” name=”attendance1″ value=”present” required> Present
<input type=”radio” name=”attendance1″ value=”absent” required> Absent
</label>
<label>Student 2:
<input type=”radio” name=”attendance2″ value=”present” required> Present
<input type=”radio” name=”attendance2″ value=”absent” required> Absent
</label>
<label>Student 3:
<input type=”radio” name=”attendance3″ value=”present” required> Present
<input type=”radio” name=”attendance3″ value=”absent” required> Absent
</label>
<label>Student 4:
<input type=”radio” name=”attendance4″ value=”present” required> Present
<input type=”radio” name=”attendance4″ value=”absent” required> Absent
</label>
<label>Student 5:
<input type=”radio” name=”attendance5″ value=”present” required> Present
<input type=”radio” name=”attendance5″ value=”absent” required> Absent
</label>
<button type=”button” onclick=”submitAttendance()”>Submit Attendance</button>
</form>
<div id=”output”>
<h2>Attendance Summary</h2>
<p>Total Classes Attended:</p>
<ul id=”totalClassesAttended”></ul>
<p>Percentage of Attendance:</p>
<ul id=”attendancePercentage”></ul>
</div>
CSS Page
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
button {
margin-top: 10px;
padding: 5px 10px;
cursor: pointer;
}
</style>
JavaScript Page
<script>
const attendanceData = {
student1: { attended: 0, total: 0 },
student2: { attended: 0, total: 0 },
student3: { attended: 0, total: 0 },
student4: { attended: 0, total: 0 },
student5: { attended: 0, total: 0 }
};
function submitAttendance() {
const dateTime = document.getElementById(‘dateTime’).value;
for (let i = 1; i <= 5; i++) {
const attendanceStatus = document.querySelector(`input[name=”attendance${i}”]:checked`);
if (attendanceStatus) {
const studentKey = `student${i}`;
attendanceData[studentKey].total++;
if (attendanceStatus.value === ‘present’) {
attendanceData[studentKey].attended++;
}
}
}
alert(‘Attendance submitted successfully!’);
updateAttendanceSummary();
}
function updateAttendanceSummary() {
const totalClassesAttendedList = document.getElementById(‘totalClassesAttended’);
totalClassesAttendedList.innerHTML = ”;
const attendancePercentageList = document.getElementById(‘attendancePercentage’);
attendancePercentageList.innerHTML = ”;
for (const student in attendanceData) {
const listItem = document.createElement(‘li’);
listItem.innerText = `${student}: ${attendanceData[student].attended} out of ${attendanceData[student].total}`;
totalClassesAttendedList.appendChild(listItem);
const percentage = (attendanceData[student].attended / attendanceData[student].total) * 100 || 0;
const percentageListItem = document.createElement(‘li’);
percentageListItem.innerText = `${student}: ${percentage.toFixed(2)}%`;
attendancePercentageList.appendChild(percentageListItem);
}
}
</script>
</body>
</html>