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

no-jira: graphic order interaction without applet

parent e6ea84fb
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/graphicOrderInteraction.xsl
+ 99
− 35
View file @ 0dbb6e96
...@@ -22,41 +22,105 @@ ...@@ -22,41 +22,105 @@
<xsl:variable name="object" select="qti:object" as="element(qti:object)"/> <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="appletContainerId" select="concat('qtiworks_id_appletContainer_', @responseIdentifier)" as="xs:string"/>
<div id="{$appletContainerId}" class="appletContainer"> <xsl:variable name="hotspotChoices" select="qw:filter-visible(qti:hotspotChoice)" as="element(qti:hotspotChoice)*"/>
<object type="application/x-java-applet" height="{$object/@height + 40}" width="{$object/@width}"> <xsl:variable name="responseValue" select="qw:get-response-value(/, @responseIdentifier)" as="element(qw:responseVariable)?"/>
<param name="code" value="BoundedGraphicalApplet"/>
<param name="codebase" value="{$appletCodebase}"/> <div id="{$appletContainerId}_container" class="appletContainer" style="width:{$object/@width}px; height:{$object/@height}px; position:relative; background-image: url('{qw:convert-link-full($object/@data)}') " data-openolat="">
<param name="identifier" value="{@responseIdentifier}"/>
<param name="object_type" value="TEXT"/> <canvas id="{$appletContainerId}_canvas_alt" width="{$object/@width}" height="{$object/@height}" style="position:absolute; top:0;left:0; opacity:1; " ></canvas>
<param name="operation_mode" value="graphic_order_interaction"/> <canvas id="{$appletContainerId}_canvas" width="{$object/@width}" height="{$object/@height}" style="position:absolute; top:0;left:0; "></canvas>
<param name="number_of_responses" value="{count(qti:hotspotChoice)}"/> <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>
<param name="background_image" value="{qw:convert-link-full($object/@data)}"/> <map name="{$appletContainerId}_map">
<xsl:variable name="hotspotChoices" select="qw:filter-visible(qti:hotspotChoice)" as="element(qti:hotspotChoice)*"/> <xsl:for-each select="$hotspotChoices">
<param name="hotspot_count" value="{count($hotspotChoices)}"/> <area id="{@identifier}" shape="{@shape}" coords="{@coords}" href="#" ></area>
<xsl:for-each select="$hotspotChoices"> </xsl:for-each>
<param name="hotspot{position()-1}"> </map>
<xsl:attribute name="value"><xsl:value-of select="@identifier"/>::::<xsl:value-of select="@shape"/>::<xsl:value-of select="@coords"/><xsl:if test="@label">::hotSpotLabel:<xsl:value-of select="@label"/></xsl:if><xsl:if test="@matchGroup">::<xsl:value-of select="translate(normalize-space(@matchGroup), ' ', '::')"/></xsl:if></xsl:attribute>
</param> <script type="text/javascript">
</xsl:for-each> <xsl:choose>
<param name="movable_element_count" value="{count($hotspotChoices)}"/> <xsl:when test="qw:is-not-null-value($responseValue)">
<xsl:for-each select="$hotspotChoices">
<param name="movable_object{position()-1}" value="{position()}::{position()}"/> jQuery(function() {
</xsl:for-each> var canvas = document.getElementById('<xsl:value-of select="$appletContainerId"/>_canvas');
<xsl:variable name="responseValue" select="qw:get-response-value(/, @responseIdentifier)" as="element(qw:responseVariable)?"/> var c = canvas.getContext('2d');
<xsl:if test="qw:is-not-null-value($responseValue)"> c.clearRect(0, 0, jQuery(canvas).width(), jQuery(canvas).height());
<param name="feedback">
<xsl:attribute name="value"> var areaIds = '<xsl:value-of select="$responseValue/qw:value" separator=","/>'.split(',');
<xsl:value-of select="$responseValue/qw:value" separator=","/> for(i=areaIds.length; i-->0; ) {
</xsl:attribute> var areaEl = jQuery('#' + areaIds[i]);
</param> var position = areaEl.attr('coords').split(',');
</xsl:if> var cx = position[0];
</object> var cy = position[1];
<script type="text/javascript"> console.log(cx, cy);
jQuery(document).ready(function() {
QtiWorksRendering.registerAppletBasedInteractionContainer('<xsl:value-of c.font = "16px Arial";
select="$appletContainerId"/>', ['<xsl:value-of select="@responseIdentifier"/>']); c.fillText("" + (i+1), cx, cy);
}); }
</script> });
</xsl:when>
<xsl:otherwise>
jQuery(function() {
jQuery('#<xsl:value-of select="$appletContainerId"/>_container area').on("click", function(e) {
var r = 8;
var maxChoices = <xsl:value-of select="count($hotspotChoices)"/>;
var areaId = jQuery(this).attr('id');
var position = jQuery(this).attr('coords').split(',');
var cx = position[0];
var cy = position[1];
var data = jQuery("#<xsl:value-of select="$appletContainerId"/>_container").data("openolat") || {};
if(data.listOfPoints == undefined) {
data.listOfPoints = [];
jQuery("#<xsl:value-of select="$appletContainerId"/>_container").data('openolat', data);
}
var remove = false;
var newListOfPoints = [];
for(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) {
remove = true;
} else {
newListOfPoints.push(p);
}
}
if(remove) {
data.listOfPoints = newListOfPoints;
} else if(data.listOfPoints.length >= maxChoices) {
return false;
} else {
data.listOfPoints.push({'x': cx, 'y': cy, 'areaId': areaId});
}
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();
for(i=data.listOfPoints.length; i-->0;) {
var p = data.listOfPoints[i];
c.font = "16px Arial";
c.fillText("" + (i+1), p.x, p.y);
var inputElement = jQuery('<input type="hidden"/>')
.attr('name', 'qtiworks_response_RESPONSE')
.attr('value', p.areaId);
divContainer.prepend(inputElement);
}
});
});
</xsl:otherwise>
</xsl:choose>
</script>
</div> </div>
</div> </div>
</xsl:template> </xsl:template>
......
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