<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\/* This is the CSS stylesheet used in the exercise. *\/
\n\/* Elements in square brackets are replaced by data based on configuration settings when the exercise is built. *\/<\/p>\n
\/* BeginCorePageCSS *\/<\/p>\n
\/* Made with executable version 7.0 Release 3 Build 0 *\/<\/p>\n
\/* CSS variables for colours. *\/
\n:root{
\n\t--strFontFace: arial,helvetica,sans-serif;
\n\t--strFontSize: small;
\n\t--strTextColor: #000000;
\n\t--strTitleColor: #000000;<\/p>\n
\t--strFuncLightColor: #eeeeee;
\n\t--strFuncShadeColor: #6e6e6e;
\n\t--strLinkColor: #0000ff;
\n\t--strVLinkColor: #ff00ff;<\/p>\n
\t--strNavBarColor: #000000;
\n\t--strNavLightColor: #7f7f7f;
\n\t--strNavShadeColor: #000000;
\n\t--strNavTextColor: #ffffff;<\/p>\n
\t--strPageBGColor: #ffffff;
\n\t--strExBGColor: #dddddd;
\n}<\/p>\n
body{
\n\tfont-family: var(--strFontFace);
\n\tbackground-color: var(--strPageBGColor);
\n\tcolor: var(--strTextColor);<\/p>\n
\tmargin-right: 5%;
\n\tmargin-left: 5%;
\n\tfont-size: var(--strFontSize);
\n\tpadding-bottom: 0.5em;
\n}<\/p>\n
p{
\n\ttext-align: left;
\n\tmargin: 0px;
\n\tfont-size: 1em;
\n}<\/p>\n
table,div,span,td{
\n\tfont-size: 1em;
\n\tcolor: var(--strTextColor);
\n}<\/p>\n
div.Titles{
\n\tpadding: 0.5em;;
\n\ttext-align: center;
\n\tcolor: var(--strTitleColor);
\n}<\/p>\n
button{
\n\tfont-family: var(--strFontFace);
\n\tfont-size: 1em;
\n\tdisplay: inline;
\n}<\/p>\n
.ExerciseTitle{
\n\tfont-size: 140%;
\n\tcolor: var(--strTitleColor);
\n}<\/p>\n
.ExerciseSubtitle{
\n\tfont-size: 120%;
\n\tcolor: var(--strTitleColor);
\n}<\/p>\n
div.StdDiv, div.ExerciseContainer, div.ReadingContainer{
\n\tbackground-color: var(--strExBGColor);
\n\ttext-align: center;
\n\tfont-size: 1em;
\n\tcolor: var(--strTextColor);
\n\tpadding: 0.5em;
\n\tborder-style: solid;
\n\tborder-width: 1px 1px 1px 1px;
\n\tborder-color: var(--strTextColor);
\n\tmargin-bottom: 1px;
\n}<\/p>\n
div.ReadingContainer, div.ExerciseContainer{
\n\tmin-width: 15em;
\n\tflex-grow: 1;
\n\tflex-basis: 0;
\n\tmargin: 1px;
\n}<\/p>\n
div#ContainerDiv{
\n\tmargin: -1px;
\n\tpadding: 0;
\n\tborder: none;
\n\tdisplay: flex;
\n\tflex-direction: row;
\n\tflex-wrap: wrap;
\n\tjustify-content: space-between;
\n}<\/p>\n
\/* EndCorePageCSS *\/<\/p>\n
.RTLText{
\n\ttext-align: right;
\n\tfont-size: 150%;
\n\tdirection: rtl;
\n\tfont-family: \"Simplified Arabic\", \"Traditional Arabic\", \"Times New Roman\", var(--strFontFace);
\n}<\/p>\n
.CentredRTLText{
\n\ttext-align: center;
\n\tfont-size: 150%;
\n\tdirection: rtl;
\n\tfont-family: \"Simplified Arabic\", \"Traditional Arabic\", \"Times New Roman\", var(--strFontFace);
\n}<\/p>\n
button p.RTLText{
\n\ttext-align: center;
\n}<\/p>\n
.RTLGapBox{
\n\ttext-align: right;
\n\tfont-size: 150%;
\n\tdirection: rtl;
\n\tfont-family: \"Times New Roman\", var(--strFontFace);
\n}<\/p>\n
.Guess{
\n\tfont-weight: bold;
\n}<\/p>\n
.CorrectAnswer{
\n\tfont-weight: bold;
\n}<\/p>\n
div#Timer{
\n\tpadding: 0.25em;
\n\tmargin-left: auto;
\n\tmargin-right: auto;
\n\ttext-align: center;
\n\tcolor: var(--strTitleColor);
\n}<\/p>\n
span#TimerText{
\n\tpadding: 0.25em;
\n\tborder-width: 1px;
\n\tborder-style: solid;
\n\tfont-weight: bold;
\n\tdisplay: none;
\n\tcolor: var(--strTitleColor);
\n}<\/p>\n
span.Instructions{<\/p>\n
}<\/p>\n
div.ExerciseText{<\/p>\n
}<\/p>\n
.FeedbackText, .FeedbackText span.CorrectAnswer, .FeedbackText span.Guess, .FeedbackText span.Answer{
\n\tcolor: var(--strTitleColor);
\n}<\/p>\n
.LeftItem{
\n\tfont-size: 1em;
\n\tcolor: var(--strTextColor);
\n\ttext-align: left;
\n}<\/p>\n
.RightItem{
\n\tfont-weight: bold;
\n\tfont-size: 1em;
\n\tcolor: var(--strTextColor);
\n\ttext-align: left;
\n}<\/p>\n
span.CorrectMark{<\/p>\n
}<\/p>\n
input, textarea{
\n\tfont-family: var(--strFontFace);
\n\tfont-size: 120%;
\n}<\/p>\n
select{
\n\tfont-size: 1em;
\n}<\/p>\n
div.Feedback {
\n\tbackground-color: var(--strPageBGColor);
\n\tleft: 33%;
\n\twidth: 34%;
\n\ttop: 33%;
\n\tz-index: 1;
\n\tborder-style: solid;
\n\tborder-width: 1px;
\n\tpadding: 5px;
\n\ttext-align: center;
\n\tcolor: var(--strTitleColor);
\n\tposition: absolute;
\n\tdisplay: none;
\n\tfont-size: 1em;
\n}<\/p>\n
div.ExerciseDiv{
\n\tcolor: var(--strTextColor);
\n}<\/p>\n
\/* JMatch standard output table. *\/
\ntable.MatchTable{
\n\tmargin: 2em auto;
\n\tborder-width: 0;
\n}<\/p>\n
\/* JMatch flashcard styles *\/
\ntable.FlashcardTable{
\n\tbackground-color: transparent;
\n\tcolor: var(--strTextColor);
\n\tborder-color: var(--strTextColor);
\n\tmargin-left: auto;
\n\tmargin-right: auto;
\n\tmargin-top: 2em;
\n\tmargin-bottom: 2em;
\n\t\/*width: 90%;*\/
\n\tposition: relative;
\n\ttext-align: center;
\n\tpadding: 0px;
\n}<\/p>\n
table.FlashcardTable tr{
\n\tborder-style: none;
\n\tmargin: 0px;
\n\tpadding: 0px;
\n\tbackground-color: var(--strExBGColor);
\n}<\/p>\n
table.FlashcardTable td.Showing{
\n\tfont-size: 140%;
\n\ttext-align: center;
\n\twidth: 50%;
\n\tdisplay: table-cell;
\n\tpadding: 2em;
\n\tmargin: 0px;
\n\tborder-style: solid;
\n\tborder-width: 1px;
\n\tborder-radius: 0.5em;
\n\tcolor: var(--strTextColor);
\n\tbox-shadow: 0.2em 0.3em 0.2em var(--strNavShadeColor);
\n\tbackground-color: var(--strPageBGColor);
\n}<\/p>\n
table.FlashcardTable td.Hidden{
\n\tdisplay: none;
\n}<\/p>\n
\/* JMix styles *\/
\ndiv.JMixDrag, div.JMatchDrag{
\n\tpadding: 0;
\n\tbackground-color: var(--strPageBGColor);
\n\tborder-style: none;
\n}<\/p>\n
div#GuessDiv{
\n\tpadding: 0.5em;
\n\tmargin-bottom: 2em;
\n}<\/p>\n
div#SegmentDiv{
\n\tmargin-top: 2em;
\n\tmargin-bottom: 2em;
\n\ttext-align: center;
\n}<\/p>\n
a.ExSegment{
\n\tfont-size: 120%;
\n\tfont-weight: bold;
\n\ttext-decoration: none;
\n\tcolor: var(--strTextColor);
\n\tdisplay: inline-block;
\n\tpadding: 0.5em;
\n\tborder: solid 1pt gray;
\n\tmargin-bottom: 0.5em;
\n}<\/p>\n
span.RemainingWordList{
\n\tfont-style: italic;
\n}<\/p>\n
div.DropLine {
\n\tposition: absolute;
\n\ttext-align: left;
\n\tborder-bottom-style: solid;
\n\tborder-bottom-width: 1px;
\n\tborder-bottom-color: var(--strTitleColor);
\n\twidth: 80%;
\n\tleft: 10%;
\n}<\/p>\n
\/* JCloze styles *\/<\/p>\n
.ClozeWordList{
\n\ttext-align: center;
\n\tfont-weight: bold;
\n}<\/p>\n
div.ClozeBody{
\n\ttext-align: left;
\n\tmargin-top: 2em;
\n\tmargin-bottom: 2em;
\n\tline-height: 2.0
\n}<\/p>\n
span.GapSpan{
\n\tfont-weight: bold;
\n}<\/p>\n
\/* JCross styles *\/<\/p>\n
table.CrosswordGrid{
\n\tmargin: auto auto 1em auto;
\n\tborder-collapse: collapse;
\n\tpadding: 0px;
\n\tbackground-color: #000000;
\n}<\/p>\n
table.CrosswordGrid tbody tr td{
\n\twidth: 1.5em;
\n\theight: 1.5em;
\n\ttext-align: center;
\n\tvertical-align: middle;
\n\tfont-size: 140%;
\n\tpadding: 1px;
\n\tmargin: 0px;
\n\tborder-style: solid;
\n\tborder-width: 1px;
\n\tborder-color: #000000;
\n\tcolor: #000000;
\n}<\/p>\n
table.CrosswordGrid span{
\n\tcolor: #000000;
\n}<\/p>\n
table.CrosswordGrid td.BlankCell{
\n\tbackground-color: #000000;
\n\tcolor: #000000;
\n}<\/p>\n
table.CrosswordGrid td.LetterOnlyCell{
\n\ttext-align: center;
\n\tvertical-align: middle;
\n\tbackground-color: #ffffff;
\n\tcolor: #000000;
\n\tfont-weight: bold;
\n}<\/p>\n
table.CrosswordGrid td.NumLetterCell{
\n\ttext-align: left;
\n\tvertical-align: top;
\n\tbackground-color: #ffffff;
\n\tcolor: #000000;
\n\tpadding: 1px;
\n\tfont-weight: bold;
\n}<\/p>\n
.NumLetterCellText{
\n\tcursor: pointer;
\n\tcolor: #000000;
\n}<\/p>\n
.GridNum{
\n\tvertical-align: super;
\n\tfont-size: 66%;
\n\tfont-weight: bold;
\n\ttext-decoration: none;
\n\tcolor: #000000;
\n}<\/p>\n
.GridNum:hover, .GridNum:visited{
\n\tcolor: #000000;
\n}<\/p>\n
table#Clues{
\n\tmargin: auto;
\n\tvertical-align: top;
\n}<\/p>\n
table#Clues td{
\n\tvertical-align: top;
\n}<\/p>\n
table.ClueList{
\n margin: auto;
\n}<\/p>\n
td.ClueNum{
\n\ttext-align: right;
\n\tfont-weight: bold;
\n\tvertical-align: top;
\n}<\/p>\n
td.Clue{
\n\ttext-align: left;
\n}<\/p>\n
div#ClueEntry{
\n\ttext-align: left;
\n\tmargin-bottom: 1em;
\n}<\/p>\n
\/* Keypad styles *\/<\/p>\n
div.Keypad{
\n\ttext-align: center;
\n\tdisplay: none; \/* initially hidden, shown if needed *\/
\n\tmargin-bottom: 0.5em;
\n}<\/p>\n
div.Keypad button{
\n\tfont-family: var(--strFontFace);
\n\tfont-size: 120%;
\n\tbackground-color: #ffffff;
\n\tcolor: #000000;
\n\twidth: 2em;
\n\tborder-style: solid;
\n\tborder-width: 1px;
\n\tborder-radius: 0.5em;
\n\tcolor: var(--strTextColor);
\n\tbox-shadow: 0.2em 0.3em 0.2em var(--strTextColor);
\n}<\/p>\n
\/* JQuiz styles *\/<\/p>\n
div.QuestionNavigation{
\n\ttext-align: center;
\n}<\/p>\n
.QNum{
\n\tmargin: 0em 1em 0.5em 1em;
\n\tfont-weight: bold;
\n\tvertical-align: middle;
\n}<\/p>\n
textarea{
\n\tfont-family: var(--strFontFace);
\n}<\/p>\n
.QuestionText{
\n\ttext-align: left;
\n\tmargin: 0px;
\n\tfont-size: 1em;
\n}<\/p>\n
.Answer{
\n\tfont-size: 120%;
\n}<\/p>\n
.PartialAnswer{
\n\tfont-size: 120%;
\n\tletter-spacing: 0.1em;
\n\tcolor: var(--strTitleColor);
\n}<\/p>\n
.Highlight{
\n\tcolor: #000000;
\n\tbackground-color: #ffff00;
\n\tfont-weight: bold;
\n\tfont-size: 120%;
\n}<\/p>\n
ol.QuizQuestions{
\n\ttext-align: left;
\n\tlist-style-type: none;
\n}<\/p>\n
li.QuizQuestion{
\n\tpadding: 1em;
\n\tborder-style: solid;
\n\tborder-width: 0px 0px 1px 0px;
\n}<\/p>\n
ol.MCAnswers{
\n\ttext-align: left;
\n\tlist-style-type: upper-alpha;
\n\tpadding: 1em;
\n}<\/p>\n
ol.MCAnswers li{
\n\tmargin-bottom: 1em;
\n}<\/p>\n
ol.MSelAnswers{
\n\ttext-align: left;
\n\tlist-style-type: lower-alpha;
\n\tpadding: 1em;
\n}<\/p>\n
div.ShortAnswer{
\n\tpadding: 1em;
\n}<\/p>\n
.FuncButton {
\n\tborder-style: solid;
\n\tborder-radius: 0.5em;
\n\tpadding: 0.5em;
\n\tmin-width: 3em;<\/p>\n
\tborder-left-color: var(--strFuncLightColor);
\n\tborder-top-color: var(--strFuncLightColor);
\n\tborder-right-color: var(--strFuncShadeColor);
\n\tborder-bottom-color: var(--strFuncShadeColor);
\n\tcolor: var(--strTextColor);
\n\tbackground-color: var(--strExBGColor);<\/p>\n
\tborder-width: 1pt;
\n\tcursor: pointer;
\n\tbox-shadow: 0.2em 0.3em 0.2em var(--strFuncShadeColor);
\n}<\/p>\n
.FuncButton:active {
\n\tbox-shadow: none;
\n}<\/p>\n
.FuncButton:hover{
\n\tcolor: var(--strExBGColor);
\n\tbackground-color: var(--strTextColor);
\n}<\/p>\n
\/*BeginNavBarStyle*\/<\/p>\n
div.NavButtonBar{
\n\tbackground-color: var(--strNavBarColor);
\n\ttext-align: center;
\n\tmargin: 0.25rem 0;
\n\tclear: both;
\n\tfont-size: 1em;
\n\tpadding: 0.2em;
\n\tbox-sizing: border-box;
\n}<\/p>\n
.NavButton {
\n\tborder-style: solid;
\n\tborder-radius: 0.5em;
\n\tpadding: 0.5em;
\n\tmin-width: 3em;<\/p>\n
\tborder-left-color: var(--strNavLightColor);
\n\tborder-top-color: var(--strNavLightColor);
\n\tborder-right-color: var(--strNavShadeColor);
\n\tborder-bottom-color: var(--strNavShadeColor);
\n\tbackground-color: var(--strNavBarColor);
\n\tcolor: var(--strNavTextColor);<\/p>\n
\tborder-width: 1pt;
\n\tcursor: pointer;
\n\tbox-shadow: 0.2em 0.3em 0.2em var(--strNavShadeColor);
\n}<\/p>\n
.NavButton:active {
\n\tbox-shadow: none;
\n}<\/p>\n
.NavButton:hover{
\n\tcolor: var(--strNavBarColor);
\n\tbackground-color: var(--strNavTextColor);
\n}<\/p>\n
\/*EndNavBarStyle*\/<\/p>\n
a{
\n\tcolor: var(--strLinkColor);
\n}<\/p>\n
a:visited{
\n\tcolor: var(--strVLinkColor);
\n}<\/p>\n
a:hover{
\n\tcolor: var(--strLinkColor);
\n}<\/p>\n
div.CardStyle {
\n\tposition: absolute;
\n\tfont-family: var(--strFontFace);
\n\tfont-size: 1em;
\n\tborder-style: solid;
\n\tborder-radius: 0.5em;
\n\tpadding: 0.5em;
\n\tmin-width: 2em;
\n\tborder-width: 1pt;
\n\tcolor: var(--strTextColor);
\n\tbox-shadow: 0.2em 0.3em 0.2em var(--strTextColor);
\n\tbackground-color: var(--strExBGColor);
\n\tleft: -50px;
\n\ttop: -50px;
\n\toverflow: visible;
\n\ttouch-action: none;
\n\tuser-select: none;
\n\tbox-sizing: border-box;
\n}<\/p>\n
div.CardStyleCentered{
\n\ttext-align: center;
\n}<\/p>\n
.rtl{
\n\ttext-align: right;
\n\tfont-size: 140%;
\n}<\/p>\n
\/\/<![CDATA[<\/p>\n
<!--<\/p>\n
\/\/CODE FOR HANDLING NAV BUTTONS AND FUNCTION BUTTONS<\/p>\n
function FocusAButton(){
\n\tif (document.getElementById('CheckButton1') != null){
\n\t\tdocument.getElementById('CheckButton1').focus();
\n\t}
\n\telse{
\n\t\tif (document.getElementById('CheckButton2') != null){
\n\t\t\tdocument.getElementById('CheckButton2').focus();
\n\t\t}
\n\t\telse{
\n\t\t\tdocument.getElementsByTagName('button')[0].focus();
\n\t\t}
\n\t}
\n}<\/p>\n
\/\/CODE FOR HANDLING DISPLAY OF POPUP FEEDBACK BOX<\/p>\n
var topZ = 1000;<\/p>\n
function ShowMessage(Feedback){
\n\tvar Output = Feedback + '<\/p>\n
';
\n\tdocument.getElementById('FeedbackContent').innerHTML = Output;
\n\tvar FDiv = document.getElementById('FeedbackDiv');
\n\ttopZ++;
\n\tFDiv.style.zIndex = topZ;
\n\tFDiv.style.top = TopSettingWithScrollOffset(30) + 'px';<\/p>\n
\tFDiv.style.display = 'block';<\/p>\n
\tShowElements(false, 'input');
\n\tShowElements(false, 'select');
\n\tShowElements(false, 'object');
\n\tShowElements(true, 'object', 'FeedbackContent');<\/p>\n
\/\/Focus the OK button
\n\tsetTimeout(\"document.getElementById('FeedbackOKButton').focus()\", 50);<\/p>\n
\/\/
\n\/\/\tRefreshImages();
\n\/\/
\n}<\/p>\n
function ShowElements(Show, TagName, ContainerToReverse){
\n\/\/ added third argument to allow objects in the feedback box to appear
\n\/\/IE bug -- hide all the form elements that will show through the popup
\n\/\/FF on Mac bug : doesn't redisplay objects whose visibility is set to visible
\n\/\/unless the object's display property is changed<\/p>\n
\t\/\/get container object (by Id passed in, or use document otherwise)
\n\tTopNode = document.getElementById(ContainerToReverse);
\n\tvar Els;
\n\tif (TopNode != null) {
\n\t\tEls = TopNode.getElementsByTagName(TagName);
\n\t} else {
\n\t\tEls = document.getElementsByTagName(TagName);
\n\t}<\/p>\n
\tfor (var i=0; i ReduceToSize){
\n\t\tItemToDump = Math.floor(InArray.length*Math.random());
\n\t\tInArray.splice(ItemToDump, 1);
\n\t}
\n}<\/p>\n
function Shuffle(InArray){
\n\tvar Num;
\n\tvar Temp = new Array();
\n\tvar Len = InArray.length;<\/p>\n
\tvar j = Len;<\/p>\n
\tfor (var i=0; i<Len; i++){
\n\t\tTemp[i] = InArray[i];
\n\t}<\/p>\n
\tfor (i=0; i<Len; i++){
\n\t\tNum = Math.floor(j * Math.random());
\n\t\tInArray[i] = Temp[Num];<\/p>\n
\t\tfor (var k=Num; k < (j-1); k++) {
\n\t\t\tTemp[k] = Temp[k+1];
\n\t\t}
\n\t\tj--;
\n\t}
\n\treturn InArray;
\n}<\/p>\n
function WriteToInstructions(Feedback) {
\n\tdocument.getElementById('InstructionsDiv').innerHTML = Feedback;<\/p>\n
\tRefreshImages();<\/p>\n
}<\/p>\n
Imgs = new Array();<\/p>\n
function PreloadImages(){
\n\tvar a = PreloadImages.arguments;
\n\tfor (var i=0; i<a.length; i++){
\n\t\tImgs[i] = new Image();
\n\t\tImgs[i].src = a[i];
\n\t}
\n}<\/p>\n
function RefreshImages(){
\n\tfor (var i=0; i<document.images.length; i++){
\n\t\tif (document.images[i].name.substring(0,6) != 'NavBar'){
\n\t\t\tdocument.images[i].src = document.images[i].src;
\n\t\t}
\n\t}
\n}<\/p>\n
function EscapeDoubleQuotes(InString){
\n\treturn InString.replace(\/"\/g, '"')
\n}<\/p>\n
function TrimString(InString){
\n var x = 0;<\/p>\n
if (InString.length != 0) {
\n while ((InString.charAt(InString.length - 1) == '\\u0020') || (InString.charAt(InString.length - 1) == '\\u000A') || (InString.charAt(InString.length - 1) == '\\u000D')){
\n InString = InString.substring(0, InString.length - 1)
\n }<\/p>\n
while ((InString.charAt(0) == '\\u0020') || (InString.charAt(0) == '\\u000A') || (InString.charAt(0) == '\\u000D')){
\n InString = InString.substring(1, InString.length)
\n }<\/p>\n
while (InString.indexOf(' ') != -1) {
\n x = InString.indexOf(' ')
\n InString = InString.substring(0, x) + InString.substring(x+1, InString.length)
\n }<\/p>\n
return InString;
\n }<\/p>\n
else {
\n return '';
\n }
\n}<\/p>\n
function FindLongest(InArray){
\n\tif (InArray.length < 1){return -1;}<\/p>\n
\tvar Longest = 0;
\n\tfor (var i=1; i InArray[Longest].length){
\n\t\t\tLongest = i;
\n\t\t}
\n\t}
\n\treturn Longest;
\n}<\/p>\n
\/\/SELECTION OBJECT FOR TYPING WITH KEYPAD
\nvar selObj = null;<\/p>\n
SelObj = function(box){
\n\tthis.box = box;
\n\tthis.selStart = this.box.selectionStart;
\n\tthis.selEnd = this.box.selectionEnd;
\n\tthis.selText = this.box.value.substring(this.selStart, this.selEnd);
\n\treturn this;
\n}<\/p>\n
function setSelText(newText){
\n\tvar caretPos = this.selStart + newText.length;
\n\tvar newValue = this.box.value.substring(0, this.selStart);
\n\tnewValue += newText;
\n\tnewValue += this.box.value.substring(this.selEnd, this.box.value.length);
\n\tthis.box.value = newValue;
\n\tthis.box.setSelectionRange(caretPos, caretPos);
\n\tthis.box.focus();
\n}
\nSelObj.prototype.setSelText = setSelText;<\/p>\n
function setSelSelectionRange(start, end){
\n\tthis.box.setSelectionRange(start, end);
\n}
\nSelObj.prototype.setSelSelectionRange = setSelSelectionRange;<\/p>\n
\/\/UNICODE CHARACTER FUNCTIONS
\nfunction IsCombiningDiacritic(CharNum){
\n\tvar Result = (((CharNum >= 0x0300)&&(CharNum = 0x20d0)&&(CharNum = 0x3099)&&(CharNum = 0xfe20)&&(CharNum = 0x3000)&&(CharNum < 0xd800));
\n}<\/p>\n
\/\/SETUP FUNCTIONS
\n\/\/BROWSER WILL REFILL TEXT BOXES FROM CACHE IF NOT PREVENTED
\nfunction ClearTextBoxes(){
\n\tvar NList = document.getElementsByTagName('input');
\n\tfor (var i=0; i -1)||(NList[i].id.indexOf('Gap') > -1)){
\n\t\t\tNList[i].value = '';
\n\t\t}
\n\t\tif (NList[i].id.indexOf('Chk') > -1){
\n\t\t\tNList[i].checked = '';
\n\t\t}
\n\t}
\n}<\/p>\n
\/\/JMATCH CORE JAVASCRIPT CODE<\/p>\n
var CorrectIndicator = '✔';
\nvar IncorrectIndicator = '✘';
\nvar YourScoreIs = 'Your score is ';
\nvar CorrectResponse = 'Correct! Well done.';
\nvar IncorrectResponse = 'Sorry! Try again. ';
\nvar TotalUnfixedLeftItems = 0;
\nvar TotCorrectChoices = 0;
\nvar Penalties = 0;
\nvar Finished = false;
\nvar TimeOver = false;<\/p>\n
var Score = 0;
\nvar Locked = false;
\nvar ShuffleQs = false;
\nvar QsToShow = 4;<\/p>\n
function TimerStartUp(){
\n\tsetTimeout('JsonEx.Setup()', 300);
\n}<\/p>\n
\/*
\n The new V7 JSON object replaces the arrays of old.
\n*\/
\nvar V7JsonEx = '{ \"ShuffleLeftItems\": false, \"IsSimple\": true, \"ItemsToShow\": -1, \"LeftItems\": [{\"OrigPos\": 0, \"Group\": 0}, {\"OrigPos\": 1, \"Group\": 1}, {\"OrigPos\": 2, \"Group\": 2}, {\"OrigPos\": 3, \"Group\": 3}], \"RightItems\": [{\"OrigPos\": 0, \"Groups\": [0], \"MatchedWith\": -1}, {\"OrigPos\": 1, \"Groups\": [1], \"MatchedWith\": -1}, {\"OrigPos\": 2, \"Groups\": [2], \"MatchedWith\": -1}, {\"OrigPos\": 3, \"Groups\": [3], \"MatchedWith\": -1}]}';<\/p>\n
var JsonEx = JSON.parse(V7JsonEx);<\/p>\n
JsonEx.GetLeftItemByOrigPos = function(Pos){
\n\tfor (var i=0; i<this.LeftItems.length; i++){<\/p>\n
\t\tif (this.LeftItems[i].OrigPos == Pos){
\n\t\t\treturn this.LeftItems[i];
\n\t\t}
\n\t}
\n\treturn null;
\n};<\/p>\n
JsonEx.GetRightItemByOrigPos = function(Pos){
\n\tfor (var i=0; i<this.RightItems.length; i++){
\n\t\tif (this.RightItems[i].OrigPos == Pos){
\n\t\t\treturn this.RightItems[i];
\n\t\t}
\n\t}
\n\treturn null;
\n};<\/p>\n
\/\/Methods for the object.
\nJsonEx.Setup = function(){
\n\tvar i, j, nList, LI, RI;<\/p>\n
\tPreloadImages('https:\/\/media.istockphoto.com\/id\/1213207280\/photo\/cute-small-dog-standing-on-two-legs-and-looking-away-by-the-window-searching-or-waiting-for.jpg?s=1024x1024&w=is&k=20&c=l_ZV52OtiIZkzEOxVnQF_psuEYHnK1DnW9s3SQ0enhQ=','https:\/\/zampol.it\/wp-content\/uploads\/2023\/02\/Caratteristiche_del_gatto-1024x683.jpg','https:\/\/img.cnngreece.gr\/img\/1290\/max\/80\/2016\/05\/21\/Nemo_Promo_5.webp?t=Uqbefpfv10bLq006HqrnaQ','https:\/\/www.typosthes.gr\/sites\/default\/files\/styles\/default\/public\/%CE%B1%CF%83%CF%84%CF%85%CE%BD%CE%BF%CE%BC%CE%B9%CE%BA%CE%BF%CE%B9-%CE%B1%CF%80%CE%B8-%CE%BC%CF%80%CE%BF%CF%85%CF%84%CE%AC%CF%81%CE%B7%CF%82.jpg?itok=FAWXmjap');<\/p>\n
\/\/Get a reference to the table's tbody.
\n\tthis.tbody = document.querySelector('tbody#MatchItems');<\/p>\n
\/\/Connect each of the items to its cell or select element.
\n\tfor (var i=0; i 2){
\n\t\twhile (this.LeftItems.length > this.ItemsToShow){
\n\t\t\tRemItem = Math.floor(this.LeftItems.length*Math.random());
\n\t\t\tOP = this.LeftItems[RemItem].OrigPos;
\n\/\/Remove the whole table row which is the parent of this left item.
\n\t\t\tvar row = this.LeftItems[RemItem].Cell.parentNode;
\n\t\t\trow.parentNode.removeChild(row);
\n\t\t\tthis.LeftItems.splice(RemItem, 1);<\/p>\n
\/\/Having removed an item from the left, we must remove the corresponding
\n\/\/one from the right if it exists. (There may not be a matching item if
\n\/\/the one removed was a distractor.)
\n\t\t\tfor (i = 0; i < this.RightItems.length; i++){
\n\t\t\t\tif (this.RightItems[i].OrigPos == OP){
\n\/\/Before removing the item itself, we need to remove its option
\n\/\/from all the select elements.
\n\t\t\t\t\tnList = document.querySelectorAll('option[data-origPos="R_' + OP + '"]');
\n\t\t\t\t\tfor (var j=0; j=0; i--){
\n\t\t\tarrRows.push(this.tbody.removeChild(rows[i]));
\n\t\t}
\n\t\tarrRows = Shuffle(arrRows);
\n\t\tfor (i=0; i<arrRows.length; i++){
\n\t\t\tthis.tbody.appendChild(arrRows[i]);
\n\t\t}
\n\t}<\/p>\n
\/\/Now get a reference to all selectors, since distractors may not be associated
\n\/\/with a right item.
\n\tthis.AllSelects = document.querySelectorAll('select[id^="R_"]');<\/p>\n
\/\/Now we check for any select that should be pre-selected (fixed item).
\n\tfor (i = 0; i -1)){
\n\t\t\tfor (var j=0; j<Sel.options.length; j++){
\n\t\t\t\tif (Sel.options[j].value == Pos){
\n\t\t\t\t\tSel.options.selectedIndex = j;
\n\t\t\t\t\tSel.dispatchEvent(new Event("change", {"bubbles": true}));
\n\t\t\t\t\tbreak;
\n\t\t\t\t}
\n\t\t\t}
\n\t\t}
\n\t}<\/p>\n
\tStartTimer();<\/p>\n
};<\/p>\n
JsonEx.AlignSelects = function(OrigPos){
\n\tvar Select = document.getElementById('R_' + OrigPos);
\n\tvar CurrMatch = Select.options[Select.selectedIndex].value;
\n\tvar RI = this.GetRightItemByOrigPos(OrigPos);
\n\tvar i;<\/p>\n
\t\/\/First we make sure that if this is unselecting
\n\t\/\/a previous selection, we re-show all the corresponding
\n\t\/\/items.
\n\tif ((!RI)||(RI.MatchedWith != CurrMatch)){
\n\t\tvar lastMatch = RI? RI.MatchedWith : Select.getAttribute('data-LastMatch') ? Select.getAttribute('data-LastMatch') : -1;
\n\t\tfor (i=0; i -1){
\n\t\tfor (i=0; i<this.AllSelects.length; i++){
\n\t\t\tif (Select !== this.AllSelects[i]){
\n\t\t\t\tthis.AllSelects[i].querySelector('option[value="' + CurrMatch + '"]').disabled = 'disabled';
\n\t\t\t}
\n\t\t}
\n\t}
\n};<\/p>\n
JsonEx.CheckAnswers = function(){
\n\/*
\n\tCheck each right item to see whether a) it had an
\n\toriginal match on the left, and b) it is matched
\n\tto a left item whose group is one of its groups.
\n*\/<\/p>\n
\tif (!this.hasOwnProperty('Penalties')){
\n\t\tthis.Penalties = 0;
\n\t}
\n\tvar ItemsToCount = this.AllSelects.length;
\n\tvar CorrectItems = 0;
\n\tvar Done = true; \/\/Assume till proven otherwise.
\n\tvar i, selectedOrigPos, LI, RI;<\/p>\n
\/\/Tot up the scores.<\/p>\n
\/\/Go through all the left items.
\n\tfor (i=0; i -1){
\n\t\t\t\t\/\/Mark this right
\n\t\t\t\t\tLI.MarkingCell.innerHTML = CorrectIndicator;
\n\t\t\t\t\tif ((this.IsSimple)&&(LI.Select.style.display !== 'none')){
\n\t\t\t\t\t\t\/\/LI.Select.parentNode.innerHTML = LI.Select.options[LI.Select.options.selectedIndex].innerText;
\n\t\t\t\t\t\tLI.Select.parentNode.appendChild(document.createTextNode(LI.Select.options[LI.Select.options.selectedIndex].innerText));
\n\t\t\t\t\t\tLI.Select.style.display = 'none';
\n\t\t\t\t\t}
\n\t\t\t\t\tCorrectItems++;
\n\t\t\t\t}
\n\t\t\t\telse{
\n\t\t\t\t\tLI.MarkingCell.innerHTML = IncorrectIndicator;
\n\t\t\t\t\tDone = false;
\n\t\t\t\t}
\n\t\t\t}
\n\t\t}
\n\t}<\/p>\n
\tif (!this.hasOwnProperty('Score')){
\n\t\tthis.Score = 0;
\n\t}
\n\tthis.Score = Math.round((100*(CorrectItems - this.Penalties))\/ItemsToCount);
\n\tif (Done === false){
\n\t\tthis.Penalties++;
\n\t}
\n\treturn Done;
\n};<\/p>\n
function CheckAnswers(){
\n\tif (Locked == true){return;}<\/p>\n
\tvar Feedback = '';<\/p>\n
\tvar AllDone = JsonEx.CheckAnswers();
\n\tScore = JsonEx.Score;
\n\tif (Score < 0){Score = 0;}<\/p>\n
\tif (AllDone == true){
\n\t\tFeedback = YourScoreIs + ' ' + Score + '%.
' + CorrectResponse;
\n\t}
\n\telse {
\n\t\tif (TimeOver == true){
\n\t\t\tFeedback = YourScoreIs + ' ' + Score + '%.'
\n\t\t}
\n\t\telse{
\n\t\t\tFeedback = YourScoreIs + ' ' + Score + '%.' + '
' + IncorrectResponse;
\n\t\t}
\n\t}
\n\tShowMessage(Feedback);<\/p>\n
\/\/If the exercise is over, deal with that
\n\tif ((AllDone == true)||(TimeOver == true)){<\/p>\n
\t\twindow.clearInterval(Interval);<\/p>\n
\t\tTimeOver = true;
\n\t\tLocked = true;
\n\t\tFinished = true;
\n\t\tWriteToInstructions(Feedback);
\n\t}<\/p>\n
}<\/p>\n
function TimesUp() {
\n\tdocument.getElementById('Timer').innerHTML = 'September is good for u';<\/p>\n
\tRefreshImages();<\/p>\n
\tTimeOver = true;
\n\tCheckAnswers();
\n\tLocked = true;<\/p>\n
}<\/p>\n
\/\/CODE FOR HANDLING TIMER
\n\/\/Timer code
\nvar Seconds = 120;
\nvar Interval = null;<\/p>\n
function StartTimer(){
\n\tInterval = window.setInterval('DownTime()',1000);
\n\tdocument.getElementById('TimerText').style.display = 'inline';
\n}<\/p>\n
function DownTime(){
\n\tvar ss = Seconds % 60;
\n\tif (ss<10){
\n\t\tss='0' + ss + '';
\n\t}<\/p>\n
\tvar mm = Math.floor(Seconds \/ 60);<\/p>\n
\tif (document.getElementById('Timer') == null){
\n\t\treturn;
\n\t}<\/p>\n
\tdocument.getElementById('TimerText').innerHTML = mm + ':' + ss;
\n\tif (Seconds <\/p>\n
\/\/]]><\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n