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 change the image source. | $(this).___("src", "loris.jpg"); | attr | ^ *attr *$ |
| Fill in the blank to change the image source. | $(this).attr(______ "loris.jpg"); | "src", | ^ *•src•, *$ |
| Replace an image whose id is "pic1" with pic_2.png. | $("img#pic1").attr("src", "pic_2.png"); | ^ *\$\(•img#pic1•\)\.attr\(•src•, •pic_2\.png•\); *$ | |
| Replace an image whose id is "cat" with dog.jpg. | $("img#cat").attr("src", "dog.jpg"); | ^ *\$\(•img#cat•\)\.attr\(•src•, •dog\.jpg•\); *$ | |
| 5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to replace an image with a new image and replace its alternate text as well. | $("img#loris").attr("src", "possum.jpg").attr("alt", "possum"); | ||
| Replace all images whose class is "replaceable" with logo.png. | $("img.replaceable").attr("src", "logo.png"); | $`(`"`img`.`replaceable`"`)`.`attr`(`"`src`"`comma`1space"`logo.png`"`)`; | |
| Replace an image whose id is "dog" with an image whose name is stored in the variable pic. | $("img#dog").attr("src", pic); | ||
| An image selector has been assigned to the variable pic_1. Replace it with logo.png. | pic_1.attr("src", "logo.png"); | ^ *pic_1\.attr\(•src•, •logo\.png•\); *$ | |
| Replace an image. Make up the id of the first image and the name of the replacement image. The replacement image can be any of the three major image file types. | $("img#cat").attr("src", "dog.jpg"); | ^ *\$\(•img#.+•\)\.attr\(•src•, •.+.(jpg|png|gif)•\); *$ | |
| Assign an image selector to a variable. Then, using the variable as the selector, replace the image. Make up the image id, variable name, and replacement image name. The replacement image can be any of the three major image file types. | var pic = $("img#cat"); pic.attr("src", "dog.jpg"); | ^ *var (([a-zA-Z$_][a-zA-Z$_0-9]*)) = \$\(•img#.+•\);\n *\1.attr\(•src•, •.+\.(jpg|png|gif)•\); *$ | |
| Assign an image selector to a variable. Assign an image name to a second variable. Then, using the variables, replace the first image with the second image. Make up the variable names, the id of the first image, and the name of the replacement image. The replacement image can be any of the three major image file types. | var pic = $("img#cat"); var replacement = "dog.jpg"; pic.attr("src", replacement); | ^ *var (([a-zA-Z$_][a-zA-Z$_0-9]*)) = \$\(•img#.+•\);\n *var (([a-zA-Z$_][a-zA-Z$_0-9]*)) = •.+\.(jpg|png|gif)•;\n *\1.attr\(•src•, \3\); *$ | |
| When the user clicks an image, it is replaced by "loris.jpg" | $("img").on("click", function() { $(this).attr("src", "loris.jpg"); }); | ^ *\$\(•img•\)\.on\(•click•, function\(\) {\n *\$\(this\)\.attr\(•src•, •loris\.jpg•\);\n *}\); *$ | |
| Replace an image whose id is "dog" with an image whose name is stored in the variable pic. | $("img#dog").attr("src", pic); | ^ *\$\(•img#dog•\)\.attr\(•src•, pic\); *$ | |
| An image selector has been assigned to the variable pic_1. Replace it with logo.png. | pic_1.attr("src", "logo.png"); | ^ *pic_1\.attr\(•src•, •logo\.png•\); *$ | |
| Replace an image. Make up the id of the first image and the name of the replacement image. The replacement image can be any of the three major image file types. | $("img#cat").attr("src", "dog.jpg"); | ^ *\$\(•img#.+•\)\.attr\(•src•, •.+.(jpg|png|gif)•\); *$ | |
| Assign an image selector to a variable. Then, using the variable as the selector, replace the image. Make up the image id, variable name, and replacement image name. The replacement image can be any of the three major image file types. | var pic = $("img#cat"); pic.attr("src", "dog.jpg"); | ^ *var (([a-zA-Z$_][a-zA-Z$_0-9]*)) = \$\(•img#.+•\);\n *\1.attr\(•src•, •.+\.(jpg|png|gif)•\); *$ | |
| Assign an image selector to a variable. Assign an image name to a second variable. Then, using the variables, replace the first image with the second image. Make up the variable names, the id of the first image, and the name of the replacement image. The replacement image can be any of the three major image file types. | var pic = $("img#cat"); var replacement = "dog.jpg"; pic.attr("src", replacement); | ^ *var (([a-zA-Z$_][a-zA-Z$_0-9]*)) = \$\(•img#.+•\);\n *var (([a-zA-Z$_][a-zA-Z$_0-9]*)) = •.+\.(jpg|png|gif)•;\n *\1.attr\(•src•, \3\); *$ | |
| When the user clicks an image, it is replaced by "loris.jpg" | $("img").on("click", function() { $(this).attr("src", "loris.jpg"); }); | ^ *\$\(•img•\)\.on\(•click•, function\(\) {\n *\$\(this\)\.attr\(•src•, •loris\.jpg•\);\n *}\); *$ | |
| http://jsfiddle.net/ASmarterWayToLearn/yd8tq7dw/ | |||
| http://jsfiddle.net/ASmarterWayToLearn/e0rw3ky5/ |