no-jira: position object interaction without applet

src/main/java/org/olat/ims/qti21/ui/components/AssessmentTestComponent.java

@@ -101,6 +101,7 @@ public class AssessmentTestComponent extends AbstractComponent {
 		JSAndCSSAdder jsa = vr.getJsAndCSSAdder();
 		jsa.addRequiredStaticJsFile("assessment/rendering/javascript/QtiWorksRendering.js");
 		jsa.addRequiredStaticJsFile("js/jquery/maphilight/jquery.maphilight.js");
+		jsa.addRequiredStaticJsFile("js/jquery/ui/jquery-ui-1.11.4.custom.dnd.min.js");
 	}
 
 	@Override

src/main/resources/rendering-xslt/interactions/positionObjectInteraction.xsl

@@ -27,7 +27,83 @@
 
       <xsl:variable name="object" select="qti:object"/>
       <xsl:variable name="appletContainerId" select="concat('qtiworks_id_appletContainer_', qti:positionObjectInteraction[1]/@responseIdentifier)" as="xs:string"/>
-      <div id="{$appletContainerId}" class="appletContainer">
+		<div id="{$appletContainerId}" class="appletContainer" style="width:{$object/@width}px; position:relative; ">
+      		<img id="{$appletContainerId}_img" width="{$object/@width}" height="{$object/@height}" src="{qw:convert-link-full($object/@data)}"></img>
+			<div class="items_container" style="width:{$object/@width}px; height:50px; background-color:#cccccc;">
+			
+			<xsl:for-each select="qti:positionObjectInteraction">
+            	<xsl:variable name="interaction" select="." as="element(qti:positionObjectInteraction)"/>
+            	<xsl:variable name="responseValue" select="qw:get-response-value(/, @responseIdentifier)" as="element(qw:responseVariable)?"/>
+           
+				<xsl:choose>
+                  <xsl:when test="qw:is-not-null-value($responseValue)">
+
+ 		<script type="text/javascript">
+	jQuery(function() {
+		var positions = '<xsl:value-of select="$responseValue/qw:value" separator=":"/>'.split(':');
+		var items = jQuery('#<xsl:value-of select="$appletContainerId"/> .items_container .o_item.o_<xsl:value-of select="$interaction/@responseIdentifier"/>');
+		for(var i=positions.length; i-->0; ) {
+			var pos = positions[i].split(' ');
+			var item = jQuery(items.get(i));
+			item.css('position', 'absolute');
+			item.css('top', pos[1] + 'px');
+			item.css('left', pos[0] + 'px');
+		}
+	});
+		</script>                   
+                    
+                  </xsl:when>
+                  <xsl:otherwise>
+
+		<script type="text/javascript">
+	jQuery(function() {
+		jQuery('#<xsl:value-of select="$appletContainerId"/> .items_container .o_item.o_<xsl:value-of select="$interaction/@responseIdentifier"/>').each(function(index, el) {
+    		jQuery(el).attr('id','object-item-' + index);
+    	}).draggable({
+    		containment: "#<xsl:value-of select="$appletContainerId"/>",
+    		scroll: false,
+    		stop: function( event, ui ) {
+    			var imgEl = jQuery('#<xsl:value-of select="$appletContainerId"/>_img');
+    			var img_offset_t = jQuery(imgEl).offset().top - jQuery(window).scrollTop();
+				var img_offset_l = jQuery(imgEl).offset().left - jQuery(window).scrollLeft();
+				
+				var offset_t = jQuery(this).offset().top - jQuery(window).scrollTop();
+				var offset_l = jQuery(this).offset().left - jQuery(window).scrollLeft();
+
+				var cx = Math.round( (offset_l - img_offset_l) );
+				var cy = Math.round( (offset_t - img_offset_t) );
+				
+				var itemId = jQuery(this).attr('id');
+				var inputId = 'in-' + itemId + '-<xsl:value-of select="$interaction/@responseIdentifier"/>';
+				var divContainer = jQuery('#<xsl:value-of select="$appletContainerId"/>');
+				var inputEl = divContainer.find(inputId);
+				if(inputEl.length == 0) {
+					var inputElement = jQuery('<input type="hidden"/>')
+						.attr('id', inputId)
+						.attr('name', 'qtiworks_response_<xsl:value-of select="$interaction/@responseIdentifier"/>')
+						.attr('value', cx + " " + cy);
+					divContainer.prepend(inputElement);
+				} else {
+					inputEl.val(cx + " " + cy);
+				}
+    		}
+    	});
+    });
+		</script>
+
+                  </xsl:otherwise>
+                </xsl:choose>
+                
+            	<xsl:for-each select="1 to @maxChoices">
+              		<!-- {$interaction/qti:object/@type} -->
+            		<div class="o_item o_{$interaction/@responseIdentifier}" style="width:{$interaction/qti:object/@width}px; height:{$interaction/qti:object/@height}px; background-image:url('{qw:convert-link($interaction/qti:object/@data)}');"> </div>
+            	</xsl:for-each>
+			</xsl:for-each>
+			</div>
+		
+
+      
+      	<!-- 
         <object type="application/x-java-applet" height="{$object/@height + 40}" width="{$object/@width}">
           <param name="code" value="rhotspotV2"/>
           <param name="codebase" value="{$appletCodebase}"/>
@@ -63,9 +139,9 @@
             </param>
           </xsl:for-each>
 
-          <!--param name="noOfMarkers" value="3"/>
+          <!-param name="noOfMarkers" value="3"/>
             <xsl:attribute name="value"><xsl:value-of select="@maxChoices"/></xsl:attribute>
-          </param -->
+          </param ->
           <param name="markerType" value="LABELS"/>
         </object>
         <script type="text/javascript">
@@ -75,6 +151,7 @@
               select="qw:to-javascript-arguments(for $i in qti:positionObjectInteraction return $i/@responseIdentifier)"/>]);
           });
         </script>
+        -->
       </div>
     </div>
   </xsl:template>