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
| Fill in the blank to select all paragraphs that don't have the class "optional". | $("p:not________") | (.optional) | ^ *\(\.optional\) *$ |
| Fill in the blank to select all paragraphs that don't have the class "optional". | $("____(.optional)") | p:not | ^ *p:not *$ |
| Fill in the blank to select all paragraphs that don't have the class "optional". | $("p:____________ | not(.optional)") | ^ *not\(\.optional\)•\) *$ |
| Select all paragraphs that don't have the class "optional". | $("p:not(.optional)") | ^ *\$\(•p:not\(\.optional\)•\) *$ | |
| 5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to select all divs that don't have the class "important". | $("div:not(.important)") | ||
| Select all images that don't have the class "optional". | $("img:not(.optional)") | $`(`"`img`:`not`(`.`optional`)`"`) | |
| Select all divs that don't have the id "main". | $("div:not(#main)") | ||
| Select all paragraphs that don't have a particular class. Make up the class name. | $("p:not(.main)") | ^ *\$\(•p:not\(\..+\)•\) *$ | |
| Select all paragraphs and all ordered lists that don't have the class "keep". | $("p:not(.keep), ol:not(.keep)") | ^ *\$\(•p:not\(\.keep\), ol:not\(\.keep\)•\) *$ | |
| Select all paragraphs that don't have a particular class and all images that don't have another particular class. Make up the class names. | $("p:not(.keep), img:not(.important)") | ^ *\$\(•p:not\(\..+\), img:not\(\..+\)•\) *$ | |
| Select all paragraphs that don't have a particular class. Add that class. Make up the class name. | $("p:not(.visible)").addClass("visible"); | ^ *\$\(•p:not\(\.(.+)\)•\)\.addClass\(•\1•\); * | |
| When the user clicks any paragraph that doesn't have the class "necessary", give it a font-size of .5 ems. | $("p:not(.necessary)").on("click", function() { $(this).css("font-size", ".5em"); }); | ^ *\$\(•p:not\(\.necessary\)•\)\.on\(•click•, function\(\) {\n *\$\(this\)\.css\(•font-size•, •\.5em•\);\n}\); *$ | |
| Select all divs that don't have the id "main". | $("div:not(#main)") | ^ *\$\(•div:not\(#main\)•\) *$ | |
| Select all paragraphs that don't have a particular class. Make up the class name. | $("p:not(.main)") | ^ *\$\(•p:not\(\..+\)•\) *$ | |
| Select all paragraphs and all ordered lists that don't have the class "keep". | $("p:not(.keep), ol:not(.keep)") | ^ *\$\(•p:not\(\.keep\), ol:not\(\.keep\)•\) *$ | |
| Select all paragraphs that don't have a particular class and all images that don't have another particular class. Make up the class names. | $("p:not(.keep), img:not(.important)") | ^ *\$\(•p:not\(\..+\), img:not\(\..+\)•\) *$ | |
| Select all paragraphs that don't have a particular class. Add that class. Make up the class name. | $("p:not(.visible)").addClass("visible"); | ^ *\$\(•p:not\(\.(.+)\)•\)\.addClass\(•\1•\); *$ | |
| When the user clicks any paragraph that doesn't have the class "necessary", give it a font-size of .5 ems. | $("p:not(.necessary)").on("click", function() { $(this).css("font-size", ".5em"); }); | ^ *\$\(•p:not\(\.necessary\)•\)\.on\(•click•, function\(\) {\n *\$\(this\)\.css\(•font-size•, •\.5em•\);\n}\); *$ | |
| http://jsfiddle.net/ASmarterWayToLearn/3dnohjcz/ | |||
| http://jsfiddle.net/ASmarterWayToLearn/0kr0tam9/ |