Generate a Image with Coordinates

Question

I hope you can help me figure out how to solve my Problem.

I wanted to build a online learningtyp test like this one:

http://till.schnupp.net/honey-mumfort/

The Questions are in german and the script is written in JS. I get pretty much everything and how the author of this script solved the part with building the Questions and visualizing them. Now what I don't get is, how he is able to use the userinput, to visualize the userinput. The userinput is used to generate 4 Points in the coordinate system.

How can I do that in PHP or JS?

http://till.schnupp.net/honey-mumfort/result.php?14&4&5&20

14, 4, 5, 20 is for example the userinput, which is then transfered from the js to the resulat.php

Now you can see this picture for example.

Example Picture from the Site

Could you maybe kindly refer to php or js possibilites I can use to solve that problem?

Answer 1

"how he is able to use the userinput, to visualize the userinput"

If you look at the HTML you will see:

<input type="checkbox" name="yes80" value="P" onclick="onoff(80,yes80,no80)">

and

<input type="checkbox" name="yes80" value="A" onclick="onoff(80,yes80,no80)">

Each checkbox is give an value of A, P, R or T. The JavaScript simply loops through the checkboxes adding up all of the A's, P's R's and T's then passes these values onto the php code.

Answer 2

Dmitriy

thank you very much for you contribution.

@Jeff

What I didn't know was how these values are used to draw this coordinate system. Is there a php function which draws a picture and uses the values as points?

@m.dmitriy

Is it possible to make the Radar look like a coordinate system, with 2 axces ?

I think if i only define 4 labels it should be drawn like that?

Thank you

Answer 3

You can try to do that with SVG. ( codepen here )

To be easier, I will try to explain my idea based on drawings:

1. the purple area is the svg container itself

2. the blue area is the div container

3. the orange area is a symmetric polygon relative to center of purple svg container, just for example

4. the yellow polygon is your element that can be changed through input

The svg system has the starting point in the top-left corner (0,0) as shown in fig.1 . Because you want to keep your figure in the center , the coordinates will have either half of width , either half of height

Basically you will have this (x,y) coordinates in clockwise order

• top : x/2 , input
• right : input, y/2
• bottom: x/2, input
• left : input, y/2

As you can see, top and bottom are the same, the difference is the center line, over it or behind it, as shown in fig.2. We do not have the x and y axis so we use what we have, width and height , therefore all the calculations will be relative to W and H . As in fig.3 , the right and left are relative to the blue line, if the input is smaller than x/2 the point will be in the left side.

 let svgElement = document.getElementById("mySvg") let svgWidth = svgElement.getAttribute("width"); let svgHeight = svgElement.getAttribute("height"); // x , y | x , y | x , y | x , y // points: svgWidth/2,input input,svgHeight/2 svgHeight/2,input input,svgHeight/2 document.getElementById("newSvg").addEventListener("click", function(){ let topValue = document.getElementById("top").value; let rightValue = document.getElementById("right").value; let bottomValue = document.getElementById("bottom").value; let leftValue = document.getElementById("left").value; let svgNewPoints = svgWidth/2 +"," + topValue + " " + rightValue +"," + svgHeight/2 + " " + svgHeight/2 + "," + bottomValue + " " + leftValue + "," + svgHeight/2 console.log(svgNewPoints) document.getElementById("myPolygon").setAttribute("points", svgNewPoints); });

 #conatainer{ width: 350px; height: 350px; background-color: #3458eb; } #mySvg{ background-color: #4b3a8c; } .warning{ color: red; } .textAxis{ color: white }

 <div id="conatainer"> <!-- blue --> <svg id="mySvg" width="300" height="300" version = "1.1"> <!-- perfect polygon as example --> <polygon points = "150,10 290,150 150,290 10,150 " fill="#ff8000" stroke = "black" stroke-width = "2"/> <!-- your yellow editable polygon --> <polygon id="myPolygon" points = "150,20 190,150 150,250 70,150 " fill = "#ffb300" stroke = "black" stroke-width = "2"/> <text x="170" y="20" fill: "white" >Y</text> <line x1="150" y1="0" x2="150" y2="300" stroke="black" /> <!-- y axis --> <text x="290" y="140" fill: "white" >X</text> <line x1="0" y1="150" x2="300" y2="150" stroke="black" /> <!-- x axis --> </svg> </div> <div id="controls" > <div class ="myInput"> <label for="top">Top</label> <input id="top" value="20"> <label class="warning" for="male"> smaller than height/2</label> </div> <div class ="myInput"> <label for="right">Right</label> <input id="right" value="190"> <label class="warning" for="male"> bigger than width/2</label> </div> <div class ="myInput"> <label for="bottom">Bottom</label> <input id="bottom" value="250"> <label class="warning" for="male"> bigger than height/2</label> </div> <div class ="myInput"> <label for="left">Left</label> <input id="left" value="70"> <label class="warning" for="male">smaller than width/2</label> </div> <button id="newSvg"> Resize </button> </div>

I tried to explain as simple as I could, if you have questions, feel free to ask. Based on this idea, you can try to make your own system.

Answer 4

I think you should try to use ready solution for this. As an example: https://www.chartjs.org/docs/latest/charts/radar.html . It might be helpfull.