diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json
index 937956321c..db62d24c37 100644
--- a/seed_data/coursewares.json
+++ b/seed_data/coursewares.json
@@ -450,21 +450,21 @@
"name": "Add an Image to your Website",
"difficulty" : "0.13",
"description": [
- "",
- "",
- "Use an img element to add the image http://bit.ly/cutegraycat
to the website.",
+ "Use an img element to add the image http://bit.ly/cutegraycat
to your website.",
"You can add images to your website by using the img
element.",
- "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"></img>
.",
+ "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"/>
. Note that in most cases, img
elements are self-closing.",
"Try it with this image: http://bit.ly/cutegraycat
."
],
"tests": [
"expect($('img').attr('src')).to.equal('http://bit.ly/cutegraycat');"
],
"challengeSeed": [
+ "",
+ "",
"
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.
" @@ -473,8 +473,8 @@ }, { "_id" : "bad87fee1348bd9acdf08812", - "name": "Specify an Image Size", - "difficulty" : "0.13", + "name": "Specify an Image Size TEST", + "difficulty" : "0.131", "description": [ "Create a class callednarrow-image
and use it to resize the image so that it's only 200 pixels wide",
"Uh-oh, our image is too big to fit on a mobile phone. As a result, our user will need to scroll horizontally to view the image. But we can fix this by specifying an image size.",
@@ -484,7 +484,6 @@
"tests": [
"expect($('img')).to.have.class('narrow-image');",
"expect($('img')).to.have.css('width', 200px)"
-
],
"challengeSeed": [
"",
+ "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.
", + "Alt text
is a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
- "You can add alt text right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"></img>
."
+ "You can add alt text right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>
."
],
"tests": [
"expect((/cat/gi).test($('img').attr('alt')).to.be.true;"
@@ -520,32 +547,44 @@
" .red-text {",
" color: #ff0000;",
" }",
- "",
- " .narrow-image {",
- " width: 200px;",
- " }",
"",
"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.
", - "CSS Borders
have attributes like style, color and width.",
+ "We've created an example border around your h1 element. See if you can add a 5-pixel-wide green border around your cat photo."
],
"tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
+ "expect($('img')).to.have.class('thick-black-border');",
+ "expect($('img')).to.have.css('border-color', 'rgb(0,255,0)'));",
+ "expect($('img')).to.have.css('border-width', '5px');"
],
"challengeSeed": [
- "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.
", + "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.
", + "