Merge branch 'staging' into jquery

Conflicts:
	seed/challenges/basic-javascript.json
	seed/challenges/object-oriented-and-functional-programming.json

seed/challenges/basic-javascript.json

@@ -457,8 +457,7 @@
         "Once an array has been created we can access the data we have stored in them using indexes",
         "Indexes are written in the same way as bracket notation that we covered earlier",
         "Example:",
-        "<code>",
-        "var array = [1,2,3];",
+        "<code>var array = [1,2,3];",
         "array[0];//equals 1",
         "var data = array[1];",
         "</code>",
@@ -1387,7 +1386,7 @@
         "Now we can detect a win let's get the slot machine to look like it works",
         "We're going to use the jQuery selector <code>$(\".slot\")</code> to select all of the slots",
         "Once they are all selected we can use bracket notation to access each individual one like this",
-        "<code>$($(\".slot\")[0])</code>",
+        "<code>$($(\".slot\")[0]).html(\"\")</code>",
         "This will grab the the first slot so that we can add the numbers we generate to them",
         "Use the above selector to display each number in the corresponding slot"
       ],
@@ -1545,6 +1544,176 @@
       ],
       "type": "waypoint",
       "challengeType": 0
+    },
+    {
+      "id":"cf1111c1c11feddfaeb1bdff",
+      "title": "Give your JavaScript Slot Machine some stylish images",
+      "difficulty":"9.9901",
+      "description":[
+        "Now that we can detect when the player wins we are going to add an image to each slot depending on the random values we generate",
+        "<code>$($('.slot')[0]).html('&lt;img src = \"' + images[slotOne-1] + '\"&gt;');<code>"
+      ],
+      "tests":[
+        "assert(editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\);/gi) && editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\);/gi).length >= 3, 'Use the provided code three times. One for each slot');",
+        "assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the slotOne value at least once');",
+        "assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >=8, 'You should have used the slotTwo value at least once');",
+        "assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the slotThree value at least once');"
+      ],
+      "challengeSeed":[
+      "fccss",
+      "  function runSlots(){",
+      "   var slotOne;",
+      "   var slotTwo;",
+      "   var slotThree;",
+      "   ",
+      "   //Placeholder",
+      "   var images = ['https://www.evernote.com/l/AlxaOC8QrXlBjpTdGMe3mBwLN3Yjm-KB5yQB/image.png','https://www.evernote.com/l/AlyXbeIS8axEspbwXD8RzmsaCUIf10snmzgB/image.png','https://www.evernote.com/l/AlxMveeWtopKaajUmTVrnv92mqA_s2uzW-8B/image.png','https://www.evernote.com/l/AlyyRP_Kh_dCG7t8b4JRnwMNCa1JThI_5gQB/image.png', 'https://www.evernote.com/l/Alx64952qUxEhJnBteZvJgxib1qlwQcw9G0B/image.png'];",
+      "   ",
+      "   slotOne = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
+      "   slotTwo = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
+      "   slotThree = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
+      "   ",
+      "   $('.logger').html('');",
+      "   $('.logger').html('Not A Win')",
+      "   ",
+      "   /*Don't modify above here*/",
+      "   ",
+      "   ",
+      "   ",
+      "   /*Don't modify below here*/",
+      "   ",
+      "   if(slotOne != slotTwo || slotTwo != slotThree){",
+      "     return(null);",
+      "   }",
+      "   ",
+      "   if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
+      "     $('.logger').html(slotOne);",
+      "     $('.logger').append(' ' + slotTwo);",
+      "     $('.logger').append(' ' + slotThree);",
+      "   }",
+      "   ",
+      "   return([slotOne, slotTwo, slotThree]);",
+      "  }",
+      "",
+      "  $(document).ready(function(){",
+      "     $('.go').click(function(){",
+      "       runSlots();",
+      "     });",
+      "   });",
+      "fcces",
+      " ",
+      "<div>",
+      " <div class = 'container inset'>",
+      "   <div class = 'header inset'>",
+      "     <img src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz' alt='learn to code javascript at Free Code Camp logo' class='img-responsive nav-logo'>",
+      "     <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>",
+      "",
+      "<style>",
+      " .slot > img {",
+      "  margin: 0!important;",
+      "  height: 71px;",
+      "  width: 50px;",
+      " }",
+      " .container {",
+      "   background-color: #4a2b0f;",
+      "   height: 400px;",
+      "   width: 260px;",
+      "   margin: 50px auto;",
+      "   border-radius: 4px;",
+      " }",
+      " .header {",
+      "   border: 2px solid #fff;",
+      "   border-radius: 4px;",
+      "   height: 55px;",
+      "   margin: 14px auto;",
+      "   background-color: #457f86",
+      " }",
+      " .header h2 {",
+      "   height: 30px;",
+      "   margin: auto;",
+      " }",
+      " .header h2 {",
+      "   font-size: 14px;",
+      "   margin: 0 0;",
+      "   padding: 0;",
+      "   color: #fff;",
+      "   text-align: center;",
+      " }",
+      " .slots{",
+      "   display: flex;",
+      "   background-color: #457f86;",
+      "   border-radius: 6px;",
+      "   border: 2px solid #fff;",
+      " }",
+      " .slot{",
+      "   flex: 1 0 auto;",
+      "   background: white;",
+      "   height: 75px;",
+      "   width: 50px;",
+      "   margin: 8px;",
+      "   border: 2px solid #215f1e;",
+      "   border-radius: 4px;",
+      "   text-align: center;",
+      " }",
+      " .go {",
+      "   width: 100%;",
+      "   color: #fff;",
+      "   background-color: #457f86;",
+      "   border: 2px solid #fff;",
+      "   border-radius: 2px;",
+      "   box-sizing: none;",
+      "   outline: none!important;",
+      " }",
+      " .foot {",
+      "   height: 150px;",
+      "   background-color: 457f86;",
+      "   border: 2px solid #fff;",
+      " }",
+      " ",
+      " .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>"
+      ],
+      "type": "waypoint",
+      "challengeType": 0
     }
   ]
 }