Subversion Repositories wimsdev

!default num_svg_images=1

!default xsize = 300

!default ysize = 300

!default num_x = 10

!default num_y = 10

!default svg_click_colors = #ff0000,#0000ff,#00ff00

!default svg_bg_color = #ffffff

!default svg_interactive = 1

!default fill_opacity = 1

!default stroke_opacity = 0.8

!default svg_linewidth = 1

!default stroke_color = grey

!! set of coordinates in Quadrant I (fig_x:fig_y) fig_x --> 0...num_x fig_y -->0...num_y with colors from fig_color array

!! fig_x = '1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5'                                                    

!! fig_y = '1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4,5,5,5,5,5'

!! all data will be mapped to integer 5.9 -> 5 !!

!! this image will be protected from user clicks

!default fig_x = null

!default fig_y = null

!default fig_color = #FF0000

!! optional add objects: circle(s), line(s) or polyline; all coordinates are in px; not in 'QI grid'

!! these objects are static; can not be (re)moved and will not be read by read_svg()

!! circle (x,y,r in px) is js.array: 9 elements per circle ['xc_1','yc_1','r_1','linewidth_1','strokecolor_1','strokeopacity_1','filled_1','fillcolor_1','fillopacity_1',...]

!! line is (x,y in px) array: 7 elements per line [ 'x1_1','y1_1','x2_1','y2_1','linewidth_1','strokecolor_1','strokeopacity_1']

!! poly : just one poly allowed 6 elements and x/y pairs in px ['linewidth','strokecolor','strokeopacity','filled','fillcolor',fillopacity','x_1','y_1',...,'x_n','y_n']

<script>

    "use strict";

    var descr_list="$description";

    var description = make_description(descr_list,30);

    function dontknow(){

        var reply = new Array()

        reply[0] = read_svg();

        for( var p = 1 ; p <= $inputs; p++){

            reply[p] = "?";

        }

        myConfirm('$dontknow',reply,'$wims_ref_name','$session','$module','$counter','$nok_send_color');

        return;

    }

    function sendanswer(){

        var reply = new Array();

        reply[0] = read_svg();

        var p = 0;

        if( document.getElementById('myinput0')){

            while( document.getElementById('myinput'+p) ){

                reply[p+1] = document.getElementById('myinput'+p).value;

                p++;

            }

        }

        myConfirm('$send ?',reply,'$wims_ref_name','$session','$module','$counter','$ok_send_color');

        return;

    }

!if $wims_user=supervisor

    function putanswer(){

    !set wims_answer = !words2items $(answer$n)

    !set num_answers = !itemcnt $wims_answer

        var answer = make_description("$wims_answer",$num_answers);

        for(var p=0;p<answer.length;p++){

            document.getElementById('myinput'+p).value = answer[p];

        }

    }

!endif

    function color2hex(color_array){

        var rgb2txt = {"aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff", "beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887", "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff", "darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f", "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1", "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff", "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff", "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f", "honeydew": "#f0fff0", "hotpink": "#ff69b4", "indianred ": "#cd5c5c", "indigo ": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c", "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2", "lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de", "lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6", "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee", "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5", "navajowhite": "#ffdead", "navy": "#000080", "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6", "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1", "saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4", "tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0", "violet": "#ee82ee", "wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5", "yellow": "#ffff00", "yellowgreen": "#9acd32", "darkgrey": "#a9a9a9", "darkslategrey": "#2f4f4f", "dimgrey": "#696969", "grey": "#808080", "lightgray": "#d3d3d3", "lightslategrey": "#778899", "slategrey": "#708090"};

        var lx = color_array.length;

        for(var i = 0 ; i < lx ; i++ ){

            if( rgb2txt[color_array[i].toLowerCase()] !== undefined ){

                color_array[i] = rgb2txt[color_array[i].toLowerCase()];

            }

        }    

        return color_array;

    }

    function svg_mouse(action,myid,img){

        try{action.preventDefault;action.stopPropagation();} catch(e){}

        if( action.which != 1 ){ img.coloridx++;}

        if( img.coloridx >= img.svg_click_colors.length ){ img.coloridx = 0; }

        try{

            var obj = document.getElementById(myid);

            obj.setAttributeNS(null,"fill",img.svg_click_colors[img.coloridx]);

        }catch(e){setAlarm(e);}

    }

    function svg_image(id,xsize,ysize,num_x,num_y,svg_click_colors,svg_bg_color,svg_interactive,fig_x,fig_y,fig_color,fill_opacity,stroke_opacity,svg_linewidth,stroke_color,circle,line,polyline){

        this.circle = circle || null;

        this.line = line || null;

        this.polyline = polyline || null;

        this.svg_id = 'wims_svg'+id || 'wims_svg0';

        this.xsize = xsize || 300;

        this.ysize = ysize || 300;

        this.num_x = num_x || 10;

        this.num_y = num_y || 10;

        this.w = this.xsize / this.num_x;

        this.h = this.ysize / this.num_y;

        this.svg_click_colors = color2hex(svg_click_colors.split(',')) || ['#FF0000','#0000FF'];

        this.svg_bg_color = svg_bg_color.toString() || '#0000FF';

        this.svg_click_colors[this.svg_click_colors.length] = this.svg_bg_color; /* add bgcolor to click array */

        this.svg_interactive = svg_interactive || 1;

        this.fig_x = fig_x || null; /* integer array of x-coordinates of unchangable rects */

        this.fig_y = fig_y || null; /* integer array of y-coordinates of unchangable rects */

        if(this.fig_x != null){

            this.fig_x = (this.fig_x).split(',').map(function(i){return parseInt(i, 10);});

            this.fig_y = (this.fig_y).split(',').map(function(i){return parseInt(i, 10);});

        }

        this.fig_color = color2hex(fig_color.split(',')) || ['#FFFFFF']; /* color array of prefined object */

        this.fill_opacity = fill_opacity || 1;

        this.stroke_opacity = stroke_opacity || 1;

        this.svg_linewidth = svg_linewidth || 1;

        this.stroke_color = stroke_color || '#FFFFFF'; /* color of the grid lines */

        this.coloridx = 0;

        var wims_svg = document.getElementById(this.svg_id);

        var data = (wims_svg.getAttribute("viewBox")).split(' ');

        var sizex = data[2] - data[0];

        var sizey = data[3] - data[1];

        var idx=0;

        var rect_id;

        var found = 0;

        var lx = 0;

        if(this.fig_x != null){

            lx = (this.fig_x).length;

            if( lx != (this.fig_y).length ){ alert("mismatch between \"fig_x\" and \"fig_y\" !" );}

            var lc = (this.fig_color).length

            if( lx > lc ){

                for(var p = lc; p < lx ; p++){

                    this.fig_color[p] = this.fig_color[0]; /* use the first color in array repetitively if needed  */

                }

            }

        }

        for(var y = 0 ; y < this.num_y ; y++){

            for(var x = 0 ; x < this.num_x ; x++){

                var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

                rect_id = this.svg_id+"_"+idx;

                rect.setAttributeNS(null,"width",this.w);

                rect.setAttributeNS(null,"height",this.h);

                rect.setAttributeNS(null,"stroke-width",this.svg_linewidth);

                rect.setAttributeNS(null,"id",rect_id);

                rect.setAttributeNS(null,"x",x*this.w);

                rect.setAttributeNS(null,"y",y*this.h);

                rect.setAttributeNS(null,"stroke",this.stroke_color);

                rect.setAttributeNS(null,"stroke-opacity",this.stroke_opacity);

                rect.setAttributeNS(null,"fill-opacity",this.fill_opacity);

                found = 0;

                if( this.fig_x != null){ /* create proctected squares from arrays fig_x / fig_y */

                    for(var fx = 0; fx < lx && found == 0 ; fx++){

                        if(this.fig_x[fx] == x+1 && this.fig_y[fx] == this.num_y - y ){ /* data all in Quadrant I ... */

                            rect.setAttributeNS(null,"fill",this.fig_color[fx]);

                            found = 1;

                        }

                    }

                }

                if( found == 0 ){

                    rect.setAttributeNS(null,"fill",this.svg_bg_color );

!!                  if("waiting" == "$status" || this.svg_interactive == 1 ){

                    if(this.svg_interactive == 1 ){

                        (function(rect_id){

                            rect.addEventListener("mousedown", function(action){

                            svg_mouse(action,rect_id,eval('image'+id));}, false);

                        }(rect_id));

                    }

                }

                wims_svg.appendChild(rect);

                idx++;

            }

        }

        if(this.circle != null){

            /*

                circle (x,y,r in px) is js.array: 9 elements per circle  

                ['xc_1','yc_1','r_1','linewidth_1','strokecolor_1','strokeopacity_1','filled_1','fillcolor_1','fillopacity_1',...]

            */

            var len = (this.circle).length;

            for(var p = 0 ; p < len; p = p + 9){

                var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

                circle.setAttributeNS(null,"cx",this.circle[p]);

                circle.setAttributeNS(null,"cy",this.circle[p+1]);

                circle.setAttributeNS(null,"r",this.circle[p+2]);

                circle.setAttributeNS(null,"stroke-width",this.circle[p+3]);

                circle.setAttributeNS(null,"stroke",this.circle[p+4]);

                circle.setAttributeNS(null,"stroke-opacity",this.circle[p+5]);

                if( this.circle[p+6] == 1 ){

                    circle.setAttributeNS(null,"fill",this.circle[p+7]);

                    circle.setAttributeNS(null,"fill-opacity",this.circle[p+8]);

                }

                wims_svg.appendChild(circle);

            }

        }

        if(this.line != null){

            /*

                line is (x,y in px) array: 7 elements per line

                [ 'x1_1','y1_1','x2_1','y2_1','linewidth_1','strokecolor_1','strokeopacity_1']

            */

            var len = (this.line).length;

            for(var p = 0 ; p < len; p = p + 7){

                var line = document.createElementNS("http://www.w3.org/2000/svg", "line");

                line.setAttributeNS(null,"x1",this.line[p]);

                line.setAttributeNS(null,"y1",this.line[p+1]);

                line.setAttributeNS(null,"x2",this.line[p+2]);

                line.setAttributeNS(null,"y2",this.line[p+3]);

                line.setAttributeNS(null,"stroke-width",this.line[p+4]);

                line.setAttributeNS(null,"stroke",this.line[p+5]);

                line.setAttributeNS(null,"stroke-opacity",this.line[p+6]);

                wims_svg.appendChild(line);

            }

        }

        if(this.polyline != null){

            /*

                poly : just one poly allowed 6 elements and x/y pairs in px  

                ['linewidth','strokecolor','strokeopacity','filled','fillcolor',fillopacity','x_1','y_1',...,'x_n','y_n']

            */

            var len = (this.polyline).length;

            var points = (this.polyline).splice(6,len);

            var polyline = document.createElementNS("http://www.w3.org/2000/svg", "polyline");

            polyline.setAttributeNS(null,"stroke-width",this.polyline[0]);

            polyline.setAttributeNS(null,"stroke",this.polyline[1]);

            polyline.setAttributeNS(null,"stroke-opacity",this.polyline[2]);

            polyline.setAttributeNS(null,"points",points);

            if(this.polyline[3] == 1 ){

                polyline.setAttributeNS(null,"fill",this.polyline[4]);

                polyline.setAttributeNS(null,"fill-opacity",this.polyline[5]);

            }

            wims_svg.appendChild(polyline);

        }

    }

/* read all svg_images e.g. num_svg_images */

!if $roosterapplet=0

    function read_svg(){

        /* clicktile.jar ; vervanging ReadXY();*/

        var total_reply = new Array($num_svg_images);

        for(var img=0; img<$num_svg_images;img++){

            if( document.getElementById("wims_svg"+img).interactive == 1 ){ /* only read interactive svg images*/

                var idx = 0;

                var tmp_idx = 0;

                tmp_reply=new Array();

                var svgimg = eval('image'+img);

                while( document.getElementById("wims_svg"+img+"_"+idx)){

                    obj = document.getElementById("wims_svg"+img+"_"+idx);

                    color = obj.getAttributeNS(null,"fill");

                    if( color != svgimg.svg_bg_color ){/* e.g. colour is changed */

                        tmp_reply[tmp_idx] = obj.getAttributeNS(null,"x") / this.w+","+obj.getAttributeNS(null,"y") / this.h;

                        tmp_idx++;

                    }

                    idx++;

                }

                total_reply[img]=tmp_reply+"\n";

            }

        }

    }

!else

    function read_svg(){

        /* rooster.jar vervanging String S=total_aantal+","+onveranderd_aantal+","+veranderd_aantal+","+omtrek_van_geklikte_ruitjes;*/

        var total_reply = new Array($num_svg_images);

        for(var img=0; img<$num_svg_images;img++){

            var svgimg = eval('image'+img);

            var x;var y;var click_reply=new Array(4);var obj;var color;var myid;

            var xc = new Array();var yc = new Array();var cc = new Array();

            var idx = 0;

            var width = svgimg.xsize / svgimg.num_x;

            var height = svgimg.ysize / svgimg.num_y

            click_reply[1] = 0; /* unchanged */

            click_reply[2] = 0; /* changed */

            click_reply[3] = 0; /* total perimeter of changed rects */

            while( document.getElementById("wims_svg"+img+"_"+idx)){

                obj = document.getElementById("wims_svg"+img+"_"+idx);

                x = obj.getAttributeNS(null,"x");

                y = obj.getAttributeNS(null,"y");

                xc[idx] = x/width;

                yc[idx] = y/height;

                color = obj.getAttributeNS(null,"fill");

                if( color != svgimg.svg_bg_color ){/* e.g. colour is changed */

                    click_reply[2] = click_reply[2]+1;cc[idx] = 1;

                }

                else

                {

                    click_reply[1]=click_reply[1]+1;cc[idx] = 0;

                }

                idx++;

            }

            click_reply[0] = idx; /* sum */

            /* correct perimetre if size of rectangle != 1x1 */

            var fx;var fy;if( width < height ){ fx = 1 ; fy = height / width;} else { fx = width / height;fy = 1; }

            click_reply[3] = click_reply[2] * (2*fy + 2*fx);/* max perimetre */

            if( click_reply[2] > 1 ){

                for( var i=0 ; i < idx ; i++){

                    if( cc[i] == 1 ){ /* clicked */

                        for( var p=0; p < idx ; p++){ /* look for neighbours */

                            if( cc[p] == 1 && p != i){ /* do not count the same rect */

                                if( xc[i] == xc[p] && yc[i] == yc[p] - 1 ){ click_reply[3] = click_reply[3] - fx;}

                                else

                                if( xc[i] == xc[p] && yc[i] == yc[p] + 1 ){ click_reply[3] = click_reply[3] - fx;}

                                else

                                if( xc[i] == xc[p] - 1 && yc[i] == yc[p] ){ click_reply[3] = click_reply[3] - fy;}

                                else

                                if( xc[i] == xc[p] + 1 && yc[i] == yc[p] ){ click_reply[3] = click_reply[3] - fy;}

                            }

                        }

                    }

                }

            }

            total_reply[img] = click_reply+"\n";

        }

        return total_reply;

    }

    !endif

!endif

</script>

<table id="exercise" class="exercise" >

    <tr>

    <td class="exercise_m">

    !if $(question$n) != $empty

     $(question$n)

    !endif

    !if $exotext != $empty

     <br />

     $exotext

    !endif

    !if $inputs > 0

     <table class="exercise">

      !for p=1 to $inputs

       <tr>

        <td class="exercise_c">

         $(description[$p])

         </td>

         <td class="exercise_c">

           $m_rightarrow 

         </td>

         <td class="exercise_c">

          <input class="schaersvoorde_input" size="$cols" type="text" id="myinput$[$p-1]" value="" />&nbsp;$(ex$p)

         </td>

        </tr>

      !next p

     </table>

    !endif

    </td>

    !if $make_tr=1

    </tr>

    <tr>

    !endif

    !for id=0 to $[$num_svg_images-1]

    !! id = wims_svg$id

    <td class="exercise_c" id="svg_td$id" >

        <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" id="wims_svg$id" width="$xsize" height="$ysize" viewBox="0 0 $xsize $ysize" >

            <g id="svg_transform$id" transform="scale(1)" >

                <image preserveAspectRatio="none" xlink:href="$svg_bgimage" x="0" y="0" height="100%" width="100%"></image>

                <script>

                    !! var image$id = new svg_image($id,$xsize,$ysize,$num_x,$num_y,$svg_click_colors,$svg_bg_color,$svg_interactive,$fig_x,$fig_y,$fig_color,$fill_opacity,$stroke_opacity,$svg_linewidth,$stroke_color,$circle,$line,$polyline);

                    var image$id = new svg_image('$id','$xsize','$ysize','$num_x','$num_y','$svg_click_colors','$svg_bg_color','$svg_interactive','$fig_x','$fig_y','$fig_color','$fill_opacity','$stroke_opacity','$svg_linewidth','$stroke_color');

                </script>

            </g>

        </svg>

    </td>

    !next id

    </tr>

</table>

<div id="send_buttons" class="embedded_central">

    <input type="button" id="schaersvoorde_ok_button" onclick="javascript:sendanswer();" value="$send" />

    <input type="button" id="schaersvoorde_nok_button" onclick="javascript:dontknow();"  value="$dontknow" />

    !if $wims_user=supervisor

        <input type="button" id="schaersvoorde_extra_button" onclick="javascript:putanswer();" value="$wims_firstname $wims_lastname" />

    !endif

</div>

!exit