Troubleshooting JavaScript: Radio button score calculation in a beer quiz

Other Questions JavaScript
1

Hey everyone! I’m working on a JavaScript project for class. It’s a beer quiz where users guess which brewery makes different beers. I’m having trouble with the radio buttons and score calculation.

The quiz shows questions about different beers, but when I choose an answer and click enter, the score stays at 0. I’ve tried adding alerts and a score display button to debug, but no luck.

Here’s a simplified version of my code:

const beerList = [
  ['Hoppy Wonder', 'CraftMasters'],
  ['Amber Sunset', 'BrewHouse'],
  ['Midnight Stout', 'DarkRoast']
];

let userScore = 0;
let currentQuestion = 0;

function checkAnswer() {
  currentQuestion++;
  const selectedAnswer = document.querySelector('input[name="beerChoice"]:checked').value;
  if (selectedAnswer === beerList[currentQuestion - 1][1]) {
    userScore++;
  }
  updateQuestion();
}

function updateQuestion() {
  document.getElementById('questionText').textContent = `Which brewery makes ${beerList[currentQuestion][0]}?`;
}

Can anyone spot what I’m doing wrong? Why isn’t the score updating? Thanks for any help!

2

I’ve encountered similar issues with score tracking in JavaScript quizzes. One thing I noticed in your code is that you’re not actually displaying the score anywhere. Try adding a function to update the score display after each question:

function updateScoreDisplay() {
document.getElementById(‘scoreDisplay’).textContent = Score: ${userScore};
}

Call this function in your checkAnswer() method after incrementing the score. Also, make sure you have a corresponding ‘scoreDisplay’ element in your HTML.

Another potential issue is that your currentQuestion variable might be exceeding the length of your beerList array. Add a check in your updateQuestion() function:

if (currentQuestion < beerList.length) {
// update question
} else {
// end quiz, show final score
}

These changes should help resolve your score calculation problem. Let me know if you need any further clarification!

3

Hey Emma_Fluffy, I ran into a similar issue when I was working on a quiz app for my portfolio. From what I can see, your logic for checking the answer and updating the score looks sound. However, one thing that stands out is that you’re not actually displaying the updated score anywhere in your code.

Here’s what worked for me: After incrementing the score in your checkAnswer function, add a line to update a score display element on your page. Something like:

document.getElementById(‘scoreDisplay’).textContent = Score: ${userScore};

Make sure you have a corresponding element in your HTML with the id ‘scoreDisplay’.

Also, double-check that your radio buttons are properly linked to your JavaScript. Sometimes the issue can be as simple as a mismatched name attribute.

Lastly, consider adding some console.log statements throughout your code to track the flow and see where things might be going wrong. It’s a lifesaver for debugging!

Hope this helps you get your quiz up and running. Good luck with your project!

4

hey emma, i had a similar issue w/ my quiz project. try adding a function to show the score:

function showScore() {
document.getElementById(‘scoreDisplay’).innerText = Score: ${userScore};
}

call this after updating the score in checkAnswer(). also, make sure ur not going past the end of beerList:

if (currentQuestion >= beerList.length) {
// end quiz
}

hope this helps! lmk if u need more help :slight_smile: