Exam 70-480 topic 4 question 2 discussion

Actual exam question from Microsoft's 70-480

Question #: 2
Topic #: 4

You develop an interactive scalable vector graphic (SVG) application.
You write the following code (Line numbers are included for reference only.):

You need to increase the size of the circle by 50 percent.
Which code segment should you insert at line 02?

A. Option A
B. Option B
C. Option C
D. Option D

Show Suggested Answer

Suggested Answer: D 🗳️
Increase the radius (the r property) of the circle (not the graphic) by a factor 1.5.
Incorrect:
CurrentScale is used for zooming.
Reference: The HTML <svg> Element

by JMz123 at Nov. 4, 2019, 2:37 p.m.

Comments

Submit Cancel

thereconjacob

4 years, 10 months ago

C & D are incorrect, in Internet Explorer, B is the correct answer.

upvoted 1 times

...

elevator44

4 years, 10 months ago

If we choose C, keyword "currentScale" doesn't work and even when keyword is changed to "r" it just changes circle size from size 20 to 1.5: function zoomIn(){ var myCircle = document.getElementById("myCircle"); myCircle.setAttribute("currentScale", 1.5); } If we choose D it has to be changed from myCircle.r to myCircle.r.baseVal.value and then it scales: function zoomIn(){ var myCircle = document.getElementById("myCircle"); //myCircle.r = myCircle.r * 1.5; myCircle.r.baseVal.value = myCircle.r.baseVal.value * 1.5; } Test done in https://jsfiddle.net

upvoted 1 times

...

KyryIx

5 years, 3 months ago

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"/> </head> <body> <script> function zoomIn(){ var myCircle = document.getElementById("myCircle"); //myCircle.r = myCircle.r * 1.5; myCircle.r.baseVal.value = myCircle.r.baseVal.value * 1.5; } </script> <svg height="150" width="150" id="myGraphic"> <circle cx="25" r="20" cy="20" fill="orange" id="myCircle"/> </svg> <button id="zoom" onclick="zoomIn();">Zoom In</button> </body> </html>

upvoted 3 times

mart123

5 years, 1 month ago

this seems to work https://jsfiddle.net/cLu1dtgz/

upvoted 1 times

...

MoSalah10

5 years, 4 months ago

ANSWER IS C: ANSWER C <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="gold" id="circle" onclick="clickCircle();"/> </svg> function clickCircle() { var circle = document.getElementById("circle"); var change = Math.random() > 0.5 ? 10 : -10; var newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250); circle.setAttribute("r", newValue); }

upvoted 1 times

...

MoSalah10

5 years, 4 months ago

Answer is C : https://developer.mozilla.org/en-US/docs/Web/API/SVGCircleElement

upvoted 1 times

...

JMz123

5 years, 7 months ago

NOPE. SVG is more complicated that it needs to be ... var myCircle = document.getElementById("myCircle"); console.log("myCircle.radius =" + myCircle.getAttribute("r")); // FAIL myCircle.r = myCircle.r * 1.5; var rad = myCircle.getAttribute("r"); myCircle.setAttribute("r", rad * 1.2);

upvoted 3 times

...