Giter VIP home page Giter VIP logo

jquery-quiz's Introduction

Group Assignment: jQuery Quiz

For this lab you will be in small groups (2-3 people). Your goal is to create a functional internet quiz! The topic can be whatever you'd like–maybe keep it PG-13 in order to share with the class though! 😄

Pre-Requisites

Before attempting this assignment, students should have some knowledge of:

  • DOM Manipulation
  • The jQuery library
  • JavaScript objects and arrays
  • Looping over JavaScript arrays

Requirements:

  • At least 5 questions
  • A result or score is displayed at the end
  • Radio buttons (if used) are reset after submitting an answer
  • Don't let a user continue if they didn't select an answer
  • Present your quiz to the class

Here's a big hint: You need to represent your question and answer data as an array of objects.

Your array of question objects could potentially look like the code below. It doesn't need to look exactly like this and you are encouraged to deviate as your requirements demand, but it's here to get you started if you need:

let questions = [{
  prompt: "Who is the prime minister of Canada?",
  answers: ["Justin Trudeau", "Wayne Gretski", "Tim Horton", "Mike"],
  correctAnswerIndex: 0
}, {
  prompt: "Which of the following is a strongly-typed language?",
  answers: ["JavaScript", "Ruby", "Java", "Python"],
  correctAnswerIndex: 2
}];

BONUS:

  • Implement a back button. This will require you to track which questions have been answered and which have not!

    Hint: Store the user's answer as part of each question object.

  • Be able to dynamically add more questions without changing your code logic.

    Hint: If you've set up your data correctly, it should just be a matter of adding more data!

  • Mix up the question order for each person that takes the quiz.

    Hint: use the built-in sort and Math.random for this

  • Split the question data and the quiz logic into two separate files

    Hint: Make sure the questions file is the first script you include in your HTML.

Deliverable

Be prepared to share your results with the class! Focus on basic usability first, but make some efforts toward presentability once that is done. You and your group members will be receiving homework credit for making your presentation in class.

Once you are done with the assignment, reflect on why it was useful to make an array of question objects. What would your code have looked like without it?

jquery-quiz's People

Contributors

brandiw avatar

Watchers

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