GithubHelp home page GithubHelp logo

web-apis-code-quiz's Introduction

Coding Quiz - Utilizing Web APIs

Overview

The client expressed needs for a code quiz to test their coding knowledge against their peers.

Client's Needs/Expectations

The client, a coding bootcamp student established that the following needs/expecations must be met:

  • The quiz must be timed with multiple-choice questions.
  • The user interface must be clean and polished so that is responsive.
  • The app will run in the browswer, adn will feature dynamically updated HTML and CSS change by JavaScript.

Updates and Exepctations Obtained from Coding Bootcamp Student Input

Through information and feedback provided by the coding boot campot student, the following update criteria were established:

  • The quiz must be timed and cover JavaScript fundamentals to store high scores against their peers.
  • Given that the boot camp student is taking a time codequiz :
    • When the studen clicks the start button
      • Then a timer starts and they are presented with a question.
      • When they answer a question:
        • Then they are presented with another question.
        • When they answer a question incorrectly, then 10 seconds is subracted from the clock.
        • When all questions are answered or the time reaches 0
        • Then the game is over
  • When the game is over:
  • Then the game is over.
  • Then they can save their initials and score.

Overall Deployment of Quiz

  • document.querySelectors and add.EventListeners deployed to dynamically bring document elements in and out of the quiz.
  • When the boot camp student presses the start quiz button event listeners are triggered for:
    • The timer starts counting down from 75 seconds.
    • The instructions are set to "hide".
    • The first question is shown.
  • If the student chooses the correct answer and alert box with "You're right!" pops up. If the wrong answer is shown, an alert box with "You're wrong." is displayed.
    • Questions are generated from an array and the choices are generated on to buttons from the array.
    • Since the user's answers are generated from inputs, parseInt is used to retrieve the answer from the console log.
  • When the user either runs out of time or completes the quiz, the submit initals box and end score appears by removing the "hidden' attribute.
    • The student's initals and score and stored on the client-side and must be extracted using JSon Parser to added to the high score array.
  • Once the student has submitted their initials by clicking the submit button, they're linked to the High Scores Page.

Deployed Optimized Website and Final JavaScript Code

*Deployed website *[GitHub Repository]https://github.com/Kay0s/Web-APIs-Code-Quiz Screenshot of deployed website Screenshot of finalized JavaScript Code

Research Resources

© 2020 Kristina Hamilton and Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.

web-apis-code-quiz's People

Contributors

kay0s avatar

Watchers

 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.