This webpage is a trivia game that tests the users knowledge of bubble gum facts. HTML, CSS, and Javascript were used to create an interactive user experience.
I had a few goals for this project:
- Utilize HTML, CSS, and Javascript.
- Manipulate the DOM using Javascript in order to create a page that updates based on the user's actions.
- Randomize the questions so that the order they are asked in is different each time.
- Hide and reveal questions as the player works through the game.
- Determine if the user's answers are correct or incorrect
- Reveal a final score at the end of the game.
- Make the website responsive, so that it is enjoyable to use regardless of screen size.
There are some improvements that I would like to make in the future:
- Change input type to radio buttons to improve usability
Below are three screenshots from different points in the game: the start page, an example of one of the questions, and the results page.
This website is a single page that utilizes DOM manipulation to update the information shown based on the user's events. It features a start menu, which has an instructions button, which reveals a modal with instructions, and the start button, which reveals the first question.The user is asked ten questions. For each, they must enter their answer and then they will be told if their answer is correct. At the end of the game, their score is displayed and they are given an option to restart the quiz and try again.
This game was created with HTML, CSS, and Javascript.
If you would like to play the game, please click here.
If you would like to contribute code, identify bugs, or propose improvements, please fork this repository and submit a pull request with your suggestions. Below are some helpful links to help you get started: