OO-2348: hotspot always visible, add shadow to the select state, add simple selenium test

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

@@ -25,8 +25,10 @@
 		jQuery(function() {
 			jQuery('#${qtiContainerId}_img').maphilight({
 				fillColor: '888888',
-				strokeColor: '0000ff',
-				strokeWidth: 3
+				strokeColor: '333333',
+				strokeOpacity: 0.5,
+				strokeWidth: 3,
+				alwaysOn: true
 			});
 
 			jQuery('#${qtiContainerId}').hotspotInteraction({

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

@@ -29,7 +29,8 @@
     	for(i=areaIds.length; i-->0; ) {
     		var areaEl = jQuery('#ac_' + settings.responseIdentifier + '_' + areaIds[i]);
     		var data = areaEl.data('maphilight') || {};
-    		data.alwaysOn = true;
+    		data.selectedOn = true;
+    		colorData(data);
     		areaEl.data('maphilight', data).trigger('alwaysOn.maphilight');
     		
     		var inputElement = jQuery('<input type="hidden"/>')
@@ -51,13 +52,13 @@
     function clickHotspotArea(spot, containerId, responseIdentifier, maxChoices) {
     	var areaEl = jQuery(spot);
     	var data = areaEl.data('maphilight') || {};
-    	if(!data.alwaysOn) {
+    	if((typeof data.selectedOn === "undefined") || !data.selectedOn) {
     		var numOfChoices = maxChoices;
     		if(numOfChoices > 0) {
     			var countChoices = 0;
     			jQuery("area", "map[name='" + containerId + "_map']").each(function(index, el) {
     				var cData = jQuery(el).data('maphilight') || {};
-    				if(cData.alwaysOn) {
+    				if(cData.selectedOn) {
     					countChoices++;
     				}
     			});
@@ -66,7 +67,13 @@
     			}
     		}
     	}
-    	data.alwaysOn = !data.alwaysOn;
+    	
+    	if(typeof data.selectedOn === "undefined") {
+    		data.selectedOn = true;
+    	} else {
+    		data.selectedOn = !data.selectedOn;
+    	}
+    	colorData(data);
     	areaEl.data('maphilight', data).trigger('alwaysOn.maphilight');
 
     	var divContainer = jQuery('#' + containerId);
@@ -74,12 +81,35 @@
     	jQuery("area", "map[name='" + containerId + "_map']").each(function(index, el) {
     		var cAreaEl = jQuery(el);
     		var cData = cAreaEl.data('maphilight') || {};
-    		if(cData.alwaysOn) {
+    		if(cData.selectedOn) {
     			var inputElement = jQuery('<input type="hidden"/>')
     				.attr('name', 'qtiworks_response_' + responseIdentifier)
     				.attr('value', cAreaEl.data('qti-id'));
     			divContainer.append(inputElement);
     		}
     	});
+    };
+    
+    /*
+     * Color the data based on the selectedOn flag
+     */
+    function colorData(data) {
+    	if(data.selectedOn) {
+        	data.fillColor = '0000ff';
+    		data.strokeColor = '0000ff';
+    		data.strokeOpacity = 1;
+    		data.shadow = true;
+    		data.shadowX = 4;
+    		data.shadowY = 4;
+    		data.shadowRadius = 8;
+    		data.shadowColor = '000000';
+    		data.shadowOpacity = 0.8;
+    		data.shadowPosition = 'outside';
+    	} else {
+        	data.fillColor = '888888';
+    		data.strokeColor = '333333';
+    		data.strokeOpacity = 0.5;
+    		data.shadow = false;
+    	}
     }
 }( jQuery ));

src/test/java/org/olat/selenium/ImsQTI21Test.java

@@ -131,7 +131,42 @@ public class ImsQTI21Test {
 			.closeTest()
 			.assertOnAttempts(1);
 		
+		//TODO continue
+	}
+	
+	/**
+	 * Check if the hotspot interaction send a "correct" feedback.
+	 * 
+	 * @param authorLoginPage
+	 * @throws IOException
+	 * @throws URISyntaxException
+	 */
+	@Test
+	@RunAsClient
+	public void qti21GraphicInteractionTest(@InitialPage LoginPage authorLoginPage)
+	throws IOException, URISyntaxException {
+		UserVO author = new UserRestClient(deploymentUrl).createAuthor();
+		authorLoginPage.loginAs(author.getLogin(), author.getPassword());
+		
+		//upload a test
+		String qtiTestTitle = "Simple QTI 2.1 " + UUID.randomUUID();
+		URL qtiTestUrl = JunitTestHelper.class.getResource("file_resources/simple_QTI_21_hotspot.zip");
+		File qtiTestFile = new File(qtiTestUrl.toURI());
+		navBar
+			.openAuthoringEnvironment()
+			.uploadResource(qtiTestTitle, qtiTestFile)
+			.clickToolbarRootCrumb();
+		
+		QTI21Page qtiPage = QTI21Page
+				.getQTI12Page(browser);
+		qtiPage
+			.answerHotspot("circle")
+			.saveAnswer()
+			.assertFeedback("Correct!")
+			.endTest()
+			.closeTest();
 		
+		//TODO check the results
 	}
 
 }

src/test/java/org/olat/selenium/page/qti/QTI21Page.java

@@ -128,6 +128,13 @@ public class QTI21Page {
 		OOGraphene.waitBusy(browser);
 		return this;
 	}
+	
+	public QTI21Page answerHotspot(String shape) {
+		By areaBy = By.cssSelector("div.hotspotInteraction area[shape='" + shape + "']");
+		OOGraphene.waitElement(areaBy, 5, browser);
+		browser.findElement(areaBy).click();
+		return this;
+	}
 
 	//TODO still QTI 1.2
 	public QTI21Page answerKPrim(boolean... choices) {
@@ -166,6 +173,14 @@ public class QTI21Page {
 		return this;
 	}
 	
+	public QTI21Page assertFeedback(String feedback) {
+		By feedbackBy = By.xpath("//div[contains(@class,'modalFeedback')]/h4[contains(text(),'" + feedback + "')]");
+		OOGraphene.waitElement(feedbackBy, 5, browser);
+		List<WebElement> feedbackEls = browser.findElements(feedbackBy);
+		Assert.assertEquals(1, feedbackEls.size());
+		return this;
+	}
+	
 	public QTI21Page endTest() {
 		By endBy = By.cssSelector("a.o_sel_end_testpart");
 		browser.findElement(endBy).click();

src/test/java/org/olat/selenium/page/repository/AuthoringEnvPage.java

@@ -22,6 +22,7 @@ package org.olat.selenium.page.repository;
 import java.io.File;
 
 import org.junit.Assert;
+import org.olat.selenium.page.course.CoursePageFragment;
 import org.olat.selenium.page.course.CourseWizardPage;
 import org.olat.selenium.page.graphene.OOGraphene;
 import org.openqa.selenium.By;
@@ -196,6 +197,19 @@ public class AuthoringEnvPage {
 		OOGraphene.waitBusy(browser);
 	}
 	
+	/**
+	 * Click back from the editor
+	 * 
+	 * @return
+	 */
+	public CoursePageFragment clickToolbarRootCrumb() {
+		OOGraphene.closeBlueMessageWindow(browser);
+		By toolbarBackBy = By.xpath("//li[contains(@class,'o_breadcrumb_back')]/following-sibling::li/a");
+		browser.findElement(toolbarBackBy).click();
+		OOGraphene.waitBusy(browser);
+		return new CoursePageFragment(browser);
+	}
+	
 	public enum ResourceType {
 		course("CourseModule"),
 		cp("FileResource.IMSCP"),