887 lines
48 KiB
JSON
887 lines
48 KiB
JSON
{
|
|
"name": "jQuery",
|
|
"order": 5,
|
|
"challenges": [
|
|
{
|
|
"id": "bad87fee1348bd9acdd08826",
|
|
"title": "Learn how Script Tags and Document Ready Work",
|
|
"description": [
|
|
"Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.",
|
|
"Before we can start using jQuery, we need to add some things to our HTML.",
|
|
"First, add a <code>script</code> element at the top of your page. Be sure to close it on the following line.",
|
|
"Your browser will run any JavaScript inside a <code>script</code> element, including jQuery.",
|
|
"Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>"
|
|
],
|
|
"tests": [
|
|
"assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
|
|
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
|
|
"assert(editor.match(/\\$\\s*?\\(\\s*?document\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'You should add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
|
"assert(editor.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>});</code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9bedc08826",
|
|
"title": "Target HTML Elements with Selectors Using jQuery",
|
|
"description": [
|
|
"Now we have a <code>document ready function</code>. We'll learn more about <code>functions</code> later. The important thing to know is that code you put inside this <code>function</code> will run as soon as your browser has loaded your page.",
|
|
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs.",
|
|
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a <code>dollar sign operator</code>, or simply as <code>bling</code>.",
|
|
"jQuery often selects an HTML element with a <code>selector</code>, then does something to that element.",
|
|
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your document ready function: <code>$(\"button\").addClass(\"animated bounce\")</code>.",
|
|
"Note that we've already included both the jQuery library and the Animate.css library in your code editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements."
|
|
],
|
|
"tests": [
|
|
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.')",
|
|
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aedc08826",
|
|
"title": "Target Elements by Class Using jQuery",
|
|
"description": [
|
|
"You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$(\"button\")</code>, then we added some CSS classes to them with <code>.addClass(\"animated bounce\");</code>.",
|
|
"You just used jQuery's <code>.addClass()</code> function, which allows you to add classes to elements.",
|
|
"First, let's target your <code>div</code> elements with the class <code>well</code> by using the <code>$(\".well\")</code> selector.",
|
|
"Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
|
|
"Then use jQuery's <code>.addClass()</code> function to add the classes <code>animated</code> and <code>shake</code>.",
|
|
"For example, you could make all the elements with the class <code>text-primary</code> shake by adding the following to your <code>document ready function</code>: <code>$(\".text-primary\").addClass(\"animated shake\");</code>"
|
|
],
|
|
"tests": [
|
|
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.')",
|
|
"assert(!editor.match(/class\\.\\*animated/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aeda08826",
|
|
"title": "Target Elements by ID Using jQuery",
|
|
"description": [
|
|
"You can also target elements by their id attributes.",
|
|
"First target your <code>button</code> element with the id <code>target3</code> by using the <code>$(\"#target3\")</code> selector.",
|
|
"Note that, just like with CSS declarations, you type a <code>#</code> before the id's name.",
|
|
"Then use jQuery's <code>.addClass()</code> function to add the classes <code>animated</code> and <code>fadeOut</code>.",
|
|
"Here's how you'd make the <code>button</code> element with the id <code>target6</code> fade out: <code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#target3\").hasClass(\"animated\"), 'Select the <code>button</code>element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class of <code>animated</code>.')",
|
|
"assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && editor.match(/\\$\\(.#target3.\\)/g), 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class <code>fadeOut</code>.')",
|
|
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" $(\".well\").addClass(\"animated shake\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aeda08726",
|
|
"title": "Delete your jQuery Functions",
|
|
"description": [
|
|
"These animations were cool at first, but now they're getting kind of distracting.",
|
|
"Delete all three of these jQuery functions from your <code>document ready function</code>, but leave your <code>document ready function</code> itself intact."
|
|
],
|
|
"tests": [
|
|
"assert(!editor.match(/e\"\\);/g) && !editor.match(/t\"\\);/g), 'Delete all three of your jQuery functions from your <code>document ready function</code>.')",
|
|
"assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')",
|
|
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
|
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your \"document ready function\" closing <code>})</code> intact.')",
|
|
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Leave your <code>script</code> element closing tag intact.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" $(\".well\").addClass(\"animated shake\");",
|
|
" $(\"#target3\").addClass(\"animated fadeOut\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed908626",
|
|
"title": "Target the same element with multiple jQuery Selectors",
|
|
"description": [
|
|
"Now you know three ways of targeting elements: by type: <code>$(\"button\")</code>, by class: <code>$(\".btn\")</code>, and by id <code>$(\"#target1\")</code>.",
|
|
"Use each of these jQuery selectors to target your <code>button</code> element with the class <code>btn</code> and the id <code>target1</code>.",
|
|
"Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: <code>animated</code>, <code>shake</code>, and <code>btn-primary</code>."
|
|
],
|
|
"tests": [
|
|
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?button\\s*?(?:'|\")/gi), 'Use the <code>$(\"button\")</code> selector.')",
|
|
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.btn\\s*?(?:'|\")/gi), 'Use the <code>$(\".btn\")</code> selector.')",
|
|
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")/gi), 'Use the <code>$(\"#target1\")</code> selector.')",
|
|
"assert(editor.match(/addClass/g) && editor.match(/addClass/g).length > 2, 'Only add one class with each of your three selectors.')",
|
|
"assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'Your <code>#target1</code> element should have the classes <code>animated</code>‚ <code>shake</code> and <code>btn-primary</code>.')",
|
|
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed918626",
|
|
"title": "Remove Classes from an element with jQuery",
|
|
"description": [
|
|
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
|
|
"Here's how you would do this for a specific button, add <code>$(\"#target2\").removeClass(\"btn-default\");</code>",
|
|
"Let's remove the <code>btn-default</code> class from all of our <code>button</code> elements."
|
|
],
|
|
"tests": [
|
|
"assert($(\".btn-default\").length === 0, 'Remove the <code>btn-default</code> class from all of your <code>button</code> elements.')",
|
|
"assert(editor.match(/btn btn-default/g), 'Only use jQuery to remove this class from the element.')",
|
|
"assert(editor.match(/\\.[\\v\\s]*removeClass[\\s\\v]*\\([\\s\\v]*('|\")\\s*btn-default\\s*('|\")[\\s\\v]*\\)/gm), 'Only remove the <code>btn-default</code> class.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" $(\".well\").addClass(\"animated shake\");",
|
|
" $(\"#target3\").addClass(\"animated fadeOut\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed908826",
|
|
"title": "Change the CSS of an Element Using jQuery",
|
|
"description": [
|
|
"We can also change the CSS of an HTML element directly with jQuery.",
|
|
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
|
|
"Here's how we would change its color to blue: <code>$(\"#target1\").css(\"color\", \"blue\");</code>",
|
|
"This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.",
|
|
"Delete your jQuery selectors, leaving an empty <code>document ready function</code>.",
|
|
"Select <code>target1</code> and change its color to red."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your <code>target1</code> element should have red text.')",
|
|
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" $(\".well\").addClass(\"animated shake\");",
|
|
" $(\"#target3\").addClass(\"animated fadeOut\");",
|
|
" $(\"button\").removeClass(\"btn-default\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed808826",
|
|
"title": "Disable an Element Using jQuery",
|
|
"description": [
|
|
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
|
|
"When you disable a button, it will become grayed-out and can no longer be clicked.",
|
|
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
|
|
"Here's how you would disable all buttons: <code>$(\"button\").prop(\"disabled\", true);</code>",
|
|
"Disable only the <code>target1</code> button."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#target1\") && $(\"#target1\").prop(\"disabled\"), 'Disable your <code>target1</code> button.')",
|
|
"assert($(\"#target2\") && !$(\"#target2\").prop(\"disabled\"), 'Do not disable any other buttons.')",
|
|
"assert(!editor.match(/disabled>/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed708826",
|
|
"title": "Remove an Element Using jQuery",
|
|
"description": [
|
|
"Now let's remove an HTML element from your page using jQuery.",
|
|
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely",
|
|
"Remove element <code>target4</code> from the page by using the <code>.remove()</code> function."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#target4\").length === 0, 'Use jQuery to remove your <code>target4</code> element from your page.')",
|
|
"assert(editor.match(/id=\"target4/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed608826",
|
|
"title": "Use appendTo to Move Elements with jQuery",
|
|
"description": [
|
|
"Now let's try moving elements from one <code>div</code> to another.",
|
|
"jQuery has a function called <code>appendTo()</code> that allows you to select HTML elements and append them to another element.",
|
|
"For example, if we wanted to move <code>target4</code> from our right well to our left well, we would use <code>$(\"#target4\").appendTo(\"#left-well\");</code>",
|
|
"Move your <code>target2</code> element from your <code>left-well</code> to your <code>right-well</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#left-well\").children(\"#target2\").length === 0, 'Your <code>target2</code> element should not be inside your <code>left-well</code>.')",
|
|
"assert($(\"#right-well\").children(\"#target2\").length > 0, 'Your <code>target2</code> element should be inside your <code>right-well</code>.')",
|
|
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed508826",
|
|
"title": "Clone an Element Using jQuery",
|
|
"description": [
|
|
"In addition to moving elements, you can also copy them from one place to another.",
|
|
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
|
|
"For example, if we wanted to copy <code>target2</code> from our <code>left-well</code> to our <code>right-well</code>, we would use <code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
|
|
"Did you notice this involves sticking two jQuery functions together? This is called <code>function chaining</code> and it's a convenient way to get things done with jQuery.",
|
|
"Clone your <code>target5</code> element and append it to your <code>left-well</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'Your <code>target5</code> element should be inside your <code>right-well</code>.')",
|
|
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.')",
|
|
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed308826",
|
|
"title": "Target the Parent of an Element Using jQuery",
|
|
"description": [
|
|
"Every HTML element has a <code>parent</code> element from which it <code>inherits</code> properties.",
|
|
"For example, your <code>jQuery Playground</code> <code>h3</code> element has the parent element of <code><div class=\"container-fluid\"></code>, which itself has the parent <code>body</code>.",
|
|
"jQuery has a function called <code>parent()</code> that allows you to access the parent of whichever element you've selected.",
|
|
"Here's an example of how you would use the <code>parent()</code> function if you wanted to give the parent element of the <code>left-well</code> element a background color of blue: <code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>",
|
|
"Give the parent of the <code>#target1</code> element a background-color of red."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'Your <code>left-well</code> element should have a red background.')",
|
|
"assert(editor.match(/\\.parent\\(\\)\\.css/g), 'You should use the <code>.parent()</code> function to modify this element.')",
|
|
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")\\s*?\\)\\.parent/gi), 'The <code>.parent()</code> method should be called on the <code>#target1</code> element.')",
|
|
"assert(editor.match(/<div class=\"well\" id=\"left-well\">/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed208826",
|
|
"title": "Target the Children of an Element Using jQuery",
|
|
"description": [
|
|
"Many HTML elements have <code>children</code> which <code>inherit</code> their properties from their parent HTML elements.",
|
|
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code><div class=\"container-fluid\"></code> element.",
|
|
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
|
|
"Here's an example of how you would use the <code>children()</code> function to give the children of your <code>left-well</code> element the color of blue: <code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>",
|
|
"Give all the children of your <code>#right-well</code> element a color of green."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#right-well\").children().css(\"color\") === 'rgb(0, 128, 0)', 'All children of <code>#right-well</code> should have green text.')",
|
|
"assert(editor.match(/\\.children\\(\\)\\.css/g), 'You should use the <code>children()</code> function to modify these elements.')",
|
|
"assert(editor.match(/<div class=\"well\" id=\"right-well\">/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed108826",
|
|
"title": "Target a Specific Child of an Element Using jQuery",
|
|
"description": [
|
|
"You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.",
|
|
"Fortunately, jQuery has some other tricks for targeting the right elements.",
|
|
"jQuery uses CSS Selectors to target elements. <code>target:nth-child(n)</code> css selector allows you to select all the nth element with the target class or element type.",
|
|
"Make the second child in each of your well elements bounce. You must target the children of element with the <code>target</code> class.",
|
|
"Here's how you would give the third element in each well bounce: <code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>"
|
|
],
|
|
"tests": [
|
|
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'The second element in your <code>target</code> elements should bounce.')",
|
|
"assert(editor.match(/\\:nth-child\\(/g), 'You should use the <code>:nth-child()</code> function to modify these elements.')",
|
|
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target2\">/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
|
|
" $(\"#right-well\").children().css(\"color\", \"green\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed008826",
|
|
"title": "Target Even Numbered Elements Using jQuery",
|
|
"description": [
|
|
"You can also target all the even-numbered elements.",
|
|
"Here's how you would target all the odd-numbered elements with class <code>target</code> and give them classes: <code>$(\".target:odd\").addClass(\"animated shake\");</code>",
|
|
"Note that jQuery is zero-indexed, meaning that, counter-intuitively, <code>:odd</code> selects the second element, fourth element, and so on.",
|
|
"Try selecting all the even-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of <code>animated</code> and <code>shake</code>."
|
|
],
|
|
"tests": [
|
|
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'All the <code>target</code> elements that computer considers even should shake.')",
|
|
"assert(editor.match(/\\:even/g), 'You should use the <code>:even</code> function to modify these elements.')",
|
|
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target3\">/g), 'Only use jQuery to add these classes to the element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
|
|
" $(\"#right-well\").children().css(\"color\", \"green\");",
|
|
" $(\"#left-well\").children().css(\"color\", \"green\");",
|
|
" $(\".target:nth-child(2)\").addClass(\"animated bounce\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aecb08826",
|
|
"title": "Use jQuery to Modify the Entire Page",
|
|
"description": [
|
|
"We're done playing with our jQuery playground. Let's tear it down!",
|
|
"jQuery can target the <code>body</code> element as well.",
|
|
"Here's how we would make the entire body fade out: <code> $('body').addClass('animated fadeOut')</code>",
|
|
"But let's do something more dramatic. Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element."
|
|
],
|
|
"tests": [
|
|
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
|
|
" $(\"#right-well\").children().css(\"color\", \"green\");",
|
|
" $(\"#left-well\").children().css(\"color\", \"green\");",
|
|
" $(\".target:nth-child(2)\").addClass(\"animated bounce\");",
|
|
" $(\".target:even\").addClass(\"animated shake\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- You shouldn't need to modify code below this line -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
}
|
|
]
|
|
}
|