OO-2985: replace the input target with jquery ui sliders because it looks really strange on Edge/IE

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

@@ -192,6 +192,9 @@ public abstract class AssessmentObjectComponent extends AbstractComponent implem
 		jsa.addRequiredStaticJsFile("assessment/rendering/javascript/UpConversionAjaxController.js");
 		
 		jsa.addRequiredStaticJsFile("js/jquery/maphilight/jquery.maphilight.js");
+		// drawing needs slider, slider need it too
+		// order needs sortable
+		// drag and drop used a lot...
 		jsa.addRequiredStaticJsFile("js/jquery/ui/jquery-ui-1.11.4.custom.qti.min.js");
 		
 		jsa.addRequiredStaticJsFile("js/jquery/openolat/jquery.paint.js");

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

@@ -38,11 +38,11 @@
 		<div class="btn-group">
 			<canvas id="brush_size" width="50" height="50"> </canvas>
 		</div>
-		<div class="btn-group">	
-			<input type="range" id="width_range" value="10">$r.translate("drawing.brushsize")
+		<div class="btn-group o_slider_width_range">	
+			<div id="width_range_ui"></div>$r.translate("drawing.brushsize")
 		</div>
-		<div class="btn-group">
-			<input type="range" id="opacity_range" value="100">$r.translate("drawing.opacity")
+		<div class="btn-group o_slider_opacity_range">
+			<div id="opacity_range_ui"></div>$r.translate("drawing.opacity")
 		</div>
 	</div>
 	#end

src/main/webapp/static/js/jquery/openolat/jquery.paint.js

@@ -116,8 +116,8 @@
 		};
 	
 		/* Drawing on Paint App */
-		tmp_ctx.lineWidth = document.getElementById("width_range").value;
-		//tmp_ctx.lineWidth = 5;
+		//tmp_ctx.lineWidth = document.getElementById("width_range").value;
+		tmp_ctx.lineWidth = 10;
 		tmp_ctx.lineJoin = 'round';
 		tmp_ctx.lineCap = 'round';
 		tmp_ctx.strokeStyle = 'blue';
@@ -194,16 +194,26 @@
 			undo_count = 0; //NEWTHING
 		}
 		
-		jQuery("#width_range").on("input change", function() {
-			tmp_ctx.lineWidth = document.getElementById("width_range").value / 2;
-			drawBrush();
+		jQuery("#width_range_ui").slider({
+			min: 1,
+			max: 100,
+			value: 20,
+			change: function(event, ui) {
+				tmp_ctx.lineWidth = ui.value / 2;
+				drawBrush();
+			}
 		});
-		
-		jQuery("#opacity_range").on("change", function() {
-			tmp_ctx.globalAlpha = document.getElementById("opacity_range").value / 100;
-			drawBrush();
+		jQuery("#opacity_range_ui").slider({
+			min: 1,
+			max: 100,
+			value: 100,
+			change: function(event, ui) {
+				tmp_ctx.globalAlpha = ui.value / 100;
+				drawBrush();
+			}
 		});
-	
+		drawBrush();
+		
 		//NEWTHING
 		jQuery("#clear").on("click", function() {
 			var mainWin = o_getMainWin();

src/main/webapp/static/themes/light/modules/_qti21.scss

@@ -227,11 +227,19 @@ div.hotspotInteraction {
 }
 
 
-/* drawing */
+/* Drawing */
 .o_draw_circle.o_qti_hotspot_correct, .o_draw_rectangle.o_qti_hotspot_correct {
 	background-color: rgba(229, 255, 204, 0.6);
 }
 
+#width_range_ui, #opacity_range_ui {
+	width: 120px;
+}
+
+.o_slider_width_range, .o_slider_opacity_range {
+	margin: 3px 10px 0 0;
+}
+
 .o_qti_hotspot_label {
 	padding-left: 48%;
 }