root/trunk/max-javahotpot-tutorial/tutorial/eng/jmatch2.htm @ 35

Revision 35, 30.8 KB (checked in by max, 23 months ago)

mario.izquierdo
max-javahotpot-tutorial (3.1.max1)

  • New release
Line 
1<?xml version="1.0"?>
2       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
3       <html xmlns="http://www.w3.org/1999/xhtml"
4             xml:lang="en"><head><meta name="author" content="Created with Hot Potatoes by Half-Baked Software, registered to Martin Holmes."></meta><meta name="keywords" content="Hot Potatoes, Hot Potatoes, Half-Baked Software, Windows, University of Victoria"></meta>
5
6<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
7<meta name="DC:Creator" content="Martin Holmes" />
8<meta name="DC:Creator" content="UNREGISTERED" />
9<meta name="DC:Title" content="A Matching Exercise made with JMatch" />
10
11
12<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
13
14<title>
15A Matching Exercise made with JMatch
16</title>
17
18<!-- Made with executable version 6.0 Release 2 Build 0 -->
19
20<!-- The following insertion allows you to add your own code directly to this head tag from the configuration screen -->
21
22
23
24<style type="text/css">
25
26
27/* This is the CSS stylesheet used in the exercise. */
28/* Elements in square brackets are replaced by data based on configuration settings when the exercise is built. */
29
30
31body{
32        font-family: Geneva,Arial;
33        background-color: #ffffff;
34        color: #000000;
35 
36        margin-right: 5%;
37        margin-left: 5%;
38        font-size: small;
39}
40
41p{
42        text-align: left;
43        margin: 0px;
44        font-size: small;
45}
46
47div,span,td{
48        font-size: small;
49        color: #000000;
50}
51
52.RTLText{
53        text-align: right;
54        font-size: 150%;
55        direction: rtl;
56        font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", Geneva,Arial;
57}
58
59.CentredRTLText{
60        text-align: center;
61        font-size: 150%;
62        direction: rtl;
63        font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", Geneva,Arial;
64}
65
66button p.RTLText{
67        text-align: center;
68}
69
70.RTLGapBox{
71        text-align: right;
72        font-size: 150%;
73        direction: rtl;
74        font-family: "Times New Roman", Geneva,Arial;
75}
76
77.Guess{
78        font-weight: bold;
79}
80
81.CorrectAnswer{
82        font-weight: bold;
83}
84
85div.Titles{
86        padding: 10px;
87        text-align: center;
88        color: #003300;
89}
90
91button{
92        display: inline;
93}
94
95.ExerciseTitle{
96        font-size: large;
97        color: #003300;
98}
99
100.ExerciseSubtitle{
101        color: #003300;
102}
103
104div#Timer{
105        padding: 6px;
106        margin-left: auto;
107        margin-right: auto;
108        text-align: center;
109}
110
111span#TimerText{
112        padding: 6px;
113        border-width: 1px;
114        border-style: solid;
115        font-weight: bold;
116        display: none;
117}
118
119span.Instructions{
120
121}
122
123div.ExerciseText{
124
125}
126
127.FeedbackText{
128        color: #003300;
129}
130
131span.LeftItem{
132        font-size: small;
133        color: #000000;
134}
135
136span.RightItem{
137        font-weight: bold;
138        font-size: small;
139        color: #000000;
140}
141
142span.CorrectMark{
143
144}
145
146div.Feedback {
147        background-color: #ffffff;
148        left: 33%;
149        width: 34%;
150        top: 33%;
151        z-index: 1;
152        border-style: solid;
153        border-width: 1px;
154        padding: 5px;
155        text-align: center;
156        color: #003300;
157        position: absolute;
158        display: none;
159        font-size: small;
160}
161
162
163[inclReading]
164div.LeftContainer{
165        border-style: none;
166        padding: 2px 0px 2px 0px;
167        float: left;
168        width: 49.8%;
169        margin-bottom: 0px;
170}
171
172div.RightContainer{
173        border-style: none;
174        padding: 2px 0px 2px 0px;
175        float: right;
176        width: 49.8%;
177        margin-bottom: 0px;
178}
179
180.ReadingText{
181
182}
183[/inclReading]
184
185div.ExerciseDiv{
186        color: #000000;
187}
188
189/* JMatch flashcard styles */
190table.FlashcardTable{
191        background-color: transparent;
192        color: #000000;
193        border-color: #000000;
194        margin-left: 5%;
195        margin-right: 5%;
196        margin-top: 2em;
197        margin-bottom: 2em;
198        width: 90%;
199        position: relative;
200        align: center;
201        padding: 0px;
202}
203
204table.FlashcardTable tr{
205        border-style: none;
206        margin: 0px;
207        padding: 0px;
208        background-color: #aaddaa;
209}
210
211table.FlashcardTable td.Showing{
212        font-size: large;
213        text-align: center;
214        width: 50%;
215        display: table-cell;
216        padding: 2em;
217        margin: 0px;
218        border-style: solid;
219        border-width: 1px;
220        color: #000000;
221        background-color: #aaddaa;
222}
223
224table.FlashcardTable td.Hidden{
225        display: none;
226}
227
228/* JMix styles */
229div#SegmentDiv{
230        margin-top: 2em;
231        margin-bottom: 2em;
232        text-align: center;
233}
234
235a.ExSegment{
236        font-size: medium;
237        font-weight: bold;
238        text-decoration: none;
239        color: #000000;
240}
241
242span.RemainingWordList{
243        font-style: italic;
244}
245
246div.DropLine {
247        position: absolute;
248        text-align: center;
249        border-bottom-style: solid;
250        border-bottom-width: 1px;
251        border-bottom-color: #003300;
252        width: 80%;
253}
254
255/* JCloze styles */
256
257input{
258        font-family: Geneva,Arial;
259        font-size: larger;
260}
261
262.ClozeWordList{
263        text-align: center;
264        font-weight: bold;
265}
266
267div.ClozeBody{
268        text-align: left;
269        margin-top: 2em;
270        margin-bottom: 2em;
271        line-height: 2.0
272}
273
274span.GapSpan{
275        font-weight: bold;
276}
277
278/* JCross styles */
279
280table.CrosswordGrid{
281        margin: auto auto 1em auto;
282        border-collapse: collapse;
283        padding: 0px;
284}
285
286table.CrosswordGrid td{
287        width: 1.5em;
288        height: 1.5em;
289        text-align: center;
290        vertical-align: middle;
291        font-size: large;
292        padding: 0px;
293        margin: 0px;
294        border-style: solid;
295        border-width: 1px;
296        border-color: #000000;
297}
298
299table.CrosswordGrid td.BlankCell{
300        background-color: #000000;
301        color: #000000;
302}
303
304table.CrosswordGrid td.LetterOnlyCell{
305        text-align: center;
306        vertical-align: middle;
307        background-color: #ffffff;
308        color: #000000;
309        font-weight: bold;
310}
311
312table.CrosswordGrid td.NumLetterCell{
313        text-align: left;
314        vertical-align: top;
315        background-color: #ffffff;
316        color: #000000;
317        padding: 1px;
318        font-weight: bold;
319}
320
321.NumLetterCellText{
322        cursor: pointer;
323}
324
325.GridNum{
326        vertical-align: super;
327        font-size: x-small;
328        font-weight: bold;
329        text-decoration: none;
330        color: #000000;
331}
332
333table#Clues{
334        margin: auto;
335        vertical-align: top;
336}
337
338table#Clues td{
339        vertical-align: top;
340}
341
342table.ClueList{
343  margin: auto;
344}
345
346td.ClueNum{
347        text-align: right;
348        font-weight: bold;
349        vertical-align: top;
350}
351
352td.Clue{
353        text-align: left;
354}
355
356div#ClueEntry{
357        text-align: left;
358        margin-bottom: 1em;
359}
360
361/* Keypad styles */
362
363div.Keypad{
364        text-align: center;
365}
366
367div.Keypad button{
368        font-family: Geneva,Arial;
369        font-size: 120%;
370        background-color: #ffffff;
371        color: #000000;
372        width: 2em;
373}
374
375/* JQuiz styles */
376
377div.QuestionNavigation{
378        text-align: center;
379}
380
381.QNum{
382        margin: 0em 1em 0.5em 1em;
383        font-weight: bold;
384        vertical-align: middle;
385}
386
387textarea{
388        font-family: Geneva,Arial;
389        font-size: larger;
390}
391
392.QuestionText{
393
394}
395
396.Answer{
397        font-size: 120%;
398        letter-spacing: 0.1em;
399}
400
401.Highlight{
402        color: #000000;
403        background-color: #ffff00;
404        font-weight: bold;
405        font-size: 120%;
406}
407
408ol.QuizQuestions{
409        text-align: left;
410        list-style-type: none;
411}
412
413li.QuizQuestion{
414        padding: 1em;
415        border-style: solid;
416        border-width: 0px 0px 1px 0px;
417}
418
419ol.MCAnswers{
420        text-align: left;
421        list-style-type: upper-alpha;
422        padding: 1em;
423}
424
425ol.MCAnswers li{
426        margin-bottom: 1em;
427}
428
429ol.MSelAnswers{
430        text-align: left;
431        list-style-type: lower-alpha;
432        padding: 1em;
433}
434
435div.ShortAnswer{
436        padding: 1em;
437}
438
439div.StdDiv{
440        background-color: #aaddaa;
441        text-align: center;
442        font-size: small;
443        color: #000000;
444        padding: 8px;
445        border-style: solid;
446        border-width: 1px 1px 1px 1px;
447        border-color: #000000;
448        margin: 1px;
449}
450
451.FuncButton {
452        text-align: center;
453        border-style: solid;
454
455        border-left-color: #d4eed4;
456        border-top-color: #d4eed4;
457        border-right-color: #556e55;
458        border-bottom-color: #556e55;
459        color: #000000;
460        background-color: #aaddaa;
461
462        border-width: 2px;
463        padding: 3px 6px 3px 6px;
464        cursor: pointer;
465}
466
467.FuncButtonUp {
468        color: #aaddaa;
469        text-align: center;
470        border-style: solid;
471
472        border-left-color: #d4eed4;
473        border-top-color: #d4eed4;
474        border-right-color: #556e55;
475        border-bottom-color: #556e55;
476
477        background-color: #000000;
478        color: #aaddaa;
479        border-width: 2px;
480        padding: 3px 6px 3px 6px;
481        cursor: pointer;
482}
483
484.FuncButtonDown {
485        color: #aaddaa;
486        text-align: center;
487        border-style: solid;
488
489        border-left-color: #556e55;
490        border-top-color: #556e55;
491        border-right-color: #d4eed4;
492        border-bottom-color: #d4eed4;
493        background-color: #000000;
494        color: #aaddaa;
495
496        border-width: 2px;
497        padding: 3px 6px 3px 6px;
498        cursor: pointer;
499}
500
501/*BeginNavBarStyle*/
502
503div.NavButtonBar{
504        background-color: #006600;
505        text-align: center;
506        margin: 2px 0px 2px 0px;
507        clear: both;
508        font-size: small;
509}
510
511.NavButton {
512        border-style: solid;
513       
514        border-left-color: #7fb27f;
515        border-top-color: #7fb27f;
516        border-right-color: #003300;
517        border-bottom-color: #003300;
518        background-color: #006600;
519        color: #ffffff;
520
521        border-width: 2px;
522        cursor: pointer;       
523}
524
525.NavButtonUp {
526        border-style: solid;
527
528        border-left-color: #7fb27f;
529        border-top-color: #7fb27f;
530        border-right-color: #003300;
531        border-bottom-color: #003300;
532        color: #006600;
533        background-color: #ffffff;
534
535        border-width: 2px;
536        cursor: pointer;       
537}
538
539.NavButtonDown {
540        border-style: solid;
541
542        border-left-color: #003300;
543        border-top-color: #003300;
544        border-right-color: #7fb27f;
545        border-bottom-color: #7fb27f;
546        color: #006600;
547        background-color: #ffffff;
548
549        border-width: 2px;
550        cursor: pointer;       
551}
552
553/*EndNavBarStyle*/
554
555a{
556        color: #0000cc;
557}
558
559a: visited{
560        color: #0000ff;
561}
562
563a:hover{
564        color: #0000cc;
565}
566
567div.CardStyle {
568        position: absolute;
569        font-family: Geneva,Arial;
570        font-size: small;
571        padding: 5px;
572        border-style: solid;
573        border-width: 1px;
574        color: #000000;
575        background-color: #aaddaa;
576        left: -50px;
577        top: -50px;
578        overflow: visible;
579}
580
581.rtl{
582        text-align: right;
583        font-size: large;
584}
585
586
587</style>
588
589<script type="text/javascript">
590
591//<![CDATA[
592
593<!--
594
595
596function Client(){
597//if not a DOM browser, hopeless
598        this.min = false; if (document.getElementById){this.min = true;};
599
600        this.ua = navigator.userAgent;
601        this.name = navigator.appName;
602        this.ver = navigator.appVersion; 
603
604//Get data about the browser
605        this.mac = (this.ver.indexOf('Mac') != -1);
606        this.win = (this.ver.indexOf('Windows') != -1);
607
608//Look for Gecko
609        this.gecko = (this.ua.indexOf('Gecko') > 1);
610        if (this.gecko){
611                this.geckoVer = parseInt(this.ua.substring(this.ua.indexOf('Gecko')+6, this.ua.length));
612                if (this.geckoVer < 20020000){this.min = false;}
613        }
614       
615//Look for Firebird
616        this.firebird = (this.ua.indexOf('Firebird') > 1);
617       
618//Look for Safari
619        this.safari = (this.ua.indexOf('Safari') > 1);
620        if (this.safari){
621                this.gecko = false;
622        }
623       
624//Look for IE
625        this.ie = (this.ua.indexOf('MSIE') > 0);
626        if (this.ie){
627                this.ieVer = parseFloat(this.ua.substring(this.ua.indexOf('MSIE')+5, this.ua.length));
628                if (this.ieVer < 5.5){this.min = false;}
629        }
630       
631//Look for Opera
632        this.opera = (this.ua.indexOf('Opera') > 0);
633        if (this.opera){
634                this.operaVer = parseFloat(this.ua.substring(this.ua.indexOf('Opera')+6, this.ua.length));
635                if (this.operaVer < 7.04){this.min = false;}
636        }
637        if (this.min == false){
638                alert('Your browser may not be able to handle this page.');
639        }
640       
641//Special case for the horrible ie5mac
642        this.ie5mac = (this.ie&&this.mac&&(this.ieVer<6));
643}
644
645var C = new Client();
646
647//for (prop in C){
648//      alert(prop + ': ' + C[prop]);
649//}
650
651
652
653//CODE FOR HANDLING NAV BUTTONS AND FUNCTION BUTTONS
654
655//[strNavBarJS]
656function NavBtnOver(Btn){
657        if (Btn.className != 'NavButtonDown'){Btn.className = 'NavButtonUp';}
658}
659
660function NavBtnOut(Btn){
661        Btn.className = 'NavButton';
662}
663
664function NavBtnDown(Btn){
665        Btn.className = 'NavButtonDown';
666}
667//[/strNavBarJS]
668
669function FuncBtnOver(Btn){
670        if (Btn.className != 'FuncButtonDown'){Btn.className = 'FuncButtonUp';}
671}
672
673function FuncBtnOut(Btn){
674        Btn.className = 'FuncButton';
675}
676
677function FuncBtnDown(Btn){
678        Btn.className = 'FuncButtonDown';
679}
680
681function FocusAButton(){
682        if (document.getElementById('CheckButton1') != null){
683                document.getElementById('CheckButton1').focus();
684        }
685        else{
686                if (document.getElementById('CheckButton2') != null){
687                        document.getElementById('CheckButton2').focus();
688                }
689                else{
690                        document.getElementsByTagName('button')[0].focus();
691                }
692        }
693}
694
695
696
697
698//CODE FOR HANDLING DISPLAY OF POPUP FEEDBACK BOX
699
700var topZ = 1000;
701
702function ShowMessage(Feedback){
703        var Output = Feedback + '<br /><br />';
704        document.getElementById('FeedbackContent').innerHTML = Output;
705        var FDiv = document.getElementById('FeedbackDiv');
706        topZ++;
707        FDiv.style.zIndex = topZ;
708        FDiv.style.top = TopSettingWithScrollOffset(30) + 'px';
709//IE can't focus a hidden div; Moz needs to focus before display to avoid jumping
710        if (C.gecko){
711                document.getElementById('FeedbackOKButton').focus();
712        }
713        FDiv.style.display = 'block';
714
715        ShowElements(false, 'input');
716        ShowElements(false, 'select');
717        ShowElements(false, 'object');
718        if (C.ie){
719                document.getElementById('FeedbackOKButton').focus();
720        }
721       
722//
723}
724
725function ShowElements(Show, TagName){
726//Special for IE bug -- hide all the form elements that will show through the popup
727        if (C.ie){
728                var Els = document.getElementsByTagName(TagName);
729                for (var i=0; i<Els.length; i++){
730                        if (Show == true){
731                                Els[i].style.display = 'inline';
732                        }
733                        else{
734                                Els[i].style.display = 'none';
735                        }
736                }
737        }
738}
739
740function HideFeedback(){
741        document.getElementById('FeedbackDiv').style.display = 'none';
742        ShowElements(true, 'input');
743        ShowElements(true, 'select');
744        ShowElements(true, 'object');
745        if (Finished == true){
746                Finish();
747        }
748}
749
750
751//GENERAL UTILITY FUNCTIONS AND VARIABLES
752
753//PAGE DIMENSION FUNCTIONS
754function PageDim(){
755//Get the page width and height
756        this.W = 600;
757        this.H = 400;
758        this.W = document.getElementsByTagName('body')[0].clientWidth;
759        this.H = document.getElementsByTagName('body')[0].clientHeight;
760}
761
762var pg = null;
763
764function GetPageXY(El) {
765        var XY = {x: 0, y: 0};
766        while(El){
767                XY.x += El.offsetLeft;
768                XY.y += El.offsetTop;
769                El = El.offsetParent;
770        }
771        return XY;
772}
773
774function GetScrollTop(){
775        if (document.documentElement && document.documentElement.scrollTop){
776                return document.documentElement.scrollTop;
777        }
778        else{
779                if (document.body){
780                        return document.body.scrollTop;
781                }
782                else{
783                        return window.pageYOffset;
784                }
785        }
786}
787
788function GetViewportHeight(){
789        if (window.innerWidth){
790                return window.innerWidth;
791        }
792        else{
793                return document.getElementsByTagName('body')[0].clientHeight;
794        }
795}
796
797function TopSettingWithScrollOffset(TopPercent){
798        var T = Math.floor(GetViewportHeight() * (TopPercent/100));
799        return GetScrollTop() + T;
800}
801
802//CODE FOR AVOIDING LOSS OF DATA WHEN BACKSPACE KEY INVOKES history.back()
803var InTextBox = false;
804
805function SuppressBackspace(e){
806        if (InTextBox == true){return;}
807        if (C.ie) {
808                thisKey = window.event.keyCode;
809        }
810        else {
811                thisKey = e.keyCode;
812        }
813
814        var Suppress = false;
815
816        if (thisKey == 8) {
817                Suppress = true;
818        }
819
820        if (Suppress == true){
821                if (C.ie){
822                        window.event.returnValue = false;       
823                        window.event.cancelBubble = true;
824                }
825                else{
826                        e.preventDefault();
827                }
828        }
829}
830
831if (C.ie){
832        document.attachEvent('onkeydown',SuppressBackspace);
833        window.attachEvent('onkeydown',SuppressBackspace);
834}
835else{
836        window.addEventListener('keypress',SuppressBackspace,false);
837}
838
839function ReduceItems(InArray, ReduceToSize){
840        var ItemToDump=0;
841        var j=0;
842        while (InArray.length > ReduceToSize){
843                ItemToDump = Math.floor(InArray.length*Math.random());
844                InArray.splice(ItemToDump, 1);
845        }
846}
847
848function Shuffle(InArray){
849        Temp = new Array();
850        var Len = InArray.length;
851
852        var j = Len;
853
854        for (var i=0; i<Len; i++){
855                Temp[i] = InArray[i];
856        }
857
858        for (i=0; i<Len; i++){
859                Num = Math.floor(j  *  Math.random());
860                InArray[i] = Temp[Num];
861
862                for (var k=Num; k < j; k++) {
863                        Temp[k] = Temp[k+1];
864                }
865                j--;
866        }
867        return InArray;
868}
869
870function WriteToInstructions(Feedback) {
871//      Feedback = '<span class="FeedbackText">' + Feedback + '</span>';
872        document.getElementById('InstructionsDiv').innerHTML = Feedback;
873
874}
875
876
877
878
879function EscapeDoubleQuotes(InString){
880        return InString.replace(/"/g, '&quot;')
881}
882
883function FocusAButton(){
884        if (document.getElementById('CheckButton1') != null){
885                document.getElementById('CheckButton1').focus();
886        }
887        else{
888                document.getElementsByTagName('button')[0].focus();
889        }
890}
891
892function TrimString(InString){
893        var x = 0;
894
895        if (InString.length != 0) {
896                while ((InString.charAt(InString.length - 1) == '\u0020') || (InString.charAt(InString.length - 1) == '\u000A') || (InString.charAt(InString.length - 1) == '\u000D')){
897                        InString = InString.substring(0, InString.length - 1)
898                }
899
900                while ((InString.charAt(0) == '\u0020') || (InString.charAt(0) == '\u000A') || (InString.charAt(0) == '\u000D')){
901                        InString = InString.substring(1, InString.length)
902                }
903
904                while (InString.indexOf('  ') != -1) {
905                        x = InString.indexOf('  ')
906                        InString = InString.substring(0, x) + InString.substring(x+1, InString.length)
907                 }
908
909                return InString;
910        }
911
912        else {
913                return '';
914        }
915}
916
917function FindLongest(InArray){
918        if (InArray.length < 1){return -1;}
919
920        var Longest = 0;
921        for (var i=1; i<InArray.length; i++){
922                if (InArray[i].length > InArray[Longest].length){
923                        Longest = i;
924                }
925        }
926        return Longest;
927}
928
929//UNICODE CHARACTER FUNCTIONS
930function IsCombiningDiacritic(CharNum){
931        var Result = (((CharNum >= 0x0300)&&(CharNum <= 0x370))||((CharNum >= 0x20d0)&&(CharNum <= 0x20ff)));
932        Result = Result || (((CharNum >= 0x3099)&&(CharNum <= 0x309a))||((CharNum >= 0xfe20)&&(CharNum <= 0xfe23)));
933        return Result;
934}
935
936function IsCJK(CharNum){
937        return ((CharNum >= 0x3000)&&(CharNum < 0xd800));
938}
939
940//SETUP FUNCTIONS
941//BROWSER WILL REFILL TEXT BOXES FROM CACHE IF NOT PREVENTED
942function ClearTextBoxes(){
943        var NList = document.getElementsByTagName('input');
944        for (var i=0; i<NList.length; i++){
945                if (NList[i].id.indexOf('Guess') > -1){
946                        NList[i].value = '';
947                }
948                if (NList[i].id.indexOf('Chk') > -1){
949                        NList[i].checked = '';
950                }
951        }
952}
953
954//EXTENSION TO ARRAY OBJECT
955function Array_IndexOf(Input){
956        var Result = -1;
957        for (var i=0; i<this.length; i++){
958                if (this[i] == Input){
959                        Result = i;
960                }
961        }
962        return Result;
963}
964Array.prototype.indexOf = Array_IndexOf;
965
966//IE HAS RENDERING BUG WITH BOTTOM NAVBAR
967function RemoveBottomNavBarForIE(){
968        if (C.ie){
969                if (document.getElementById('BottomNavBar') != null){
970                        document.getElementById('TheBody').removeChild(document.getElementById('BottomNavBar'));
971                }
972        }
973}
974
975
976
977
978//HOTPOTNET-RELATED CODE
979
980var HPNStartTime = (new Date()).getTime();
981var SubmissionTimeout = 30000;
982var Detail = ''; //Global that is used to submit tracking data
983
984function Finish(){
985//If there's a form, fill it out and submit it
986        if (document.store != null){
987                Frm = document.store;
988                Frm.starttime.value = HPNStartTime;
989                Frm.endtime.value = (new Date()).getTime();
990                Frm.mark.value = Score;
991                Frm.detail.value = Detail;
992                Frm.submit();
993        }
994}
995
996
997
998function Card(ID, OverlapTolerance){
999        this.elm=document.getElementById(ID);
1000        this.name=ID;
1001        this.css=this.elm.style;
1002        this.elm.style.left = 0 +'px';
1003        this.elm.style.top = 0 +'px';
1004        this.HomeL = 0;
1005        this.HomeT = 0;
1006        this.tag=-1;
1007        this.index=-1;
1008        this.OverlapTolerance = OverlapTolerance;
1009}
1010
1011function CardGetL(){return parseInt(this.css.left)}
1012Card.prototype.GetL=CardGetL;
1013
1014function CardGetT(){return parseInt(this.css.top)}
1015Card.prototype.GetT=CardGetT;
1016
1017function CardGetW(){return parseInt(this.elm.offsetWidth)}
1018Card.prototype.GetW=CardGetW;
1019
1020function CardGetH(){return parseInt(this.elm.offsetHeight)}
1021Card.prototype.GetH=CardGetH;
1022
1023function CardGetB(){return this.GetT()+this.GetH()}
1024Card.prototype.GetB=CardGetB;
1025
1026function CardGetR(){return this.GetL()+this.GetW()}
1027Card.prototype.GetR=CardGetR;
1028
1029function CardSetL(NewL){this.css.left = NewL+'px'}
1030Card.prototype.SetL=CardSetL;
1031
1032function CardSetT(NewT){this.css.top = NewT+'px'}
1033Card.prototype.SetT=CardSetT;
1034
1035function CardSetW(NewW){this.css.width = NewW+'px'}
1036Card.prototype.SetW=CardSetW;
1037
1038function CardSetH(NewH){this.css.height = NewH+'px'}
1039Card.prototype.SetH=CardSetH;
1040
1041function CardInside(X,Y){
1042        var Result=false;
1043        if(X>=this.GetL()){if(X<=this.GetR()){if(Y>=this.GetT()){if(Y<=this.GetB()){Result=true;}}}}
1044        return Result;
1045}
1046Card.prototype.Inside=CardInside;
1047
1048function CardSwapColours(){
1049        var c=this.css.backgroundColor;
1050        this.css.backgroundColor=this.css.color;
1051        this.css.color=c;
1052}
1053Card.prototype.SwapColours=CardSwapColours;
1054
1055function CardHighlight(){
1056        this.css.backgroundColor='#000000';
1057        this.css.color='#aaddaa';
1058}
1059Card.prototype.Highlight=CardHighlight;
1060
1061function CardUnhighlight(){
1062        this.css.backgroundColor='#aaddaa';
1063        this.css.color='#000000';
1064}
1065Card.prototype.Unhighlight=CardUnhighlight;
1066
1067function CardOverlap(OtherCard){
1068        var smR=(this.GetR()<(OtherCard.GetR()+this.OverlapTolerance))? this.GetR(): (OtherCard.GetR()+this.OverlapTolerance);
1069        var lgL=(this.GetL()>OtherCard.GetL())? this.GetL(): OtherCard.GetL();
1070        var HDim=smR-lgL;
1071        if (HDim<1){return 0;}
1072        var smB=(this.GetB()<OtherCard.GetB())? this.GetB(): OtherCard.GetB();
1073        var lgT=(this.GetT()>OtherCard.GetT())? this.GetT(): OtherCard.GetT();
1074        var VDim=smB-lgT;
1075        if (VDim<1){return 0;}
1076        return (HDim*VDim);     
1077}
1078Card.prototype.Overlap=CardOverlap;
1079
1080function CardDockToR(OtherCard){
1081        this.SetL(OtherCard.GetR() + 5);
1082        this.SetT(OtherCard.GetT());
1083}
1084
1085Card.prototype.DockToR=CardDockToR;
1086
1087function CardSetHome(){
1088        this.HomeL=this.GetL();
1089        this.HomeT=this.GetT();
1090}
1091Card.prototype.SetHome=CardSetHome;
1092
1093function CardGoHome(){
1094        this.SetL(this.HomeL);
1095        this.SetT(this.HomeT);
1096}
1097
1098Card.prototype.GoHome=CardGoHome;
1099
1100
1101function doDrag(e) {
1102        if (CurrDrag == -1) {return};
1103        if (C.ie){var Ev = window.event}else{var Ev = e}
1104        var difX = Ev.clientX-window.lastX;
1105        var difY = Ev.clientY-window.lastY;
1106        var newX = DC[CurrDrag].GetL()+difX;
1107        var newY = DC[CurrDrag].GetT()+difY;
1108        DC[CurrDrag].SetL(newX);
1109        DC[CurrDrag].SetT(newY);
1110        window.lastX = Ev.clientX;
1111        window.lastY = Ev.clientY;
1112        return false;
1113}
1114
1115function beginDrag(e, DragNum) {
1116        CurrDrag = DragNum;
1117        if (C.ie){
1118                var Ev = window.event;
1119                document.onmousemove=doDrag;
1120                document.onmouseup=endDrag;
1121        }
1122        else{
1123                var Ev = e;
1124                window.onmousemove=doDrag;
1125                window.onmouseup=endDrag;
1126        }
1127        DC[CurrDrag].Highlight();
1128        topZ++;
1129        DC[CurrDrag].css.zIndex = topZ;
1130        window.lastX=Ev.clientX;
1131        window.lastY=Ev.clientY;
1132        return false; 
1133}
1134
1135function endDrag(e) {
1136        if (CurrDrag == -1) {return};
1137        DC[CurrDrag].Unhighlight();
1138        if (C.ie){document.onmousemove=null}else{window.onmousemove=null;}
1139        onEndDrag();   
1140        CurrDrag = -1;
1141        return true;
1142}
1143
1144var CurrDrag = -1;
1145var topZ = 100;
1146
1147
1148
1149
1150var CorrectResponse = 'Correct! Well done.';
1151var IncorrectResponse = 'Sorry! Try again. Incorrect matches have been removed.';
1152var YourScoreIs = 'Your score is ';
1153var Correction = '[strCorrection]';
1154var DivWidth = 600; //default value
1155var FeedbackWidth = 200; //default
1156var ExBGColor = '#aaddaa';
1157var PageBGColor = '#ffffff';
1158var TextColor = '#000000';
1159var TitleColor = '#003300';
1160var Penalties = 0;
1161var Score = 0;
1162var TimeOver = false;
1163var Interval = null;
1164var Locked = false;
1165var ShuffleQs = false;
1166var QsToShow = 6;
1167
1168var DragWidth = 200;
1169var LeftColPos = 100;
1170var RightColPos = 500;
1171var DragTop = 120;
1172var Finished = false;
1173
1174//Fixed and draggable card arrays
1175FC = new Array();
1176DC = new Array();
1177
1178function onEndDrag(){
1179//Is it dropped on any of the fixed cards?
1180        var Docked = false;
1181        var DropTarget = DroppedOnFixed(CurrDrag);
1182        if (DropTarget > -1){
1183//If so, send home any card that is currently docked there
1184                for (var i=0; i<DC.length; i++){
1185                        if (DC[i].tag == DropTarget+1){
1186                                DC[i].GoHome();
1187                                DC[i].tag = 0;
1188                                D[i][2] = 0;
1189                        }
1190                }
1191//Dock the dropped card
1192                DC[CurrDrag].DockToR(FC[DropTarget]);
1193                D[CurrDrag][2] = F[DropTarget][1];
1194                DC[CurrDrag].tag = DropTarget+1;
1195                Docked = true;
1196        }
1197
1198        if (Docked == false){
1199                DC[CurrDrag].GoHome();
1200                DC[CurrDrag].tag = 0;
1201                D[CurrDrag][2] = 0;
1202        }
1203}
1204
1205function DroppedOnFixed(DNum){
1206        var Result = -1;
1207        var OverlapArea = 0;
1208        var Temp = 0;
1209        for (var i=0; i<FC.length; i++){
1210                Temp = DC[DNum].Overlap(FC[i]);
1211                if (Temp > OverlapArea){
1212                        OverlapArea = Temp;
1213                        Result = i;
1214                }
1215        }
1216        return Result;
1217}
1218
1219
1220function StartUp(){
1221
1222
1223
1224
1225
1226//Calculate page dimensions and positions
1227        pg = new PageDim();
1228        DivWidth = Math.floor((pg.W*4)/5);
1229        DragWidth = Math.floor((DivWidth*3)/10);
1230        LeftColPos = Math.floor(pg.W/15);
1231        RightColPos = pg.W - (DragWidth + LeftColPos);
1232        DragTop = parseInt(document.getElementById('CheckButtonDiv').offsetHeight) + parseInt(document.getElementById('CheckButtonDiv').offsetTop) + 10;
1233
1234        if (C.ie){
1235                DragTop += 15;
1236        }
1237       
1238//Reduce array if required
1239        if (QsToShow < F.length){
1240                ReduceItems2();
1241        }
1242       
1243//Shuffle the left items if required
1244        if (ShuffleQs == true){
1245                F = Shuffle(F);
1246        }
1247
1248//Shuffle the items on the right
1249        D = Shuffle(D);
1250
1251        var CurrTop = DragTop;
1252        var TempInt = 0;
1253        var DropHome = 0;
1254        var Widest = 0;
1255        var CardContent = '';
1256        for (var i=0; i<F.length; i++){
1257                CardContent = F[i][0];
1258                FC[i] = new Card('F' + i, 10);
1259                FC[i].elm.innerHTML = CardContent;
1260                if (FC[i].GetW() > Widest){
1261                        Widest = FC[i].GetW();
1262                }
1263        }
1264
1265        if (Widest > DragWidth){Widest = DragWidth;}
1266
1267        CurrTop = DragTop;
1268
1269        DragWidth = Math.floor((DivWidth-Widest)/2) - 24;
1270        RightColPos = DivWidth + LeftColPos - (DragWidth + 14);
1271        var Highest = 0;
1272        var WidestRight = 0;
1273
1274        for (i=0; i<D.length; i++){
1275                DC[i] = new Card('D' + i, 10);
1276                CardContent = D[i][0];
1277//              if (CardContent.indexOf('<img ') > -1){CardContent += '<br clear="all" />';} //used to be required for Navigator rendering bug with images
1278                DC[i].elm.innerHTML = CardContent;
1279                if (DC[i].GetW() > DragWidth){DC[i].SetW(DragWidth);}
1280                DC[i].css.cursor = 'move';
1281                DC[i].css.backgroundColor = '#aaddaa';
1282                DC[i].css.color = '#000000';
1283                TempInt = DC[i].GetH();
1284                if (TempInt > Highest){Highest = TempInt;}
1285                TempInt = DC[i].GetW();
1286                if (TempInt > WidestRight){WidestRight = TempInt;}
1287        }
1288
1289        var HeightToSet = Highest;
1290        if (C.gecko||C.ie5mac){HeightToSet -= 12;}
1291        var WidthToSet = WidestRight;
1292        if (C.gecko||C.ie5mac){WidthToSet -= 12;}
1293
1294        for (i=0; i<D.length; i++){
1295                DC[i].SetT(CurrTop);
1296                DC[i].SetL(RightColPos);
1297                if (DC[i].GetH() < Highest){
1298                        DC[i].SetH(HeightToSet);
1299                }
1300                if (DC[i].GetW() < WidestRight){
1301                        DC[i].SetW(WidthToSet);
1302                }
1303                DC[i].SetHome();
1304                DC[i].tag = -1;
1305                CurrTop = CurrTop + DC[i].GetH() + 5;
1306        }
1307
1308        CurrTop = DragTop;
1309
1310        for (var i=0; i<F.length; i++){
1311                FC[i].SetW(Widest);
1312                if (FC[i].GetH() < Highest){
1313                        FC[i].SetH(HeightToSet);
1314                }
1315                FC[i].SetT(CurrTop);
1316                FC[i].SetL(LeftColPos);
1317                FC[i].SetHome();
1318                TempInt = FC[i].GetH();
1319                CurrTop = CurrTop + TempInt + 5;
1320        }
1321
1322
1323//Slide any elements that should be in position over
1324        for (i=0; i<D.length; i++){
1325                if (D[i][2] > 0){
1326                        DC[i].tag = D[i][1];
1327                        D[i][2] = D[i][1];
1328                        var TopChange = 0;
1329//Find the right target element
1330                        var TargItem = -1;
1331                        for (var j=0; j<F.length; j++){
1332                                if (F[j][1] == D[i][1]){
1333                                        TargItem = j;
1334                                }
1335                        }
1336                        var TargetLeft = FC[TargItem].GetR() + 5;
1337                        var TargetTop = FC[TargItem].GetT();
1338
1339                        if (TargetTop < DC[i].GetT()){
1340                                TopChange = -1;
1341                        }
1342                        else {
1343                                if (TargetTop > DC[i].GetT()){
1344                                        TopChange = 1;
1345                                }
1346                        }
1347                        Slide(i, TargetLeft, TargetTop, TopChange);
1348                        D[i][2] = F[TargItem][1];
1349                        DC[i].tag = TargItem+1;
1350                }
1351        }
1352
1353
1354}
1355
1356
1357function Slide(MoverNum, TargL, TargT, TopChange){
1358        var TempInt = DC[MoverNum].GetL();
1359        if (TempInt > TargL){
1360                DC[MoverNum].SetL(TempInt - 5);
1361        }
1362        TempInt = DC[MoverNum].GetT();
1363        if (TempInt != TargT){
1364                DC[MoverNum].SetT(TempInt + TopChange);
1365        }
1366        if ((DC[MoverNum].GetL() > TargL)||(DC[MoverNum].GetT() != TargT)){
1367                setTimeout('Slide('+MoverNum+','+TargL+','+TargT+','+TopChange+')', 1);
1368        }
1369        else{
1370                DC[MoverNum].SetL(TargL);
1371        }
1372}
1373
1374
1375F = new Array();
1376F[0] = new Array();
1377F[0][0]='<img src="beef-vt.gif" alt="beef-vt.gif" title="beef-vt" width="50" height="31"></img>';
1378F[0][1] = 1;
1379F[1] = new Array();
1380F[1][0]='<img src="carrots-vt.gif" alt="carrots-vt.gif" title="carrots-vt" width="50" height="15"></img>';
1381F[1][1] = 2;
1382F[2] = new Array();
1383F[2][0]='<img src="lettuce-vt.gif" alt="lettuce-vt.gif" title="lettuce-vt" width="50" height="46"></img>';
1384F[2][1] = 3;
1385F[3] = new Array();
1386F[3][0]='<img src="beans-red-vt.gif" alt="beans-red-vt.gif" title="beans-red-vt" width="50" height="38"></img>';
1387F[3][1] = 4;
1388F[4] = new Array();
1389F[4][0]='<img src="pie-vt.gif" alt="pie-vt.gif" title="pie-vt" width="50" height="25"></img>';
1390F[4][1] = 5;
1391F[5] = new Array();
1392F[5][0]='<img src="tomato-vt.gif" alt="tomato-vt.gif" title="tomato-vt" width="50" height="42"></img>';
1393F[5][1] = 6;
1394
1395
1396D = new Array();
1397D[0] = new Array();
1398D[0][0]='beef';
1399D[0][1] = 1;
1400D[0][2] = 0;
1401D[1] = new Array();
1402D[1][0]='carrots';
1403D[1][1] = 2;
1404D[1][2] = 0;
1405D[2] = new Array();
1406D[2][0]='lettuce';
1407D[2][1] = 3;
1408D[2][2] = 0;
1409D[3] = new Array();
1410D[3][0]='beans';
1411D[3][1] = 4;
1412D[3][2] = 1;
1413D[4] = new Array();
1414D[4][0]='pie';
1415D[4][1] = 5;
1416D[4][2] = 0;
1417D[5] = new Array();
1418D[5][0]='tomato';
1419D[5][1] = 6;
1420D[5][2] = 0;
1421
1422
1423function ReduceItems2(){
1424        var ItemToDump=0;
1425        var j=0;
1426        while (F.length > QsToShow){
1427                ItemToDump = Math.floor(F.length*Math.random());
1428                for (j=ItemToDump; j<(F.length-1); j++){
1429                        F[j] = F[j+1];
1430                }
1431                for (j=ItemToDump; j<(D.length-1); j++){
1432                        D[j] = D[j+1];
1433                }               
1434                F.length = F.length-1;
1435                D.length = D.length-1;
1436        }
1437}
1438
1439function TimerStartUp(){
1440        setTimeout('StartUp()', 300);
1441}
1442
1443function CheckAnswers(){
1444        if (Locked == true){return;}
1445//Set the default score and response
1446        var TotalCorrect = 0;
1447        Score = 0;
1448        var Feedback = '';
1449
1450//for each fixed, check to see if the tag value for the draggable is the same as the fixed
1451        var i, j;
1452        for (i=0; i<D.length; i++){
1453                if ((D[i][2] == D[i][1])&&(D[i][2] > 0)){
1454                        TotalCorrect++;
1455                }
1456                else{
1457                        DC[i].GoHome();
1458                }
1459        }
1460
1461        Score = Math.floor((100*(TotalCorrect-Penalties))/F.length);
1462
1463        var AllDone = false;
1464
1465        if (TotalCorrect == F.length) {
1466                AllDone = true;
1467        }
1468
1469        if (AllDone == true){
1470                Feedback = YourScoreIs + ' ' + Score + '%.';
1471                ShowMessage(Feedback + '<br />' + CorrectResponse);
1472
1473//Bug avoider for ie5mac
1474                if (C.ie5mac){
1475                        WriteToInstructions(Feedback);
1476                }
1477
1478
1479
1480                Finished = true;
1481                setTimeout('Finish()', SubmissionTimeout);
1482        }
1483        else {
1484                Feedback = IncorrectResponse + '<br />' + YourScoreIs + ' ' + Score + '%.';
1485                ShowMessage(Feedback);
1486                Penalties++; // Penalty for inaccurate check
1487               
1488        }
1489}
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499//-->
1500
1501//]]>
1502
1503</script>
1504
1505</head>
1506
1507<body onload="TimerStartUp()" id="TheBody">
1508<!-- BeginTopNavButtons -->
1509
1510
1511<div class="NavButtonBar" id="TopNavBar">
1512
1513
1514
1515
1516
1517
1518<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" onclick="location='index.htm'; return false;">Next example</button>
1519
1520
1521</div>
1522
1523
1524
1525<!-- EndTopNavButtons -->
1526
1527<div class="Titles">
1528        <h2 class="ExerciseTitle">A Matching Exercise made with JMatch</h2>
1529        <h3 class="ExerciseSubtitle">Drag-and-drop matching exercise</h3>
1530
1531
1532</div>
1533
1534<div id="InstructionsDiv" class="StdDiv">
1535        <p id="Instructions">Drag the words on the right to match the items on the left.<br /><br />When you have finished this exercise, close this browser window to return to the tutorial.</p>
1536</div>
1537
1538<div class="StdDiv" id="CheckButtonDiv">
1539<button id="CheckButton1" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()">&nbsp;Check&nbsp;</button>
1540</div>
1541
1542<script type="text/javascript">
1543
1544//<![CDATA[
1545
1546<!--
1547
1548
1549for (var i=0; i<F.length; i++){
1550        document.write('<div id="F' + i + '" class="CardStyle"></div>');
1551}
1552
1553for (var i=0; i<D.length; i++){
1554        document.write('<div id="D' + i + '" class="CardStyle" onmousedown="beginDrag(event, ' + i + ')"></div>');
1555}
1556
1557//-->
1558
1559//]]>
1560</script>
1561
1562<div class="Feedback" id="FeedbackDiv">
1563<div class="FeedbackText" id="FeedbackContent"></div>
1564<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;">&nbsp;OK&nbsp;</button>
1565</div>
1566
1567<!-- BeginBottomNavButtons -->
1568
1569<!-- EndBottomNavButtons -->
1570
1571<!-- BeginSubmissionForm -->
1572
1573<!-- EndSubmissionForm -->
1574
1575</body>
1576</html>
Note: See TracBrowser for help on using the browser.