Review Algorithmic Thinking by Building a Dice Game - Step 7

JavaScript
1

Tell us what’s happening:

I’m updating radio options based on dice rolls. The function should:
:white_check_mark: Update Three of a Kind (3 duplicates)
:white_check_mark: Update Four of a Kind (4 duplicates & also update Three of a Kind)
:white_check_mark: Otherwise, set score = 0

Issues:

  1. Some test cases fail.
  2. Debugging caused problems, and at one point, my event listeners & UI broke.

Any ideas on what’s wrong? :rocket:

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

const getHighestDuplicates = (arr) => {
  let counts = {};  
  let totalScore = 0;  

  arr.forEach(num => {
    counts[num] = (counts[num] || 0) + 1;  
    totalScore += num;  
  });

  const maxCount = Math.max(...Object.values(counts));

  if (maxCount >= 4) {
    updateRadioOption(1, `score = ${totalScore}`);
    updateRadioOption(0, `score = ${totalScore}`); 
  } else if (maxCount === 3) {
    updateRadioOption(0, `score = ${totalScore}`);
    updateRadioOption(2, `score = 0`);
  }
};

rollDiceBtn.addEventListener("click", () => {
  if (rolls === 3) {
    alert("You have made three rolls this round. Please select a score.");
  } else {
    rolls++;
    rollDice();
    updateStats();
    getHighestDuplicates(diceValuesArr);
  }
});

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Review Algorithmic Thinking by Building a Dice Game - Step 7

2

not “otherwise”, always activate the last radio

also did you test the app? the buttons appear like this:

image
image470×180 3.27 KB

which is not how they should appear

3

I haven’t played this type of game before, so I’m not entirely sure how it works :sweat_smile:. That would help me understand it better to implement it correctly.

I reviewed my code and made some changes. Here’s what I have so far:

const getHighestDuplicates = (arr) => {
  let counts = {};
  let totalScore = arr.reduce((sum, num) => {
    counts[num] = (counts[num] || 0) + 1;
    return sum + num;
  }, 0);

  const maxCount = Math.max(...Object.values(counts));

  updateRadioOption(3, 0); // Always set the last option to 0

  if (maxCount >= 4) {
    updateRadioOption(1, totalScore); // Four of a Kind
    updateRadioOption(0, totalScore); // Also updates Three of a Kind
    return;
  }

  if (maxCount === 3) {
    updateRadioOption(0, totalScore); // Three of a Kind
    return;
  }
};

rollDiceBtn.addEventListener("click", () => {
  if (rolls === 3) {
    alert("You have made three rolls this round. Please select a score.");
  } else {
    rolls++;
    rollDice();
    updateStats();
    getHighestDuplicates(diceValuesArr);
  }
});

The only issue I’m facing is this test failing:

// running tests
2. When the array has less than three of the same number, 
   your getHighestDuplicates function should update the final radio option with , score = 0.
// tests completed

If I try to set any option to , score = 0 or ${}, it breaks test cases 4, 5, and 6.

Any ideas on how to fix this without breaking the other tests?

4

are you sure of the number you are using for the last option? look at the app, try to roll the dice

you also implemented the rules earlier, you should be able to read them clicking the Show Rules button

1 Like
5

Thanks, brother! :sweat_smile: I was a bit confused and tried different approaches, but nothing seemed to work. To clear my mind, I took a short break to wounder around, and while going through the HTML file, I realized the issue—it was just the order! Changing it to updateRadioOption(5, 0); finally made it pass. :tada:

1 Like