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
What is the keyword for flying something in from the side? | animate | ^ *animate *$ | |
To position the element off the screen, its position must be fixed, relative, or _______. | absolute | ^ *absolute *$ | |
Fill in the blank to land the element 15% in from the right edge of the screen. | $(this). animate({____ "15%"}); | right: | ^ *right: *$ |
What's missing from the following code? Type four characters in the order in which they should occur. | $(this).animate(left: 15%); | {""} | ^ *{••} *$ |
5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to start the div out of sight on the left side of the screen. | position: absolute; left: -400px; | ||
Land $(this) 15% in from the left edge. | $(this).animate({left: "15%"}); | $`(`this`)`.`animate`(`{`left`:`1space"`15%`"}`)`; | |
Land $(this) 50 pixels down from the top. | $(this).animate({top: "50px"}); | ||
To position an element off the screen, its position must be ________ or ________ or ________. Separate the three keywords with a space. | relative absolute fixed | ^ *(relative|absolute|fixed) *(relative|absolute|fixed) *(relative|absolute|fixed) *$ | |
Land a div 300 pixels from the left edge. Make up its id. | $("div#billboard").animate({left: "300px"}); | ^ *\$\(•div#.+•\)\.animate\({left: •300px•}\); *$ | |
Land a div 10% down from the top. Make up its id. | $("div#special").animate({top: "10%"}); | ^ *\$\(•div#.+•\)\.animate\({top: •10%•}\); *$ | |
Code two lines of CSS that position an element 400 pixels beyond the left edge of the screen so it's hidden and 250 pixels down from the top of the screen. Don't indent. | left: -400px; top: 250px; | ^ *left: -400px;\n *top: 250px; *$ | |
When the user clicks any div, an image flies in and lands a certain percentage from the left edge. Make up the image's id and the percentage amount. | $("div").on("click", function() { $("img#loris").animate({left: "50%"}); }); | ^ *\$\(•div•\)\.on\(•click•, function\(\) {\n *\$\(•img#.+•\)\.animate\({left: •[0-9]+%•}\);\n *}\); *$ | |
Move $(this) 50 pixels down from the top. | $(this).animate({top: "50px"}); | ^ *\$\(this\)\.animate\({top: •50px•}\); *$ | |
To position an element off the screen, its position must be ________ or ________ or ________. Separate the three keywords with a space. | relative absolute fixed | ^ *(relative|absolute|fixed) *(relative|absolute|fixed) *(relative|absolute|fixed) *$ | |
Land a div 300 pixels from the left edge. Make up its id. | $("div#billboard").animate({left: "300px"}); | ^ *\$\(•div#.+•\)\.animate\({left: •300px•}\); *$ | |
Land a div 10% down from the top. Make up its id. | $("div#special").animate({top: "10%"}); | ^ *\$\(•div#.+•\)\.animate\({top: •10%•}\); *$ | |
Code two lines of CSS that position an element 400 pixels beyond the left edge of the screen so it's hidden and 250 pixels down from the top of the screen. Don't indent. | left: -400px; top: 250px; | ^ *left: -400px;\n *top: 250px; *$ | |
When the user clicks any div, an image flies in and lands a certain percentage from the left edge. Make up the image's id and the percentage amount. | $("div").on("click", function() { $("img#loris").animate({left: "50%"}); }); | ^ *\$\(•div•\)\.on\(•click•, function\(\) {\n *\$\(•img#.+•\)\.animate\({left: •[0-9]+%•}\);\n *}\); *$ | |
http://jsfiddle.net/ASmarterWayToLearn/ddrtnc3t/ | |||
http://jsfiddle.net/ASmarterWayToLearn/wdzevzt1/ |