fix(learn): consolidate comments for responsive web design cert (#38256)

Related to PR #38040

This PR is an attempt to consolidate/remove as many comments in the challenge seed code in the Responsive Web Design certification challenges, to be able to create a small translation lookup object for translating the English comments to other languages.

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md

@@ -60,11 +60,11 @@ tests:
         <p>Tell us the best date for the competition</p>
         <label for="pickdate">Preferred Date:</label>
 
-        <!-- Add your code below this line -->
+        <!-- Only change code below this line -->
 
 
 
-        <!-- Add your code above this line -->
+        <!-- Only change code above this line -->
 
         <input type="submit" name="submit" value="Submit">
       </form>

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md

@@ -71,13 +71,13 @@ tests:
   <main>
     <section>
 
-      <!-- Add your code below this line -->
+      <!-- Only change code below this line -->
       <div>
         <!-- Stacked bar chart will go here -->
         <br>
         <p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
       </div>
-      <!-- Add your code above this line -->
+      <!-- Only change code above this line -->
 
     </section>
     <section id="stealth">
@@ -123,15 +123,11 @@ tests:
   </header>
   <main>
     <section>
-
-      <!-- Add your code below this line -->
       <figure>
         <!-- Stacked bar chart will go here -->
         <br>
         <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
       </figure>
-      <!-- Add your code above this line -->
-
     </section>
     <section id="stealth">
       <h2>Stealth &amp; Agility Training</h2>

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md

@@ -85,7 +85,7 @@ tests:
   <section>
     <h2>Master Camper Cat's Beginner Three Week Training Program</h2>
     <figure>
-      <!-- Stacked bar chart of weekly training-->
+      <!-- Stacked bar chart of weekly training -->
       <p>[Stacked bar chart]</p>
       <br />
       <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
@@ -181,7 +181,7 @@ tests:
   <section>
     <h2>Master Camper Cat's Beginner Three Week Training Program</h2>
     <figure>
-      <!-- Stacked bar chart of weekly training-->
+      <!-- Stacked bar chart of weekly training -->
       <p>[Stacked bar chart]</p>
       <br />
       <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.english.md

@@ -48,11 +48,11 @@ tests:
   <article>
     <h2>Mortal Kombat Tournament Survey Results</h2>
 
-    <!-- Add your code below this line -->
+    <!-- Only change code below this line -->
 
     <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
 
-    <!-- Add your code above this line -->
+    <!-- Only change code above this line -->
 
     <section>
       <h3>Comments:</h3>
@@ -101,13 +101,9 @@ const datetimeAttr = $(timeElement).attr("datetime");
   </header>
   <article>
     <h2>Mortal Kombat Tournament Survey Results</h2>
-    
+
-    <!-- Add your code below this line -->
-    
     <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
-    
+
-    <!-- Add your code above this line -->
-    
     <section>
       <h3>Comments:</h3>
       <article>

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md

@@ -71,7 +71,7 @@ tests:
       <input type="text" id="email" name="email">
 
 
-      <!-- Add your code below this line -->
+      <!-- Only change code below this line -->
       <div>
         <p>What level ninja are you?</p>
         <input id="newbie" type="radio" name="levels" value="newbie">
@@ -81,7 +81,7 @@ tests:
         <input id="master" type="radio" name="levels" value="master">
         <label for="master">Master</label>
       </div>
-      <!-- Add your code above this line -->
+      <!-- Only change code above this line -->
 
 
       <input type="submit" name="submit" value="Submit">
@@ -125,8 +125,6 @@ tests:
       <label for="email">Email:</label>
       <input type="text" id="email" name="email">
 
-
-      <!-- Add your code below this line -->
       <fieldset>
         <legend>What level ninja are you?</legend>
         <input id="newbie" type="radio" name="levels" value="newbie">
@@ -136,8 +134,6 @@ tests:
         <input id="master" type="radio" name="levels" value="master">
         <label for="master">Master</label>
       </fieldset>
-      <!-- Add your code above this line -->
-
 
       <input type="submit" name="submit" value="Submit">
     </form>

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md

@@ -46,9 +46,9 @@ tests:
   button:hover {
     animation-name: background-color;
     animation-duration: 500ms;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-    /* add your code above this line */
+    /* Only change code above this line */
   }
   @keyframes background-color {
     100% {

curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md

@@ -62,9 +62,9 @@ tests:
     top: 10%;
     left: 25%;
 
-    /* change code below */
+    /* Change code below this line */
     background: var(--pengiun-skin);
-    /* change code above */
+    /* Change code above this line */
 
     width: 50%;
     height: 45%;
@@ -75,9 +75,9 @@ tests:
     top: 40%;
     left: 23.5%;
 
-    /* change code below */
+    /* Change code below this line */
     background: var(--pengiun-skin);
-    /* change code above */
+    /* Change code above this line */
 
     width: 53%;
     height: 45%;

curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.english.md

@@ -47,11 +47,9 @@ tests:
   }
 
   .penguin {
+    /* Only change code below this line */
 
-    /* add code below */
+    /* Only change code above this line */
-
-    /* add code above */
-
     position: relative;
     margin: auto;
     display: block;

curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md

@@ -43,10 +43,9 @@ tests:
 ```html
 <style>
   .penguin {
+    /* Only change code below this line */
 
-    /* add code below */
+    /* Only change code above this line */
-
-    /* add code above */
     position: relative;
     margin: auto;
     display: block;

curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md

@@ -38,10 +38,9 @@ tests:
 ```html
 <style>
   :root {
+    /* Only change code below this line */
 
-    /* add code below */
+    /* Only change code above this line */
-
-    /* add code above */
   }
 
   body {

curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md

@@ -62,9 +62,9 @@ tests:
     top: 10%;
     left: 25%;
 
-    /* change code below */
+    /* Change code below this line */
     background: black;
-    /* change code above */
+    /* Change code above this line */
 
     width: 50%;
     height: 45%;
@@ -75,9 +75,9 @@ tests:
     top: 40%;
     left: 23.5%;
 
-    /* change code below */
+    /* Change code below this line */
     background: black;
-    /* change code above */
+    /* Change code above this line */
 
     width: 53%;
     height: 45%;
@@ -88,9 +88,9 @@ tests:
     top: 0%;
     left: -5%;
 
-    /* change code below */
+    /* Change code below this line */
     background: black;
-    /* change code above */
+    /* Change code above this line */
 
     width: 30%;
     height: 60%;
@@ -103,9 +103,9 @@ tests:
     top: 0%;
     left: 75%;
 
-    /* change code below */
+    /* Change code below this line */
     background: black;
-    /* change code above */
+    /* Change code above this line */
 
     width: 30%;
     height: 60%;

curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.english.md

@@ -47,11 +47,9 @@ tests:
 
   @media (max-width: 350px) {
     :root {
+      /* Only change code below this line */
 
-      /* add code below */
+      /* Only change code above this line */
-
-      /* add code above */
-
     }
   }
 

curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.english.md

@@ -42,11 +42,11 @@ tests:
 <style>
   .penguin {
 
-    /* change code below */
+    /* Only change code below this line */
     --penguin-skin: black;
     --penguin-belly: gray;
     --penguin-beak: yellow;
-    /* change code above */
+    /* Only change code above this line */
 
     position: relative;
     margin: auto;

curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md

@@ -56,10 +56,10 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 </style>
 

curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md

@@ -49,10 +49,10 @@ tests:
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 </style>
 <div class="container">

curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md

@@ -47,10 +47,10 @@ tests:
     background: LightGray;
     display: grid;
     grid-template-columns: 100px 100px 100px;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 </style>
 

curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md

@@ -50,10 +50,10 @@ tests:
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 </style>
 

curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md

@@ -50,10 +50,10 @@ tests:
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 </style>
 

curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md

@@ -42,10 +42,10 @@ tests:
 
   .item2 {
     background: LightSalmon;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 
   .item3{background:PaleTurquoise;}

curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md

@@ -40,10 +40,10 @@ tests:
 
   .item3 {
     background: PaleTurquoise;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 
   .item4{background:LightPink;}

curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md

@@ -55,10 +55,10 @@ tests:
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+   
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 </style>
 

curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md

@@ -49,10 +49,10 @@ tests:
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 </style>
 

curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md

@@ -54,11 +54,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: repeat(3, minmax(60px, 1fr));
 
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }
@@ -114,11 +114,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
     
     grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
     
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }

curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md

@@ -59,11 +59,11 @@ tests:
     width: 100%;
     background: Silver;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: repeat(3, minmax(60px, 1fr));
 
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }

curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md

@@ -65,10 +65,10 @@ tests:
   .item3 {
     background: PaleTurquoise;
     grid-area: content;
-    /* enter your code below this line */
+    /* Only change code below this line */
 
 
-    /* enter your code above this line */
+    /* Only change code above this line */
   }
 
   .item4 {

curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md

@@ -46,10 +46,10 @@ tests:
     font-size: 40px;
     width: 100%;
     background: LightGray;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 </style>
 

curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md

@@ -61,13 +61,12 @@ tests:
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
-    /* change code below this line */
-
     grid-template-areas:
+    /* Only change code below this line */
       "header header header"
       "advert content content"
       "footer footer footer";
-    /* change code above this line */
+    /* Only change code above this line */
   }
 </style>
 

curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md

@@ -53,11 +53,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: repeat(3, 1fr);
 
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }

curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md

@@ -50,10 +50,10 @@ tests:
 
   .item5 {
     background: PaleGreen;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 
   .container {

curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md

@@ -67,11 +67,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: 1fr 1fr 1fr;
 
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }

curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md

@@ -56,11 +56,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* modify the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: auto 50px 10% 2fr 1fr;
 
-    /* modify the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 50px 50px;
   }
 </style>

curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md

@@ -54,10 +54,10 @@ tests:
 
   .item5 {
     background: PaleGreen;
-    /* add your code below this line */
+    /* Only change code below this line */
 
 
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 
   .container {

curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md

@@ -61,10 +61,10 @@ tests:
 
   .item5 {
     background: PaleGreen;
-    /* add your code below this line */
+    /* Only change code below this line */
 
 
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 
   .container {

curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md

@@ -51,10 +51,9 @@ tests:
   .item5 {
     background: PaleGreen;
     grid-column: 2 / 4;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
+    /* Only change code above this line */
-    /* add your code above this line */
   }
 
   .container {
@@ -98,9 +97,7 @@ tests:
   .item5 {
     background: PaleGreen;
     grid-column: 2 / 4;
-    /* add your code below this line */
     grid-row: 2 / 4;
-    /* add your code above this line */
   }
 
   .container {

curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md

@@ -85,14 +85,12 @@ tests:
 
   @media (min-width: 400px){
     .container{
-      /* change the code below this line */
-
       grid-template-areas:
+      /* Only change code below this line */
         "advert header"
         "advert content"
         "advert footer";
-
+      /* Only change code above this line */
-    /* change the code above this line */
     }
   }
 </style>
@@ -165,14 +163,10 @@ tests:
 
   @media (min-width: 400px){
     .container{
-      /* change the code below this line */
-
       grid-template-areas:
         "header header"
         "advert content"
         "footer footer";
-
-    /* change the code above this line */
     }
   }
 </style>

curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md

@@ -48,7 +48,9 @@ tests:
     font-size: 20px;
   }
 
-  /* Add media query below */
+  /* Only change code below this line */
+
+  /* Only change code above this line */
 </style>
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>

curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md

@@ -56,9 +56,10 @@ tests:
   .bar {
     width: 25px;
     height: 100px;
-    /* Add your code below this line */
+    /* Only change code below this line */
 
-    /* Add your code above this line */
+    
+    /* Only change code above this line */
     display: inline-block;
     background-color: blue;
   }
@@ -72,10 +73,7 @@ tests:
       .enter()
       .append("div")
       .attr("class", "bar")
-      // Add your code below this line
       .style("height", (d) => (d + "px"))
-
-      // Add your code above this line
   </script>
 </body>
 ```
@@ -94,9 +92,7 @@ tests:
   .bar {
     width: 25px;
     height: 100px;
-    /* Add your code below this line */
     margin: 2px;
-    /* Add your code above this line */
     display: inline-block;
     background-color: blue;
   }