Number Bonds Practice Website

Project Overview

This project aims to create an engaging and vibrant website for primary school children to practice number bonds. The website is designed to be interactive, colorful, and fully responsive, ensuring it looks great on desktops, tablets, and mobile phones. The primary objective is to help children improve their basic mathematics skills through a fun and timed practice session.

Features

• User Inputs:

  • Time for the test (in seconds)
  • Number of questions
  • Number bond level (any whole number)
  • Start button to initiate the test

• Test Structure:

  • Random sequence of questions with different formats:
    • X + Y = __
    • X + __ = Z
    • __ + X = Z
  • Equal number of addition and subtraction questions
  • Different colors for addition and subtraction symbols to provide visual cues

• Design Elements:

  • Bright and friendly colored timer showing the remaining time
  • Last 10 seconds of the timer will pulse to indicate time running out
  • Simple, colorful, and engaging user interface
  • Different CSS color schemes on each reload for variety

Technologies Used

• HTML: For the basic structure of the website
• CSS: For styling the website and creating different color schemes
• JavaScript: For adding interactivity and functionality to the website

Setup and Usage

1. Clone the repository to your local machine:

   git clone https://github.com/rnddave/website-number-bonds.git

2. Navigate to the project directory:

   cd number-bonds-practice

3. Open the index.html file in your preferred web browser.

4. Enter the required inputs:

   • Time for the test (in seconds)
   • Number of questions
   • Number bond level (any whole number)

5. Click the "Start" button to begin the test.

6. Answer the questions presented within the given time.

Goals

• Educational Enhancement: Provide a tool for children to practice and improve their number bond skills.
• Engagement: Create an interactive and visually appealing platform to keep children engaged.
• Accessibility: Ensure the website is fully responsive and accessible on various devices, including desktops, tablets, and mobile phones.
• Variety: Introduce different color schemes to keep the interface fresh and exciting for repeated use.

File Structure

number-bonds-practice/
│
├── index.html
├── styles.css
├── scripts.js
├── styles1.css
├── styles2.css
├── styles3.css
├── styles4.css
├── styles5.css
├── styles6.css
└── README.md

• index.html: The main HTML file that contains the structure of the website.
• styles.css: The main CSS file for default styling.
• scripts.js: The JavaScript file for adding interactivity and functionality.
• styles1.css, styles2.css, styles3.css, styles4.css, styles5.css, styles6.css: Additional CSS files for different color schemes.
• README.md: This README file.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes. Ensure your code follows the existing style and includes appropriate documentation.

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Happy Learning!