PrepAway - Latest Free Exam Questions & Answers

How should you complete the relevant code?

HOTSPOT
You develop an interactive scalable vector graphics (SVG) application. You write the following HTML
markup that makes a rectangle rotate:

You need to control the speed of the rotating rectangle.
How should you complete the relevant code? (To answer, select the appropriate option from each
drop-down list in the answer area.)

PrepAway - Latest Free Exam Questions & Answers

Answer:

Explanation:

Note:
* What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized

Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation
* Example:

<script>
/* CONSTANTS */
var initialTheta = 0; // The initial rotation angle, in degrees.
var thetaDelta = 0.3; // The amount to rotate the square every "delay" milliseconds, in degrees.
var delay = 10; // The delay between animation stills, in milliseconds. Affects animation
smoothness.
var angularLimit = 90; // The maximum number of degrees to rotate the square.
/*
Note that it will take the square (angularLimit/thetaDelta)*delay milliseconds to rotate an
angularLimit
number of degrees. For example, (90/0.3)*10 = 3000 ms (or 3 seconds) to rotate the square 90
degrees.
*/
/* GLOBALS */
var theSquare; // Will contain a reference to the square element, as well as other things.
var timer; // Contains the setInterval() object, used to stop the animation.
function init()
/*
Assumes that this function is called after the page loads.
*/
{
theSquare = document.getElementById("mySquare"); // Set this custom property after the page
loads.
theSquare.currentTheta = initialTheta; // The initial rotation angle to use when the animation
starts, stored in
timer = setInterval(doAnim, delay); // Call the doAnim() function every "delay" milliseconds until
"timer" is cleared.
}
function doAnim()
/*
This function is called by setInterval() every "delay" milliseconds.
*/
{
if (theSquare.currentTheta > angularLimit)
{
clearInterval(timer); // The square has rotated enough, instruct the browser to stop calling the
doAnim() function.
return; // No point in continuing; stop now.
}
theSquare.setAttribute("transform", "rotate(" + theSquare.currentTheta + ")"); // Rotate the
square by a small amount.
theSquare.currentTheta += thetaDelta; // Increase the angle that the square will be rotated to,
by a small amount.
}
</script>
</head>

17 Comments on “How should you complete the relevant code?”

  2. M says:

    The correct anwers are the following:

    1) document.getElementById(“mySquare”);
    2) setInterval(animateImage, speed.value); – unfortunately there is no such option, so the the next one right by relevant is myTimer.Interval(speed.value);
    3) squareShape.setAttribute(“transform”, “rotate(“




    8



    0
    2. Damien says:

      I think using rotate here would cause the rectangle to spin increasingly quickly because of the statement:

      squareShape.currentTheta += 0.1;

      directly after the setAttribute is used. I think angle should be used instead of rotate. In this case it would do the same as rotate would if squareShape.currentTheta wasn’t incremented.




      0



      0
  8. coder12878 says:

    There are definitely parts of code missing in this question, which makes the answer difficult to say. M is correct, however, Fabian is also right. ‘Speed’ also has to be assigned – currently, there is no value for ‘speed’ in the given code.

    I’ve found that SVG doesn’t work in Chrome, but it works in IE.




    0



    0

Leave a Reply