Ready JavaScript Curriculum

challenges/basic-javascript.json

@@ -1069,6 +1069,152 @@
         "})();(function(){return(test);})();"
       ],
       "challengeType": 1
+    },
+    {
+      "id":"cf1111c1c12feddfaeb9bdef",
+      "name":"Creating a slots machine",
+      "dashedName":"creating-a-slots-machine",
+      "difficulty":"9.987",
+      "description":[
+        "",
+        "We are now going to try and combine some of the stuff we've just learnt abd create the logic for a slot machine game",
+        "For this we will need to generate three random numbers between <code>1</code> and <code>5</code> to represent the possible values of each individual slot",
+        "Store the three random numbers in <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code>",
+        "Generate the random numbers by using the system we used earlier in /challenges/random-whole-numbers-in-a-range",
+        "<code> Math.floor(Math.random() * (5 - 1 + 1)) + 1; </code>"
+      ],
+      "tests":[
+        "assert(typeof(runSlots($(''))[0]) == 'number', 'SlotOne should be a random number');",
+        "assert(typeof(runSlots($(''))[1]) == 'number', 'SlotTwo should be a random number');",
+        "assert(typeof(runSlots($(''))[2]) == 'number', 'SlotThree should be a random number');",
+        "assert(editor.getValue().match(/Math.floor\\(Math.random\\(\\) \\* \\(5 \\- 1 \\+ 1\\)\\) \\+ 1/g).length === 3);"
+      ],
+      "challengeSeed":[
+        "fccss",
+        "  function runSlots(slots){",
+        "   var slotOne;",
+        "   var slotTwo;",
+        "   var slotThree;",
+        "   ",
+        "   /*Don't modify above here*/",
+        "   ",
+        "   ",
+        "   ",
+        "   /*Don't modify below here*/",
+        "   ",
+        "   if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
+        "     $('.logger').html(slotOne + ' ' + slotTwo + ' ' + slotThree);",
+        "   }",
+        "   return([slotOne, slotTwo, slotThree]);",
+        "  }",
+        "",
+        "  $(document).ready(function(){",
+        "     var slots = $('.slot');",
+        "   ",
+        "     $('.go').click(function(){",
+        "       runSlots(slots);",
+        "     });",
+        "   });",
+        "fcces",
+        " ",
+        "<div>",
+        " <div class = 'container inset'>",
+        "   <div class = 'header inset'>",
+        "     <h2>FCC Slot Machine</h2>",
+        "   </div>",
+        "   <div class = 'slots inset'>",
+        "     <div class = 'slot inset'>",
+        "       ",
+        "     </div>",
+        "     <div class = 'slot inset'>",
+        "       ",
+        "     </div>",
+        "     <div class = 'slot inset'>",
+        "       ",
+        "     </div>",
+        "   </div>",
+        "   <br/>",
+        "   <div class = 'outset'>",
+        "     <button class = 'go inset'>",
+        "       Go",
+        "     </button>",
+        "   </div>",
+        "   <br/>",
+        "   <div class = 'foot inset'>",
+        "     <span class = 'logger'></span>",
+        "   </div>",
+        " </div>",
+        "</div>",
+    "",
+    "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
+    "",
+    "<style>",
+    " .container {",
+    "   background-color: darkred;",
+    "   height: 400px;",
+    "   width: 260px;",
+    "   margin: 50px auto;",
+    "   border-radius: 4px;",
+    " }",
+    " .header {",
+    "   border: 2px solid gold;",
+    "   border-radius: 4px;",
+    "   height: 50px;",
+    "   margin: 14px auto;",
+    " }",
+    " .header h2 {",
+    "   font-size: 24px;",
+    "   margin: 10px 30px;",
+    "   padding: 0;",
+    "   font-family: lobster;",
+    "   color: gold;",
+    " }",
+    " .slots{",
+    "   display: flex;",
+    "   background-color: rgb(90, 1, 1);",
+    "   border-radius: 6px;",
+    " }",
+    " .slot{",
+    "   flex: 1 0 auto;",
+    "   background: white;",
+    "   height: 75px;",
+    "   margin: 8px;",
+    "   border: 2px solid brown;",
+    "   border-radius: 4px;",
+    " }",
+    " .go {",
+    "   width: 100%;",
+    "   color: gold;",
+    "   background-color: rgb(90, 1, 1);",
+    "   border: 2px solid gold;",
+    "   border-radius: 2px;",
+    "   box-sizing: none;",
+    "   outline: none!important;",
+    " }",
+    " .foot {",
+    "   height: 150px;",
+    "   background-color: rgb(90,1,1);",
+    " }",
+    " ",
+    " .logger {",
+    "   color: white;",
+    "   margin: 10px;",
+    " }",
+    " ",
+    " .outset {",
+    "   -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
+    "   -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
+    "     box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
+    " }",
+    " ",
+    " .inset {",
+    "   -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
+    "   -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
+    "   box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
+    " }",
+    "</style>"
+  ],
+      "challengeType": 0
     }
   ]
 }