Skip to content

heynzar/exam-management-system

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎓 Exam Management System – Built with Just JavaScript

Say hello to the Exam Management System, a full-stack web app where teachers can create exams, share them with students, and view results in real-time.

No React. No TypeScript. No fancy frameworks. Just pure JavaScript, HTML, and CSS, built to challenge myself and explore the pure power of the web.


📚 Table of Contents


🌱 The Idea Behind It

As a frontend developer, I usually rely on modern tools like React or TypeScript. But for this project, I wanted to go back to basics.

So I set a challenge: Build a real app with no frameworks. Just pure code.

The goal? To sharpen my problem-solving skills, master the DOM, and better understand how everything works under the hood.


🧠 What You Can Do

👩‍🏫 Teachers can:

  • Create and manage exams easily.
  • Add multiple-choice or direct-answer questions.
  • Share exams using a simple link.
  • See which students completed the exam.
  • Get real-time stats and performance insights.

👨‍🎓 Students can:

  • Join exams through shared links.
  • Take tests in a clean, mobile-friendly interface.
  • Get instant results.
  • View their completed exams.

🛠️ Tech I Used

  • Frontend: HTML, CSS, Vanilla JavaScript
  • Backend: Node.js, Express.js, JWT
  • Database: MongoDB

👉 No libraries. No frameworks. Just handcrafted code.


📸 Quick Look

  • 📊 Teacher Dashboard
    Teacher Dashboard showing an organized interface with a navigation menu on the left and a main content area displaying exam statistics, including a bar chart of student performance and a list of recent exams. The design is clean and professional, with a focus on usability and clarity.

  • 📝 Exam Creation Page
    Exam Creation Page where teachers can add questions to an exam. The interface includes fields for question text, answer options, and correct answers. A preview of the exam is displayed on the right side, ensuring teachers can review their work before publishing.

  • 📱 Student Exam Interface
    Student Exam Interface showing a mobile-friendly design. The page displays a question with multiple-choice options and a timer at the top. The layout is simple and distraction-free, allowing students to focus on completing the exam.

  • 📈 Exam Statistics
    Exam Results Page displaying a summary of student performance. The page includes a table with student names, scores, and completion times, along with a pie chart visualizing overall performance. The design emphasizes clarity and accessibility.


💡 What I Learned

  • DOM manipulation, event handling, and writing modular JavaScript
  • Building custom form validation, routing, and AJAX calls
  • Structuring large apps without frameworks
  • A deeper appreciation for modern tools, they do a lot more than we think!

📜 License

This project is licensed under the MIT License. Feel free to use and modify it for your own projects.

See LICENSE for more information.


📬 Contact

If you have any questions, feedback, or just want to connect, feel free to reach out:


About

✒ FullStack Exam Management System built with pure Vanilla JavaScript. Create exams, share links, and track student results.

Topics

Resources

License

Stars

Watchers

Forks

Contributors