From 4d0017a4d45542c8ffd9f15956c0b5515a8c92e0 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Mon, 11 May 2015 23:40:04 -0700 Subject: [PATCH] bower install jshint and build more coursewares --- bower.json | 3 +- seed_data/coursewares.json | 156 +++++++++++++++++++++----------- views/bonfire/show.jade | 2 +- views/coursewares/showHTML.jade | 2 +- views/coursewares/showJS.jade | 2 +- 5 files changed, 107 insertions(+), 58 deletions(-) diff --git a/bower.json b/bower.json index 0d92dd37c2ec2a..cd8cfd5cf3253a 100644 --- a/bower.json +++ b/bower.json @@ -25,6 +25,7 @@ "font-awesome": "~4.3.0", "moment": "~2.10.2", "angular-bootstrap": "~0.13.0", - "ramda": "~0.13.0" + "ramda": "~0.13.0", + "jshint": "~2.7.0" } } diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index 027ac56e6ee339..2a9a2e92887239 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -277,13 +277,14 @@ "name": "Use Lorem Ipsum Text as a Placeholder", "difficulty": 0.015, "description": [ - "Change the text in the p element to use the first few words of lorem ipsum text.", - "Web developers use lorem ipsum as placeholder text. It's called lorem ipsum text because it's those are the first two words of a passage by Cicero of Ancient Rome.", - "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", - "Here are the first 25 words of Lorem Ipsum text, which you can copy and paste into the right position: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + "Change the text in the p element to use the first few words of Kitty Ipsum text.", + "Web developers traditionally use Lorem Ipsum as placeholder text. It's called Lorem Ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.", + "Lorem Ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", + "Well, 5 centuries is long enough. Since we're building a cat photo app, let's use something called Kitty Ipsum!", + "Here are the first few words of Kitty Ipsum text, which you can copy and paste into the right position: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "tests": [ - "assert.isTrue((/Lorem(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your p element should contain the first few words of the famous Lorem Ipsum text.')" + "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your p element should contain the first few words of the famous Kitty Ipsum text.')" ], "challengeSeed": [ "

Hello World

", @@ -352,7 +353,7 @@ "When you entered <h2 style=\"color: red\">Cat Photo App<h2>, you were giving that individual h2 element an inline style", "That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).", "At the top of your code, create a style tag like this: <style></style>", - "Inside that style element, you can create a global style for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2: {color: red;}</style>", + "Inside that style element, you can create a global style for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2 {color: red;}</style>", "Note that it's important to have an opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of the element's styles." ], "tests": [ @@ -373,40 +374,42 @@ "description": [ "Create a CSS class called .red-text and apply it to the h2 element.", "Classes are reusable styles that can be added to HTML elements.", + "Here's the anatomy of a CSS class:", + "", "Classes always start with a period. You can see that we've created a CSS class called .blue-text within the <style> tag.", - "You can follow that pattern to make a .red-text class, which you can attach to HTML elements by using the class=\"class\" within the relevant element's opening tag." + "You can apply a class to an element like this: <h2 class=\"blue-text\">Cat Photo App<h2>", + "Instead of creating a new Style tag, try removing the h2 style declaration from the existing style element, and replace it with the class declaration for \".red-text\"." ], "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.class('red-text');" + "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", + "assert($('h2').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')" ], "challengeSeed": [ "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "", + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" ], "challengeType": 0 }, { - "_id": "bad87fee1348bd9aeff08806", + "_id": "bad87fee1348bd9aefe08806", "name": "Use a CSS Class to Style Multiple Elements", "difficulty": 0.019, "description": [ - "Apply the \"red-text\" class to the h1, h2 and p elements.", + "Apply the \"red-text\" class to the h2 and p elements.", "Remember that you can attach classes to HTML elements by using the class=\"class\" within the relevant element's opening tag." ], "tests": [ - "expect($('h1')).to.have.class('red-text');", - "expect($('h2')).to.have.class('red-text');", - "expect($('p')).to.have.class('red-text');", - "expect($('h1')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('p')).to.have.css('color', 'rgb(255, 0, 0)');" + "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", + "assert($('h2').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')", + "assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", + "assert($('p').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')" ], "challengeSeed": [ "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "", + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" ], "challengeType": 0 }, @@ -426,23 +430,54 @@ "difficulty": 0.020, "description": [ "Set the font size of all p elements to 16 pixels", - "Font size is controlled by the font-size CSS attribute.", - "We've already set the font-size attribute for all h2 elements. See if you can figure out how to give all p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for h1." + "Font size is controlled by the font-size CSS attribute, like this: h1 { font-size: 30px; }.", + "First, create a second p element with the following Kitty Ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "See if you can figure out how to give both of your p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for your .red-text class." ], "tests": [ - "expect($('p')).to.have.css('font-size', '16px');" + "assert($('p').length > 1, 'You need 2 p elements with Kitty Ipsum text.')", + "assert($('p').css('font-size') === '16px', 'Your p elements should have be 16px font.')" ], "challengeSeed": [ "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aede08807", + "name": "Set the Font of an Element", + "difficulty": 0.0205, + "description": [ + "Make all p elements use the \"Monospace\" font.", + "You can set an element's font by using the font-family attribute.", + "For example, if you wanted to set your h2 element's font \"San-serif\", you would use the following CSS: h2 { font-family: 'San-serif'; }" + ], + "tests": [ + "assert($('p').css('font-family').match(/monospace/i, 'Your p elements should use the font \"Monospace\".')" + ], + "challengeSeed": [ + "", + "", + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, @@ -451,29 +486,31 @@ "name": "Import a Google Font", "difficulty": 0.021, "description": [ - "Apply the font-family of Lobster to all h1 elements.", - "The first line of code in your text editor is a call to Google that grabs a font called Lobster and loads it into your HTML.", - "You'll notice that we've already applied the font-family of Lobster to all h2 elements. Now you should also apply it to all h1 elements." + "Apply the font-family of Lobster to your h2 element.", + "First, you'll need to make a call to Google to grab the \"Lobster\" font and loads it into your HTML.", + "Copy and paste this into your code editor above your style element:", + "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", + "Now you can set \"Lobster\" as a font-family attribute." ], "tests": [ - "expect($('h1')).to.have.css('font-family', 'Lobster');" + "assert($('h2').css('font-family').match(/lobster/i', 'Your h2 element should use the font \"Lobster\".')" ], "challengeSeed": [ - "", "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, @@ -482,26 +519,37 @@ "name": "Specify How Fonts Should Degrade", "difficulty": 0.022, "description": [ - "Make all h2 elements use Lobster as their font family, but degrade to the Serif font when the Lobster font isn't available.", - "We commented out our call to Google Fonts, and now our lobter isn't available.", + "Make all h2 elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the Lobster font isn't available.", + "Commented out your call to Google Fonts, so that our \"Lobter\" isn't available.", "You can leave Lobster as the font, and have it degrade to a different font if that font isn't available.", - "There are several default fonts that are availble in all browsers. These include Monospace, Serif and Sans-Serif. See if you can set the h2 elements to use Lobster and degrade to monospace." + "For example, if you prefer \"Helvetica\", but want to degrade to \"Sans-Serif\" when Helvetica isn't available, you can do use this style: <p { font-family: \"Helvetica\", \"Sans-Serif\"; } >", + "There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set the h2 elements to use \"Lobster\" and degrade to \"Monospace\"." ], "tests": [ - "expect($('h2')).to.have.css('font-family').match(/serif/i);", - "expect($('h2')).to.have.css('font-family').match(/lobster/i);" + "assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')", + "assert($('h2').css('font-family').match(/monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')" ], "challengeSeed": [ - "", + "", "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, diff --git a/views/bonfire/show.jade b/views/bonfire/show.jade index 9a28e530c2f613..1383241a9d4b8f 100644 --- a/views/bonfire/show.jade +++ b/views/bonfire/show.jade @@ -6,7 +6,7 @@ block content script(type='text/javascript', src='/js/lib/codemirror/addon/edit/matchbrackets.js') script(type='text/javascript', src='/js/lib/codemirror/addon/lint/lint.js') script(type='text/javascript', src='/js/lib/codemirror/addon/lint/javascript-lint.js') - script(type='text/javascript', src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js') + script(type='text/javascript', src='/bower_components/jshint/dist/jshint.js') script(type='text/javascript', src='/js/lib/chai/chai.js') link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css') link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css') diff --git a/views/coursewares/showHTML.jade b/views/coursewares/showHTML.jade index 6349650804b439..2ca19662a0849c 100644 --- a/views/coursewares/showHTML.jade +++ b/views/coursewares/showHTML.jade @@ -5,7 +5,7 @@ block content script(src='/js/lib/codemirror/addon/edit/matchbrackets.js') script(src='/js/lib/codemirror/addon/lint/lint.js') script(src='/js/lib/codemirror/addon/lint/javascript-lint.js') - script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js') + script(src='/bower_components/jshint/dist/jshint.js') script(src='/js/lib/chai/chai.js') script(src='/js/lib/chai/chai-jquery.js') link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css') diff --git a/views/coursewares/showJS.jade b/views/coursewares/showJS.jade index b55d8ad4d97027..7e87587f939cd6 100644 --- a/views/coursewares/showJS.jade +++ b/views/coursewares/showJS.jade @@ -5,7 +5,7 @@ block content script(src='/js/lib/codemirror/addon/edit/matchbrackets.js') script(src='/js/lib/codemirror/addon/lint/lint.js') script(src='/js/lib/codemirror/addon/lint/javascript-lint.js') - script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js') + script(src='/bower_components/jshint/dist/jshint.js') script(src='/js/lib/chai/chai.js') link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css') link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')