Graphics on Perplexus - More
It comes from http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm and is available for free download under GNU License.
Walter Zorn places the path to the library within the HEAD tags of HTML but we can't do that at Perplexus, I include that as the first line of my problem.
TABLE width="x%" TR TD
(Text appearing above graphic can be added here.)
DIV id="name" style="position:relative;" DIV
(add 'padding' BR tags to the area to ensure lower text is not obscured by graphic.)
TD TR TABLE
The graphic coding goes in this next section.
var nm = new jsGraphics("name");
Further functions and follow with:<font>
nm.paint( );This is absolutely necessary.
(Note that the syntaxof the tags lacks the "greater/less than" symbols and the closing slash from the second of each Html tag couple.)
This order is important (but the center and table taggings are for the cosmetic purpose of locating the DIV).
* The first SCRIPT references the Library with 'path' being the address of "wz_jsgraphics.js" or "jvg.js" on Perplexus.
* Adjust the value of 'x' to locate the graphic properly.
* The Library writes to a DIV element and this needs an id_name.
* The style="position:relative;" is important to ensure that the top left corner of the display screen is not the origin (0,0), ie, we can locate it as we choose within our document.
* The var declaration is critical, note its syntax; the italics are however your choice.
Each call to one of the Library functions must be prefixed by the variable value of 'nm', eg nm.drawLine(a,b,c,d). While the numeric arguments assigned to the functions must be integers they may be addressed with variables,
the listing below draws a grid with lines 30 pixels apart (and note that this defaults to a style position:absolute, ie the screen window's [0,0] position).
On Perplexus the src text is
DIV id="myCanvas" DIV
var jg=new jsGraphics("myCanvas");
SCRIPT src="http://perplexus.info/jvg/jvg.js" SCRIPT.
It helps to understand that each item is drawn within a virtual rectangle with its origin (X,Y) at the top left of that rectangle whether or not that setting is expressed in the fuction. The available functions are:
setColor("#xxxxxx" or "name"); fillEllipse(X, Y, width, height);
setStroke(X); fillArc(X, Y, width, height, start-angle, end-angle);
drawLine(X1, Y1, X2, Y2); setFont("font-family", "size+unit", Style);
drawPolyLine(Xpoints, Ypoints); drawString("Text", X, Y);
drawRect(X, Y, width, height); drawStringRect("Text", X, Y, Width, Alignment);
fillRect(X, Y, width, height); drawImage("src",X, Y, width, height);
drawPolygon(Xpoints, Ypoints); paint();
fillPolygon(Xpoints, Ypoints); clear();
drawEllipse(X, Y, width, height); setPrintable(true);
Please see the Walter Zorn page for more about the Library functions and their arguments.
Should you decide to use this technique to compose a problem for Perplexus please ask a scholar to submit the problem on your behalf. This means that you allocate the name, category, etc on Perplexus as you would normally do, leave some text in the Problem body area (it could be complete text without code if you wish). Then email either the complete problem with code, or just the code, depending on how you choose to do it. That will mean that we should not have a problem appearing in some corrupt format.