The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.
Name and email required. Check any number of boxes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19
0
0
0
| The list is hidden. Fill in the blank to display it. | $("ol#extra").s_____ | how(); | ^ *s?how\(\); *$ |
| The list is hidden. Fill in the blank to display it using the alternative to show(). | $("ol#extra").______ | toggle(); | ^ *toggle\(\); *$ |
| Hide all images that are displayed and display all images that are hidden. | $("img").toggle(); | ^ *\$\(•img•\)\.toggle\(\); *$ | |
| Display hidden h4 headings without using toggle(). | $("h4").show(); | ^ *\$\(•h4•\)\.show\(\); *$ | |
| 5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to toggle paragraphs when an image is clicked. | $("img").on("click") { $("p").toggle(); }); | ||
| The ID of the image is "alternate". Display it if it's hidden and hide it if it's displayed. | $("img#alternate").toggle(); | $`(`"`img`#`alternate`"`)`.`toggle`(`)`; | |
| Toggle all paragraphs whose class is "opt". | $("p.opt").toggle(); | ||
| Hide a div whose ID is "special". Don't use toggle(). | $("div#special").hide(); | ^ *\$\(•div#special•\)\.hide\(\); *$ | |
| Toggle all images and a paragraph whose ID is "cat". | $("img, p#cat").toggle(); | ^ *\$\(•img, p#cat•\)\.toggle\(\); *$ | |
| A class of elements--images, paragraphs, divs, etc.--has been hidden. Display it. Don't use toggle(). Specify an element of your choice. Make up the class name. | $("h2.special").show(); | ^ *\$\(•.+\..+•\)\.show\(\); *$ | |
| Toggle a particular paragraph in 3 seconds. Make up the ID. | $("p#special").toggle(3000); | ^ *\$\(•p#.+•\)\.toggle\(3000\); *$ | |
| When the user clicks in a form field, display a hidden paragraph. Don't use toggle(). Make up the ID of the field and the paragraph. | $("input#name").on("focus", function() { $("p#hint").show(); }); | ^ *\$\(•input#.+•\)\.on\(•focus•, function\(\) {\n *\$\(•p#.+•\)\.show\(\);\n *\}\); *$ | |
| Toggle all paragraphs whose class is "opt". | $("p.opt").toggle(); | ^ *\$\(•p\.opt•\)\.toggle\(\); *$ | |
| Hide a div whose ID is "special". Don't use toggle(). | $("div#special").hide(); | ^ *\$\(•div#special•\)\.hide\(\); *$ | |
| Toggle all images and a paragraph whose ID is "cat". | $("img, p#cat").toggle(); | ^ *\$\(•img, p#cat•\)\.toggle\(\); *$ | |
| A class of elements--images, paragraphs, divs, etc.--has been hidden. Display it. Don't use toggle(). Specify an element of your choice. Make up the class name. | $("h2.special").show(); | ^ *\$\(•.+\..+•\)\.show\(\); *$ | |
| Toggle a particular paragraph in 3 seconds. Make up the ID. | $("p#special").toggle(3000); | ^ *\$\(•p#.+•\)\.toggle\(3000\); *$ | |
| When the user clicks in a form field, display a hidden paragraph. Don't use toggle(). Make up the ID of the field and the paragraph. | $("input#name").on("focus", function() { $("p#hint").show(); }); | ^ *\$\(•input#.+•\)\.on\(•focus•, function\(\) {\n *\$\(•p#.+•\)\.show\(\);\n *\}\); *$ | |
| http://jsfiddle.net/ASmarterWayToLearn/vbcxzL5t/ | |||
| http://jsfiddle.net/ASmarterWayToLearn/9jvs9943/ |
| The list is hidden. Fill in the blank to display it. | $("ol#extra").s_____ | how(); | ^ *s?how\(\); *$ |
| The list is hidden. Fill in the blank to display it using the alternative to show(). | $("ol#extra").______ | toggle(); | ^ *toggle\(\); *$ |
| Hide all images that are displayed and display all images that are hidden. | $("img").toggle(); | ^ *\$\(•img•\)\.toggle\(\); *$ | |
| Display hidden h4 headings without using toggle(). | $("h4").show(); | ^ *\$\(•h4•\)\.show\(\); *$ | |
| 5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to toggle paragraphs when an image is clicked. | $("img").on("click") { $("p").toggle(); }); | ||
| The ID of the image is "alternate". Display it if it's hidden and hide it if it's displayed. | $("img#alternate").toggle(); | $`(`"`img`#`alternate`"`)`.`toggle`(`)`; | |
| Toggle all paragraphs whose class is "opt". | $("p.opt").toggle(); | ||
| Hide a div whose ID is "special". Don't use toggle(). | $("div#special").hide(); | ^ *\$\(•div#special•\)\.hide\(\); *$ | |
| Toggle all images and a paragraph whose ID is "cat". | $("img, p#cat").toggle(); | ^ *\$\(•img, p#cat•\)\.toggle\(\); *$ | |
| A class of elements--images, paragraphs, divs, etc.--has been hidden. Display it. Don't use toggle(). Specify an element of your choice. Make up the class name. | $("h2.special").show(); | ^ *\$\(•.+\..+•\)\.show\(\); *$ | |
| Toggle a particular paragraph in 3 seconds. Make up the ID. | $("p#special").toggle(3000); | ^ *\$\(•p#.+•\)\.toggle\(3000\); *$ | |
| When the user clicks in a form field, display a hidden paragraph. Don't use toggle(). Make up the ID of the field and the paragraph. | x | ^ *\$\(•input#.+•\)\.on\(•focus•, function\(\) {\n *\$\(•p#.+•\)\.show\(\);\n *\}\); *$ | |
| Toggle all paragraphs whose class is "opt". | $("p.opt").toggle(); | ^ *\$\(•p\.opt•\)\.toggle\(\); *$ | |
| Hide a div whose ID is "special". Don't use toggle(). | $("div#special").hide(); | ^ *\$\(•div#special•\)\.hide\(\); *$ | |
| Toggle all images and a paragraph whose ID is "cat". | $("img, p#cat").toggle(); | ^ *\$\(•img, p#cat•\)\.toggle\(\); *$ | |
| A class of elements--images, paragraphs, divs, etc.--has been hidden. Display it. Don't use toggle(). Specify an element of your choice. Make up the class name. | $("h2.special").show(); | ^ *\$\(•.+\..+•\)\.show\(\); *$ | |
| Toggle a particular paragraph in 3 seconds. Make up the ID. | $("p#special").toggle(3000); | ^ *\$\(•p#.+•\)\.toggle\(3000\); *$ | |
| When the user clicks in a form field, display a hidden paragraph. Don't use toggle(). Make up the ID of the field and the paragraph. | $("input#name").on("focus") { $("p#hint").show(); }); | ^ *\$\(•input#.+•\)\.on\(•focus•\) {\n *\$\(•p#.+•\)\.show\(\);\n *\}\); *$ | |
| http://jsfiddle.net/ASmarterWayToLearn/vbcxzL5t/ | |||
| http://jsfiddle.net/ASmarterWayToLearn/9jvs9943/ |