Merge pull request #44 from Code4Community/PossibleUIUpdate

Possible UI update
Code4Community · Sep 9, 2024 · 1554009 · 1554009
2 parents d44890e + 475935c
commit 1554009
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -41,8 +41,7 @@
 
         <div id="Instructions">
           <div class="text-center">
-            <p><b> Goal: </b> You are the robber. You're job is to STEAL the jewel</p>
-            <p><b> Instructions: </b> Use the code box to code movements left, right, up and down to move your robber.</p>                
+
             <button id="respawn" type="button" class="btn btn-danger">Respawn</button>
             &nbsp;
             <button id="nextLevel" type="button" class="btn btn-success">Next Level</button>
@@ -62,5 +61,25 @@
           <div id="game" class="w-100"></div>
           <div id="mytest" class = "w-100"></div>
         </div>
+        <div id="Instructions">
+          <div class="text-center">
+            <div style="display: flex;">
+              <div style="flex: 1;">
+                <h3 style="padding: 0px; margin: 0px;"><b>Instructions:</b></h3>
+                  <div style="background-color: lightgrey; margin-bottom: 10px; margin-left: 10px; border-radius: 10px; padding: 5px;">
+                      <p style="padding-top: 0px;">Use the code box to code movements left, right, up, and down to move your robber and steal the jewel!</p>
+                      <p>Type <b>'moveRight()'</b> to move to the right, <b>'moveLeft()'</b> to move to the left, <b>'moveDown()'</b> to move down, and <b>'moveUp()'</b> to move up.</p>
+                  </div>
+              </div>
+              <div style="flex: 1;">
+                <h3 style="padding: 0px; margin: 0px;"><b> Tips:</b></h3>
+                  <div style="background-color: lightgrey; margin-left: 10px; margin-right: 10px; border-radius: 10px; padding: 5px; ">
+                      <p style="padding-top: 10px;"><b>Tip:</b> Use loops to decrease the amount of code you have to write!</p>
+                      <p>Use loop syntax: [#times ... end] with # being a number.</p>
+                      <p><b>Tip:</b> Click 'Toggle Arrow Keys' to be able to use your arrow keys.</p>
+                    </div>
+              </div>
+          </div>  
       </body>
+
 </html>