PROJECT REPORT
Project Title: Roll Call – Smart
Attendance System
Developers:
Surbhi Pandey
Smita Singh
Vanshika Sharma
Technology: HTML, CSS,
JavaScript (Frontend)
Version: 1.0
Introduction
1.1 Project Overview and
Purpose
The Roll Call Attendance App is a Single-
Page Application (SPA) prototype designed
to modernize student engagement and
streamline attendance management. Its core
functionality revolves around a dashboard
that centralizes academic information
(Alerts, Schedules, Homework) and
implements a secure, Geophone-based
attendance verification system. The system
strictly enforces location and requires live
camera verification before marking a student
present.
System Analysis and
Requirements
2.1 System Goals:
Attendance Integrity: To ensure
that attendance is marked only when the
student is physically present within the
defined campus perimeter.
Information Accessibility: To
provide a centralized, mobile-friendly
interface for students to access time-
sensitive academic information.
Process Efficiency: To replace
traditional, manual roll-call procedures
with a quick, digital verification process.
2.2 Functional Requirements:
FR modul Description Implementation
ID e Status
FR- User- Allow Implemented
001 Access navigation
from the
welcome page
to the
dashboard
detail entry.
FR- Geopho Calculate the Implemented
002 ne distance
Check between the
user's current
GPS location
and the
designated
campus
coordinates
FR- Verific Prevent Implemented
003 ation attendance
Lock submission if
the student is
outside the
300 meter
ALLOWED_
RADIUS
FR- Live Capture and Implemented
004 photo display a live
photo of the
student using
the device
camera during
the
verification
process.
FR- Dashbo Display static Implemented
005 ard alerts,
Info homework
status, and the
detailed exam
schedule
(Notice
Board).
2.3Technical Constraints and
Scope
Platform: Client-side HTML5, CSS3,
and JavaScript.
Security: Authentication is limited to
a name/phone prompt (not secure). The
system lacks a backend database; all data
is static, and attendance is not saved
permanently.
Verification Method: Attendance
is verified using the Have sine formula
for Geofencing and the Media Devices
API for camera access.
3 Technical Implementation
Breakdowns
3.1Architecture and
Navigation: The application uses an
SPA pattern where views are represented
by distinct <div class="page"> elements.
COMPONENT TECHNOLOGY FUNCTION
USED
Navigation show(hide, Toggles the
Logic show) JS CSS class
function .active to
switch
views with
a fade
animation.
Dashboard CSS Grid (.grid) Organizes
Layout the nine
feature
cards into a
3x3
responsive
matrix.
Card Styling CSS box- Provides
shadow and visual depth
transform: and a
dynamic
translate(-5px) hover effect.
3.2 Core Attendance
Verification Logic
The attendancePage integrates two
critical HTML5/JavaScript APIs for
verification.
A. Location Verification (Geofencing)
The system defines the precise BBDITM
campus coordinates and the distance
threshold.
Campus Coordinates (Static):
LIVE_LAT = 26.887687
LIVE_LON = 81.057181
Allowed Distance:
ALLOWED_RADIUS = 300$ meters
Distance Formula: The
calculateDistance function computes the
distance d (in meters) between the user's
GPS coordinates (lat_1, lon_1) and the
campus coordinates (lat_2, lon_2) using
the Haversine Formula:
Where R is the Earth’s radius (6,371,000
meters)
B. Live Photo Verification
The system uses standard browser APIs to
access the user's camera.
Initialization: startCamera() calls
[Link]({
video: true }) to stream the feed to the
<video id="camera"> element.
Capture: takePhoto() draws the current
video frame onto the <canvas
id="photoCanvas">.
3.3. Attendance Submission
Flow
Initiation: User clicks Attendance Report
on the Dashboard → openAttendanceReport
().
Verification: startCamera () and
getLocation () execute simultaneously.
Submission: User clicks Submit Attendance
→ submit Attendance().
Validation Check:
JavaScript –
function submitAttendance() {
if (![Link]) { //
Checks if distance <= 300m
alert("❌You must be inside
BBDITM Campus to mark attendance.");
return;
}
show("attendancePage","successPage");
}
4. Key Functional Views
4.1. Notice Board (Schedule)
The noticeBoardPage presents critical
academic information using a highly
structured and detailed HTML table. The
use of rowspan="2" in the date column
efficiently groups the morning (I-Shift)
and afternoon (II-Shift) exam times for a
single day.
COLUMN EXAMPLE DATA STYLING
HEADERS NOTES
Date 10-Dec-25 rowspan
used to
span two
rows (two
shifts).
Shift/Tim I-Shift / 09:30 AM Clear
e – 12:30 PM separation
of morning
and
afternoon
exams.
[Link] CE: Lists
3rd BCE301/Engineeri multiple
Semester ng Mechanics branches
and their
respective
paper
codes/nam
es
4.2. Alerts and Assignments
The system uses styled message boxes
(.msgBox) for immediate communication.
Alerts Example: " Exam will start from 10
December 2025"
Assignments/Homework: Displays a "No
new/today" status message, indicating a
placeholder for future dynamic content
5. Conclusions and
Recommendations
5.1 Conclusion
The Roll Call App prototype successfully
demonstrates the feasibility of using client-
side Geolocation and Camera APIs to
enforce strict attendance rules. The system is
well-designed with a strong emphasis on
user experience through clean CSS and
smooth page transitions.
5.2 Recommendations for
Production
[Link] Integration: Implement a
server-side API and database to persistently
store user data (name, phone) and
attendance records.
[Link] Authentication: Replace the
simple name input with a proper login
system using passwords or biometric
methods.
[Link] Content: Fetch Alerts,
Homework, and Schedules from the
database instead of using static
HTML/JavaScript placeholders.
[Link] Handling: Add robust error
handling for users who deny camera or
location permissions.