Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rnddave/website-number-bonds
I'm building this website so that my 6yo can practice number bonds in order to aid their early academic career.
https://github.com/rnddave/website-number-bonds
copyleft educational-game html-css-javascript number-bonds number-game
Last synced: about 2 months ago
JSON representation
I'm building this website so that my 6yo can practice number bonds in order to aid their early academic career.
- Host: GitHub
- URL: https://github.com/rnddave/website-number-bonds
- Owner: rnddave
- License: mit
- Created: 2024-06-28T09:46:39.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-28T11:56:21.000Z (7 months ago)
- Last Synced: 2024-06-29T11:14:12.014Z (7 months ago)
- Topics: copyleft, educational-game, html-css-javascript, number-bonds, number-game
- Language: JavaScript
- Homepage: https://number-bonds.netlify.app/
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/rnddave/website-number-bonds.git
```
2. Navigate to the project directory:
```bash
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](LICENSE) file for details.
---
Happy Learning!