Skip to content

Commit

Permalink
Various changes to Crossword page #1015:
Browse files Browse the repository at this point in the history 
- removed references to pngs that don't exist to prevent console errors
- Stop clues being converted to plain text (text formatting and images etc. can now be included in clues)
- Adjusted page layout & grid size so it better fits on screen
- Removed some fixed strings so they are now in xwd
  • Loading branch information
@FayCross
FayCross committed May 26, 2021
1 parent e94dfb2 commit 6dbd92d
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 95 deletions.
54 changes: 41 additions & 13 deletions modules/xerte/parent_templates/Nottingham/models_html5/crossword.css
View file
Expand Up @@ -60,8 +60,8 @@
}

.table-hint{
list-style-type:none ;

list-style-type:none;
margin-top: 0.5em;
}

#across{
Expand Down Expand Up @@ -121,25 +121,56 @@
}

#clues-container{
width: 100%;
width: 100%;
margin-top: 1em;
}

#clues-container th {
text-decoration: underline;
}

#pageContents-innerContainer.crosswordLeft #clues-container {
margin-left: 2em;
}

#pageContents-innerContainer.crosswordRight #clues-container {
margin-right: 2em;
}

#clues {
margin-top: 1em;
}

#pageContents.txtTop #crosswordHolder {
margin-top: 1em;
}

#crosswordHolder.crosswordTop {
overflow: auto;
}

#crossword{
flex: 1;
margin-right: 20px;
text-align: center;
display: flex;
/* align-items: center; */
justify-content: center;
margin-top: 10px;
}

/*#pageContents-innerContainer.crosswordLeft #crossword {
margin-right: 1em;
}
#pageContents-innerContainer.crosswordRight #crossword {
margin-left: 1em;
}*/

#pageContents-innerContainer #showButton {
justify-content: flex-start;
}

#showButton{
padding-top: 20px;
justify-content: flex-start;
height: 10%;
margin-top: 1em;
float: right;
}

.li-clue{
Expand All @@ -160,10 +191,7 @@
.hint-number{
margin-right: 5%;
}

#clues-across{
margin-top: 20px;
}

#attempt h3{
border-top: 1px solid #ccc;
padding-top: 1.5em;
Expand Down
108 changes: 44 additions & 64 deletions modules/xerte/parent_templates/Nottingham/models_html5/crossword.html
View file
Expand Up @@ -9,15 +9,18 @@

var crossword = new function () {

var $pageContents;
var startPositionArray = []
var tab = 0;
var active = 0;
var nextPosition;
var is_keyboard = false
var tries = 30;

// function called every time the page is viewed after it has initially loaded
this.pageChanged = function () {
this.resize()
$pageContents = $("#pageContents");
this.resize();
}

// function called every time the size of the LO is changed
Expand Down Expand Up @@ -579,9 +582,13 @@

this.init = function () {

$pageContents = $("#pageContents");

// add text to the top of the page
if (x_currentPageXML.getAttribute("text") != undefined && x_currentPageXML.getAttribute("text") != '') {
$("#pageContents").append('<div id="textHolder">' + x_currentPageXML.getAttribute("text") + '</div>');
$pageContents
.addClass('txtTop')
.append('<div id="textHolder">' + x_currentPageXML.getAttribute("text") + '</div>');
}

// array with words
Expand All @@ -594,34 +601,36 @@
position = "Right"
}

var btnLabel = x_currentPageXML.getAttribute("checkBtn") != undefined ? x_currentPageXML.getAttribute("checkBtn") : 'Submit';
var btnLabel = x_currentPageXML.getAttribute("checkBtn") != undefined ? x_currentPageXML.getAttribute("checkBtn") : 'Submit',
acrossTxt = x_currentPageXML.getAttribute("across") != undefined ? x_currentPageXML.getAttribute("across") : 'Across',
downTxt = x_currentPageXML.getAttribute("down") != undefined ? x_currentPageXML.getAttribute("down") : 'Down';

if (x_browserInfo.touchScreen === false) {
if (position == "Right") {
$("#pageContents").append(
'<div id="pageContents-innerContainer"><div id="crossword"></div><div id="clues-container"><div id="Across"><table id="clues-across"><thead><tr><th>Across</th></tr></thead><tbody><tr><td><ul class="table-hint" id="across"></ul></td></tr></tbody></table></div><div id="Down"><table id="clues-down"><thead><tr><th>Down</th></tr></thead><tbody><tr><td><ul class="table-hint" id="down"></ul></td></tr></tbody></table></div><div id="showButton"><button id="show_button" onclick=\"Check()\">' + btnLabel + '</button></div><div id="attempt"></div></div></div>'
$pageContents.append(
'<div id="pageContents-innerContainer" class="crosswordLeft"><div id="crosswordHolder" class="panel"><div id="crossword"></div><div id="showButton"><button id="show_button" onclick=\"Check()\">' + btnLabel + '</button></div></div><div id="clues-container"><div id="Across"><table id="clues-across"><thead><tr><th>' + acrossTxt + '</th></tr></thead><tbody><tr><td><ul class="table-hint" id="across"></ul></td></tr></tbody></table></div><div id="Down"><table id="clues-down"><thead><tr><th>' + downTxt + '</th></tr></thead><tbody><tr><td><ul class="table-hint" id="down"></ul></td></tr></tbody></table></div><div id="attempt"></div></div></div>'
);
} else if (position == "Left") {
$("#pageContents").append(
'<div id="pageContents-innerContainer"><div id="clues-container"><div id="Across"><table id="clues-across"><thead><tr><th>Across</th></tr></thead><tbody><tr><td><ul class="table-hint" id="across"></ul></td></tr></tbody></table></div><div id="Down"><table id="clues-down"><thead><tr><th>Down</th></tr></thead><tbody><tr><td><ul class="table-hint" id="down"></ul></td></tr></tbody></table></div><div id="showButton"><button id="show_button" onclick=\"Check()\">' + btnLabel + '</button></div></div><div id="crossword"></div></div>'
$pageContents.append(
'<div id="pageContents-innerContainer" class="crosswordRight"><div id="clues-container"><div id="Across"><table id="clues-across"><thead><tr><th>' + acrossTxt + '</th></tr></thead><tbody><tr><td><ul class="table-hint" id="across"></ul></td></tr></tbody></table></div><div id="Down"><table id="clues-down"><thead><tr><th>' + downTxt + '</th></tr></thead><tbody><tr><td><ul class="table-hint" id="down"></ul></td></tr></tbody></table></div></div><div id="crosswordHolder" class="panel"><div id="crossword"></div><div id="showButton"><button id="show_button" onclick=\"Check()\">' + btnLabel + '</button></div></div></div>'
);
} else if (position == "Bottom") {
$("#pageContents").append(
'<div id="crossword"></div><table id="clues"><thead><tr><th>Across</th><th>Down</th></tr></thead><tbody><tr><td><ul id="across"></ul></td><td><ul id="down"></ul></td></tr></tbody></table>' +
'<div id="showButton"><button id="show_button" onclick=\"Check()\">' + btnLabel + '</button></div><div id="attempt"></div>'
$pageContents.append(
'<div id="crosswordHolder" class="panel crosswordTop"><div id="crossword"></div><div id="showButton"><button id="show_button" onclick=\"Check()\">' + btnLabel + '</button></div></div><table id="clues"><thead><tr><th>' + acrossTxt + '</th><th>' + downTxt + '</th></tr></thead><tbody><tr><td><ul id="across"></ul></td><td><ul id="down"></ul></td></tr></tbody></table>' +
'<div id="attempt"></div>'
);
}
}else{
$("#pageContents").append(
'<div id="crossword"></div><table id="clues"><thead><tr><th>Across</th><th>Down</th></tr></thead><tbody><tr><td><ul id="across"></ul></td><td><ul id="down"></ul></td></tr></tbody></table>' +
'<button id="show_button" onclick=\"Check()\">' + btnLabel + '</button><div id="attempt"></div>'
$pageContents.append(
'<div class="panel"><div id="crossword"></div></div><div id="showButton"><button id="show_button" onclick=\"Check()\">' + btnLabel + '</button></div><table id="clues"><thead><tr><th>' + acrossTxt + '</th><th>' + downTxt + '</th></tr></thead><tbody><tr><td><ul id="across"></ul></td><td><ul id="down"></ul></td></tr></tbody></table>' +
'<div id="attempt"></div>'
);
}


//store all the words and hints
$(x_currentPageXML).children().each(function (i) {
hints.push(jQuery(this.getAttribute("text")).text());
hints.push(this.getAttribute("text"));
words.push(this.getAttribute("wordAnswer"));
});

Expand Down Expand Up @@ -651,61 +660,47 @@
// make a nice legend for the clues
var legend = cw.getLegend(grid);
addLegendToPage(legend);
this.resize()

$('#show_button').button(); // do this so button styling is consistent with other pages

// call this function in every model once everything's loaded
x_pageLoaded();

this.resize();
}

this.resize = function (){

if(x_browserInfo.mobile === true){
//if(!is_keyboard){
$(".crossword-input").css("width", "25px")
$(".crossword-input").css("height", "25px")
$("#crossword").css("margin", "auto")
$("#crossword-table").css("margin", "0")
$(".crossword-input").css("font-size", "100%")
//}
}else{
var imgMaxW, imgMaxH;
// calculate the size of each cell in grid
var imgMaxW, imgMaxH,
$crosswordHolder = $("#crosswordHolder");

imgMaxW = Math.round($x_pageHolder.width() * 0.55 - 20);
imgMaxH = Math.round($x_pageHolder.height() - 50);
imgMaxH = Math.round($x_pageHolder.height() - ($crosswordHolder.innerHeight() - $crosswordHolder.height()) - $("#showButton").outerHeight(true) - 50);

if(imgMaxW > imgMaxH){
var percentage = imgMaxW/imgMaxH
imgMaxW = imgMaxW/percentage
imgMaxW = imgMaxH
}

//var width = $("#crossword").width()
var rowcount = $('#crossword-table tbody tr ').length;
var amountOfCells = $('#crossword-table tbody tr td').length;
var amountofColums = amountOfCells/rowcount
var amountOfpixels = imgMaxW/amountofColums
var rowCount = $('#crossword-table tbody tr ').length,
cellCount = $('#crossword-table tbody tr td').length,
columnCount = cellCount/rowCount,
maxRowCol = Math.max(rowCount, columnCount),
inputPixels = Math.floor(imgMaxW/maxRowCol) - ($(".crossword-input").outerHeight(true) - $(".crossword-input").innerHeight());

//amountOfpixels = amountOfpixels-20
amountOfpixels = amountOfpixels.toString()
inputPixels = inputPixels.toString();

$(".crossword-input").css("width", amountOfpixels)
$(".crossword-input").css("height", amountOfpixels)

var cluesWidth = $x_pageHolder.width() * 0.30
$("#clues-container").css("width", cluesWidth+"px")


var position = x_currentPageXML.getAttribute("align")

if(position === "Bottom"){
$("#crossword").css("margin-bottom", "10px")
$("#show_button").css("width", "20%")
$("#show_button").css("margin-left", "auto")
$("#show_button").css("margin-right", "auto")
$("#showButton").css("margin-bottom", "20px")

}
$(".crossword-input").css({
"width": inputPixels,
"height": inputPixels
});

if(imgMaxW < 200){
$(".crossword-input").css("font-size", "80%")
Expand All @@ -717,10 +712,6 @@
}
}





var cw = ""
function getCrossword(words, hints){
if(cw === ""){
Expand All @@ -738,11 +729,8 @@
}
document.getElementById(k).innerHTML = html.join("\n");
}


}


// Each cell on the crossword grid is null or one of these
function CrosswordCell(letter) {
this.char = letter; // the actual letter for the cell on the crossword
Expand Down Expand Up @@ -1119,7 +1107,7 @@
attempts--
var again = x_currentPageXML.getAttribute("again")
if(again === null || again===undefined){
again = "Try again, you have /a attempt(s) left" // **
again = "Try again, you have /a attempt(s) left"
}
var again = again.replace("/a", attempts)
var h3 = $('<h3>').append(again)
Expand Down Expand Up @@ -1273,7 +1261,6 @@
var html = [];
html.push("<table id='crossword-table'>");
html.push("<tbody>")
var label = 1;
var legend = cw.getLegend(grid)
var counterAcross = 0
var counterDown = 0;
Expand Down Expand Up @@ -1330,15 +1317,8 @@

}

if (is_start_of_word) {
var img_url = CrosswordUtils.PATH_TO_PNGS_OF_NUMBERS + label + ".png";
html.push("<td class='" + css_class + "' " +
"style=\"background-image:url('" + img_url +
"'); background-repeat:no-repeat;\">");
label++;
} else {
html.push("<td class='" + css_class + "' >");
}
html.push("<td class='" + css_class + "' >");

if (show_answers) {
html.push(char);
} else {
Expand Down
27 changes: 19 additions & 8 deletions modules/xerte/parent_templates/Nottingham/wizards/en-GB/data.xwd
View file
Expand Up @@ -122,7 +122,12 @@
confirmBtnTxt="Confirm"
notFoundMessage="could not be found in this project."
notSetMessage="A destination page has not been set for this connection" />]]></cMcq><captivate><![CDATA[<captivate name="Enter Page Title" url="Select a Captivate SWF File"/>]]></captivate><categories><![CDATA[<categories name="Enter Page Title" text="Enter text for the page here" feedback="Enter feedback here" buttonLabel="Check Answers" feedbackScore="You have placed {i} out of {n} labels correctly"/>]]></categories><chart><![CDATA[<chart name="Enter Page Title" chartTitle="Chart Title" chartType="line" text="Enter Page Text" align="left"/>]]></chart><columnPage><![CDATA[<columnPage name="Enter Page Title"/>]]></columnPage><connectorHotspotImage><![CDATA[<connectorHotspotImage name="Enter Page Title" text="Enter text for the page here" textWidth="narrow" url="Select an Image" tip="Enter a Description for Accessibility" highlight="false" align="Left" home="false" back="false" next="false"
notFoundMessage="could not be found in this project." continueBtnTxt="Close" />]]></connectorHotspotImage><connectorMenu><![CDATA[<connectorMenu name="Enter Page Title" home="false" back="false" next="false" reportTitle="List of page titles and matching pageIDs" pageLabel="Page No" titleLabel="Title:" idLabel="linkID:" />]]></connectorMenu><crossword><![CDATA[<crossword name="Enter Page Title" attempts = "1" again="Try again, you have /a attempt(s) left" text="Enter Page text" />]]></crossword><customHotspots><![CDATA[<customHotspots name="Enter Page Title" text="Enter text for the page here" highlightColour="0xFFFF00" lineWidth="1" interactivity="Hotspots" showShapes="true"
notFoundMessage="could not be found in this project." continueBtnTxt="Close" />]]></connectorHotspotImage><connectorMenu><![CDATA[<connectorMenu name="Enter Page Title" home="false" back="false" next="false" reportTitle="List of page titles and matching pageIDs" pageLabel="Page No" titleLabel="Title:" idLabel="linkID:" />]]></connectorMenu><crossword><![CDATA[<crossword name="Enter Page Title" attempts="1"
across="Across"
down="Down"
checkBtn="Submit"
again="Try again, you have /a attempt(s) left"
/>]]></crossword><customHotspots><![CDATA[<customHotspots name="Enter Page Title" text="Enter text for the page here" highlightColour="0xFFFF00" lineWidth="1" interactivity="Hotspots" showShapes="true"
hotspotsTxt="Explore the diagram. Click on the various parts to learn more."
labelsTxt="Drag the pins for each label to the correct position in the diagram. You can re-position the labels if required."
showMeTxt="Use the arrows to learn more."
Expand Down Expand Up @@ -1615,13 +1620,19 @@
<btnTxt label="Use Title on Button" type="CheckBox" defaultValue="false" mandatory="true" tooltip="By default the text on the menu button will be the destination page title. Check this box to use the title text from the field above instead."/>
</cMenuListedPage><crossword menu="Games" icon="icCrossword" menuItem="Crossword" hint="A crossword is a word puzzle that usually takes the form of a square or a rectangular grid of white- and black-shaded squares. The game's goal is to fill the white squares with letters, forming words or phrases, by solving clues, which lead to the answers." thumb="thumbs/crossword.jpg" remove="true">
<name label="Page Title" type="TextInput" wysiwyg="true"/>
<attempts label="Amount of attempts" type="TextInput" defaultValue="1"/>
<again label="Try again Label" type="TextInput" wysiwyg="true" divider="true" language="true" tooltip="/a is where the attempts will be placed "/>
<!-- <hicol label="Input colour" type="ColourPicker" optional="true" defaultValue="0xFFFF00" tooltip="The colour of the background of the image"/>-->
<align label="Clues Positions" options="Left,Bottom,Right" type="ComboBox" defaultValue="Right" data="Left,Bottom,Right" width="100" optional="true"/>
<!-- <text label="Instructions" type="TextArea" height="100"/> -->
<!-- <words label="Words" type="script" height="100"/> -->
<newNodes>
<attempts label="Attempts" type="TextInput" defaultValue="1" tooltip="Attempts allowed before correct answers are given"/>

<text label="Page Text" type="TextArea" height="100" optional="true"/>
<feedback label="Feedback" type="TextArea" height="100" optional="true"/>
<align label="Clue Position" options="Left,Bottom,Right" type="ComboBox" defaultValue="Right" data="Left,Bottom,Right" width="100" optional="true"/>

<across label="Across Clue Title" type="TextInput" wysiwyg="true" divider="true" language="true" mandatory="true" defaultValue="Across"/>
<down label="Down Clue Title" type="TextInput" wysiwyg="true" language="true" mandatory="true" defaultValue="Down"/>
<checkBtn label="Check Button Text" type="TextInput" wysiwyg="true" language="true" mandatory="true" defaultValue="Submit"/>
<again label="Attempt Label" type="TextInput" wysiwyg="true" language="true" tooltip="/a is where the attempts will be placed"/>
<feedbackLabel label="Feedback" type="TextInput" wysiwyg="true" language="true" mandatory="true" defaultValue="Feedback"/>

<newNodes>
<wordAndHint><![CDATA[<wordAndHint name="Word" text="The hint for your word" wordAnswer="The word you want to have in the crossword"/>]]></wordAndHint>
</newNodes>
<narrate type="group" label="Narration" optional="true" tooltip="Add an audio player to the bottom of the page" common="true">
Expand Down
8 changes: 6 additions & 2 deletions src/Nottingham/wizards/en-GB/crossword.xwd
View file
Expand Up @@ -3,6 +3,8 @@
<pageWizard remove="true" duplicate="false">
<newNodes>
<crossword><![CDATA[<crossword name="Enter Page Title" attempts="1"
across="Across"
down="Down"
checkBtn="Submit"
again="Try again, you have /a attempt(s) left"
/>]]></crossword>
Expand All @@ -17,8 +19,10 @@
<feedback label="Feedback" type="TextArea" height="100" optional="true"/>
<align label="Clue Position" options="Left,Bottom,Right" type="ComboBox" defaultValue="Right" data="Left,Bottom,Right" width="100" optional="true"/>

<checkBtn label="Check Button Text" type="TextInput" wysiwyg="true" divider="true" language="true" mandatory="true" defaultValue="Submit"/>
<again label="Attempt Label" type="TextInput" wysiwyg="true" language="true" tooltip="/a is where the attempts will be placed "/>
<across label="Across Clue Title" type="TextInput" wysiwyg="true" divider="true" language="true" mandatory="true" defaultValue="Across"/>
<down label="Down Clue Title" type="TextInput" wysiwyg="true" language="true" mandatory="true" defaultValue="Down"/>
<checkBtn label="Check Button Text" type="TextInput" wysiwyg="true" language="true" mandatory="true" defaultValue="Submit"/>
<again label="Attempt Label" type="TextInput" wysiwyg="true" language="true" tooltip="/a is where the attempts will be placed"/>
<feedbackLabel label="Feedback" type="TextInput" wysiwyg="true" language="true" mandatory="true" defaultValue="Feedback"/>

<newNodes>
Expand Down

0 comments on commit 6dbd92d

Please sign in to comment.