jQuery Jeopardy
(*****jquery optional)
Welcome to Jeopardy! In this assignment, you'll create an application that asks the user Jeopardy questions and keep track of their score.
Check out a demo of what this might look like below:
Requirements
- A grid of Jeopardy dollar amounts are displayed on the screen
- Upon clicking an dollar amount, a question is displayed
- The user can submit an answer
- If they are correct, their score is updated
Overview
Included in this assignment is jeopardy.json, a file that contains an array with ~50,000 Jeopardy questions. It looks like this:
[
{
"showNumber": 4680,
"date": "12/31/04",
"round": "Jeopardy!",
"category": "HISTORY",
"value": "$200",
"question": "For the last 8 years of his life, Galileo was under house arrest for espousing this man's theory",
"answer": "Copernicus"
},
"..."You'll use this data file to get Jeopardy questions and answers.
For the base assignment, if the user clicks a $200 question, the app will display a random $200 question from the dataset (and same with the other dollar amounts).
Steps
1. Create your files
- Start off by creating an
index.html,main.js, andstyles.css - In
index.html, add twoscripttags to import firtjeopardy.jsonfollowed bymain.js - Also add a
linktag to importstyles.css - Finally, if planning on using jquery, add
jqueryto yourindex.html. You can do this by adding the following line to your<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>THIS IS OPTIONAL!
2. Build the layout of dollar amounts
Write code to build the grid of $100, $200, etc. This could be done in index.html, but I'd recommend doing this through main.js using the jQuery equivalents of document.createElement and .appendChild.
Also, add some style rules in styles.css to make things look reasonable.
3. Get a Jeopardy question
Now, make it so that when one of your $100, $200, etc. buttons are pressed, a random question of that dollar value is displayed.
To do this, make a fetch request to jeopardy.json. When one of the dollar amounts is clicked, you can filter the questions to only those with the correct dollar amount. Then, choose one of those questions randomly. It's okay that a different question is chosen each time even when you press the same button.
Display this question on the DOM somewhere reasonable.
4. Handling a user guess
At this point, it's time to handle a guess from the user. We'll need to add a text input and a submit button to the page. This is where the user will enter their guess. Do this in the HTML (or the JS if you like).
Now, in the JS, add a click listener to the submit button. When the submit button is pressed, identify whether the user entered guess matches the correct answer. To know this, you'll probably need to have stored the selected question in a global variable somewhere.
If the user is incorrect, display a message telling them so along with the correct answer.
If the user is correct, dispaly a congradulatory message!
5. Keeping score
In this step we'll add a score indicator.
First, create a place to put the score in the HTML.
Now, anytime a user gets a quetion right, add the score of that question (i.e.: $200) to the user's total score. One challenge here will be converting the string "$200" to the number 200.
6. Gray Squares
Make a square become gray and unclickable after being chosen.
Stretch goals
-
Make it so the user cannot click on another question until a guess is made for their currently clicked question.
-
Instead getting a random question everytime a button is pressed, populate the game with the questions from a single past Jeopardy game. To do this, randomly choose a valid 'show number' (see
jeopardy.jsondata) and use all the questions with that show number. As part of this, display a category (found in the data) over each column of $ amounts.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent