Giter Site home page Giter Site logo

javascript-quiz's Introduction

Build a quiz using JavaScript and/or JQuery:

Inspired by this assignment on 'JavaScript Is Sexy' website.

This is a GROUP assignment

Work with one OR two others. Only one of you is required to submit, but include names of partners

What is Pair Programming?

Pair programming is an agile software development technique in which two programmers work together at one workstation. One, the driver, writes code while the other, the observer or navigator, reviews each line of code as it is typed in. The two programmers switch roles frequently.

Each of you should take turns "driving", or being the person who is typing.

Whoever is not driving, should be performing an over-the-shoulder real-time code review (spotting errors) and giving advice on how to proceed


Requirements

  1. It is a simple quiz that has radio button choices, and it will show the quiz taker his or her score upon completion.
  2. The quiz can show any number of questions and any number of choices.
  3. Tally the user’s score and display the final score on the last page. The last page will only show the score. (So you need some way to track how many they got correct)
  4. Use an array of objects to store all the questions. Each question, along with its choices and correct answer, should be stored in an object. The array of questions should look similar to this (Notice that only one question is in this example array; you will add many questions):

    var allQuestions = [{question: "Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswerIndex:0}];

    **Alternatively: You could also take this time to practice using ES6 classes. Could you make a class for a question? What properties or methods would be in that class?

  5. Dynamically (with document.getElementById or jQuery) remove the current question and add the next question, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.
  6. Select and implement one one of the BONUS requirements

Additional requirement

Select and implement one of the following (your choice):
  • Add data validation: make sure the user answers each question before showing to the next question.
  • Add a “Back” button to allow the user to go back and change her answer. The user can go back up to the first question. For the questions already answered, show the radio button they already picked.
  • Use jQuery to add animation (e.g., fade out the current question and fade in the next question).
  • Use setTimeout to create a time limit for each question. If the time expires, they get the question wrong.
  • (more difficult) Implement another question type, such as checkboxes or textboxes instead of radio buttons

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.