Creating a quiz app using HTML, CSS, and Javascript from this tutorial https://www.youtube.com/watch?v=zZdQGs62cR8&index=5&list=PLDlWc9AfQBfZIkdVaOQXi1tizJeNJipEx
I've been working on a lot of backend stuff and wanted to do a project focused on front-end web design and development. I found this tutorial from James Q Quick.
In this section we create game.html and game.css.
- Create
game.jsfile - Create functions that load questions, identify selected answers
Need to figure out how to query each of the .choice-text elements, so using data-number="X" as noted in the pic below.
Then by adding const choices = document.getElementsByClassName("choice-text"); we get an HTMLCollection like the following output to the console:
We then change that to an array using const choices = Array.from(document.getElementsByClassName("choice-text")); and it changes the output to this:
This section uses the JavaScript Spread syntax to bring the questions array into the availableQuestions array like this
This also uses the splice method (which I've used before, but it's been a while) which adds/removes items to/from an array.
What we did in this video:
- Apply a class to the question element based on correct/incorrect answer selection
- use setTimeout to display the correct/incorrect answer for 1000ms before calling getNewQuestion();
What we did in this video:
- Add the HTML/CSS elements to create a HUD (Question and Score)
- Create function to increment score if answer is correct.
What we did in this video:
- Removed old HTML element showing question numbers
- Added 2 s, one for the outline of the progress bar, one for the progress bar itself
- The progress bar is filled in by adjusting the width of inner div using rogressBarFull.style.width =
${(questionCounter / MAX_QUESTIONS) * 100}%;
What we did in this video:
- Created
end.htmlandend.jsfiles - Added CSS for forms
- Added function to
end.jsthat checks for a value in the username field to disable to the save button - Saves player's score to local storage
localStorage.setItem("mostRecentScore", score);
To look at local storage in Chrome, go to Application tab > Local Storage
What we did in this video:
- Figure out how to sort high scores, limit scores to top 5, and write them to local storage
- Creates
highscores.html,highscores.css, andhighscores.jspages - Pulls in high scores from local storage using
const highScores = JSON.parse(localStorage.getItem('highscores')) || []; - Use JS array map() to convert the returned array from local storage to elements for an HTML list
- Move hard coded questions from
game.jstoquestions.json
Use this code pull pull questions from questions.json and display them in the console:
When I do that, I get an HTTP response 200:
To make this a usble JSON response I use the following code:
And here's what the final code looks like to pull questions from questions.json, which also has a .catch to handle any errors. It also moves the startGame() function to be called after the questions are loaded.
Uses Open Trivia DB API to pull questions.
Configuring questions
Side note: I installed JSON Formatter into Chrome to be able to view the returned JSON in a cleaner format.
The format in which questions are returned from Open Trivia DB is not the format we use in our app. So we're going to use a map function to clean it up.
This is what that section of code looks like now:
Now that we're pulling questions from an API, there is a moment when game.html loads that it shows the default text. This section will resolve that issue by adding a loader.
Creates a new HTML element called <div id="loader"></div> in which we use a CSS animation to create a spinning circle.
This was taken from w3schools | CSS Loader
'game.js' is modififed so where the loader is removed and the game content is revealed upon the start of the game (once the questions have loaded);
