From 9df99eb63572f5eb22de6b3eb39f27237c62c538 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Tue, 11 Aug 2015 15:39:07 +0100 Subject: [PATCH 1/8] Removed new incomplete JS Challenges and moved to OOPF branch. --- .jshintrc | 3 +- public/js/main_0.0.3.js | 4 +- seed/challenges/basic-javascript.json | 3 +- ...t-oriented-and-functional-programming.json | 285 +++++++++++++++++- 4 files changed, 289 insertions(+), 6 deletions(-) diff --git a/.jshintrc b/.jshintrc index 38058dd40b..7d01fdaf66 100644 --- a/.jshintrc +++ b/.jshintrc @@ -16,6 +16,7 @@ "strict": false, // Require `use strict` pragma in every file. "trailing": true, // Prohibit trailing whitespaces. "smarttabs": false, // Suppresses warnings about mixed tabs and spaces + "esnext": true, // Allow ES6 maybe :p "globals": { // Globals variables. "jasmine": true, "angular": true, @@ -37,4 +38,4 @@ ], "devel": true, // Allow development statements e.g. `console.log();`. "noempty": true // Prohibit use of empty blocks. -} \ No newline at end of file +} diff --git a/public/js/main_0.0.3.js b/public/js/main_0.0.3.js index e502bd50d3..29d8709065 100644 --- a/public/js/main_0.0.3.js +++ b/public/js/main_0.0.3.js @@ -312,7 +312,9 @@ $(document).ready(function() { $('#story-submit').on('click', storySubmitButtonHandler); if($('.editorScrollDiv').html() !== 'undefined'){ - $('.editorScrollDiv').css("height",$(window).height()-($('.navbar').height()+$('.footer').height()+100) + "px"); + function truncateEditor(){$('.editorScrollDiv').css("height",$(window).height()-($('.navbar').height()+$('.footer').height()+100) + "px");} + truncateEditor(); + $(window).resize(function(){truncateEditor();}); } //fakeiphone positioning hotfix diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json index 0aa6f4f02f..8696a13b94 100644 --- a/seed/challenges/basic-javascript.json +++ b/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:", - "", - "var array = [1,2,3];", + "var array = [1,2,3];", "array[0];//equals 1", "var data = array[1];", "", diff --git a/seed/challenges/object-oriented-and-functional-programming.json b/seed/challenges/object-oriented-and-functional-programming.json index 54b46060a3..eba3c45b57 100644 --- a/seed/challenges/object-oriented-and-functional-programming.json +++ b/seed/challenges/object-oriented-and-functional-programming.json @@ -1,6 +1,287 @@ { - "name": "Object Oriented and Functional Programming - Coming Soon", - "order" : 0.010, + "name": "Object Oriented and Functional Programming \n - \n Under Construction From Challenge 4 Onwards", + "order" : 0.009, + "note": [ + "inheritance" + ], "challenges": [ + { + "id":"cf1111c1c15feddfaeb1bdef", + "title":"Waypoint: A Review On Objects", + "difficulty":0, + "description":[ + "", + "Before we dive into Object Oriented Programming Let's take a quick look over objects in javascript" + ], + "tests":[ + "assert(motorBike.wheels===2, 'You should have given motorBike two wheels');", + "assert(motorBike.engine===1, 'You should have given motorBike one engine');", + "assert(motorBike.seats===1, 'You should have given motorBike one seat');" + ], + "challengeSeed":[ + "//Here is a sample Object", + "var car = {", + " \"wheels\":4,", + " \"engine\":1,", + " \"seats\":5", + "};", + "", + "//Now Let's make a similar Object called motorBike", + "//Give it two wheels, one engine and one seat", + "var motorBike = {", + " \"wheels\":0,", + " \"engine\":0,", + " \"seats\":0", + "};", + "", + "(function(){return(JSON.stringify(motorBike));})();" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c15feddfaeb2bdef", + "title":"Waypoint: Constructing Objects", + "difficulty":0, + "description":[ + "", + "We are also able to create Objects using functions" + ], + "tests":[ + "assert((new Car()).wheels === 4, \"myCar.wheels should be four. Make sure that you haven't changed this value\");", + "assert(typeof((new Car()).engine) === 'number', 'myCar.engine should be a number');", + "assert(typeof((new Car()).seats) === 'number', 'myCar.seats should be a number');" + ], + "challengeSeed":[ + "//Let's add the properties engine and seats to the car in the same way that the property wheels has been added below. They should both be numbers", + "var Car = function(){", + " this.wheels = 4;", + "};", + "", + "//Instantiated Here", + "var myCar = new Car();", + "", + "(function(){return(JSON.stringify(myCar));})();" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c15feddfaeb3bdef", + "title":"Waypoint: Understanding Public and Private Properties", + "difficulty":0, + "description":[ + "", + "In the last challenge we use the this to reference public properties the current object or function.", + "We can also create variables and functions that aren't accessible from outside the Object" + ], + "tests":[ + "assert(answers.Q1===true, 'The number Gear is Publicly Accessible');", + "assert(answers.Q2===true, 'The function getGear is Publicly Accessible');", + "assert(answers.Q3===false, 'The function addStyle is not Publicly Accessible');" + ], + "challengeSeed":[ + "//Let's create an object with a two functions. One attached as a property and one not.", + "var Car = function(){", + " this.gear = 1;", + " function addStyle(styleMe){", + " return('The Current Gear Is: ' + styleMe);", + " }", + " this.getGear = function(){", + " return(addStyle(this.gear));", + " };", + "};", + "", + "//Quick Quiz!", + "//Say whether the follow statements are true or false in the answers object below", + "", + "//Statement One", + "//The number gear publicly accessible", + "", + "//Statement Two", + "//The function getGear publicly accessible", + "", + "//Statement Three", + "//The function addStyle publicly accessible", + "", + "var answers = {", + " 'Q1':false,", + " 'Q2':false,", + " 'Q3':false", + "};", + "", + "//Instantiated Here", + "var myCar = new Car();", + "", + "(function(){return(JSON.stringify(answers));})();" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c13feddfaeb6bdef", + "title":"Waypoint: Instantiation", + "difficulty":0, + "description":[ + "", + "Instantiation at it's most basic level is where you are creating a copy of an object from a template for use at a later time" + ], + "tests":[ + "assert((new Car()).wheels === 4, 'The property wheels should be four in the object constructor');", + "assert(typeof((new Car()).engine) === 'undefined', 'There should not be a property engine in the object constructor');", + "assert(myCar.wheels === 4, 'The property wheels of myCar should be four');", + "assert(typeof(myCar.engine) === 'number', 'The property engine of myCar should be a number');" + ], + "challengeSeed":[ + "var Car = function(){", + " this.wheels = 4;", + "};", + "", + "var myCar = new Car();", + "", + "//Add the property engine to myCar using dot notation and make it a number", + "", + "", + "(function(){return(JSON.stringify(myCar));})();" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c13feddfaeb9bdef", + "title":"Waypoint: Inheritance", + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c14feddfaeb1bdef", + "title":"Waypoint: Prototypical Inheritance", + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c13feddfaeb7bdef", + "title":"Waypoint: Closures", + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c14feddfaeb3bdef", + "title":"Waypoint: Factories", + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c14feddfaeb5bdef", + "title":"Waypoint: Pure Functions", + "Note":"May need a waypoint before each topic to announce what it is :p", + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c14feddfaeb6bdef", + "title":"Waypoint: Currying Functions", + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c14feddfaeb7bdef", + "title":"Waypoint: Composition", + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c14feddfaeb8bdef", + "title":"Waypoint: Functors", + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c14feddfaeb9bdef", + "title":"Waypoint: Currying Functions", + "Notes":[ + "", + "" + ], + "difficulty":0, + "description":[ + "" + ], + "tests":[ + "assert(1==2, '');" + ], + "challengeSeed":[ + "Under Construction" + ], + "challengeType":1 + } ] } From 1dc66b76711ac4252c06dca6e152689912759c44 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Wed, 12 Aug 2015 00:11:56 +0100 Subject: [PATCH 2/8] First four OOP challenges and the final slot machine challenge. --- seed/challenges/basic-javascript.json | 170 ++++++++++++++++++ ...t-oriented-and-functional-programming.json | 112 +++++------- 2 files changed, 217 insertions(+), 65 deletions(-) diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json index 8696a13b94..15b2df6a43 100644 --- a/seed/challenges/basic-javascript.json +++ b/seed/challenges/basic-javascript.json @@ -1544,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", + "$($('.slot')[0]).html('<img src = \"' + images[slotOne-1] + '\">');" + ], + "tests":[ + "assert(editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\\\'\\);/gi) && editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\\\'\\);/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", + " ", + "
", + "
", + "
", + " ", + "

FCC Slot Machine

", + "
", + "
", + "
", + " ", + "
", + "
", + " ", + "
", + "
", + " ", + "
", + "
", + "
", + "
", + " ", + "
", + "
", + "
", + " ", + "
", + "
", + "
", + "", + "" + ], + "type": "waypoint", + "challengeType": 0 } ] } diff --git a/seed/challenges/object-oriented-and-functional-programming.json b/seed/challenges/object-oriented-and-functional-programming.json index eba3c45b57..ac85a3d5ac 100644 --- a/seed/challenges/object-oriented-and-functional-programming.json +++ b/seed/challenges/object-oriented-and-functional-programming.json @@ -2,7 +2,12 @@ "name": "Object Oriented and Functional Programming \n - \n Under Construction From Challenge 4 Onwards", "order" : 0.009, "note": [ - "inheritance" + "Waypoint: Closures", + "Waypoint: Factories", + "Waypoint: Pure Functions", + "Waypoint: Currying Functions", + "Waypoint: Functors", + "Waypoint: Currying Functions" ], "challenges": [ { @@ -74,9 +79,9 @@ "We can also create variables and functions that aren't accessible from outside the Object" ], "tests":[ - "assert(answers.Q1===true, 'The number Gear is Publicly Accessible');", - "assert(answers.Q2===true, 'The function getGear is Publicly Accessible');", - "assert(answers.Q3===false, 'The function addStyle is not Publicly Accessible');" + "assert(typeof(myBike.getSpeed)!=='undefined' && typeof(myBike.getSpeed) === 'function', 'The method getSpeed of myBike should be accessible outside the Object');", + "assert(typeof(myBike.speed) === 'undefined', 'We should not been able');", + "assert(typeof(myBike.addUnit === 'undefined'), '');" ], "challengeSeed":[ "//Let's create an object with a two functions. One attached as a property and one not.", @@ -90,33 +95,30 @@ " };", "};", "", - "//Quick Quiz!", - "//Say whether the follow statements are true or false in the answers object below", + "//Make the function getSpeed of Bike publicly accessible", "", - "//Statement One", - "//The number gear publicly accessible", - "", - "//Statement Two", - "//The function getGear publicly accessible", - "", - "//Statement Three", - "//The function addStyle publicly accessible", - "", - "var answers = {", - " 'Q1':false,", - " 'Q2':false,", - " 'Q3':false", + "var Bike = function(){", + " speed = 100;", + " function addUnit(value){", + " return(value + \"KM/H\");", + " }", + " ", + " getSpeed = function (){", + " return(addUnit(speed));", + " };", + " ", "};", "", "//Instantiated Here", "var myCar = new Car();", + "var myBike = new Bike();", "", - "(function(){return(JSON.stringify(answers));})();" + "if(myBike.hasOwnProperty('getSpeed')){(function(){return(JSON.stringify(myBike.getSpeed()));})();};" ], "challengeType":1 }, { - "id":"cf1111c1c13feddfaeb6bdef", + "id":"cf1111c1c15feddfaeb4bdef", "title":"Waypoint: Instantiation", "difficulty":0, "description":[ @@ -144,7 +146,7 @@ "challengeType":1 }, { - "id":"cf1111c1c13feddfaeb9bdef", + "id":"cf1111c1c15feddfaeb5bdef", "title":"Waypoint: Inheritance", "difficulty":0, "description":[ @@ -159,7 +161,7 @@ "challengeType":1 }, { - "id":"cf1111c1c14feddfaeb1bdef", + "id":"cf1111c1c15feddfaeb6bdef", "title":"Waypoint: Prototypical Inheritance", "difficulty":0, "description":[ @@ -174,8 +176,8 @@ "challengeType":1 }, { - "id":"cf1111c1c13feddfaeb7bdef", - "title":"Waypoint: Closures", + "id":"cf1111c1c15feddfaeb7bdef", + "title":"Waypoint: Using .map", "difficulty":0, "description":[ "" @@ -189,8 +191,8 @@ "challengeType":1 }, { - "id":"cf1111c1c14feddfaeb3bdef", - "title":"Waypoint: Factories", + "id":"cf1111c1c15feddfaeb8bdef", + "title":"Waypoint: Using .reduce", "difficulty":0, "description":[ "" @@ -204,9 +206,8 @@ "challengeType":1 }, { - "id":"cf1111c1c14feddfaeb5bdef", - "title":"Waypoint: Pure Functions", - "Note":"May need a waypoint before each topic to announce what it is :p", + "id":"cf1111c1c15feddfaeb9bdef", + "title":"Waypoint: Using .filter", "difficulty":0, "description":[ "" @@ -220,8 +221,8 @@ "challengeType":1 }, { - "id":"cf1111c1c14feddfaeb6bdef", - "title":"Waypoint: Currying Functions", + "id":"cf1111c1c16feddfaeb1bdef", + "title":"Waypoint: Using .sort", "difficulty":0, "description":[ "" @@ -235,53 +236,34 @@ "challengeType":1 }, { - "id":"cf1111c1c14feddfaeb7bdef", - "title":"Waypoint: Composition", - "difficulty":0, - "description":[ + "id": "cf1111c1c16feddfaeb2bdef", + "title": "Waypoint: Using .reverse", + "difficulty": 0, + "description": [ "" ], - "tests":[ + "tests": [ "assert(1==2, '');" ], - "challengeSeed":[ + "challengeSeed": [ "Under Construction" ], - "challengeType":1 + "challengeType": 1 }, { - "id":"cf1111c1c14feddfaeb8bdef", - "title":"Waypoint: Functors", - "difficulty":0, - "description":[ + "id": "cf1111c1c16feddfaeb3bdef", + "title": "Waypoint: Using .concat", + "difficulty": 0, + "description": [ "" ], - "tests":[ + "tests": [ "assert(1==2, '');" ], - "challengeSeed":[ + "challengeSeed": [ "Under Construction" ], - "challengeType":1 - }, - { - "id":"cf1111c1c14feddfaeb9bdef", - "title":"Waypoint: Currying Functions", - "Notes":[ - "", - "" - ], - "difficulty":0, - "description":[ - "" - ], - "tests":[ - "assert(1==2, '');" - ], - "challengeSeed":[ - "Under Construction" - ], - "challengeType":1 + "challengeType": 1 } ] } From 7c19d6c0efd419bf36bd3d2c4838bdd04d147b90 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Thu, 13 Aug 2015 00:20:15 +0100 Subject: [PATCH 3/8] First twelve OOP challenges ready to roll --- ...t-oriented-and-functional-programming.json | 175 +++++++++++++----- 1 file changed, 127 insertions(+), 48 deletions(-) diff --git a/seed/challenges/object-oriented-and-functional-programming.json b/seed/challenges/object-oriented-and-functional-programming.json index ac85a3d5ac..218496ddbf 100644 --- a/seed/challenges/object-oriented-and-functional-programming.json +++ b/seed/challenges/object-oriented-and-functional-programming.json @@ -123,7 +123,8 @@ "difficulty":0, "description":[ "", - "Instantiation at it's most basic level is where you are creating a copy of an object from a template for use at a later time" + "Instantiation at it's most basic level is where you are creating a copy of an object from a template for use at a later time", + "The instance inherits all the properties and methods of the original Object" ], "tests":[ "assert((new Car()).wheels === 4, 'The property wheels should be four in the object constructor');", @@ -145,48 +146,30 @@ ], "challengeType":1 }, - { - "id":"cf1111c1c15feddfaeb5bdef", - "title":"Waypoint: Inheritance", - "difficulty":0, - "description":[ - "" - ], - "tests":[ - "assert(1==2, '');" - ], - "challengeSeed":[ - "Under Construction" - ], - "challengeType":1 - }, - { - "id":"cf1111c1c15feddfaeb6bdef", - "title":"Waypoint: Prototypical Inheritance", - "difficulty":0, - "description":[ - "" - ], - "tests":[ - "assert(1==2, '');" - ], - "challengeSeed":[ - "Under Construction" - ], - "challengeType":1 - }, { "id":"cf1111c1c15feddfaeb7bdef", "title":"Waypoint: Using .map", "difficulty":0, "description":[ - "" + "", + "array = array.map(function(val){", + " return(val+1);", + "});", + "", + "The map method is one of the easiest ways to iterate through an array or object there is. Let's use it now" ], "tests":[ - "assert(1==2, '');" + "assert.deepEqual(array, [4,5,6,7,8], 'You should have added three to each value in the array');", + "assert(editor.getValue().match(/\\.map\\(/gi), 'You should be making use of the map method');", + "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'You should only modify the array with .map');" ], "challengeSeed":[ - "Under Construction" + "//Use map to add three to each value in the array", + "var array = [1,2,3,4,5];", + "", + "", + "", + "(function(){return(array);})();" ], "challengeType":1 }, @@ -195,13 +178,25 @@ "title":"Waypoint: Using .reduce", "difficulty":0, "description":[ - "" + "", + "Reduce can be useful for condensing and array or numbers into one value.", + "", + "var singleVal = array.reduce(function(previousVal, currentVal){", + " return(previousVal+currentVal);", + "}" ], "tests":[ - "assert(1==2, '');" + "assert(singleVal == 30, 'singleVal should have been set to the result of you reduce operation');", + "assert(editor.getValue().match(/\\.reduce\\(/gi), 'You should have made use of the reduce method');" ], "challengeSeed":[ - "Under Construction" + "var array = [4,5,6,7,8];", + "", + "var singleVal = 0;", + "", + "", + "", + "(function(){return(singleVal);})()" ], "challengeType":1 }, @@ -210,13 +205,24 @@ "title":"Waypoint: Using .filter", "difficulty":0, "description":[ - "" + "", + "filter is a useful method that can filter out values that don't match a certain criteria", + "Let's remove all the values less than six", + "array = array.filter(function(val){", + " return(val<4);", + "});" ], "tests":[ - "assert(1==2, '');" + "assert.deepEqual(array, [1,2,3,4,5], 'You should have removed all the values from the array that are less than six');", + "assert(editor.getValue().match(/array\\.filter\\(/gi), 'You should be using the filter method to remove the values from the array');", + "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7\\,8\\,9\\,10\\]/gi), 'You should only be using .filter to modify the contents of the array);" ], "challengeSeed":[ - "Under Construction" + "var array = [1,2,3,4,5,6,7,8,9,10];", + "", + "", + "", + "(function(){return(array);})();" ], "challengeType":1 }, @@ -225,13 +231,24 @@ "title":"Waypoint: Using .sort", "difficulty":0, "description":[ + "", + "You can use the method sort to easily sort the values in the array alphabetically or numerically", + "var array = [1,3,2];", + "array = array.sort();", + "This will return [1, 2, 3]", "" ], "tests":[ - "assert(1==2, '');" + "assert.deepEqual(array, ['alpha', 'beta', 'charlie'], 'You should have sorted the array alphabetically');", + "assert(editor.getValue().match(/\\[\\'beta\\'\\,\\s\\'alpha\\'\\,\\s'charlie\\'\\];/gi), 'You should be sorting the array using sort');", + "assert(editor.getValue().match(/\\.sort\\(\\)/gi), 'You should have made use of the sort method');" ], "challengeSeed":[ - "Under Construction" + "var array = ['beta', 'alpha', 'charlie'];", + "", + "", + "", + "(function(){return(array);})();" ], "challengeType":1 }, @@ -240,13 +257,20 @@ "title": "Waypoint: Using .reverse", "difficulty": 0, "description": [ - "" + "", + "You can use the reverse method to reverse the contents of an array" ], "tests": [ - "assert(1==2, '');" + "assert.deepEqual(array, [7,6,5,4,3,2,1], 'You should reverse the array');", + "assert(editor.getValue().match(/\\.reverse\\(\\)/gi), '');", + "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7/gi), '');" ], "challengeSeed": [ - "Under Construction" + "var array = [1,2,3,4,5,6,7];", + "", + "", + "", + "(function(){return(array);})();" ], "challengeType": 1 }, @@ -255,15 +279,70 @@ "title": "Waypoint: Using .concat", "difficulty": 0, "description": [ - "" + "", + "Concat can be used to merge the contents of two arrays into one", + "array = array.concat(otherArray);" ], "tests": [ - "assert(1==2, '');" + "assert.deepEqual(array, [1,2,3,4,5,6], 'You should concat the two arrays together');", + "assert(editor.getValue().match(/\\.concat\\(/gi), 'You should be using the concat method to merge the two arrays');", + "assert(editor.getValue().match(/\\[1\\,2\\,3\\]/gi) && editor.getValue().match(/\\[4\\,5\\,6\\]/gi), 'You should only modify the two arrays without changing the origional ones');" ], "challengeSeed": [ - "Under Construction" + "var array = [1,2,3];", + "", + "var concatMe = [4,5,6];", + "", + "", + "", + "(function(){return(array);})()" ], "challengeType": 1 + }, + { + "id":"cf1111c1c16feddfaeb4bdef", + "title":"Waypoint: Using .split", + "difficulty":0, + "description":[ + "", + "You can use the split method to split a string into an array", + "split uses the argument you give to to split the string", + "array = string.split(' ');" + ], + "tests":[ + "assert(typeof(array) === 'object' && array.length === 5, 'You should have split the string by it\\'s spaces');", + "assert(/\\.split\\(/gi, 'You should have made use of the split method on the string');" + ], + "challengeSeed":[ + "var string = \"Split me into an array\";", + "", + "var array = string;", + "", + "(function(){return(array);})();" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c16feddfaeb5bdef", + "title":"Waypoint: Using .join", + "difficulty":0, + "description":[ + "", + "We can use the join method to join each element in an array into a string separated by whatever delimiter you provide as an argument to the join operation", + "var joinMe = joinMe.join(\" \");" + ], + "tests":[ + "assert(typeof(joinMe) === 'string' && joinMe === \"Split me into an array\", 'You should have joined the arrays by it\\'s spaces');", + "assert(/\\.join\\(/gi, 'You should have made use of the join method on the array');" + ], + "challengeSeed":[ + "var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];", + "", + "joinMe = joinMe;", + "", + "(function(){return(joinMe);})();" + ], + "challengeType":1 } ] } From 2b654ecd83f910fd4f08dd45abbb400eb245c47c Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Thu, 13 Aug 2015 00:21:52 +0100 Subject: [PATCH 4/8] Removed the under construction flag --- seed/challenges/object-oriented-and-functional-programming.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/seed/challenges/object-oriented-and-functional-programming.json b/seed/challenges/object-oriented-and-functional-programming.json index 218496ddbf..a8c8e50bec 100644 --- a/seed/challenges/object-oriented-and-functional-programming.json +++ b/seed/challenges/object-oriented-and-functional-programming.json @@ -1,5 +1,5 @@ { - "name": "Object Oriented and Functional Programming \n - \n Under Construction From Challenge 4 Onwards", + "name": "Object Oriented and Functional Programming", "order" : 0.009, "note": [ "Waypoint: Closures", From 7910f0ae2c75ec5dbf665e86f68c8ad20a2c62dc Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Thu, 13 Aug 2015 01:20:12 +0100 Subject: [PATCH 5/8] Revised scroll-locker layout. iPhone preview causing some styling issues that will require th dynamic resizing of the preview to fix which may impact the quality of the display --- public/js/main_0.0.3.js | 56 ++++++++------- server/views/coursewares/showHTML.jade | 83 +++++++++++----------- server/views/coursewares/showJS.jade | 95 +++++++++++++------------- 3 files changed, 117 insertions(+), 117 deletions(-) diff --git a/public/js/main_0.0.3.js b/public/js/main_0.0.3.js index 29d8709065..3d9f80acde 100644 --- a/public/js/main_0.0.3.js +++ b/public/js/main_0.0.3.js @@ -310,13 +310,6 @@ $(document).ready(function() { }; $('#story-submit').on('click', storySubmitButtonHandler); - - if($('.editorScrollDiv').html() !== 'undefined'){ - function truncateEditor(){$('.editorScrollDiv').css("height",$(window).height()-($('.navbar').height()+$('.footer').height()+100) + "px");} - truncateEditor(); - $(window).resize(function(){truncateEditor();}); - } - //fakeiphone positioning hotfix if($('.iphone-position').html() !==undefined || $('.iphone').html() !== undefined){ var startIphonePosition = parseInt($('.iphone-position').css('top').replace('px', '')); @@ -333,34 +326,39 @@ $(document).ready(function() { }); } if($('.scroll-locker').html() != undefined){ - function lockTop(initOff){ - if ($(window).width() >= 992) { - if ((($('.scroll-locker').offset().top - $(window).scrollTop()) + $('.scroll-locker').height()) >= ($('.fcc-footer').offset().top - $(window).scrollTop())) { - $('.scroll-locker').css('position', 'fixed').css('top', initOff).css('width', $($('.scroll-locker').parent()).width()).css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden'); - $('.well').css('margin-right', '6px'); + function lockTop(){ + if ($(window).width() >= 990) { + if($('.editorScrollDiv').html() !== 'undefined'){ + var magiVal = $(window).height()-($('.navbar').height()+$('.footer').height()); + if(magiVal < 0){ + magiVal = 0; } - else { - $('.scroll-locker').css('position', 'fixed').css('bottom', $('.fcc-footer') - (($('.scroll-locker').offset().top - $(window).scrollTop()) + $('.scroll-locker').height()) - ($('.fcc-footer').offset().top - $(window).scrollTop())).css('width', $($('.scroll-locker').parent()).width()).css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden'); - $('.well').css('margin-right', '6px'); + magiVal = $(window).height()-($('.navbar').height()+$('.footer').height()); + if(magiVal < 0){ + magiVal = 0; } + $('.editorScrollDiv').css("height", (magiVal-85) + "px"); } - else { - $('.scroll-locker').css('position', 'inherit').css('top', 'inherit').css('width', '100%').css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden'); - $('.well').css('margin-right', ''); + magiVal = $(window).height()-($('.navbar').height()+$('.footer').height()); + if(magiVal < 0){ + magiVal = 0; } + $('.scroll-locker').css("min-height", $('.editorScrollDiv').height()).css("height",magiVal-85); + } + else { + $('.editorScrollDiv').css("max-height", 500 + "px"); + $('.scroll-locker').css('position', 'inherit').css('top', 'inherit').css('width', '100%').css('max-height', '85%').css('overflow-y', 'auto').css('overflow-x', 'hidden'); + } } - var $scrollLocker = $('.scroll-locker'); - if ($scrollLocker.offset()) { - var initOff = $scrollLocker.offset().top - $(window).scrollTop(); - lockTop(initOff); - $(window).on('resize', function(){ - lockTop(initOff); - }); - $(window).scroll(function() { - lockTop(initOff); - }); + if ($('.scroll-locker').offset()){ $(document).ready(function(){ - lockTop(initOff); + lockTop(); + $(window).on('resize', function(){ + lockTop(); + }); + $(window).scroll(function() { + lockTop(); + }); }); } } diff --git a/server/views/coursewares/showHTML.jade b/server/views/coursewares/showHTML.jade index 4beb71096d..9b703804a0 100644 --- a/server/views/coursewares/showHTML.jade +++ b/server/views/coursewares/showHTML.jade @@ -22,48 +22,49 @@ block content .row.courseware-height .col-xs-12.col-sm-12.col-md-3.col-lg-3 .scroll-locker - .well - .row - .col-xs-12 - h3.text-center.negative-10= name - .bonfire-instructions - for sentence in details - p.wrappable.negative-10!= sentence - .negative-bottom-margin-30 - if (user) - label.btn.btn-primary.btn-block.negative-10#next-courseware-button - .ion-checkmark-circled - |   Go to my next challenge (ctrl + enter) - .button-spacer - .btn-group.input-group.btn-group-justified - label.btn.btn-success#trigger-reset-modal - i.fa.fa-refresh - |   Reset - label.btn.btn-success#trigger-help-modal - i.fa.fa-medkit - |   Help - label.btn.btn-success#trigger-issue-modal - i.fa.fa-bug - |   Bug - script. - var userLoggedIn = true; - else - .button-spacer - a.btn.signup-btn.btn-block.btn-block.negative-15(href='/login') Sign in so you can save your progress + .innerMarginFix(style = "width: 99%;") + .well + .row + .col-xs-12 + h3.text-center.negative-10= name + .bonfire-instructions + for sentence in details + p.wrappable.negative-10!= sentence + .negative-bottom-margin-30 + if (user) + label.btn.btn-primary.btn-block.negative-10#next-courseware-button + .ion-checkmark-circled + |   Go to my next challenge (ctrl + enter) + .button-spacer + .btn-group.input-group.btn-group-justified + label.btn.btn-success#trigger-reset-modal + i.fa.fa-refresh + |   Reset + label.btn.btn-success#trigger-help-modal + i.fa.fa-medkit + |   Help + label.btn.btn-success#trigger-issue-modal + i.fa.fa-bug + |   Bug script. - var userLoggedIn = false; - .button-spacer - ul#testSuite.list-group - br - script(type="text/javascript"). - $('#next-courseware-button').attr('disabled', 'disabled'); - var tests = !{JSON.stringify(tests)}; - var challengeSeed = !{JSON.stringify(challengeSeed)}; - var challenge_Id = !{JSON.stringify(challengeId)}; - var challenge_Name = !{JSON.stringify(name)}; - var prodOrDev = !{JSON.stringify(environment)}; - var challengeType = !{JSON.stringify(challengeType)}; - var started = Math.floor(Date.now()); + var userLoggedIn = true; + else + .button-spacer + a.btn.signup-btn.btn-block.btn-block.negative-15(href='/login') Sign in so you can save your progress + script. + var userLoggedIn = false; + .button-spacer + ul#testSuite.list-group + br + script(type="text/javascript"). + $('#next-courseware-button').attr('disabled', 'disabled'); + var tests = !{JSON.stringify(tests)}; + var challengeSeed = !{JSON.stringify(challengeSeed)}; + var challenge_Id = !{JSON.stringify(challengeId)}; + var challenge_Name = !{JSON.stringify(name)}; + var prodOrDev = !{JSON.stringify(environment)}; + var challengeType = !{JSON.stringify(challengeType)}; + var started = Math.floor(Date.now()); .col-xs-12.col-sm-12.col-md-5.col-lg-6 .editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;") #mainEditorPanel diff --git a/server/views/coursewares/showJS.jade b/server/views/coursewares/showJS.jade index 32987b638a..367d1ba9b5 100644 --- a/server/views/coursewares/showJS.jade +++ b/server/views/coursewares/showJS.jade @@ -17,54 +17,55 @@ block content .row(ng-controller="pairedWithController") .col-xs-12.col-sm-12.col-md-4.col-lg-3 .scroll-locker - #testCreatePanel.well - h3.text-center.negative-10= name - .row - .col-xs-12 - .bonfire-instructions - for sentence in details - p.wrappable.negative-10!= sentence - .negative-bottom-margin-30 - #MDN-links - p.negative-10 Here are some helpful links: - for link, index in MDNlinks - .negative-10 - ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]} - if (user) - form.form-horizontal(novalidate='novalidate', name='completedWithForm') - .form-group.text-center.negative-10 + .innerMarginFix(style = "width: 99%;") + #testCreatePanel.well + h3.text-center.negative-10= name + .row .col-xs-12 - // extra field to distract password tools like lastpass from injecting css into our username field - label.negative-10.btn.btn-primary.btn-block#submitButton - i.fa.fa-play - |   Run code (ctrl + enter) - .button-spacer - .btn-group.input-group.btn-group-justified - label.btn.btn-success#trigger-reset-modal - i.fa.fa-refresh - |   Reset - label.btn.btn-success#trigger-help-modal - i.fa.fa-medkit - |   Help - label.btn.btn-success#trigger-issue-modal - i.fa.fa-bug - |   Bug - .button-spacer - form.code - .form-group.codeMirrorView - textarea#codeOutput(style='display: none;') - br - #testSuite.negative-10 - br - script(type="text/javascript"). - var tests = !{JSON.stringify(tests)}; - var challengeSeed = !{JSON.stringify(challengeSeed)}; - var challenge_Id = !{JSON.stringify(challengeId)}; - var challenge_Name = !{JSON.stringify(name)}; - var started = Math.floor(Date.now()); - var challengeType = !{JSON.stringify(challengeType)}; - var _ = R; - var dashed = !{JSON.stringify(dashedName)}; + .bonfire-instructions + for sentence in details + p.wrappable.negative-10!= sentence + .negative-bottom-margin-30 + #MDN-links + p.negative-10 Here are some helpful links: + for link, index in MDNlinks + .negative-10 + ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]} + if (user) + form.form-horizontal(novalidate='novalidate', name='completedWithForm') + .form-group.text-center.negative-10 + .col-xs-12 + // extra field to distract password tools like lastpass from injecting css into our username field + label.negative-10.btn.btn-primary.btn-block#submitButton + i.fa.fa-play + |   Run code (ctrl + enter) + .button-spacer + .btn-group.input-group.btn-group-justified + label.btn.btn-success#trigger-reset-modal + i.fa.fa-refresh + |   Reset + label.btn.btn-success#trigger-help-modal + i.fa.fa-medkit + |   Help + label.btn.btn-success#trigger-issue-modal + i.fa.fa-bug + |   Bug + .button-spacer + form.code + .form-group.codeMirrorView + textarea#codeOutput(style='display: none;') + br + #testSuite.negative-10 + br + script(type="text/javascript"). + var tests = !{JSON.stringify(tests)}; + var challengeSeed = !{JSON.stringify(challengeSeed)}; + var challenge_Id = !{JSON.stringify(challengeId)}; + var challenge_Name = !{JSON.stringify(name)}; + var started = Math.floor(Date.now()); + var challengeType = !{JSON.stringify(challengeType)}; + var _ = R; + var dashed = !{JSON.stringify(dashedName)}; .col-xs-12.col-sm-12.col-md-8 .editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;") #mainEditorPanel From c0140a9510357173512fe87c9bc46d54cf9e5ad3 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Thu, 13 Aug 2015 17:33:23 +0100 Subject: [PATCH 6/8] Added some testing and debugging challenges --- .../automated-testing-and-debugging.json | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/seed/challenges/automated-testing-and-debugging.json b/seed/challenges/automated-testing-and-debugging.json index 2755fd75ff..8bac9c762c 100644 --- a/seed/challenges/automated-testing-and-debugging.json +++ b/seed/challenges/automated-testing-and-debugging.json @@ -2,5 +2,49 @@ "name": "Automated Testing and Debugging - Coming Soon", "order": 0.012, "challenges": [ + { + "id":"cf1111c1c16feddfaeb6bdef", + "title":"Using the Javascript console", + "difficulty":0, + "description":[ + "", + "The browser console is the best and easiest tool for debugging your scripts", + "It can normally be access by pressing f12 in most browsers or right click > inspect element > console", + "Let's print to this console using the console.log method", + "console.log('Hello world!')" + ], + "tests":[ + "assert(editor.getValue().match(/console\\.log\\(/gi), 'You should use the console.log method to ');" + ], + "challengeSeed":[ + "" + ], + "challengeType":1 + }, + { + "id":"cf1111c1c16feddfaeb7bdef", + "title":"Using typeof", + "difficulty":0, + "description":[ + "", + "typeof is a useful method that we can use to check the type of a variable", + "One thing to be careful of is that an array has the type objects", + "Try using each of these to see the types they have", + "console.log(typeof(\"\"));", + "console.log(typeof(0));", + "console.log(typeof([]));", + "console.log(typeof({}));" + ], + "tests":[ + "assert(editor.getValue().match(/console\\.log\\(typeof\\(\"\"\\)\\);/gi), 'You should console.log the typeof a string');", + "assert(editor.getValue().match(/console\\.log\\(typeof\\(0\\)\\);/gi), 'You should console.log the typeof a number');", + "assert(editor.getValue().match(/console\\.log\\(typeof\\(\\[\\]\\)\\);/gi), 'You should console.log the typeof a array');", + "assert(editor.getValue().match(/console\\.log\\(typeof\\(\\{\\}\\)\\);/gi), 'You should console.log the typeof a object');" + ], + "challengeSeed":[ + "" + ], + "challengeType":1 + } ] } From 299405694bb2095aaeb4de0987818da6971d9c25 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Thu, 13 Aug 2015 17:36:02 +0100 Subject: [PATCH 7/8] Add some code highlighting --- seed/challenges/automated-testing-and-debugging.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/seed/challenges/automated-testing-and-debugging.json b/seed/challenges/automated-testing-and-debugging.json index 8bac9c762c..4a3d67e162 100644 --- a/seed/challenges/automated-testing-and-debugging.json +++ b/seed/challenges/automated-testing-and-debugging.json @@ -30,10 +30,10 @@ "typeof is a useful method that we can use to check the type of a variable", "One thing to be careful of is that an array has the type objects", "Try using each of these to see the types they have", - "console.log(typeof(\"\"));", + "console.log(typeof(\"\"));", "console.log(typeof(0));", "console.log(typeof([]));", - "console.log(typeof({}));" + "console.log(typeof({}));" ], "tests":[ "assert(editor.getValue().match(/console\\.log\\(typeof\\(\"\"\\)\\);/gi), 'You should console.log the typeof a string');", From 095552dbbe4147a08f7c62802b8ef61e10c1248f Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Thu, 13 Aug 2015 21:25:31 +0100 Subject: [PATCH 8/8] Added a more specific example --- seed/challenges/basic-javascript.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json index 15b2df6a43..68646b02e4 100644 --- a/seed/challenges/basic-javascript.json +++ b/seed/challenges/basic-javascript.json @@ -1386,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 $('.slot') to select all of the slots", "Once they are all selected we can use bracket notation to access each individual one like this", - "$($('.slot')[0])", + "$($('.slot')[0]).html('')", "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" ],