/Cal-Quiz

The Cal Quiz Project is a mathematics calculation practice application built using React and SCSS. It offers four types of calculations: addition, subtraction, multiplication, and division, providing users with a platform to enhance their mathematical skills.

Primary LanguageJavaScript

Cal Quiz Project

Table of Contents

Introduction

The Cal Quiz Project is a mathematics calculation practice application built using React and SCSS. It offers four types of calculations: addition, subtraction, multiplication, and division, providing users with a platform to enhance their mathematical skills.

Demo

Demo.Video.Short.mp4

About the Project

The Cal Quiz Project is a web application designed to help users practice and improve their mathematical calculation abilities. This application offers an interactive and engaging learning experience with a user-friendly interface and various customization options.

Features

  • Four types of calculations: addition, subtraction, multiplication, and division.
  • Three levels of difficulty: 1, 2, and 3, offering increasing complexity.
  • Customizable question count: Users can choose from 5, 10, 15, or 20 questions per test.
  • Timer functionality: A timer starts when the quiz begins, adding a time-based challenge.
  • Sequential question display: Users tackle one question at a time, promoting focus.
  • Next button: Users proceed to the next question after solving the current one.
  • Results display: After completing the quiz, users see a performance summary.
  • Result Details: The result includes the level, question count, correct answers, wrong answers, and skipped questions.
  • Question review: All quiz questions are shown with corresponding answers after the quiz.
  • Responsive design: The application is accessible on various devices.
  • Engaging UI: The user interface is designed to be visually appealing and intuitive.
  • Practice improvement: Users can track their progress and identify areas for improvement.
  • Educational tool: Suitable for students and individuals looking to enhance their math skills.
  • Interactive learning: Provides immediate feedback for better learning outcomes.
  • Encouraging learning environment: Positive reinforcement for correct answers.
  • Skill diversity: Offers practice in various mathematical operations.

Used For

  • Practicing mathematical calculations
  • Improving math skills
  • Interactive learning

Improvements

  • Implement a user accounts system to save and track progress over time.
  • Add a leaderboard feature for users to compare their scores with others.
  • Include more mathematical operations to expand the range of practice.
  • Create a more detailed tutorial or guide for new users.

Problems Faced

  • Implementing the timer functionality accurately.
    • Solution: Thoroughly tested the timer feature to ensure it started and ended correctly.
  • Managing state transitions between questions.
    • Solution: Utilized React's state management to keep track of the current question.

Technologies Used

  • React
  • SCSS

Links

Getting Started

To clone and run the project locally, follow these steps:

  1. Clone the repository.
  2. Navigate to the project directory.
  3. Run npm install to install dependencies.
  4. Run npm start to start the development server.
  5. Open your browser and go to http://localhost:3000 to view the application.