OO-2518: batch grading of drawing are shown on a the first background image

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

@@ -49,21 +49,21 @@
 	
 	#set($widthWithBorder = $r.parseInt(${interaction.object.width}) + 2)
 	#set($heightWithBorder = $r.parseInt(${interaction.object.height}) + 2)
-	<div id="sketch" style="border:1px solid black; width:${widthWithBorder}px; height:${heightWithBorder}px;" draggable="false" ondragstart="return false;">
-		<canvas id="paint" width="${interaction.object.width}" height="${interaction.object.height}" style="background:url('${r.convertLinkFull($interaction.object.data)}')" draggable="false" ondragstart="return false;"></canvas>
+	<div id="sketch_${responseIdentifier}" class="sketch" style="border:1px solid black; width:${widthWithBorder}px; height:${heightWithBorder}px;" draggable="false" ondragstart="return false;">
+		<canvas id="paint_${responseIdentifier}" width="${interaction.object.width}" height="${interaction.object.height}" style="background:url('${r.convertLinkFull($interaction.object.data)}')" draggable="false" ondragstart="return false;"></canvas>
 	</div>
 	<script type='text/javascript'>
 	jQuery(function() {
 		var itemOpen = $isItemSessionOpen; 
 		if(itemOpen) {
-			jQuery('#sketch').paint({
+			jQuery('#sketch_${responseIdentifier}').paint({
 				inputHolderId: 'op_${responseIdentifier}',
 				formDispatchFieldId: '$r.formDispatchFieldId'
 			});
 			
 			var val = jQuery('#op_${responseIdentifier}').val();
 			if(!(typeof val == "undefined") && val.length > 0) {
-				var canvas = document.getElementById("paint");
+				var canvas = document.getElementById("paint_${responseIdentifier}");
 				var ctx = canvas.getContext("2d");
 				var image = new Image();
 				image.onload = function() {
@@ -72,7 +72,7 @@
 				image.src = val;
 			}
 		} else {
-			var canvas = document.getElementById("paint");
+			var canvas = document.getElementById("paint_${responseIdentifier}");
 			var ctx = canvas.getContext("2d");
 			var image = new Image();
 			image.onload = function() {

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

@@ -30,7 +30,8 @@
 		var canvas = this.canvas;
 		var ctx = this.canvas.getContext('2d');
 	
-		var sketch = document.querySelector('#sketch');
+		var sketchId = jQuery(this.divPanel).attr('id');
+		var sketch = document.querySelector('#' + sketchId);
 		var sketch_style = getComputedStyle(sketch);
 	
 		var canvas_small = document.getElementById('brush_size');

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

@@ -27,7 +27,7 @@ ul.sessionControl {
 }
 
 /* Drawing */
-#sketch {
+.sketch {
 	position: relative;
 	user-drag: none; 
 	user-select: none;