IT Specialist HTML5 Application Development - INF-306 Exam Practice Test
A form has four buttons with a class of item. You need to apply an event listener to all buttons to invoke the moveElement function when a button is pressed. Your code must ensure bubble capture.
Complete the markup by selecting the correct option from each drop-down list.
Note: You will receive partial credit for each correct selection.
Complete the markup by selecting the correct option from each drop-down list.
Note: You will receive partial credit for each correct selection.
Correct Answer:
Explanation:
First drop-down: " click " ,
Second drop-down: moveElement,
Third drop-down: false,
The correct event listener syntax is addEventListener(type, listener, useCapture). The first argument must be " click " because the function must run when a button is pressed. The second argument must be moveElement, not moveElement(), because the event listener expects a function reference. Using parentheses would call the function immediately while the page is loading instead of waiting for the user to press a button. The third argument controls the event phase. false means the listener runs during the bubbling phase, which is the normal behavior for button click handling. true would register the listener for the capturing phase instead.
Since the code uses document.querySelectorAll( " .item " ), it selects all elements with the class item. The for loop then attaches the same click listener to each selected button individually. This ensures that all four buttons invoke moveElement when clicked.
Which two functions support 2D transformations in CSS3? Choose 2.
Correct Answer: A,C
Vote an answer
Explanation: Only visible for PassTestking members. You can sign-up / login (it's free).
You are drawing on the canvas defined by the white square.
At which x, y coordinate is the upper-left corner of the filled square?
At which x, y coordinate is the upper-left corner of the filled square?
Correct Answer: A
Vote an answer
Explanation: Only visible for PassTestking members. You can sign-up / login (it's free).
Which markup segment creates an SVG ellipse?
Correct Answer: D
Vote an answer
Explanation: Only visible for PassTestking members. You can sign-up / login (it's free).
You have created custom error messages for a form. When a user attempts to submit the form with invalid data, the data must remain in the form and error messages must be displayed. Which Event property or method should you use?
Correct Answer: D
Vote an answer
Explanation: Only visible for PassTestking members. You can sign-up / login (it's free).
Which code segment correctly displays images with 80% transparency and a blue 8px shadow?
Correct Answer: C
Vote an answer
Explanation: Only visible for PassTestking members. You can sign-up / login (it's free).
You need to draw a blue rectangle that meets these conditions:
* It is 200 by 200 pixels.
* It contains a white circle that is centered within the rectangle.
* The circle has a 50-pixel radius.
* The image should appear as follows: a blue square with a centered white circle.
Refer to the image on the left.
You need to ensure that the image scales without distortion when the page is resized. You must not be required to use JavaScript.
Complete the code by selecting the correct option from each drop-down list.
Note: You will receive partial credit for each correct selection.
* It is 200 by 200 pixels.
* It contains a white circle that is centered within the rectangle.
* The circle has a 50-pixel radius.
* The image should appear as follows: a blue square with a centered white circle.
Refer to the image on the left.
You need to ensure that the image scales without distortion when the page is resized. You must not be required to use JavaScript.
Complete the code by selecting the correct option from each drop-down list.
Note: You will receive partial credit for each correct selection.
Correct Answer:
Explanation:
First blank: < svg width= " 200 " height= " 200 " >
Second blank: < rect width= " 200 " height= " 200 "
Third blank: < circle cx= " 100 " cy= " 100 " r= " 50 "
Fourth blank: < /svg >
The correct solution uses SVG because SVG graphics are vector-based and can scale without pixel distortion when the page or viewport changes. A < canvas > element would require script-based drawing logic, which violates the requirement that JavaScript must not be required. An < img > or < picture > element can display an image, but those options do not define the rectangle and circle directly in markup. The outer container must therefore be < svg width= " 200 " height= " 200 " > . The blue square is created with < rect width= " 200 " height= " 200 " fill= " blue " / > , which produces a rectangle matching the required 200-by-200 dimensions.
The centered white circle must use SVG circle geometry: cx= " 100 " and cy= " 100 " place the center at the midpoint of the 200-by-200 square, and r= " 50 " creates the required 50-pixel radius. The final closing tag must be < /svg > .