OO-4414: fix solution of responsive hotspots under bootstrap collapsable

src/main/java/org/olat/ims/qti21/ui/_content/assessment_results.html

@@ -13,16 +13,14 @@
 	#if($print || $pdf)
 	<div class="o_button_group o_button_group_right">
 		<script>
-		/* <![CDATA[ */ 
-			function print() {
-				try {
-					var ww = window.open("$r.commandURI("print")", "$winid", "height=800,left=100,top=100,width=800,toolbar=no,titlebar=0,status=0,menubar=yes,location=no,scrollbars=1");
-					ww.focus();
-				} catch(e) {
-					if(window.console) console.log('Error when trying to dock div id::$r.getId("undck")');
-				}
+		function print() {
+			try {
+				var ww = window.open("$r.commandURI("print")", "$winid", "height=800,left=100,top=100,width=800,toolbar=no,titlebar=0,status=0,menubar=yes,location=no,scrollbars=1");
+				ww.focus();
+			} catch(e) {
+				if(window.console) console.log('Error when trying to dock div id::$r.getId("undck")');
 			}
-		/* ]]> */
+		}
 		</script>
 		#if($print && $pdf) <div class='btn-group'> #end
 		#if($print)
@@ -499,10 +497,9 @@
 				<div id="o_c$itemResult.interactionResults.solutionFormItem.component.dispatchID" class="o_qti21_solution">
 					<h4 onclick="jQuery('#collapse_${itemResult.interactionResults.solutionFormItem.name}').collapse('toggle')">
 						#if($toggleSolution)<i id="collapse_${itemResult.interactionResults.solutionFormItem.name}_toggler" class="o_icon o_icon-fw o_icon_open_togglebox"> </i>#end $r.translate("solution")</h4>
-					<div id="collapse_${itemResult.interactionResults.solutionFormItem.name}" class="#if($toggleSolution) collapse #end">$r.render($itemResult.interactionResults.solutionFormItem.name)</div>
+					<div id="collapse_${itemResult.interactionResults.solutionFormItem.name}" class="#if($toggleSolution) collapse #end o_qti21_collapsable_solution">$r.render($itemResult.interactionResults.solutionFormItem.name)</div>
 				</div>
 				<script>
-				/* <![CDATA[ */
 				jQuery(function() {
 					jQuery('#collapse_${itemResult.interactionResults.solutionFormItem.name}').on('hide.bs.collapse', function () {
 						jQuery('#collapse_${itemResult.interactionResults.solutionFormItem.name}_toggler').removeClass('o_icon_close_togglebox').addClass('o_icon_open_togglebox');
@@ -525,7 +522,6 @@
 						});
 					})
 				});
-				/* ]]> */
 				</script>
 			#end
 		#end

src/main/java/org/olat/ims/qti21/ui/components/_content/hotspotInteraction.html

@@ -25,7 +25,6 @@
 		</map>
 	</div>
 	<script>
-	/* <![CDATA[ */
 	var maphilightSettings;
 	#if($r.hasCssClass($interaction, "hotspot-light"))
 	maphilightSettings = {
@@ -116,6 +115,5 @@
 			maphilightSettings: maphilightSettings
 		});
 	});
-	/* ]]> */
 	</script>
 </div>
\ No newline at end of file

src/main/webapp/static/js/jquery/qti/jquery.hotspot.js

 (function ($) {
+	"use strict";
 	$.fn.hotspotInteraction = function(options) {
 		var settings = $.extend({
 			responseIdentifier: null,
@@ -28,7 +29,7 @@
 		var divContainer = jQuery('#' + containerId);
 		
 		var areaIds = settings.responseValue.split(',');
-		for(i=areaIds.length; i-->0; ) {
+		for(var i=areaIds.length; i-->0; ) {
 			var areaEl = jQuery('#ac_' + settings.responseIdentifier + '_' + areaIds[i]);
 			var data = areaEl.data('maphilight') || {};
 			data.selectedOn = true;
@@ -49,7 +50,7 @@
 				clickHotspotArea(this, containerId, settings.responseIdentifier, settings.maxChoices, settings.singleChoice, settings.maphilightSettings);
 			});
 		})
-	};
+	}
 
 	function clickHotspotArea(spot, containerId, responseIdentifier, maxChoices, singleChoice, maphilightSettings) {
 		var areaEl = jQuery(spot);
@@ -101,7 +102,7 @@
 				divContainer.append(inputElement);
 			}
 		});
-	};
+	}
 
 	/*
 	 * Color the data based on the selectedOn flag

src/main/webapp/static/js/jquery/qti/jquery.hotspot.responsive.js

@@ -9,6 +9,7 @@
 * Licensed under the MIT license
 */
 ;(function($) {
+	"use strict";
 	$.fn.rwdImageMaps = function(options) {
 		var settings = $.extend({
 			fillColor: 'bbbbbb',
@@ -20,6 +21,7 @@
 		var $img = this;
 		var loaded = null;
 		var windowWidth = 0;
+		var hotSpotContainerWidth = 0;
 
 		var rwdImageMap = function() {
 			$img.each(function() {
@@ -32,7 +34,6 @@
 						var attrW = 'width',
 							attrH = 'height';
 						
-						var $this = $(this);
 						if (!$that.data(attrW)) // size are backuped
 							$that.data(attrW, $that.attr(attrW));
 						if (!$that.data(attrH)) // size are backuped
@@ -64,7 +65,13 @@
 							th = ((containerWidth * ratio)|0);
 							$that.width(tw);
 							$that.height(th);
-						}
+						} else if(tw == 0 && th == 0) {
+							// image was hidden
+							tw = w;
+							th = h;
+							$that.width(tw);
+							$that.height(th);
+						} 
 					
 						var wPercent = tw/100,
 							hPercent = th/100,
@@ -104,19 +111,23 @@
 				
 				var that = this,
 					$that = $(that);
-				
+				var containerWidth = $that.closest(".o_oo_hotcontainer").width();
+
 				if(loaded) {
-					if(windowWidth != window.innerWidth) {
+					if(windowWidth != window.innerWidth || hotSpotContainerWidth != containerWidth) {
 						recalculateMap(that, $that);
 						windowWidth = window.innerWidth;
+						hotSpotContainerWidth = containerWidth
 					}
 				} else {
 					windowWidth = window.innerWidth;
+					hotSpotContainerWidth = containerWidth;
 					recalculateMap(that, $that);
 				}
 			});
 		};
 		$(window).resize(rwdImageMap).trigger('resize');
+		$($img).closest('.o_qti21_collapsable_solution').on('shown.bs.collapse', rwdImageMap);
 
 		return this;
 	};