Update to issue #977 - add highlight option, allow highlight removal,…

… don't highlight first word and fix a few oddities
thexerteproject · May 12, 2022 · bae1df5 · bae1df5
1 parent 899d901
commit bae1df5
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 11 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/wordfind/style.css b/modules/xerte/parent_templates/Nottingham/common_html5/js/wordfind/style.css
@@ -61,6 +61,12 @@ button::-moz-focus-inner {
   background-color: green;
 }
 
+/* highlight the word in the puzzle */
+#puzzle .highlight {
+  background-color: yellow !important;
+  color: black !important;
+}
+
 /**
 * Styles for the word list
 */
@@ -89,11 +95,3 @@ button::-moz-focus-inner {
 #solve {
   margin: 0 1em;
 }
-
-/**
-* Styles for highlight
-*/
-#puzzle .highlight {
-  background-color: yellow !important;
-  color: black !important;
-}
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/wordsearch.html b/modules/xerte/parent_templates/Nottingham/models_html5/wordsearch.html
@@ -61,6 +61,9 @@
 
 			colour = checkColour(x_currentPageXML.getAttribute("colour4")) ? x_getColour(x_currentPageXML.getAttribute("colour4")) : "#008000"; // green
 			colourStyles += "#puzzle .complete { background-color: " + colour + "; color: " + x_blackOrWhite(colour) + "; }";
+
+			colour = checkColour(x_currentPageXML.getAttribute("colour5")) ? x_getColour(x_currentPageXML.getAttribute("colour5")) : "#FFFF00"; // yellow
+			colourStyles += "#puzzle .highlight { background-color: " + colour + " !important; color: " + x_blackOrWhite(colour) + " !important; }";
 			colourStyles += "</style>";
 
 			$("#pageContents").prepend(colourStyles);
@@ -97,10 +100,12 @@
 				.attr('id', 'solve')
 				.click( function() {
 					wordfindgame.solve(puzzle, words);
+					$("#words ul li").on("focusout", wordsearch.removeHighlight);
 					$("#words ul li").on("click focus", function ($this) {
 						wordsearch.highlightWord($this.target.innerText);
 					});
-					$("#words ul li").attr("tabindex", "0").first().focus();
+					$("#words").attr("tabindex", "0").focus().removeAttr("tabindex"); // Move tab focus to the words list without highlighting first word
+					$("#words ul li").attr("tabindex", "0");//.first().focus(); // Was used to highlight first word but didn't like the effect
 				})
 				.text(solveBtnTxt)
 				.toggle(!(hideSolve || hideSolveUntilTimer && hasTimer))
@@ -111,6 +116,7 @@
 				.attr('id', 'retry')
 				.click( function() {
 					$("#words ul li").off("click focus");
+					$("#words ul li").off("focusout");
 					$("#words ul li").removeAttr("tabindex");
 					wordsearch.begin();
 				})
@@ -120,8 +126,12 @@
 			$("#btnHolder button").button();
 		}
 
-		this.highlightWord = function (word) {
+		this.removeHighlight = function () {
 			$(".puzzleSquare").removeClass("highlight");
+		}
+
+		this.highlightWord = function (word) {
+			wordsearch.removeHighlight(); // remove any existing highlights
 			var solution = wordfind.solve(puzzle, words).found;
 			solution.forEach(function (entry) {
 				let x = entry.x, y = entry.y,

diff --git a/modules/xerte/parent_templates/Nottingham/wizards/en-GB/data.xwd b/modules/xerte/parent_templates/Nottingham/wizards/en-GB/data.xwd
@@ -8244,6 +8244,7 @@
 		<colour2 label="Found" type="ColourPicker" defaultValue="0x0000FF" optional="true"/>
 		<colour3 label="Complete" type="ColourPicker" defaultValue="0x800080" optional="true"/>
 		<colour4 label="Solved" type="ColourPicker" defaultValue="0x008000" optional="true"/>
+		<colour5 label="Highlight" type="ColourPicker" defaultValue="0xffff00" optional="true"/>
 	</colours>
 
 	<order label="Word Ordering" options="None,Alphabetical,Random" type="ComboBox" width="120" data="none,alphabetical,random" defaultValue="none" optional="true"/>

diff --git a/src/Nottingham/wizards/en-GB/template.xwd b/src/Nottingham/wizards/en-GB/template.xwd
@@ -8244,6 +8244,7 @@
 		<colour2 label="Found" type="ColourPicker" defaultValue="0x0000FF" optional="true"/>
 		<colour3 label="Complete" type="ColourPicker" defaultValue="0x800080" optional="true"/>
 		<colour4 label="Solved" type="ColourPicker" defaultValue="0x008000" optional="true"/>
+		<colour5 label="Highlight" type="ColourPicker" defaultValue="0xffff00" optional="true"/>
 	</colours>
 
 	<order label="Word Ordering" options="None,Alphabetical,Random" type="ComboBox" width="120" data="none,alphabetical,random" defaultValue="none" optional="true"/>

diff --git a/src/Nottingham/wizards/en-GB/wordsearch.xwd b/src/Nottingham/wizards/en-GB/wordsearch.xwd
@@ -1 +1,35 @@
-<wizard menus="Games">  <pageWizard remove="true" duplicate="false">    <newNodes>      <wordsearch><![CDATA[<wordsearch name="Enter Page Title" text="Enter Page text" words="Enter words here, placing each on a new line" solveBtnTxt="Solve Puzzle" fillChars="" retryBtnTxt="Restart Puzzle"	  />]]></wordsearch>    </newNodes>  </pageWizard>  <!-- WORDSEARCH============================== -->  <wordsearch menu="Games" menuItem="Wordsearch" hint="A wordsearch game. Create a list of words for the user to find." icon="icWordsearch" thumb="thumbs/wordsearch.jpg" example="https://xot.xerte.org.uk/play_116?hide=bottom#wordsearch" remove="true">    <name label="Page Title" type="TextInput" wysiwyg="true"/>    <text label="Instructions" type="TextArea" height="100"/>    <words label="Words" type="script" height="100"/>		<colours type="group" label="Colours" optional="true">		<colour1 label="Select" type="ColourPicker" defaultValue="0xFFA500" optional="true"/>		<colour2 label="Found" type="ColourPicker" defaultValue="0x0000FF" optional="true"/>		<colour3 label="Complete" type="ColourPicker" defaultValue="0x800080" optional="true"/>		<colour4 label="Solved" type="ColourPicker" defaultValue="0x008000" optional="true"/>	</colours>		<order label="Word Ordering" options="None,Alphabetical,Random" type="ComboBox" width="120" data="none,alphabetical,random" defaultValue="none" optional="true"/>	<hideSolve label="Hide Solve Button" hint="Hide the solve button completely" type="CheckBox" optional="true"/>	<hideSolveUntilTimer label="Hide Solve Until Timer" hint="Hide the solve button until the timer expires" type="CheckBox" optional="true"/>	<hideWords label="Hide Words" hint="Hide the words to make the puzzle harder" type="CheckBox" optional="true"/>	<puzzleCase label="Force Puzzle Case" options="Uppercase,Lowercase,As Typed" type="ComboBox" width="120" data="uppercase,lowercase,astyped" defaultValue="uppercase" optional="true"/>		<solveBtnTxt label="Solve Button Label" type="TextInput" wysiwyg="true" language="true"/>	<retryBtnTxt label="Retry Button Label" type="TextInput" wysiwyg="true" language="true"/>	<fillChars label="Alternative Fill Characters" type="TextInput" wysiwyg="false" language="true"/>  </wordsearch></wizard>
+<wizard menus="Games">
+  <pageWizard remove="true" duplicate="false">
+    <newNodes>
+      <wordsearch><![CDATA[<wordsearch name="Enter Page Title" text="Enter Page text" words="Enter words here, placing each on a new line" solveBtnTxt="Solve Puzzle" fillChars="" retryBtnTxt="Restart Puzzle"
+	  />]]></wordsearch>
+    </newNodes>
+  </pageWizard>
+
+  <!-- WORDSEARCH============================== -->
+  <wordsearch menu="Games" menuItem="Wordsearch" hint="A wordsearch game. Create a list of words for the user to find." icon="icWordsearch" thumb="thumbs/wordsearch.jpg" example="https://xot.xerte.org.uk/play_116?hide=bottom#wordsearch" remove="true">
+    <name label="Page Title" type="TextInput" wysiwyg="true"/>
+    <text label="Instructions" type="TextArea" height="100"/>
+    <words label="Words" type="script" height="100"/>
+
+	<colours type="group" label="Colours" optional="true">
+		<colour1 label="Select" type="ColourPicker" defaultValue="0xFFA500" optional="true"/>
+		<colour2 label="Found" type="ColourPicker" defaultValue="0x0000FF" optional="true"/>
+		<colour3 label="Complete" type="ColourPicker" defaultValue="0x800080" optional="true"/>
+		<colour4 label="Solved" type="ColourPicker" defaultValue="0x008000" optional="true"/>
+		<colour5 label="Highlight" type="ColourPicker" defaultValue="0xffff00" optional="true"/>
+	</colours>
+
+	<order label="Word Ordering" options="None,Alphabetical,Random" type="ComboBox" width="120" data="none,alphabetical,random" defaultValue="none" optional="true"/>
+	<hideSolve label="Hide Solve Button" hint="Hide the solve button completely" type="CheckBox" optional="true"/>
+	<hideSolveUntilTimer label="Hide Solve Until Timer" hint="Hide the solve button until the timer expires" type="CheckBox" optional="true"/>
+	<hideWords label="Hide Words" hint="Hide the words to make the puzzle harder" type="CheckBox" optional="true"/>
+	<puzzleCase label="Force Puzzle Case" options="Uppercase,Lowercase,As Typed" type="ComboBox" width="120" data="uppercase,lowercase,astyped" defaultValue="uppercase" optional="true"/>
+
+	<solveBtnTxt label="Solve Button Label" type="TextInput" wysiwyg="true" language="true"/>
+	<retryBtnTxt label="Retry Button Label" type="TextInput" wysiwyg="true" language="true"/>
+	<fillChars label="Alternative Fill Characters" type="TextInput" wysiwyg="false" language="true"/>
+
+  </wordsearch>
+
+</wizard>