This project is focused on a quiz app for kids to test their knowledge on the just concluded bible project.
The users should be able to get an average score if they have have truly taken the lessons
The idea behind the quiz is to test their knowledge on the short bible project.
https://kiksgold.github.io/Bible-Quiz-for-Kids/
- to ascertain the effectiveness of the bible project lesson.
- to test the kids knowledge
- user-friendly
- easy to use navigations
Our bible quiz is targeted at kids that has gone through a bible project lesson and may want to test their knowledge.
- Header
- The header features at the top of the page stating the Bible Quiz for Kids
- It clearly tells the user, the type of quiz and who its meant for
- Username
- The Quiz requires a username before they can start the quiz
- The Quiz will not start if no name is supplied with an alert of "Invalid Username"
- Quiz Area
- This is the question and answer area
- The Quiz area is hidden until the username is supplied
- This is the Quiz area, a set of question and options are supplied.
- The user is expected to choose an option
- Once an option is chosen, the correct anser is highlighted green, while the wrong answer is highlighted red.
- The other options are greyed out such that the user cannot pick another option again.
- Control Area
- The control area has two buttons: "Start" and "Next"
- Once the game is started, the start button is hidden
- The next button supplies the next question and ends the game when it gets to the last question
- Score Area
- The score area records the correct and incorrect answers
- It gives the total score of the quiz
- It ends the game when the total score equals to total questions
- The quiz works in different browser; Chrome, Safari, and my mobile device (iPhone11).
- I confirm that this quiz is responsive, looks good and functions on all standard screen sizes using devtools device toolbar.
- I have used the http://ami.responsivedesign.is/ website to check the render on different sceens.
- I have tested that the header, quiz area, control buttons and score area works well
- HTML
- No errors were returned when passing through the official W3C validator.
- CSS
- No errors were returned when passing through the official W3C validator.
- JavaScripts
- No errors were returned when passed through JSHint Validator
The site was deployed to GitHub Page. The following steps were taken for deployment:
- I created a repository on mygithub
- I have saved, commited and pushed every changes to github.
- In the github repository I navigated to the settings tab
- I used the drop-down menu to select master branch as a publishing source and saved it.
- Refreshed the github page, and a link was provided to the completed website
- Tutor Support
- w3schools
- Youtube Videos