Giter VIP home page Giter VIP logo

bible-quiz-for-kids's Introduction

Bible Quiz for Kids

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/

ImageHere

Our Main goal:

  • to ascertain the effectiveness of the bible project lesson.
  • to test the kids knowledge

Content Strategy

  • user-friendly
  • easy to use navigations

Target Audience:

Our bible quiz is targeted at kids that has gone through a bible project lesson and may want to test their knowledge.

Wireframes

Image Here Image Here

Features:

  • 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

    ImageHere

  • 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"

    ImageHere

  • 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.

    ImageHere

  • 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

    ImageHere

  • 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

    ImageHere

Testing

  • 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

Challenge / Bugs

Solved Bugs

  • My questions were repeating multiple times, i was able to use the splice method on my question array to display a question once
  • On completing that, my choice buttons were given the wrong answer, I then set a global variable for currentAnswer
  • My score area was counting from zero, i realized that my counter was not properly aligned
  • Validator Testing

    • 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

    Deployment

    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

      https://kiksgold.github.io/Bible-Quiz-for-Kids/

    Credits

    • Tutor Support
    • w3schools
    • Youtube Videos

    Media

  • No media was used
  • bible-quiz-for-kids's People

    Contributors

    kiksgold avatar

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.