Welcome to the official documentation of QuizForge. This guide explains every important feature, workflow, project structure and functionality of the application. Whether you are using QuizForge or exploring the project as a developer, this documentation provides a complete overview of how the application works.
QuizForge
Version 1.0
Frontend Web Application
Stable Release
Introduction to QuizForge and its purpose.
Complete list of available features.
Step-by-step flow of the application.
Learn how quizzes are created.
Understand the quiz playing process.
Score calculation and explanations.
Quiz and question object structure.
Overview of project scripts.
Project organization.
Planned enhancements for upcoming versions.
QuizForge is a frontend-based quiz creation and quiz management application developed using HTML, CSS and JavaScript. The project allows users to create custom quizzes, add multiple-choice questions, assign points, provide explanations, play quizzes and review detailed results after completion.
The application stores all quiz information inside the browser using Local Storage, allowing quizzes to remain available even after refreshing the page. The project focuses on demonstrating strong JavaScript concepts such as objects, arrays, dynamic DOM manipulation, event handling, local storage management and application workflow.
QuizForge has been designed with a modern dark user interface, responsive layouts and a modular file structure, making it suitable as a portfolio project while also serving as a practical learning resource for frontend web development.
Provides the semantic structure for every page of the application including forms, sections, navigation and content layout.
Used to create the responsive layouts, modern dark interface, animations, spacing, typography and reusable components throughout the project.
Powers the application by managing quiz creation, question handling, score calculation, DOM updates, filtering, searching and Local Storage operations.
Stores quizzes, questions and results directly inside the user's browser without requiring a backend server or database.
Store and manage multiple quizzes from one location. Browse, search and access quizzes quickly whenever required.
Create custom quizzes by entering a title, category and description before adding questions.
Add multiple-choice questions with four options, define the correct answer and assign points.
Every question can include an explanation that appears after quiz completion to help users understand the correct answer.
Present questions one at a time with progress tracking, navigation buttons and score calculation.
Display total score, percentage, performance rating and a complete answer review after submission.
Save quizzes directly inside the browser so they remain available after refreshing the page.
Optimized layouts for desktop, tablet and mobile devices.
Home Page
↓
Create Quiz
↓
Question Creator
↓
Save Quiz
↓
Quiz Library
↓
Select Quiz
↓
Play Quiz
↓
Submit Answers
↓
Result Page
↓
Answer Review
Landing page introducing QuizForge and providing navigation to major sections of the application.
Displays every saved quiz with search, filter, edit and delete functionality.
Collects the quiz title, category and description before questions are added.
Builds the complete quiz by adding questions, options, correct answers, points and explanations.
Loads questions dynamically and records the user's selected answers.
Displays score, percentage, answer review and explanations prepared by the quiz creator.
Enter the quiz title, category and description to create a new quiz.
Write each question and provide four answer options for participants.
Mark the correct option that will be used during score calculation.
Give every question its own score value to create a flexible scoring system.
Write a helpful explanation that appears in the final answer review.
Store the completed quiz inside Local Storage, making it available from the Quiz Library.
QuizForge uses a point-based scoring system where each question can have a custom score assigned by the quiz creator. This allows simple quizzes as well as advanced quizzes with weighted questions.
The participant receives the complete points assigned to that question.
No points are awarded for an incorrect answer.
The total score is calculated by adding the points earned from every correctly answered question.
The percentage is calculated using the earned score divided by the maximum obtainable score.
After submitting a quiz, QuizForge generates a complete performance report. Every question is displayed with the participant's answer, the correct answer, the awarded points and the explanation provided by the quiz creator.
Shows the total marks earned.
Displays the overall performance in percentage.
Total correctly answered questions.
Displays all incorrect responses.
Displays the explanation written by the quiz creator for better understanding.
Every quiz is stored as a JavaScript object. Each object contains quiz information along with an array of question objects.
Quiz
│
├── Title
├── Category
├── Description
└── Questions
│
├── Question
├── Options
├── Correct Answer
├── Points
└── Explanation
Creates quiz objects and stores quiz information before questions are added.
Handles question creation, answer options, explanations and points.
Loads quizzes from Local Storage, displays them and manages search, edit and delete functionality.
Controls quiz navigation, answer selection, score calculation and progress tracking.
Generates the final result page, calculates statistics and displays explanations for every question.
QuizForge stores application data directly inside the browser using the Local Storage API. This allows quizzes to remain available after the page is refreshed without requiring an online database.
Stores the quiz title, category and description.
Saves every question, answer option, correct answer, points and explanation.
Stores the participant's score, percentage and answer review.
Landing Page
│
▼
Create Quiz
│
▼
Question Creator
│
▼
Local Storage
│
▼
Quiz Library
│
▼
Play Quiz
│
▼
Calculate Score
│
▼
Result Review
QuizForge has been developed using responsive web design principles to ensure a consistent experience across different screen sizes. Flexible layouts, responsive grids and media queries automatically adjust the interface for desktops, tablets and smartphones.
Optimized for large displays with spacious layouts and multi-column sections.
Components automatically resize while maintaining readability and usability.
Navigation, forms and cards stack vertically for comfortable interaction on smaller screens.
QuizForge follows modern HTML5, CSS3 and JavaScript standards and works correctly on most modern web browsers.
Fully Supported
Fully Supported
Fully Supported
Fully Supported
QuizForge/ │ ├── index.html ├── library.html ├── create-quiz.html ├── question-creator.html ├── play-quiz.html ├── result.html ├── documentation.html │ ├── css/ │ ├── style.css │ ├── library.css │ ├── create-quiz.css │ ├── question-creator.css │ ├── play-quiz.css │ ├── result.css │ └── documentation.css │ ├── js/ │ ├── library.js │ ├── create-quiz.js │ ├── question-creator.js │ ├── play-quiz.js │ └── result.js │ ├── screenshots/ | ├── index.png | ├── library.png | ├── documentation.png | ├── create-quiz.png | └── question-creator.png └── README.md
HTML elements are used according to their purpose to improve accessibility and maintainability.
Every page has its own stylesheet, resulting in organized and reusable code.
Functionality is separated into dedicated JavaScript files to improve readability.
Consistent naming conventions and comments make the project easier to understand.
QuizForge is a modern frontend quiz management application developed using HTML5, CSS3 and JavaScript. It demonstrates essential frontend development concepts including dynamic user interfaces, DOM manipulation, event handling, responsive layouts, modular architecture and Local Storage integration.
The application allows users to create quizzes, build multiple-choice questions, assign points, write explanations, attempt quizzes and review detailed results. Its modular design makes the project easy to extend with additional features in future versions.