Skip to content
Snippets Groups Projects
Commit 44047271 authored by srosse's avatar srosse
Browse files

no-jira: graphic association interaction without applet

parent 0dbb6e96
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/main/resources/rendering-xslt/interactions/graphicAssociateInteraction.xsl
+ 157
− 1
View file @ 44047271
......@@ -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 &gt; 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>
......
src/main/resources/rendering-xslt/interactions/graphicOrderInteraction.xsl
+ 3
− 3
View file @ 44047271
......@@ -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);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment