rename gameplayDIv to gameplayRulesDiv #21

This improves human readability an avoids confusion about what that `div`'s purpose is

assets/css/style.css

@@ -42,7 +42,7 @@ padding: 2rem;
   padding: 2rem;
 }
 
-#gameplay-div {
+#gameplay-rules-div {
   display: flex;
   flex-direction: column;
   flex-direction: column;

assets/js/script.js

@@ -6,31 +6,39 @@ let streak = 0;
 
 // constants (HTML elements)
 
+// Welcome screen
 // the welcome screen `div`
 const welcomeDiv = document.getElementById('welcome-div');
 // the `div` where the gameplay rules are displayed
-const gameplayDiv = document.getElementById('gameplay-div');
+const gameplayRulesDiv = document.getElementById('gameplay-rules-div');
 // Start Game button
 const startGameButton = document.getElementById('start-game-button')
 // the button for showing the score `div`
 const scoreButton = document.getElementById('score-button')
 // the `div` where the scoring rules are displayed
 const scoreDiv = document.getElementById('score-div');
+// the button for showing the gameplay `div`
+const gameplayRulesButton = document.getElementById('gameplay-rules-button')
 // the `div` where the solution/congratulation text is displayed
+
+// Gameplay
 const solutionDiv = document.getElementById('solution');
 // the Check Answer/Submit button
 const submitButton = document.getElementById('submit-button')
 // the New Game button
 const newGameButton = document.getElementById('new-game-button')
 // the streak counter from the bottom of the page
- const streakCounter = document.getElementById('streak-counter');
+const streakCounter = document.getElementById('streak-counter');
 
 
 // event listeners
 
-// when the link is clicked, the `scoreDiv` should replace `gameplayDiv` on the screen
+// when the button is clicked, the `scoreDiv` should replace `gameplayRulesDiv` on the screen
 scoreButton.addEventListener('click',showScoreDiv);
 
+// when the button is clicked, the `gameplayRulesDiv` should replace `scoreDiv` on the screen
+gameplayRulesButton.addEventListener('click',showGameplayRulesDiv);
+
 // hide the Welcome screen
 startGameButton.addEventListener('click',startGame);
 
@@ -57,14 +65,23 @@ operatorSelector.addEventListener('change',setOperandOperatorCount);
 //functions
 
 /**
- * Hide the `gameplayDiv` and show the the `scoreDiv`
+ * Hide the `gameplayRulesDiv` and show the the `scoreDiv`
  */
 function showScoreDiv() {
-  gameplayDiv.style.display = 'none';
+  gameplayRulesDiv.style.display = 'none';
   scoreDiv.style.display = 'flex';
   scoreDiv.style.flexDirection = 'column';
 }
 
+/**
+ * Hide the `scoreDiv` and show the the `gameplayRulesDiv`
+ */
+function showGameplayRulesDiv() {
+  scoreDiv.style.display = 'none';
+  gameplayRulesDiv.style.display = 'flex';
+  gameplayRulesDiv.style.flexDirection = 'column';
+}
+
 /**
  * Hide the `welcomeDiv`
  */

index.html

@@ -17,7 +17,7 @@
   <!-- the Welcome screen explaining the gameplay and the scoring rules -->
   <div id="welcome-div">
     <!-- the div explaining the gameplay -->
-    <div id="gameplay-div">
+    <div id="gameplay-rules-div">
       <p>
         With this game, you can practice the <a href="https://en.wikipedia.org/wiki/Order_of_operations">mathematical order of operations</a>.
         You will be shown some numbers from 1 to 10, and you will have to select the correct operators to get the equation to work out.
@@ -48,6 +48,8 @@
       <p>
         Duis vel orci in eros blandit congue vitae a sem. Mauris elementum est id sollicitudin pretium. Donec viverra mi nulla, vel vulputate enim dictum sed. 
       </p>
+
+      <button data-type="submit" id="gameplay-rules-button">See how gameplay works</button>
 
     </div>
     <!-- the Start Game button -->