Subversion Repositories wimsdev

        type = get_token(infile);

        type = get_token(infile);

        done = FALSE;

        done = FALSE;

        /*

        /*

        @ canvasdraw

        @ canvasdraw

        @ Canvasdraw will try use the same basic syntax structure as flydraw

        @ Canvasdraw will try use the same basic syntax structure as flydraw

        @ You can check the javascript reply format in the wims tool <a href="http://localhost/wims/wims.cgi?lang=en&module=tool/directexec">direct exec</a>

        @ You can check the javascript reply format in the wims tool <a href="http://localhost/wims/wims.cgi?lang=en&module=tool/directexec">direct exec</a>

        @ For usage within OEF (without anstype ''draw``), something like this (a popup function plotter) will work:<br /><code>\\text{popup_grapher=wims(exec canvasdraw <br />popup<br />size 400,400<br />xrange -10,10<br />yrange -10,10<br />axis<br />axisnumbering<br />opacity 100,100<br />grid 2,2,grey,2,2,6,black<br />snaptogrid<br />linewidth 2<br />jsplot red,5*sin(1/x)<br />strokecolor green<br />functionlabel f(x)=<br />userinput function<br />mouse blue,22<br />)<br />}<br />\\statement{<br />\\popup_grapher<br />}</code>.

        @ For usage within OEF (without anstype ''draw``), something like this (a popup function plotter) will work:<br /><code>\\text{popup_grapher=wims(exec canvasdraw <br />popup<br />size 400,400<br />xrange -10,10<br />yrange -10,10<br />axis<br />axisnumbering<br />opacity 100,100<br />grid 2,2,grey,2,2,6,black<br />snaptogrid<br />linewidth 2<br />jsplot red,5*sin(1/x)<br />strokecolor green<br />functionlabel f(x)=<br />userinput function<br />mouse blue,22<br />)<br />}<br />\\statement{<br />\\popup_grapher<br />}</code>.

        @ Be aware that older browsers will probably not work correctly<br />no effort has been undertaken to add glue code for older browsers !! <br />in any case it is not wise to use older browsers...not just for canvasdraw.

        @ Be aware that older browsers will probably not work correctly<br />no effort has been undertaken to add glue code for older browsers !! <br />in any case it is not wise to use older browsers...not just for canvasdraw.

        @ Be aware that combining several different objects and interactivity may lead to problems.

        @ Be aware that combining several different objects and interactivity may lead to problems.

        @ If you find flaws, errors or other incompatibilities -not those mentioned in this document- send <a href='mailto:jm.evers-at-schaersvoorde.nl'>me</a> an email with screenshots and the generated javascript include file.

        @ If you find flaws, errors or other incompatibilities -not those mentioned in this document- send <a href='mailto:jm.evers-at-schaersvoorde.nl'>me</a> an email with screenshots and the generated javascript include file.

         @ the button label will be default the ''object primitive name`` (like ''point``, ''circles``).<br />If you want a different label (e.g. an other language), use command ''multilabel``<br />for example in dutch: <br /><code>multilabel cirkel,lijnstuk,punten,STOP<br />multidraw circle,segment,points</code><br />(see command <a href='#multilabel'>multilabel</a> for more details)

         @ the button label will be default the ''object primitive name`` (like ''point``, ''circles``).<br />If you want a different label (e.g. an other language), use command ''multilabel``<br />for example in dutch: <br /><code>multilabel cirkel,lijnstuk,punten,STOP<br />multidraw circle,segment,points</code><br />(see command <a href='#multilabel'>multilabel</a> for more details)

         @ a right mouse button click will remove the last drawn object of the selected drawing type. All other type of objects are not removed

         @ a right mouse button click will remove the last drawn object of the selected drawing type. All other type of objects are not removed

         @ multidraw is incompatible with command ''tooltip`` (the reserved div_area is used for the multidraw control buttons)

         @ multidraw is incompatible with command ''tooltip`` (the reserved div_area is used for the multidraw control buttons)

         @ all ''multidraw`` drawings will scale on zooming.<br />this in contrast to the command <a href="#userdraw">userdraw</a>.

         @ all ''multidraw`` drawings will scale on zooming.<br />this in contrast to the command <a href="#userdraw">userdraw</a>.

         @ wims will <b>not</b> check the amount or validity of your command arguments ! <br />( use javascript console to debug any typo's )

         @ wims will <b>not</b> check the amount or validity of your command arguments ! <br />( use javascript console to debug any typo's )

         @ It is best to prepare / format the student reply in clientside javascript.<br />However in ''wims`` language you could use something like this<br />for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...)<br />note: the reply for 2 poly5's is: x11,x12,x13,x14,x15,x21,x22,x23,x24,x25 ; y11,y12,y13,y14,y15,y21,y22,y23,y24,y25<br />rep = !line 7 of reply <br />rep = !translate ';' to '\\n' in &#36;rep <br />pts = 5 # 5 points for polygon <br />x_rep = !line 1 of &#36;rep <br />y_rep = !line 2 of &#36;rep <br />tot = !itemcnt &#36;x_rep <br />num_poly = &#36;[&#36;tot/&#36;pts] <br />idx = 0 <br />!for p=1 to &#36;num_poly <br />&nbsp;!for s=1 to &#36;pts <br />&nbsp;&nbsp;!increase idx <br />&nbsp;&nbsp;X = !item &#36;idx of &#36;x_rep <br />&nbsp;&nbsp;Y = !item &#36;idx of &#36;y_rep <br />&nbsp;&nbsp;# do some checking <br />&nbsp;!next s <br />!next p <br />

         @ It is best to prepare / format the student reply in clientside javascript.<br />However in ''wims`` language you could use something like this<br />for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...)<br />note: the reply for 2 poly5's is: x11,x12,x13,x14,x15,x21,x22,x23,x24,x25 ; y11,y12,y13,y14,y15,y21,y22,y23,y24,y25<br />rep = !line 7 of reply <br />rep = !translate ';' to '\\n' in &#36;rep <br />pts = 5 # 5 points for polygon <br />x_rep = !line 1 of &#36;rep <br />y_rep = !line 2 of &#36;rep <br />tot = !itemcnt &#36;x_rep <br />num_poly = &#36;[&#36;tot/&#36;pts] <br />idx = 0 <br />!for p=1 to &#36;num_poly <br />&nbsp;!for s=1 to &#36;pts <br />&nbsp;&nbsp;!increase idx <br />&nbsp;&nbsp;X = !item &#36;idx of &#36;x_rep <br />&nbsp;&nbsp;Y = !item &#36;idx of &#36;y_rep <br />&nbsp;&nbsp;# do some checking <br />&nbsp;!next s <br />!next p <br />

         @ <b>attention</b>: for command argument ''closedpoly``, only one polygone can be drawn. The last point (e.g. the point clicked near the first point) of the array is removed.

         @ <b>attention</b>: for command argument ''closedpoly``, only one polygone can be drawn. The last point (e.g. the point clicked near the first point) of the array is removed.

         @ technical: all 10 ''draw primitives`` + ''text`` will have their own -transparent- PNG bitmap canvas. <br />So for example there can be a points_canvas entirely separated from a line_canvas.<br />This to avoid the need for a complete redraw when something is drawn to the canvas...(eg only the object_type_canvas is redrawn), this in contrast too many very slow do-it-all HTML5 canvas javascript libraries.<br />The mouselisteners are attached to the canvas-div element.

         @ technical: all 10 ''draw primitives`` + ''text`` will have their own -transparent- PNG bitmap canvas. <br />So for example there can be a points_canvas entirely separated from a line_canvas.<br />This to avoid the need for a complete redraw when something is drawn to the canvas...(eg only the object_type_canvas is redrawn), this in contrast too many very slow do-it-all HTML5 canvas javascript libraries.<br />The mouselisteners are attached to the canvas-div element.

         @ a special object type is ''images``.<br />if used together with <a href='#imagepalette'>imagepalette</a> a image table will be integrated in the 'control section' of multidraw (set <code>multiuserinput 1</code> for ''images``) if not used with <a href='#imagepalette'>imagepalette</a>, provide the images or div's (&lt;img&gt; tag with bitmap or SVG or anything in a div element) somewhere on the html exercise page, with an onclick handler like:<br /><code>&lt;img src='gifs/images/dog.svg' onclick='javascript:place_image_on_canvas(this.id);' id="ext_image_1" /&gt;<br />&lt;img src='gifs/fish.png' onclick='javascript:place_image_on_canvas(this.id);' id="another" /&gt;</code><br />etc ... when activating the multidraw ''image`` button, the images can be selected<br /> (left mouse button/onclick) and placed on the canvas...left mouse click.<br />using div's will enable you -amongst other content- to add math typesetting from the exercise page onto the canvas.

         @ a special object type is ''images``.<br />if used together with <a href='#imagepalette'>imagepalette</a> a image table will be integrated in the 'control section' of multidraw (set <code>multiuserinput 1</code> for ''images``) if not used with <a href='#imagepalette'>imagepalette</a>, provide the images or div's (&lt;img&gt; tag with bitmap or SVG or anything in a div element) somewhere on the html exercise page, with an onclick handler like:<br /><code>&lt;img src='gifs/images/dog.svg' onclick='javascript:place_image_on_canvas(this.id);' id="ext_image_1" /&gt;<br />&lt;img src='gifs/fish.png' onclick='javascript:place_image_on_canvas(this.id);' id="another" /&gt;</code><br />etc ... when activating the multidraw ''image`` button, the images can be selected<br /> (left mouse button/onclick) and placed on the canvas...left mouse click.<br />using div's will enable you -amongst other content- to add math typesetting from the exercise page onto the canvas.

         @ When you are not content with the default ''multidraw control panel``, you can create your own interface, using a few javascript functions to call the drawprimitives, delete things and ''stop drawing`` in case you also want to drag&drop stuff...</br>To activate this feature, use <a href='#multilabel'>multilabel NOCONTROLS</a><br />The object types are internally represented by the following numbers (making typos will render your exercise null and void)<br/>point = 0<br />points =1<br />circle = 2<br />circles = 3<br />line = 4<br />lines = 5<br />segment = 6<br />segments = 7<br />arrow = 8<br />arrows = 9<br />triangle = 10<br />triangles = 11<br />closedspoly = 12<br />text = 13<br />rect = 14<br />rects = 15<br />poly[3-9] = 16<br />polys[3-9] = 17<br />parallelogram = 18<br />parallelograms = 19<br />images       = 20<br />curvedarrow = 21<br />curvedarrows = 22<br />curvedarrow2 = 23<br />curvedarrows2 = 24<br />crosshair = 25<br />crosshairs = 26 <br />controls for example:<br /><code>&lt;input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' /&gt;<br />&lt;input type='button' onclick='javascript:userdraw_primitive=24;multidraw_object_cnt = 0;' value='start drawing curvedarrows2' /&gt; <br />&lt;input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW ' /&gt; </code><br/> If using multiple canvas scripts in a single page, loop through the canvas_scripts[n] <br />note: if using NOCONTROLS and just a single draw primitive (for example, just: 'multidraw circles'), the object may be drawn directly. (analogue to 'userdraw circles,color')<br />And since a right mouse button click will always remove the last drawn object of the current object type, there is no need for a special "remove button"

         @ When you are not content with the default ''multidraw control panel``, you can create your own interface, using a few javascript functions to call the drawprimitives, delete things and ''stop drawing`` in case you also want to drag&drop stuff...</br>To activate this feature, use <a href='#multilabel'>multilabel NOCONTROLS</a><br />The object types are internally represented by the following numbers (making typos will render your exercise null and void)<br/>point = 0<br />points =1<br />circle = 2<br />circles = 3<br />line = 4<br />lines = 5<br />segment = 6<br />segments = 7<br />arrow = 8<br />arrows = 9<br />triangle = 10<br />triangles = 11<br />closedspoly = 12<br />text = 13<br />rect = 14<br />rects = 15<br />poly[3-9] = 16<br />polys[3-9] = 17<br />parallelogram = 18<br />parallelograms = 19<br />images       = 20<br />curvedarrow = 21<br />curvedarrows = 22<br />curvedarrow2 = 23<br />curvedarrows2 = 24<br />crosshair = 25<br />crosshairs = 26 <br />controls for example:<br /><code>&lt;input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' /&gt;<br />&lt;input type='button' onclick='javascript:userdraw_primitive=24;multidraw_object_cnt = 0;' value='start drawing curvedarrows2' /&gt; <br />&lt;input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW ' /&gt; </code><br/> If using multiple canvas scripts in a single page, loop through the canvas_scripts[n] <br />note: if using NOCONTROLS and just a single draw primitive (for example, just: 'multidraw circles'), the object may be drawn directly. (analogue to 'userdraw circles,color')<br />And since a right mouse button click will always remove the last drawn object of the current object type, there is no need for a special "remove button"

            @ popup

            @ popup

            @ keyword (no arguments)

            @ keyword (no arguments)

            @ if fly-script starts with keyword ''popup``, the canvas image will be exclusively in a popup window (xsize px × ysize px)

            @ if fly-script starts with keyword ''popup``, the canvas image will be exclusively in a popup window (xsize px × ysize px)

            @ if keyword ''popup`` is used after command <code>size xsize,ysize</code> the canvas will also be displayed in a popup window with size ''xsize &times; ysize``

            @ if keyword ''popup`` is used after command <code>size xsize,ysize</code> the canvas will also be displayed in a popup window with size ''xsize &times; ysize``

            @ the popup window will be embedded into the page as a normal image, when ''status=done``; override with keyword <a href="#status">nostatus</a>

            @ the popup window will be embedded into the page as a normal image, when ''status=done``; override with keyword <a href="#status">nostatus</a>

            @ to set a canvasdraw produced <a href="#clock">clock</a> or multiple clocks...use something like: <code>popup.set_clock(clock_id,type,diff);</code> as js-function for a button (or something else) in your document page.<br />where in <b>clock_id</b> starts with 0 for the first clock<br /><b>type</b> is 1 for Hours,2 for Minutes and 3 for Seconds<br /><b>diff</b> is the increment (positive or negative) per click

            @ to set a canvasdraw produced <a href="#clock">clock</a> or multiple clocks...use something like: <code>popup.set_clock(clock_id,type,diff);</code> as js-function for a button (or something else) in your document page.<br />where in <b>clock_id</b> starts with 0 for the first clock<br /><b>type</b> is 1 for Hours,2 for Minutes and 3 for Seconds<br /><b>diff</b> is the increment (positive or negative) per click

            @%popup%popup%size 400,400%xrange -2*pi,2*pi%yrange -5,5%precision 0%axis%axisnumbering%opacity 100,190%grid 1,1,grey,2,2,5,black%linewidth 4%fillcolor blue%trange -pi,pi%animate%linewidth 1%precision 1000%jsplot red,4*cos(2*x),2*sin(3*x-pi/6)%strokecolor green%functionlabel H(x)=%userinput function

            @%popup%popup%size 400,400%xrange -2*pi,2*pi%yrange -5,5%precision 0%axis%axisnumbering%opacity 100,190%grid 1,1,grey,2,2,5,black%linewidth 4%fillcolor blue%trange -pi,pi%animate%linewidth 1%precision 1000%jsplot red,4*cos(2*x),2*sin(3*x-pi/6)%strokecolor green%functionlabel H(x)=%userinput function

            */

            */

            use_tooltip = 2;

            use_tooltip = 2;

            break;

            break;

canvas_scripts.push(\"%d\");\n/*]]>*/\n</script>\n\

canvas_scripts.push(\"%d\");\n/*]]>*/\n</script>\n\

",canvas_root_id);

",canvas_root_id);

/* style=\"display:block;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\" */

/* style=\"display:block;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\" */

if( use_tooltip != 2){

if( use_tooltip != 2){

<div tabindex=\"0\" id=\"canvas_div%d\" style=\"position:relative;width:%dpx;height:%dpx;margin-left:auto;margin-right:auto;\" oncontextmenu=\"return false;\"></div>\n\

<div tabindex=\"0\" id=\"canvas_div%d\" style=\"position:relative;width:%dpx;height:%dpx;margin-left:auto;margin-right:auto;\" oncontextmenu=\"return false;\"></div>\n\

<!-- tooltip and input placeholder  -->\n\

<!-- tooltip and input placeholder  -->\n\

<div id=\"tooltip_placeholder_div%d\" style=\"text-align:center\"><span id=\"tooltip_placeholder%d\" style=\"display:none;\"></span></div>\

<div id=\"tooltip_placeholder_div%d\" style=\"text-align:center\"><span id=\"tooltip_placeholder%d\" style=\"display:none;\"></span></div>\

<!-- include actual object code via include file -->\n\

<!-- include actual object code via include file -->\n\

<script id=\"canvas_script%d\" src=\"%s\" defer></script>\n",canvas_root_id,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,getfile_cmd);

<script id=\"canvas_script%d\" src=\"%s\" defer></script>\n",canvas_root_id,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,getfile_cmd);

{

{

/*

/*

set canvas_div invisible and do not include placeholder in main html page:

set canvas_div invisible and do not include placeholder in main html page:

the js-include will also be in a popup window...to be shown when wims $status = done

the js-include will also be in a popup window...to be shown when wims $status = done

*/

*/

<div tabindex=\"0\" id=\"canvas_div%d\" style=\"display:none;position:relative;width:%dpx;height:%dpx;margin-left:auto;margin-right:auto;\" ></div>\n\

<div tabindex=\"0\" id=\"canvas_div%d\" style=\"display:none;position:relative;width:%dpx;height:%dpx;margin-left:auto;margin-right:auto;\" ></div>\n\

<div id=\"tooltip_placeholder_div%d\" style=\"display:none;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\"><span id=\"tooltip_placeholder%d\" style=\"display:none;\"></span></div>\

<div id=\"tooltip_placeholder_div%d\" style=\"display:none;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\"><span id=\"tooltip_placeholder%d\" style=\"display:none;\"></span></div>\

<!-- include actual object code via include file -->\n\

<!-- include actual object code via include file -->\n\

<script id=\"canvas_script%d\" src=\"%s\"></script>\n",canvas_root_id,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,getfile_cmd);

<script id=\"canvas_script%d\" src=\"%s\"></script>\n",canvas_root_id,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,getfile_cmd);

}

}