Building Grades and Progress System in LMS
The grades and progress system tracks student advancement through course content, computes final grades from various activities (assignments, quizzes, participation), generates progress reports, and supports different grading schemes.
Data Models
interface Enrollment {
id: string;
userId: string;
courseId: string;
enrolledAt: Date;
completionStatus: 'in_progress' | 'completed' | 'abandoned';
progressPercent: number;
finalGrade?: number;
certificateIssuedAt?: Date;
}
interface LessonProgress {
id: string;
enrollmentId: string;
lessonId: string;
status: 'not_started' | 'in_progress' | 'completed';
progressPercent: number; // For video: 0-100, for text: completion via scroll
completedAt?: Date;
}
interface CourseGradeWeight {
component: 'assignment' | 'quiz' | 'participation' | 'project';
weight: number; // Percent of final grade
}
interface StudentGrade {
enrollmentId: string;
component: string; // 'assignment_1', 'quiz_2', etc.
score: number;
maxScore: number;
weight: number;
}
Calculate Course Progress
async function calculateCourseProgress(enrollmentId: string): Promise<number> {
const enrollment = await db.enrollments.findById(enrollmentId);
const lessonProgress = await db.lessonProgress.findByEnrollment(enrollmentId);
const lessons = await db.lessons.findByCourse(enrollment.courseId);
if (lessons.length === 0) return 0;
const completedLessons = lessonProgress.filter(p => p.status === 'completed').length;
return Math.round((completedLessons / lessons.length) * 100);
}
app.get('/api/enrollments/:enrollmentId/progress', authenticate, async (req, res) => {
const enrollment = await db.enrollments.findById(req.params.enrollmentId);
if (enrollment.userId !== req.user.id) return res.status(403).end();
const progress = await calculateCourseProgress(req.params.enrollmentId);
const lessonProgress = await db.lessonProgress.findByEnrollment(req.params.enrollmentId);
const completedLessons = lessonProgress.filter(p => p.status === 'completed').length;
const totalLessons = await db.lessons.countByCourse(enrollment.courseId);
res.json({
progressPercent: progress,
completedLessons,
totalLessons,
estimatedCompletionDate: progress < 100 ? estimateCompletion(progress) : null,
});
});
Calculate Final Grade
async function calculateFinalGrade(enrollmentId: string): Promise<number> {
const enrollment = await db.enrollments.findById(enrollmentId);
const grades = await db.studentGrades.findByEnrollment(enrollmentId);
const weights = await db.courseGradeWeights.findByCourse(enrollment.courseId);
let weightedTotal = 0;
let totalWeight = 0;
for (const weight of weights) {
const componentGrades = grades.filter(g => g.component.startsWith(weight.component));
if (componentGrades.length === 0) continue;
const avgComponentScore = componentGrades.reduce((sum, g) => {
return sum + (g.score / g.maxScore) * 100;
}, 0) / componentGrades.length;
weightedTotal += avgComponentScore * (weight.weight / 100);
totalWeight += weight.weight / 100;
}
return totalWeight > 0 ? Math.round(weightedTotal / totalWeight) : 0;
}
app.get('/api/enrollments/:enrollmentId/grades', authenticate, async (req, res) => {
const enrollment = await db.enrollments.findById(req.params.enrollmentId);
if (enrollment.userId !== req.user.id) return res.status(403).end();
const finalGrade = await calculateFinalGrade(req.params.enrollmentId);
const grades = await db.studentGrades.findByEnrollment(req.params.enrollmentId);
const weights = await db.courseGradeWeights.findByCourse(enrollment.courseId);
const breakdown = weights.map(w => {
const componentGrades = grades.filter(g => g.component.startsWith(w.component));
const avgScore = componentGrades.length > 0
? Math.round(componentGrades.reduce((sum, g) => sum + (g.score / g.maxScore) * 100, 0) / componentGrades.length)
: 0;
return { component: w.component, score: avgScore, weight: w.weight };
});
res.json({
finalGrade,
breakdown,
isPassed: finalGrade >= 70,
});
});
Progress Report Component
function ProgressReport({ enrollmentId }) {
const [progress, setProgress] = useState<Progress | null>(null);
const [grades, setGrades] = useState<Grades | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
Promise.all([
fetch(`/api/enrollments/${enrollmentId}/progress`).then(r => r.json()),
fetch(`/api/enrollments/${enrollmentId}/grades`).then(r => r.json()),
]).then(([p, g]) => {
setProgress(p);
setGrades(g);
setLoading(false);
});
}, [enrollmentId]);
if (loading) return <div>Loading...</div>;
return (
<div className="max-w-2xl mx-auto p-6 space-y-6">
<div>
<h2 className="text-2xl font-bold mb-4">Course Progress</h2>
<div className="bg-gray-200 rounded-full h-4 overflow-hidden">
<div
className="bg-blue-600 h-full transition-all duration-300"
style={{ width: `${progress?.progressPercent}%` }}
/>
</div>
<p className="mt-2 text-sm text-gray-600">
{progress?.completedLessons}/{progress?.totalLessons} lessons completed
</p>
</div>
<div>
<h2 className="text-2xl font-bold mb-4">Grades</h2>
<div className="bg-white border rounded-lg p-4">
<div className="text-3xl font-bold text-blue-600 mb-4">
{grades?.finalGrade}% {grades?.isPassed ? '✓' : '✗'}
</div>
<div className="space-y-3">
{grades?.breakdown.map((item) => (
<div key={item.component} className="flex justify-between items-center">
<span className="capitalize">{item.component}</span>
<div className="flex items-center gap-2">
<span className="font-semibold">{item.score}%</span>
<span className="text-gray-500 text-sm">({item.weight}%)</span>
</div>
</div>
))}
</div>
</div>
</div>
{progress?.estimatedCompletionDate && (
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<p className="text-sm text-blue-800">
Estimated completion: <strong>{progress.estimatedCompletionDate}</strong>
</p>
</div>
)}
</div>
);
}
Timeframe
Basic progress and grades tracking — 1 week. With weighted grading, detailed breakdown, and progress predictions — 2–3 weeks.







