Question

In: Computer Science

The x slider will control the circles with id xl and xr.    As the sliders move...

The x slider will control the circles with id xl and xr.    As the sliders move too the right the two circles get closer together until they meet in the middle. The y slider will control the circles with id yt and yb.    As the sliders move too the right the two circles get closer together until they meet in the middle. When all four circles are in the green square the circle should be red and black otherwise. The position and size of the square is random, and changes position and size when you load the page.

Instructions:

  • Start with the files in midW05.zip.
  • When all the circles are in the square all the circles should be red.
  • Write a helper function call isCircleInRect that accepts an id of a circle and an id of a red box returns true if the center of the circle is in the box and false otherwise.
  • Implement the sliderXListener such that the two circles with id's xl and xr move closers together as the slider value increases and meet at the middle, changes the color of the circle if necessary.
  • Implement the sliderYListener such that the two circles with id's yt and yb move closers together as the slider value increases and meet at the middle, changes the color of the circle if necessary.
  • Uses the helper functions isCircleInRect to help implement the event listeners.

.html file:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="questionW05.js" defer></script>

    <title>Midterm Question</title>

    <script>

        function setup(){

            let box = document.querySelector("#box");

            let size = Math.random()*20 + 90;

            let x = Math.random()*10 + 45;

            let y = Math.random()*10 + 45;

            box.setAttribute("x",x);

            box.setAttribute("y",y);

            box.setAttribute("width",size);

            box.setAttribute("height", size);

        }

    </script>

</head>

<body onload="setup()">

    <svg width="200px" height="200px">

        <!-- the size and position of the rectangle changes randomly

            when the page is reloaded -->

        <rect id="box" x="50" y="50" width = "100" height="100" fill="green"/>

        <g id="circles">

            <circle id="xl" cx="0" r="10" cy="100" fill="black" />

            <circle id="xr" cx="200" r="10" cy="100" fill="black" />

            <circle id="yt" cx="100" r="10" cy="0" fill="black" />

            <circle id="yb" cx="100" r="10" cy="200" fill="black" />

        </g>

        

    </svg><br>

    <label>X Slider</label><input id="xSlider" type="range" min="0" max="100" value="0" oninput="sliderXListener(event)"><br>

    <label>Y Slider</label><input id="ySlider" type="range" min="0" max="100" value="0" oninput="sliderYListener(event)"><br>

</body>

</html>

.js file:

function isCircleInRect(circ, rect){

}

function sliderXListener(event){

  

}

function sliderYListener(event){

}

Solutions

Expert Solution

function isCircleInRect(circ, rect){
    let circle = document.getElementById(circ);
    let rectangle = document.getElementById(rec);
    let coordX = circle.getAttribute("cx");
    let coordY = circle.getAttribute("cy");
    let rectX = rectangle.getAttribute("x");
    let rectY = rectangle.getAttribute("y");
    if (coordX   ) {

    }
}

function sliderXListener(event){
  let circleA = document.querySelector("#xl");
  let circleB = document.querySelector("#xr");

  let sliderX = document.querySelector("#xSlider");

  let xln = circleA.getAttribute("cx");
  let xrn = circleB.getAttribute("cx");

  circleA.setAttribute("cx", sliderX.value);
  circleB.setAttribute("cx", 200 - sliderX.value);
}

function sliderYListener(event){
  let circleC = document.querySelector("#yt");
  let circleD = document.querySelector("#yb");

  let sliderY = document.querySelector("#ySlider");

  let ytn = circleC.getAttribute("cy");
  let ybn = circleD.getAttribute("cy");

  circleC.setAttribute("cy", sliderY.value);
  circleD.setAttribute("cy", 200 - sliderY.value);

}

venereology answered 3 months ago
Next > < Previous

Related Solutions

The graph shows the discounted value of $1 over time. Move the slider to change the...
The graph shows the discounted value of $1 over time. Move the slider to change the compound interest rate and observe how the curve for the present value of $1 changes. The red dotted cursor lines show the present value of $1 at a specific time period in the future. Drag on the graph to select different time periods. PV​N​​=​FV​N​​​​1​​=​(1+I)​N​​​​1​​=​(1+0.050)​3.0​​​​1​​=​1.16​​1​​=$0.86 What is the present value of $1 due in 3 years when the discount interest rate is 10%? $1.33 $1.00...
Learning Goal: To understand why charged particles move in circles perpendicular to a magnetic field and...
Learning Goal: To understand why charged particles move in circles perpendicular to a magnetic field and why the frequency is an invariant. A particle of charge q and mass m moves in a region of space where there is a uniform magnetic field B⃗ =B0k^(i.e., a magnetic field of magnitude B0 in the +z direction). (Figure 1) In this problem, neglect any forces on the particle other than the magnetic force. Part D If the resulting trajectory of the charged particle...
1.In fruit flies, eye color is an X-linked trait. Red eyes (XR) are dominant over white...
1.In fruit flies, eye color is an X-linked trait. Red eyes (XR) are dominant over white eyes (Xr)A homozygous dominant female mates with a white-eyed male. What is the phenotypic ratio among males? a.1:0 (all male offspring will have red eyes) b.1:1 (half of the male offspring will have red eyes and half will have white eyes) c.0:1 (all male offspring will have white eyes) 2.In fruit flies, eye color is an X-linked trait. Red eyes (XR) are dominant over...
. Let two circles C1 and C2 intersect at X and Y. Prove that a point...
. Let two circles C1 and C2 intersect at X and Y. Prove that a point P is on the line XY if and only if the power of P with respect to C1 is equal to the power of P with respect to C
1. Which of the follows is not a logical control? Select one: a. Login ID b....
1. Which of the follows is not a logical control? Select one: a. Login ID b. Firewalls c. Encryption d. Surveillance cameras 2. Within the context of internal auditing, assurance services are best defined as: Select one: a. Professional activities that measure and communicate financial and business data b. Objective examinations of evidence for the purpose of providing independent assessments c. Advisory services intended to add value and improve an organization’s operations d. Objective evaluations of compliance with policies, plans,...
Id methods to control fluid intake in someone who has a restriction on the amount of...
Id methods to control fluid intake in someone who has a restriction on the amount of fluids allowed in 24hrs.
A certain transverse wave is described by y(x,t)=Bcos[2π(xL−tτ)], where B = 5.40 mm , L =...
A certain transverse wave is described by y(x,t)=Bcos[2π(xL−tτ)], where B = 5.40 mm , L = 28.0 cm , and τ = 4.00×10−2 s . a)Determine the wave's wavelength. b)Determine the wave's speed of propagation
Using matlab I need to create five random circles with grid x and y (100,100). Also...
Using matlab I need to create five random circles with grid x and y (100,100). Also create 10 different colors x(1:100) and y (1:100)
Porter Climate Control is evaluating a proposal to move some manufacturing operations from an obsolescent plant...
Porter Climate Control is evaluating a proposal to move some manufacturing operations from an obsolescent plant in Illinois to a new facility in Mexico. The new facility will cost $58 million to open. and is expected to result in savings of $16 million per year for the first five years. At the end of 5 years, Porter will decide either to close the plant in Mexico or to keep it indefinitely. If Porter closes the plant, the building and equipment...
Porter Climate Control is evaluating a proposal to move some manufacturing operations from an obsolescent plant...
Porter Climate Control is evaluating a proposal to move some manufacturing operations from an obsolescent plant in Illinois to a new facility in Mexico. The new facility will cost $58 million to open. and is expected to result in savings of $16 million per year for the first five years. At the end of 5 years, Porter will decide either to close the plant in Mexico or to keep it indefinitely. If Porter closes the plant, the building and equipment...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT