diff --git a/src/main/resources/rendering-xslt/interactions/graphicAssociateInteraction.xsl b/src/main/resources/rendering-xslt/interactions/graphicAssociateInteraction.xsl
index 8ae77ebd5356a3676d51a7fbb8577cf674535d13..4aa271493951f9fbf07e1634ef4887d4bac88199 100644
--- a/src/main/resources/rendering-xslt/interactions/graphicAssociateInteraction.xsl
+++ b/src/main/resources/rendering-xslt/interactions/graphicAssociateInteraction.xsl
@@ -22,14 +22,169 @@
<xsl:variable name="object" select="qti:object" as="element(qti:object)"/>
<xsl:variable name="appletContainerId" select="concat('qtiworks_id_appletContainer_', @responseIdentifier)" as="xs:string"/>
+ <xsl:variable name="hotspots" select="qw:filter-visible(qti:associableHotspot)" as="element(qti:associableHotspot)*"/>
+ <xsl:variable name="responseValue" select="qw:get-response-value(/, @responseIdentifier)" as="element(qw:responseVariable)?"/>
+
<div id="{$appletContainerId}" class="appletContainer">
+
+ <div id="{$appletContainerId}_container" style="width:{$object/@width}px; height:{$object/@height}px; position:relative; background-image: url('{qw:convert-link-full($object/@data)}') " data-openolat="">
+ <canvas id="{$appletContainerId}_canvas" width="{$object/@width}" height="{$object/@height}" style="position:absolute; top:0;left:0; "></canvas>
+ <img id="{$appletContainerId}" width="{$object/@width}" height="{$object/@height}" src="{qw:convert-link-full($object/@data)}" usemap="#{$appletContainerId}_map" style="position:absolute; top:0; left:0; opacity:0;"></img>
+ <map name="{$appletContainerId}_map">
+ <xsl:for-each select="$hotspots">
+ <!-- @label, @matchGroup, @matchMax -->
+ <area id="{@identifier}" shape="{@shape}" coords="{@coords}" href="#" data-maphilight=''></area>
+ </xsl:for-each>
+ </map>
+ </div>
+
+ <script type="text/javascript">
+ <![CDATA[
+ function toCoords(area) {
+ var coords = area.attr('coords').split(',');
+ for (i=coords.length; i-->0; ) {
+ coords[i] = parseFloat(coords[i]);
+ }
+ return coords;
+ };
+
+ function draw_shape(context, shape, coords, x_shift, y_shift) {
+ x_shift = x_shift || 0;
+ y_shift = y_shift || 0;
+
+ context.beginPath();
+ if(shape == 'rect') {
+ // x, y, width, height
+ context.rect(coords[0] + x_shift, coords[1] + y_shift, coords[2] - coords[0], coords[3] - coords[1]);
+ } else if(shape == 'poly') {
+ context.moveTo(coords[0] + x_shift, coords[1] + y_shift);
+ for(i=2; i < coords.length; i+=2) {
+ context.lineTo(coords[i] + x_shift, coords[i+1] + y_shift);
+ }
+ } else if(shape == 'circ' || shape == 'circle') {
+ // x, y, radius, startAngle, endAngle, anticlockwise
+ context.arc(coords[0] + x_shift, coords[1] + y_shift, coords[2] - 2, 0, Math.PI * 2, false);
+ }
+ context.closePath();
+ context.lineWidth = 4;
+ context.strokeStyle = '#003300';
+ context.stroke();
+ context.fillStyle = 'green';
+ context.fill();
+ };
+
+ function drawArea(c, areaId) {
+ var areaEl = jQuery('#' + areaId);
+ var shape = areaEl.attr('shape');
+ var coords = toCoords(areaEl);
+ draw_shape(c, shape, coords, 0, 0);
+ };
+ ]]>
+ <xsl:choose>
+ <xsl:when test="qw:is-not-null-value($responseValue)">
+
+ jQuery(function() {
+ var canvas = document.getElementById('<xsl:value-of select="$appletContainerId"/>_canvas');
+ var c = canvas.getContext('2d');
+ c.clearRect(0, 0, jQuery(canvas).width(), jQuery(canvas).height());
+
+ var drawedSpots = [];
+ var pairs = '<xsl:value-of select="$responseValue/qw:value" separator=","/>'.split(',');
+ for(var i=pairs.length; i-->0; ) {
+ var pair = pairs[i].split(' ');
+ for(var j=pair.length; j-->0; ) {
+ if(0 > drawedSpots.indexOf(pair[j])) {
+ drawArea(c, pair[j]);
+ drawedSpots.push(pair[j]);
+ }
+ }
+
+ var coords1 = toCoords(jQuery('#' + pair[1]));
+ var coords2 = toCoords(jQuery('#' + pair[0]));
+
+ c.beginPath();
+ c.moveTo(coords1[0], coords1[1]);
+ c.lineTo(coords2[0], coords2[1]);
+ c.lineWidth = 3;
+ c.stroke();
+ }
+ });
+
+ </xsl:when>
+ <xsl:otherwise>
+
+ jQuery(function() {
+ jQuery('#<xsl:value-of select="$appletContainerId"/>_container area').on("click", function(e) {
+ var r = 8;
+ var maxChoices = 3;
+
+ var data = jQuery("#<xsl:value-of select="$appletContainerId"/>_container").data("openolat") || {};
+ if(data.listOfPairs == undefined) {
+ data.currentSpot = '';
+ data.listOfPairs = [];
+ jQuery("#<xsl:value-of select="$appletContainerId"/>_container").data('openolat', data);
+ }
+
+ var areaId = jQuery(this).attr('id');
+
+ if(data.currentSpot == '' || data.currentSpot == areaId) {
+ data.currentSpot = areaId;
+ } else {
+ var newPair = [data.currentSpot, areaId];
+ data.listOfPairs.push(newPair);
+ data.currentSpot = '';
+ }
+
+ var canvas = document.getElementById('<xsl:value-of select="$appletContainerId"/>_canvas');
+ var c = canvas.getContext('2d');
+ c.clearRect(0,0,jQuery(canvas).width(),jQuery(canvas).height());
+
+ var divContainer = jQuery('#<xsl:value-of select="$appletContainerId"/>_container');
+ divContainer.find("input[type='hidden']").remove();
+
+ var drawedSpots = [];
+ if(data.currentSpot != '') {
+ drawArea(c, data.currentSpot);
+ drawedSpots.push(data.currentSpot);
+ }
+
+ for(var i=data.listOfPairs.length; i-->0; ) {
+ var pair = data.listOfPairs[i];
+ for(var j=pair.length; j-->0; ) {
+ if(0 > drawedSpots.indexOf(pair[j])) {
+ drawArea(c, pair[j]);
+ drawedSpots.push(pair[j]);
+ }
+ }
+
+ var coords1 = toCoords(jQuery('#' + pair[1]));
+ var coords2 = toCoords(jQuery('#' + pair[0]));
+
+ c.beginPath();
+ c.moveTo(coords1[0], coords1[1]);
+ c.lineTo(coords2[0], coords2[1]);
+ c.lineWidth = 3;
+ c.stroke();
+
+ var inputElement = jQuery('<input type="hidden"/>')
+ .attr('name', 'qtiworks_response_RESPONSE')
+ .attr('value', pair[0] + " " + pair[1]);
+ divContainer.prepend(inputElement);
+ }
+ });
+ });
+
+ </xsl:otherwise>
+ </xsl:choose>
+
+ </script>
+ <!--
<object type="application/x-java-applet" height="{$object/@height + 40}" width="{$object/@width}">
<param name="code" value="BoundedGraphicalApplet"/>
<param name="codebase" value="{$appletCodebase}"/>
<param name="identifier" value="{@responseIdentifier}"/>
<param name="baseType" value="pair"/>
<param name="operation_mode" value="graphic_associate_interaction"/>
- <!-- (BoundedGraphicalApplet uses -1 to represent 'unlimited') -->
<param name="number_of_responses" value="{if (@maxAssociations > 0) then @maxAssocations else -1}"/>
<param name="background_image" value="{qw:convert-link-full($object/@data)}"/>
<xsl:variable name="hotspots" select="qw:filter-visible(qti:associableHotspot)" as="element(qti:associableHotspot)*"/>
@@ -54,6 +209,7 @@
select="$appletContainerId"/>', ['<xsl:value-of select="@responseIdentifier"/>']);
});
</script>
+ -->
</div>
</div>
</xsl:template>
diff --git a/src/main/resources/rendering-xslt/interactions/graphicOrderInteraction.xsl b/src/main/resources/rendering-xslt/interactions/graphicOrderInteraction.xsl
index 074059e5e0342f518aa51aa98711077f527e016a..ff67e70ca304509192277f64f11b7afae2b70fa8 100644
--- a/src/main/resources/rendering-xslt/interactions/graphicOrderInteraction.xsl
+++ b/src/main/resources/rendering-xslt/interactions/graphicOrderInteraction.xsl
@@ -46,7 +46,7 @@
c.clearRect(0, 0, jQuery(canvas).width(), jQuery(canvas).height());
var areaIds = '<xsl:value-of select="$responseValue/qw:value" separator=","/>'.split(',');
- for(i=areaIds.length; i-->0; ) {
+ for(var i=areaIds.length; i-->0; ) {
var areaEl = jQuery('#' + areaIds[i]);
var position = areaEl.attr('coords').split(',');
var cx = position[0];
@@ -79,7 +79,7 @@
var remove = false;
var newListOfPoints = [];
- for(i=data.listOfPoints.length; i-->0;) {
+ for(var i=data.listOfPoints.length; i-->0;) {
var p = data.listOfPoints[i];
var rc = ((p.x - cx)*(p.x - cx)) + ((p.y - cy)*(p.y - cy));
if(r*r > rc) {
@@ -104,7 +104,7 @@
var divContainer = jQuery('#<xsl:value-of select="$appletContainerId"/>_container');
divContainer.find("input[type='hidden']").remove();
- for(i=data.listOfPoints.length; i-->0;) {
+ for(var i=data.listOfPoints.length; i-->0;) {
var p = data.listOfPoints[i];
c.font = "16px Arial";
c.fillText("" + (i+1), p.x, p.y);