jamesqquick / build-a-quiz-app-with-html-css-and-javascript

Build a Quiz App with HTML, CSS, and JavaScript

Hi My name is James Q Quick

Developer. Speaker. Teacher.

James is a JavaScript Developer, Speaker, and Teacher with a passion for teaching developers through content. He is a full-time Technical Content Creator with years of experience in Software Development and Developer Advocacy.

• 🌍  I'm based in Memphis, TN
• 🧠  I'm learning everything JavaScript
• 🏡 My website
• 😄 Pronouns: he/him
• ⚡ Fun fact: I can solve a Rubik's cube in under a minute!

Shoutout to Brad Garropy for the inspiration!

Skills

Socials

build-a-quiz-app-with-html-css-and-javascript's Issues

Quiz.js

Colons in folder names on Windows is not allowed. So when trying to clone this repo to a VS code running on windows it fails.

Colons in folder names on Windows is not allowed. So when trying to clone this repo to a VS code running on windows it fails.
...
Resolving deltas: 100% (75/75), done.
error: invalid path '4. Display Feedback for Correct:Incorrect Answers/app.css'
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry with 'git restore --source=HEAD :/'

localStorage highScores only storing one score after return to home

In the file: end.js we add window.location.assign("/"); at the very end to send the player back to the home screen. When this happens and I play through again and save a score, it only keeps the latest score.

Somewhere the highScore localStore is being reset but I can't find it. Any help here?

Uncaught TypeError: Cannot set properties of null (setting 'innerText')

Hi,

Had this error and found a solution. It's caused by a typo: "quesiton".
Check out ->
File: game.html
Line 14: <h2 id="**quesiton**">What is the answer to this questions?</h2>
Easy fix!
😎

[DOCS] put deployed website link

It would be better if you included the demo of your website link of the app in the documentation as well as in the about repository details.

highscores are random

Up to the 12th one in end.js the score is a random math function and not the actual score.

const score = {
score: Math.floor(Math.random() * 100),
name: username.value

Error: Access to fetch at 'file:///Users/questions.json' from origin 'null' has been blocked by CORS policy!

Hi,
I'm get this error message when I try to execute fetch.
Any ideas for a fix?
Thanks

Display attempted quiz

Hey, 👋
Kindly help me on how to display all the attempted quiz with the right answer after completing quiz.

Math.random code will only shuffle answer into first three containers

This was a really great tutorial series - easy to follow and quick to build!

I think I have found a small issue with the following code:

Build-A-Quiz-App-With-HTML-CSS-and-JavaScript/12. Create a Spinning Loader/game.js

Line 30 in 91c5022

formattedQuestion.answer = Math.floor(Math.random() * 3) + 1;

Math.random() returns a value in the range [0,1), i.e. it will never return 1 - see source.

So it looks like the code will only return values of 1, 2 or 3. Never 4.

I think a simple fix is the following:
formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;

Choices are not loading.

Choices are not loading from open trivia DB, but questions are loading.

availableQuestions

You have a typo in game.js. You have availableQuesions instead of availableQuestions.
On line 8, 45, 50, 55, 56, 64.

p.s. thanks for the tutorial!

error i'm getting

Uncaught TypeError: Cannot set property 'innerText' of null

Build a Quiz App with JS

The deployed Github page is not working: Shows 404

The webpage is not working.

Js quiz

Incorrect coding == forEach((

Line 59
choices.forEach((choice) => {

Missing License

Hi,

we would like to create a webapp based on your tutorial using your code as a starting point. Unfortunately, you have not released your code under a specific license. Would you mind to do that so we know under which conditions we are allowed to reuse your code?

Fetch is not working as expected (2023)

PROBLEMS WITH FETCH

Below is your implementation of fetch -

fetch("questions.json")
  .then((response) => response.json())
  .then((data) => {
    questions = data;
    console.log(questions);
    start();  //<--problem
  })
  .catch((err) => {
    console.log(err);
  });

This piece of code returns an array of empty objects when start() is being called from then, image shown below

If start() function is not called from then it magically somehow works, image shown below:

P.S: I happen to be learning, javascript and web development in general and that is why I came across this playlist. So I cannot progress further to complete this app as I am stuck here.
Request you to provide a workaround as soon as possible :-)

Projekt

Quiz