Simple JS quiz giving a hard time...

[MrConcrete04]

hello world,

for a finals school project I had to make a website in JS and having limited knowledge there was a heck of a learning curve, I left the code in the attachment below, I also included a short video of the current state... whats wrong???

 

any help is appreciated

e.

problem...txt

[mariushm]

Don't write full paths in your html file  ... keep the paths relative to the html page.  if you upload the HTML page on a web server and someone accesses the page, his/her browser won't know how to access the files at  "file:///C:/stuffs/Comp%20Sci/Website/index.html"  

 

Then, open the developer's tools and see what errors you get there ..press F12 and see the console.

 

You have a MAX - QUESTIONS that you need to correct to MAX_QUESTIONS 

Then you have other errors. 

 

You also super complicate this.  since there's only 4 possible answers you could have used a for loop and pick each one with a QuerySelector or something and put an event listener on each entry. 

 

You probably don't want to write   questionsIndex = Math.floor() * availableQuestion.length;   because Math.floor()  returns NaN  - it needs parameters ...  you probably mean Math.floor ( Math.random() * availableQuestion.length) or something like that.

then questionIndex vs questionsIndex pay attention to variable names...

 

I've attached the file with some corrections. You still have to correct placing the answers in the choices boxes. Seriously over complicating yourself.

 

 

 

test.html

[LogicalDrm]

-> Moved to Programming

 

Trust me, if websites coding is just course you have to take, go for just passing it like I did. Using bit tweaked examples to add that little thing that is required. Nothing more, nothing complicated. If website coding was the thing you are aiming for...

[MrConcrete04]

5 minutes ago, LogicalDrm said:

-> Moved to Programming

 

Trust me, if websites coding is just course you have to take, go for just passing it like I did. Using bit tweaked examples to add that little thing that is required. Nothing more, nothing complicated. If website coding was the thing you are aiming for...

Thats the issue its the FINAL, my final grade depends on it...

 

[MrConcrete04]

30 minutes ago, mariushm said:

Don't write full paths in your html file  ... keep the paths relative to the html page.  if you upload the HTML page on a web server and someone accesses the page, his/her browser won't know how to access the files at  "file:///C:/stuffs/Comp%20Sci/Website/index.html"  

 

Then, open the developer's tools and see what errors you get there ..press F12 and see the console.

 

You have a MAX - QUESTIONS that you need to correct to MAX_QUESTIONS 

Then you have other errors. 

 

You also super complicate this.  since there's only 4 possible answers you could have used a for loop and pick each one with a QuerySelector or something and put an event listener on each entry. 

 

You probably don't want to write   questionsIndex = Math.floor() * availableQuestion.length;   because Math.floor()  returns NaN  - it needs parameters ...  you probably mean Math.floor ( Math.random() * availableQuestion.length) or something like that.

then questionIndex vs questionsIndex pay attention to variable names...

 

I've attached the file with some corrections. You still have to correct placing the answers in the choices boxes. Seriously over complicating yourself.

 

 

 

test.html 10.84 kB · 2 downloads

OMG the progressbar finally works, a question gets selected at random but how do I get the options into the choice boxes? sry Im a noobie at this

[mariushm]

Check the HTML part of your code, and the attributes for each of your choice lines. 

Put console.log(variable_name) in your javascript code, where variable_name is the variables you use in your javascript, just to see if they're selected properly. 

When everything works right, remove the lines with console.log as they're no longer needed. 

 

Keep playing with the Developer tools open, and look at the console to see the errors.

Watch out for typos ...I think you have somewhere classToApplu instead of classToApply for example .. 

 

[MrConcrete04]

23 minutes ago, mariushm said:

Check the HTML part of your code, and the attributes for each of your choice lines. 

Put console.log(variable_name) in your javascript code, where variable_name is the variables you use in your javascript, just to see if they're selected properly. 

When everything works right, remove the lines with console.log as they're no longer needed. 

 

Keep playing with the Developer tools open, and look at the console to see the errors.

Watch out for typos ...I think you have somewhere classToApplu instead of classToApply for example .. 

 

where exacly should I put the console.log()? or does that not matter?

 

edit:

the F12 menu console gave me this:

Edited April 18, 2022 by MrConcrete04
additional info

[mariushm]

Yeah, so go there at line 218 in your javascript code and see what's up. You should also see in the source code above that message - i think you can double click on the red highlight and it shows you the code above.

 

You'll probably find your variable is named differently, questionsIndex

[MrConcrete04]

2 minutes ago, mariushm said:

Yeah, so go there at line 218 in your javascript code and see what's up. You should also see in the source code above that message - i think you can double click on the red highlight and it shows you the code above.

 

You'll probably find your variable is named differently, questionsIndex

oh ok, fixed that, it was a missing s, now what?

[mariushm]

Keep going, save the file, reload in your browser, find next error or issue, correct that, repeat... 

[MrConcrete04]

7 minutes ago, mariushm said:

Keep going, save the file, reload in your browser, find next error or issue, correct that, repeat... 

ok, according to the console there is nothing wrong anymore but the score doesnt update and it doesnt tell you if its right or wrong...

 in addition, once the game is done, could it redirect me to a finish page that says the score?

[mariushm]

42 minutes ago, MrConcrete04 said:

ok, according to the console there is nothing wrong anymore but the score doesnt update and it doesnt tell you if its right or wrong...

 in addition, once the game is done, could it redirect me to a finish page that says the score?

The score doesn't update .... so look in your javascript code in the function where you would update the score on screen ..... what conditions have to be met to update the score,  How is score calculated? 

Every time you calculate something, put a console.log ( )  with the variable where you put the score calculation between the paranthesis.

It's possible you calculate something and the answer is NaN (not a number) and your score doesn't get updated, or the function simply stops there due to that error and doesn't continue. 

 

For example, you have there : 

 

incrementScore = (num) => {
  score += num;
  scoreText.innerText = score;
};

 

You want to see if this function is called to update the score, so put a console.log (num) to see if you ever send anything different than 0 

then you'd want to see if the score variable is actually changing, so put a console.log(score) 

then you'd probably want to make sure that scoreText is actually pointing to that element on the HTML page, that it was selected properly, so put a console.log (scoreText)

 

Anything you do, put there a console.log  you want to see everything 

 

So let's say I change that incrementScore function to this : 

 

incrementScore = (num) => {
	console.log('inside incrementScore');
	console.log('num is');
	console.log(num);
	score += num;
	console.log('new score value is');
	console.log(score);
	console.log(scoreText);
	scoreText.innerText = score;
	console.log('leaving incrementScore');
};

 

Now every time this function is called, I should see in the console  "inside incrementScore" , some more lines and "leaving incrementScore"

If you do the change, you'll see that the function is never called... so you go in your code and look at what conditions must be met for the incrementScore function to be called. When is incrementScore called? When 

 

    if (classToApply === "correct") {
      incrementScore(SCORE_POINTS);
    }
    

When is classToApply  updated ? A few lines above 

 

    const selectedChoice = e.target;
    const selectedAnswer = selectedChoice.dataset["number"];

    let classToApply =
      selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";

 

classToApply  becomes correct or incorrect , depending on the value of selectedAnswer, which is initialized with the value selectedChoice.dataset["number"] 

Ask yourself what is that dataset["number"] ?   

Put there some console.log  lines   console.log(selectedChoice)  , console.log(selectedAnswer)  , console.log(classToApply) after the let classApply = ..  line ..

See what happens there.

 

as a suggestion  ... instead of 

 

<p class="choice-text" data-number-2>Choice 2</p>

you could have 

<p class="choice-text" myvalue="2">Choice 2</p>

 

and then in javascript :

 

const selectedChoice = e.target;
const selectedChoiceValue = selectedChoice.getAttribute("myvalue")
console.log(selectedChoice);
console.log(selectedChoiceValue);

 

You can also use .setAttribute("myvalue", number)   to actually set the number in that "myvalue" attribute, for example if you'd ever want to randomize the answers.