mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-26 16:00:56 -04:00
fix(curriculum): dice game steps fix (#55666)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
@@ -9,13 +9,13 @@ dashedName: step-1
|
||||
|
||||
In this project, you will learn algorithmic thinking by building a dice game. There are a total of 6 rounds and for each round, the player can roll the dice up to 3 times and collect a score.
|
||||
|
||||
The HTML and CSS have been provided for you. Feel free to explore them. When you are ready, you will need to set up your HTML variables. Get all of your `.die` elements and assign them to a `listOfAllDice` variable. Get your score inputs (the `input` elements in your `#score-options`) and score spans, and assign them to `scoreInputs` and `scoreSpans`. Assign the `#current-round` element to `currentRound` and the `#current-round-rolls` element to `currentRoundRolls`, then do the same for your `#total-score` and `#score-history` elements. Assign your `#roll-dice-btn`, `#keep-score-btn`, `#rules-btn`, and `.rules-container` to variables with properly formatted names.
|
||||
The HTML and CSS have been provided for you. Feel free to explore them. When you are ready, you will need to set up your HTML variables. Get all of your `.die` elements and assign them to a `listOfAllDice` variable. Get your score inputs (the `input` elements in your `#score-options`) and score spans, and assign them to `scoreInputs` and `scoreSpans`. Assign the `#current-round` element to `roundElement` and the `#current-round-rolls` element to `rollsElement`, then do the same for your `#total-score` and `#score-history` elements. Assign your `#roll-dice-btn`, `#keep-score-btn`, `#rules-btn`, and `.rules-container` to variables with properly formatted names.
|
||||
|
||||
When the user clicks on the `Show rules` button, they should be able to toggle between showing and hiding the game rules. Create a variable `isModalShowing` to track the state of the game rules.
|
||||
|
||||
Each time the user rolls the dice, you will need to keep track of all of the dice values. Create a variable `diceValuesArr` to track this.
|
||||
|
||||
Throughout the game, you will need to keep track of the current score, total score, number of rolls and which round the player is on. Declare `rolls`, `score`, `total`, and `round` variables for this purpose.
|
||||
Throughout the game, you will need to keep track of the current score, total score, number of rolls and which round the player is on. Declare `rolls`, `score`, and `round` variables for this purpose.
|
||||
|
||||
Think about what the starting value of each of these variables should be. All of these variables should be able to be reassigned.
|
||||
|
||||
@@ -39,22 +39,22 @@ You should assign your `#score-options span` elements to `scoreSpans`.
|
||||
assert.deepEqual(scoreSpans, document.querySelectorAll("#score-options span"));
|
||||
```
|
||||
|
||||
You should assign your `#current-round` element to `currentRound`.
|
||||
You should assign your `#current-round` element to `roundElement`.
|
||||
|
||||
```js
|
||||
assert.deepInclude([document.getElementById("current-round"), document.querySelector("#current-round")], currentRound);
|
||||
assert.deepInclude([document.getElementById("current-round"), document.querySelector("#current-round")], roundElement);
|
||||
```
|
||||
|
||||
You should assign your `#current-round-rolls` element to `currentRoundRolls`.
|
||||
You should assign your `#current-round-rolls` element to `rollsElement`.
|
||||
|
||||
```js
|
||||
assert.deepInclude([document.getElementById("current-round-rolls"), document.querySelector("#current-round-rolls")], currentRoundRolls);
|
||||
assert.deepInclude([document.getElementById("current-round-rolls"), document.querySelector("#current-round-rolls")], rollsElement);
|
||||
```
|
||||
|
||||
You should assign your `#total-score` element to `totalScoreText`.
|
||||
You should assign your `#total-score` element to `totalScoreElement`.
|
||||
|
||||
```js
|
||||
assert.deepInclude([document.getElementById("total-score"), document.querySelector("#total-score")], totalScore);
|
||||
assert.deepInclude([document.getElementById("total-score"), document.querySelector("#total-score")], totalScoreElement);
|
||||
```
|
||||
|
||||
You should assign your `#score-history` element to `scoreHistory`.
|
||||
@@ -112,12 +112,6 @@ Your `score` variable should have the value `0`.
|
||||
assert.strictEqual(score, 0);
|
||||
```
|
||||
|
||||
Your `total` variable should have the value `0`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(total, 0);
|
||||
```
|
||||
|
||||
Your `round` variable should have the value `1`.
|
||||
|
||||
```js
|
||||
@@ -131,7 +125,6 @@ assert.match(code, /let isModalShowing/);
|
||||
assert.match(code, /let diceValuesArr/);
|
||||
assert.match(code, /let rolls/);
|
||||
assert.match(code, /let score/);
|
||||
assert.match(code, /let total/);
|
||||
assert.match(code, /let round/);
|
||||
```
|
||||
|
||||
|
||||
@@ -299,9 +299,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -311,7 +311,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
|
||||
@@ -290,9 +290,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -302,7 +302,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
@@ -277,9 +277,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -289,7 +289,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
|
||||
@@ -17,20 +17,20 @@ You should have a function called `updateStats`.
|
||||
assert.isFunction(updateStats);
|
||||
```
|
||||
|
||||
Your `updateStats` function should update the `currentRoundRolls` element with the correct value.
|
||||
Your `updateStats` function should update the `rollsElement` element with the correct value.
|
||||
|
||||
```js
|
||||
rolls = 2;
|
||||
updateStats();
|
||||
assert.strictEqual(currentRoundRolls.innerText, "2");
|
||||
assert.strictEqual(rollsElement.innerText, "2");
|
||||
```
|
||||
|
||||
Your `updateStats` function should update the `currentRound` element with the correct value.
|
||||
Your `updateStats` function should update the `roundElement` element with the correct value.
|
||||
|
||||
```js
|
||||
round = 5;
|
||||
updateStats();
|
||||
assert.strictEqual(currentRound.innerText, "5");
|
||||
assert.strictEqual(roundElement.innerText, "5");
|
||||
```
|
||||
|
||||
Rolling the dice should update the `rolls` correctly.
|
||||
@@ -38,7 +38,7 @@ Rolling the dice should update the `rolls` correctly.
|
||||
```js
|
||||
rolls = 0;
|
||||
rollDiceBtn.click();
|
||||
assert.strictEqual(currentRoundRolls.innerText, "1");
|
||||
assert.strictEqual(rollsElement.innerText, "1");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -283,9 +283,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -295,7 +295,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
|
||||
@@ -280,9 +280,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -292,7 +292,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -310,8 +309,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@@ -320,9 +320,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -332,7 +332,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -350,8 +349,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
|
||||
@@ -291,9 +291,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -303,7 +303,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -321,8 +320,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
|
||||
@@ -7,9 +7,11 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
When you roll the dice and make a selection, you are not able to keep the score you selected and move onto the next round. Create an `updateScore` function to add this functionality. Your function will need a parameter for the score option the user selected and the type of score they achieved.
|
||||
When you roll the dice and make a selection, you are not able to keep the score you selected and move onto the next round.
|
||||
|
||||
The function will need to add the value the user selected to the total score, update the total score text on the page, and add a new list item to the score history with the format `${achieved} : ${selectedValue}`.
|
||||
Create an `updateScore` function to add this functionality. Your function will need two parameters for the user selected score option. The first parameter will be passed the `value` of the radio button, remember this is a string, and the second parameter will be passed the `id` value of the radio button, which is the type of score they achieved.
|
||||
|
||||
The function will need to add the user selected value to the score, update the total score text on the page, and add a new `li` element to the score history `ul` element, using the format `${achieved} : ${selectedValue}` for the `li` element content.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -19,6 +21,14 @@ You should have a `updateScore` function.
|
||||
assert.isFunction(updateScore);
|
||||
```
|
||||
|
||||
Your `updateScore` function should convert string value to integer and add the value to the total score.
|
||||
|
||||
```js
|
||||
score = 0;
|
||||
updateScore("10", "hi");
|
||||
assert.strictEqual(score, 10);
|
||||
```
|
||||
|
||||
Your `updateScore` function should add the value of the first parameter to the total score.
|
||||
|
||||
```js
|
||||
@@ -27,12 +37,12 @@ updateScore(10, "hi");
|
||||
assert.strictEqual(score, 10);
|
||||
```
|
||||
|
||||
Your `updateScore` function should update the text of the `totalScore` element.
|
||||
Your `updateScore` function should update the text of the `totalScoreElement` element.
|
||||
|
||||
```js
|
||||
score = 0;
|
||||
updateScore(10, "hi");
|
||||
assert.strictEqual(totalScore.innerText, "10");
|
||||
assert.strictEqual(totalScoreElement.innerText, "10");
|
||||
```
|
||||
|
||||
Your `updateScore` function should add a new list item to the `scoreHistory` element.
|
||||
@@ -293,9 +303,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -305,7 +315,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -323,8 +332,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
|
||||
@@ -15,14 +15,14 @@ If the user has not selected an option, display an alert informing them to do so
|
||||
|
||||
# --hints--
|
||||
|
||||
When your `keepScoreBtn` is clicked, the score should be updated in the `totalScore` text.
|
||||
When your `keepScoreBtn` is clicked, the score should be updated in the `totalScoreElement` text.
|
||||
|
||||
```js
|
||||
scoreInputs[0].checked = true;
|
||||
scoreInputs[0].value = "10";
|
||||
score = 10;
|
||||
keepScoreBtn.click();
|
||||
assert.strictEqual(totalScore.innerText, "20");
|
||||
assert.strictEqual(totalScoreElement.innerText, "20");
|
||||
```
|
||||
|
||||
When your `keepScoreBtn` is clicked, the radio options should be reset.
|
||||
@@ -305,9 +305,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -317,7 +317,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -335,8 +334,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
@@ -347,7 +346,7 @@ const updateRadioOption = (index, score) => {
|
||||
|
||||
const updateScore = (selectedValue, achieved) => {
|
||||
score += parseInt(selectedValue);
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
|
||||
scoreHistory.innerHTML += `<li>${achieved} : ${selectedValue}</li>`;
|
||||
};
|
||||
|
||||
@@ -278,9 +278,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -290,7 +290,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -308,8 +307,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
@@ -320,7 +319,7 @@ const updateRadioOption = (index, score) => {
|
||||
|
||||
const updateScore = (selectedValue, achieved) => {
|
||||
score += parseInt(selectedValue);
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
|
||||
scoreHistory.innerHTML += `<li>${achieved} : ${selectedValue}</li>`;
|
||||
};
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-12
|
||||
|
||||
If you go through six rounds of the game, you should see the `alert` show up with your final score. But when you dismiss the `alert`, you are able to keep playing for more rounds past the original six. To fix this, you will need to reset the game.
|
||||
|
||||
Declare a `resetGame` function to do so. Reset all of the `listOfAllDice` elements to display `0`, update `score` and `rolls` to be `0`, update `round` to be `1`, set the `totalScore` text to the user's total score, clear the score history by setting it to an empty string, set the `currentRoundRolls` text to the number of rolls, and set the `currentRound` text to the current round. Finally, reset all of the radio buttons to their initial states.
|
||||
Declare a `resetGame` function to do so. Reset all of the `listOfAllDice` elements to display `0`, update `score` and `rolls` to be `0`, update `round` to be `1`, set the `totalScoreElement` text to the user's total score, clear the score history by setting it to an empty string, set the `rollsElement` text to the number of rolls, and set the `roundElement` text to the current round. Finally, reset all of the radio buttons to their initial states.
|
||||
|
||||
Call this function after displaying the `alert` with the final score.
|
||||
|
||||
@@ -43,20 +43,20 @@ for (const element of listOfAllDice) {
|
||||
}
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the text of the `totalScore` element to the current `score`.
|
||||
Your `resetGame` function should set the text of the `totalScoreElement` element to the current `score`.
|
||||
|
||||
```js
|
||||
score = 100;
|
||||
resetGame();
|
||||
assert.strictEqual(totalScore.innerText, "0");
|
||||
assert.strictEqual(totalScoreElement.innerText, "0");
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the text of the `currentRound` element to the current `round`.
|
||||
Your `resetGame` function should set the text of the `roundElement` element to the current `round`.
|
||||
|
||||
```js
|
||||
round = 100;
|
||||
resetGame();
|
||||
assert.strictEqual(currentRound.innerText, "1");
|
||||
assert.strictEqual(roundElement.innerText, "1");
|
||||
```
|
||||
|
||||
Your `resetGame` function should set all of the radio buttons to be unchecked and disabled.
|
||||
@@ -342,9 +342,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -354,7 +354,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -372,8 +371,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
@@ -384,7 +383,7 @@ const updateRadioOption = (index, score) => {
|
||||
|
||||
const updateScore = (selectedValue, achieved) => {
|
||||
score += parseInt(selectedValue);
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
|
||||
scoreHistory.innerHTML += `<li>${achieved} : ${selectedValue}</li>`;
|
||||
};
|
||||
|
||||
@@ -307,9 +307,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -319,7 +319,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -337,8 +336,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
@@ -349,7 +348,7 @@ const updateRadioOption = (index, score) => {
|
||||
|
||||
const updateScore = (selectedValue, achieved) => {
|
||||
score += parseInt(selectedValue);
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
|
||||
scoreHistory.innerHTML += `<li>${achieved} : ${selectedValue}</li>`;
|
||||
};
|
||||
@@ -414,11 +413,11 @@ const resetGame = () => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
scoreHistory.innerHTML = "";
|
||||
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
|
||||
resetRadioOptions();
|
||||
};
|
||||
|
||||
@@ -307,9 +307,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -319,7 +319,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -337,8 +336,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
@@ -349,7 +348,7 @@ const updateRadioOption = (index, score) => {
|
||||
|
||||
const updateScore = (selectedValue, achieved) => {
|
||||
score += parseInt(selectedValue);
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
|
||||
scoreHistory.innerHTML += `<li>${achieved} : ${selectedValue}</li>`;
|
||||
};
|
||||
@@ -428,11 +427,11 @@ const resetGame = () => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
scoreHistory.innerHTML = "";
|
||||
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
|
||||
resetRadioOptions();
|
||||
};
|
||||
@@ -737,9 +736,9 @@ input[type="radio"]:disabled + label {
|
||||
const listOfAllDice = document.querySelectorAll(".die");
|
||||
const scoreInputs = document.querySelectorAll("#score-options input");
|
||||
const scoreSpans = document.querySelectorAll("#score-options span");
|
||||
const currentRound = document.getElementById("current-round");
|
||||
const currentRoundRolls = document.getElementById("current-round-rolls");
|
||||
const totalScore = document.getElementById("total-score");
|
||||
const roundElement = document.getElementById("current-round");
|
||||
const rollsElement = document.getElementById("current-round-rolls");
|
||||
const totalScoreElement = document.getElementById("total-score");
|
||||
const scoreHistory = document.getElementById("score-history");
|
||||
const rollDiceBtn = document.getElementById("roll-dice-btn");
|
||||
const keepScoreBtn = document.getElementById("keep-score-btn");
|
||||
@@ -749,7 +748,6 @@ const rulesBtn = document.getElementById("rules-btn");
|
||||
let diceValuesArr = [];
|
||||
let isModalShowing = false;
|
||||
let score = 0;
|
||||
let total = 0;
|
||||
let round = 1;
|
||||
let rolls = 0;
|
||||
|
||||
@@ -767,8 +765,8 @@ const rollDice = () => {
|
||||
};
|
||||
|
||||
const updateStats = () => {
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
};
|
||||
|
||||
const updateRadioOption = (index, score) => {
|
||||
@@ -779,7 +777,7 @@ const updateRadioOption = (index, score) => {
|
||||
|
||||
const updateScore = (selectedValue, achieved) => {
|
||||
score += parseInt(selectedValue);
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
|
||||
scoreHistory.innerHTML += `<li>${achieved} : ${selectedValue}</li>`;
|
||||
};
|
||||
@@ -877,11 +875,11 @@ const resetGame = () => {
|
||||
dice.textContent = diceValuesArr[index];
|
||||
});
|
||||
|
||||
totalScore.textContent = score;
|
||||
totalScoreElement.textContent = score;
|
||||
scoreHistory.innerHTML = "";
|
||||
|
||||
currentRoundRolls.textContent = rolls;
|
||||
currentRound.textContent = round;
|
||||
rollsElement.textContent = rolls;
|
||||
roundElement.textContent = round;
|
||||
|
||||
resetRadioOptions();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user