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

Revision 35, 35.9 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 Jumbled-Word Exercise made with JMix" />
10
11
12<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
13
14<title>
15A Jumbled-Word Exercise made with JMix
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: #330033;
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: #330033;
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: #660066;
89}
90
91button{
92        display: inline;
93}
94
95.ExerciseTitle{
96        font-size: large;
97        color: #660066;
98}
99
100.ExerciseSubtitle{
101        color: #660066;
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: #660066;
129}
130
131span.LeftItem{
132        font-size: small;
133        color: #330033;
134}
135
136span.RightItem{
137        font-weight: bold;
138        font-size: small;
139        color: #330033;
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: #660066;
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: #330033;
187}
188
189/* JMatch flashcard styles */
190table.FlashcardTable{
191        background-color: transparent;
192        color: #330033;
193        border-color: #330033;
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: #EECCEE;
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: #330033;
221        background-color: #EECCEE;
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: #330033;
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: #660066;
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: #EECCEE;
441        text-align: center;
442        font-size: small;
443        color: #330033;
444        padding: 8px;
445        border-style: solid;
446        border-width: 1px 1px 1px 1px;
447        border-color: #330033;
448        margin: 1px;
449}
450
451.FuncButton {
452        text-align: center;
453        border-style: solid;
454
455        border-left-color: #f6e5f6;
456        border-top-color: #f6e5f6;
457        border-right-color: #776677;
458        border-bottom-color: #776677;
459        color: #330033;
460        background-color: #EECCEE;
461
462        border-width: 2px;
463        padding: 3px 6px 3px 6px;
464        cursor: pointer;
465}
466
467.FuncButtonUp {
468        color: #EECCEE;
469        text-align: center;
470        border-style: solid;
471
472        border-left-color: #f6e5f6;
473        border-top-color: #f6e5f6;
474        border-right-color: #776677;
475        border-bottom-color: #776677;
476
477        background-color: #330033;
478        color: #EECCEE;
479        border-width: 2px;
480        padding: 3px 6px 3px 6px;
481        cursor: pointer;
482}
483
484.FuncButtonDown {
485        color: #EECCEE;
486        text-align: center;
487        border-style: solid;
488
489        border-left-color: #776677;
490        border-top-color: #776677;
491        border-right-color: #f6e5f6;
492        border-bottom-color: #f6e5f6;
493        background-color: #330033;
494        color: #EECCEE;
495
496        border-width: 2px;
497        padding: 3px 6px 3px 6px;
498        cursor: pointer;
499}
500
501/*BeginNavBarStyle*/
502
503div.NavButtonBar{
504        background-color: #330033;
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: #997f99;
515        border-top-color: #997f99;
516        border-right-color: #190019;
517        border-bottom-color: #190019;
518        background-color: #330033;
519        color: #ffffff;
520
521        border-width: 2px;
522        cursor: pointer;       
523}
524
525.NavButtonUp {
526        border-style: solid;
527
528        border-left-color: #997f99;
529        border-top-color: #997f99;
530        border-right-color: #190019;
531        border-bottom-color: #190019;
532        color: #330033;
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: #190019;
543        border-top-color: #190019;
544        border-right-color: #997f99;
545        border-bottom-color: #997f99;
546        color: #330033;
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: #330033;
575        background-color: #EECCEE;
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='#330033';
1057        this.css.color='#EECCEE';
1058}
1059Card.prototype.Highlight=CardHighlight;
1060
1061function CardUnhighlight(){
1062        this.css.backgroundColor='#EECCEE';
1063        this.css.color='#330033';
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//JMIX DRAG-DROP OUTPUT FORMAT CODE
1150
1151var Punctuation = '';
1152
1153var Openers = '';
1154var CorrectResponse = 'Correct!';
1155var IncorrectResponse = 'Sorry! Try again.';
1156var ThisMuchCorrect = 'This much of your answer is correct:';
1157var TheseAnswersToo = 'These answers are also correct:';
1158var YourScoreIs = 'Your score is ';
1159var NextCorrect = 'The next correct part is: ';
1160var FeedbackWidth = 200; //default
1161var ExBGColor = '#EECCEE';
1162var PageBGColor = '#FFFFFF';
1163var TextColor = '#330033';
1164var TitleColor = '#660066';
1165var DropTotal = 3; // number of lines that will be available for dropping on
1166var Gap = 4; //Gap between two segments when they're next to each other on a line
1167var DropHeight = 30;
1168var CapitalizeFirst = false;
1169var CompiledOutput = '';
1170var TempSegment = '';
1171var FirstSegment = -1;
1172var FirstDiv = -1;
1173var Penalties = 0;
1174var Score = 0;
1175
1176var CurrDrag = -1;
1177var topZ = 100;
1178var Cds = new Array();
1179var L = new Array();
1180var Finished = false;
1181
1182var Locked = false;
1183var Interval = null;
1184var DivWidth = 600;
1185var LeftColPos = 100;
1186var DragTop = 120;
1187var DragNumber = -1;
1188
1189Lines = new Array();
1190
1191function CapFirst(InString){
1192        var i = 0;
1193        if ((Openers.indexOf(InString.charAt(i))>-1)||(InString.charAt(i) == ' ')){
1194                i++;
1195        }
1196        if ((Openers.indexOf(InString.charAt(i))>-1)||(InString.charAt(i) == ' ')){
1197                i++;
1198        }
1199        var Temp = InString.charAt(i);
1200        Temp = Temp.toUpperCase();
1201        InString = InString.substring(0, i) + Temp + InString.substring(i+1, InString.length);
1202        return InString;
1203}
1204
1205function CheckResults(ChkType){
1206//Get sequence student has chosen
1207        GetGuessSequence();
1208
1209//Compile the answer
1210        CompiledOutput = CompileString(GuessSequence);
1211
1212//Check the answer
1213        CheckAnswer(ChkType);
1214}
1215
1216function GetGuessSequence(){
1217//Put pointers to draggables in arrays based on the lines they're sitting on
1218        var Drops = new Array();
1219        for (var i=0; i<L.length; i++){
1220                Drops[i] = new Array();
1221        }
1222
1223        for (i=0; i<Cds.length; i++){
1224                for (var j=0; j<L.length; j++){
1225                        if (Cds[i].GetT() == L[j].GetB() - (Cds[i].GetH()+2)){
1226                                Drops[j][Drops[j].length] = Cds[i];
1227                        }
1228                }
1229        }
1230
1231//Sort the drop arrays based on the Left of each div
1232        for (i=0; i<Drops.length; i++){
1233                Drops[i].sort(CompDrags);
1234        }
1235
1236//Put the tags into the GuessSequence array
1237        GuessSequence.length = 0;
1238        for (i=0; i<Drops.length; i++){
1239                for (j=0; j<Drops[i].length; j++){
1240                        GuessSequence[GuessSequence.length] = Drops[i][j].tag;
1241                }
1242        }
1243
1244//Set the variable recording which div is first
1245        var NewFirstDiv = -1;
1246        for (i=0; i<Drops.length; i++){
1247                if (Drops[i].length > 0){
1248                        NewFirstDiv = Drops[i][0].index;
1249                        break;
1250                }
1251        }
1252        return NewFirstDiv;
1253}
1254
1255function CompDrags(a,b){
1256        return a.GetL() - b.GetL();
1257}
1258
1259function FindSegment(SegID){
1260        var Seg = '';
1261        for (var i=0; i<Segments.length; i++){
1262                if (Segments[i][1] == SegID){
1263                        Seg = Segments[i][0];
1264                        break;
1265                }
1266        }
1267        return Seg;
1268}
1269
1270function CompileString(InArray){
1271        var OutString = '';
1272        var i = 0;
1273        OutArray = new Array();
1274
1275        for (i=0; i<InArray.length; i++){
1276                OutArray[OutArray.length] = FindSegment(InArray[i]);
1277        }
1278
1279        if (OutArray.length > 0){
1280                OutString = OutArray[0];
1281        }
1282        else{
1283                OutString = '';
1284        }
1285        var Spacer = '';
1286
1287        for (i=1; i<OutArray.length; i++){
1288                Spacer = ' ';
1289                if ((Openers.indexOf(OutString.charAt(OutString.length-1)) > -1)||(Punctuation.indexOf(OutArray[i].charAt(0)) > -1)){
1290                        Spacer = '';
1291                }
1292                OutString = OutString + Spacer + OutArray[i];           
1293        }
1294
1295//Capitalize the first letter if necessary
1296        if (CapitalizeFirst == true){
1297                OutString = CapFirst(OutString);
1298        }
1299        return OutString;
1300}
1301
1302function CheckAnswer(CheckType){
1303        if (Locked == true){return;}
1304        if (GuessSequence.length < 1){
1305                if (CheckType == 1){
1306                        Penalties++;
1307                        ShowMessage(NextCorrect + '<br /><br />' + FindSegment(Answers[0][0]));
1308                }
1309                return;
1310        }
1311        var i = 0;
1312        var j = 0;
1313        var k = 0;
1314        var WellDone = '';
1315        var WhichCorrect = -1;
1316        var TryAgain = '';
1317        var LongestCorrectBit = '';
1318        TempCorrect = new Array();
1319        LongestCorrect = new Array();
1320        var TempHint = '';
1321        var HintToReturn = 1;
1322        var OtherAnswers = '';
1323
1324        for (i=0; i<Answers.length; i++){
1325                TempCorrect.length = 0;
1326                for (j=0; j<Answers[i].length; j++){
1327                        if (Answers[i][j] == GuessSequence[j]){
1328                                TempCorrect[j] = GuessSequence[j];
1329                        }
1330                        else{
1331                                TempHint = Answers[i][j];
1332                                break;
1333                        }
1334                }
1335                if ((TempCorrect.length == GuessSequence.length)&&(TempCorrect.length == Answers[i].length)){
1336                        WhichCorrect = i;
1337                        break;
1338                }
1339                else{
1340                        if (TempCorrect.length > LongestCorrect.length){
1341                                LongestCorrect.length = 0;
1342                                for (k=0; k<TempCorrect.length; k++){
1343                                        LongestCorrect[k] = TempCorrect[k];
1344                                }
1345                                HintToReturn = TempHint;
1346                        }
1347                }       
1348        }
1349        if (WhichCorrect > -1){
1350                for (i=0; i<Answers.length; i++){
1351                        if (i!=WhichCorrect){
1352                                OtherAnswers += '<br />' + CompileString(Answers[i]);
1353                        }
1354                }
1355                WellDone = '<span class="CorrectAnswer">' + CompiledOutput + '</span><br /><br />' + CorrectResponse + '<br />';
1356
1357//Do score calculation here
1358                Score = Math.floor(((Segments.length-Penalties) * 100)/Segments.length);
1359                WellDone += YourScoreIs + ' ' + Score + '%.<br />';
1360
1361
1362
1363                ShowMessage(WellDone);
1364                WriteToInstructions(YourScoreIs + ' ' + Score + '%.');
1365               
1366
1367
1368                Finished = true;
1369                setTimeout('Finish()', SubmissionTimeout);
1370                return;
1371        }
1372
1373        else{
1374                TryAgain = '<span class="Guess">' + CompileString(GuessSequence) + '</span><br /><br />';
1375                Penalties++;
1376
1377                if ((CheckType == 0)||(LongestCorrect.length==0)){
1378                        TryAgain += IncorrectResponse + '<br />';
1379                }
1380
1381                if (LongestCorrect.length > 0){
1382                        LongestCorrectBit = CompileString(LongestCorrect);
1383                        GuessSequence.length = LongestCorrect.length;
1384                        TryAgain += '<br />' + ThisMuchCorrect + '<br /><span class="Guess">' + LongestCorrectBit + '</span><br />';
1385                }
1386
1387                if (CheckType == 1){
1388                        TryAgain += '<br />' + NextCorrect + '<br />' + FindSegment(HintToReturn);
1389                }
1390
1391                ShowMessage(TryAgain);
1392        }
1393
1394}
1395
1396
1397var Segments = new Array();
1398Segments[0] = new Array();
1399Segments[0][0] = '\u0061';
1400Segments[0][1] = 6;
1401Segments[0][2] = 0;
1402Segments[1] = new Array();
1403Segments[1][0] = '\u0077';
1404Segments[1][1] = 5;
1405Segments[1][2] = 0;
1406Segments[2] = new Array();
1407Segments[2][0] = '\u0065';
1408Segments[2][1] = 8;
1409Segments[2][2] = 0;
1410Segments[3] = new Array();
1411Segments[3][0] = '\u0072';
1412Segments[3][1] = 7;
1413Segments[3][2] = 0;
1414Segments[4] = new Array();
1415Segments[4][0] = '\u006F';
1416Segments[4][1] = 2;
1417Segments[4][2] = 0;
1418Segments[5] = new Array();
1419Segments[5][0] = '\u0073';
1420Segments[5][1] = 1;
1421Segments[5][2] = 0;
1422Segments[6] = new Array();
1423Segments[6][0] = '\u0074';
1424Segments[6][1] = 4;
1425Segments[6][2] = 0;
1426Segments[7] = new Array();
1427Segments[7][0] = '\u0066';
1428Segments[7][1] = 3;
1429Segments[7][2] = 0;
1430
1431
1432var GuessSequence = new Array();
1433
1434var Answers = new Array();
1435Answers[0] = new Array(1,2,3,4,5,6,7,8);
1436
1437
1438function doDrag(e) {
1439        if (CurrDrag == -1) {return};
1440        if (C.ie){var Ev = window.event}else{var Ev = e}
1441        var difX = Ev.clientX-window.lastX;
1442        var difY = Ev.clientY-window.lastY;
1443        var newX = Cds[CurrDrag].GetL()+difX;
1444        var newY = Cds[CurrDrag].GetT()+difY;
1445        Cds[CurrDrag].SetL(newX);
1446        Cds[CurrDrag].SetT(newY);
1447        window.lastX = Ev.clientX;
1448        window.lastY = Ev.clientY;
1449        return false;
1450}
1451
1452function beginDrag(e, DragNum) {
1453        CurrDrag = DragNum;
1454        if (C.ie){
1455                var Ev = window.event;
1456                document.onmousemove=doDrag;
1457                document.onmouseup=endDrag;
1458        }
1459        else{
1460                var Ev = e;
1461                window.onmousemove=doDrag;
1462                window.onmouseup=endDrag;
1463        }
1464        Cds[CurrDrag].SwapColours();
1465        topZ++;
1466        Cds[CurrDrag].css.zIndex = topZ;
1467        window.lastX=Ev.clientX;
1468        window.lastY=Ev.clientY;
1469        return true; 
1470}
1471
1472function endDrag(e) {
1473        if (CurrDrag == -1) {return};
1474        Cds[CurrDrag].SwapColours();
1475        if (C.ie){document.onmousemove=null}else{window.onmousemove=null;}
1476        onEndDrag();   
1477        CurrDrag = -1;
1478        return true;
1479}
1480
1481function onEndDrag(){
1482//Snap to lines
1483        var i = 0;
1484        var SnapLine = Cds[CurrDrag].GetT();
1485        var BiggestOverlap = -1;
1486        var OverlapRect = 0;
1487        for (i=0; i<L.length; i++){
1488                if (Cds[CurrDrag].Overlap(L[i]) > OverlapRect){
1489                        OverlapRect = Cds[CurrDrag].Overlap(L[i]);
1490                        BiggestOverlap = i;
1491                }
1492        }
1493        if (BiggestOverlap > -1){
1494                SnapLine = L[BiggestOverlap].GetB() - (Cds[CurrDrag].GetH() + 2);
1495                Cds[CurrDrag].SetT(SnapLine);
1496                CheckOver(-1);
1497        }
1498        if (CapitalizeFirst==true){
1499                setTimeout('DoCapitalization()', 50);
1500        }
1501}
1502
1503function DoCapitalization(){
1504//Capitalize first segment if necessary
1505        var FD = GetGuessSequence();
1506        if ((FD == -1)&&(FirstDiv > -1)){
1507                Cds[FirstDiv].elm.innerHTML = Segments[FirstDiv][0];
1508        }
1509        if (((FD != FirstDiv)&&(CapitalizeFirst == true))&&(FD > -1)){
1510                if (FirstDiv > -1){
1511                        Cds[FirstDiv].elm.innerHTML = Segments[FirstDiv][0];
1512                }
1513        }
1514        if ((FD > -1)&&(CapitalizeFirst == true)){
1515                var Temp = CapFirst(Segments[FD][0]);
1516                Cds[FD].elm.innerHTML = Temp;
1517                FirstDiv = FD;
1518        }
1519}
1520
1521function CheckOver(NoMove){
1522//This recursive function spreads out the Cards on a line if two of them are overlapping;
1523//if the spread operation moves one beyond the end of a line, it wraps it to the next line.
1524        for (var i=0; i<Cds.length; i++){
1525                for (var j=0; j<Cds.length; j++){
1526                        if (i!=j){
1527                                if (Cds[i].Overlap(Cds[j]) > 0){
1528                                        if ((i==NoMove)||(Cds[i].GetL() < Cds[j].GetL())){
1529                                                Cds[j].DockToR(Cds[i]);
1530                                                if (Cds[j].GetR() > (LeftColPos + DivWidth)){
1531                                                        Cds[j].SetL(LeftColPos);
1532                                                        Cds[j].SetT(Cds[j].GetT() + DropHeight);
1533                                                }
1534                                                CheckOver(j);
1535                                        }
1536                                        else{
1537                                                Cds[i].DockToR(Cds[j]);
1538                                                if (Cds[i].GetR() > (LeftColPos + DivWidth)){
1539                                                        Cds[i].SetL(LeftColPos);
1540                                                        Cds[i].SetT(Cds[i].GetT() + DropHeight);
1541                                                }
1542                                                CheckOver(i);   
1543                                        }
1544                                }
1545                        }       
1546                }
1547        }
1548}
1549
1550function StartUp(){
1551
1552
1553
1554
1555
1556        Segments = Shuffle(Segments);
1557
1558//Calculate page dimensions and positions
1559        pg = new PageDim();
1560        DivWidth = Math.floor((pg.W*4)/5);
1561        LeftColPos = Math.floor(pg.W/10);
1562        DragTop = parseInt(document.getElementById('CheckButtonDiv').offsetHeight) + parseInt(document.getElementById('CheckButtonDiv').offsetTop) + 10;
1563
1564        var CurrTop = DragTop + 10;
1565
1566//Position the drop divs
1567        for (var i=0; i<DropTotal; i++){
1568                L[i] = new Card('Drop' + i, 0);
1569                L[i].SetT(CurrTop)
1570                L[i].tag = CurrTop-5;
1571                L[i].SetL(LeftColPos);
1572                L[i].css.backgroundColor = '#FFFFFF';
1573                CurrTop += L[i].GetH();
1574                topZ++;
1575                L[i].css.zIndex = topZ;
1576        }
1577        DropHeight = L[0].GetH();
1578
1579        CurrTop = DragTop;
1580        var TempInt = 0;
1581        var DropHome = 0;
1582
1583        for (i=0; i<Segments.length; i++){
1584//Create a new pointer in the C array to ref the card div
1585                Cds[i] = new Card('D'+i, 0);
1586                Cds[i].elm.innerHTML = Segments[i][0];
1587                Cds[i].SetT(CurrTop);
1588                Cds[i].SetL(LeftColPos);
1589                Cds[i].css.cursor = 'move';
1590                TempInt = Cds[i].GetH();
1591                CurrTop = CurrTop + TempInt + 5;
1592                Cds[i].css.backgroundColor = '#EECCEE';
1593                Cds[i].css.color = '#330033';
1594                topZ++;
1595                Cds[i].css.zIndex = topZ;
1596                Cds[i].tag = Segments[i][1];
1597                Cds[i].index = i;
1598        }
1599//Place them at the bottom of the page
1600        SetInitialPositions();
1601
1602
1603}
1604
1605function SetInitialPositions(){
1606//Places all the divs at the bottom of the page in centred rows
1607//First, get the vertical position of the first row
1608        var RTop = L[L.length-1].GetB() + 10;
1609
1610//Create an array to hold the numbers of Cards for each row
1611        CRows = new Array();
1612        CRows[0] = new Array();
1613        Widths = new Array();
1614        var i=0;
1615        var r=0;
1616        var RowWidth=0;
1617//Sort the Cards into rows, storing their numbers in the array
1618
1619        while (i<Cds.length){
1620//if it fits on this row, add it
1621                if ((RowWidth + Cds[i].GetW() + 5) < DivWidth){
1622                        CRows[r][CRows[r].length] = i;
1623                        RowWidth += Cds[i].GetW() + 5;
1624//Store the width in the Widths array for later
1625                        Widths[r] = RowWidth;
1626                }
1627//if not, increment the row number, and add it to the next row
1628                else{
1629                        r++;
1630                        CRows[r] = new Array();
1631                        CRows[r][CRows[r].length] = i;
1632                        RowWidth = Cds[i].GetW() + 5;
1633//Store the width in the Widths array for later
1634                        Widths[r] = RowWidth;
1635                }
1636//move to the next Card
1637                i++;
1638        }
1639//Now we have the numbers in rows, set out each row
1640        r=0;
1641        var Indent=0;
1642        for (r=0; r<CRows.length; r++){
1643//Get the required indent for this row
1644                Indent = Math.floor((DivWidth-Widths[r])/2);
1645//Set the first card in position
1646                Cds[CRows[r][0]].SetL(Indent + LeftColPos);
1647                Cds[CRows[r][0]].SetT(RTop);
1648                Cds[CRows[r][0]].SetHome();
1649                for (i=1; i<CRows[r].length; i++){
1650                        Cds[CRows[r][i]].DockToR(Cds[CRows[r][i-1]]);
1651                        Cds[CRows[r][i]].SetHome();
1652                }
1653//Increment the row height
1654                RTop += Cds[0].GetH() + 5;
1655        }
1656}
1657
1658function Restart(){
1659        for (var i=0; i<Cds.length; i++){
1660                Cds[i].GoHome();
1661                Cds[i].elm.innerHTML = Segments[i][0];
1662        }
1663}
1664
1665function TimerStartUp(){
1666        setTimeout('StartUp()', 300);
1667}
1668
1669
1670
1671
1672
1673
1674
1675
1676//-->
1677
1678//]]>
1679
1680</script>
1681
1682</head>
1683
1684<body onload="TimerStartUp()" id="TheBody">
1685<!-- BeginTopNavButtons -->
1686
1687
1688<div class="NavButtonBar" id="TopNavBar">
1689
1690
1691
1692
1693
1694
1695<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" onclick="location='jmatch1.htm'; return false;">Next example</button>
1696
1697
1698</div>
1699
1700
1701
1702<!-- EndTopNavButtons -->
1703
1704<div class="Titles">
1705        <h2 class="ExerciseTitle">A Jumbled-Word Exercise made with JMix</h2>
1706        <h3 class="ExerciseSubtitle">Mixed-up word exercise</h3>
1707
1708
1709</div>
1710
1711<div id="InstructionsDiv" class="StdDiv">
1712        <p id="Instructions">Put the letters in order to form a word. When you think your word is correct, click on "Check" to check your answer. If you get stuck, click on "Hint" to find out the next correct letter.</p>
1713</div>
1714
1715<div class="StdDiv" id="CheckButtonDiv">
1716<button id="CheckButton1" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckResults(0)">&nbsp;Check&nbsp;</button>
1717
1718
1719<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="Restart()">&nbsp;Restart&nbsp;</button>
1720
1721
1722
1723<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckResults(1)">&nbsp;Hint&nbsp;</button>
1724
1725</div>
1726
1727<script type="text/javascript">
1728
1729//<![CDATA[
1730
1731<!--
1732
1733
1734for (var i=0; i<DropTotal; i++){
1735        document.write('<div id="Drop' + i + '" class="DropLine" align="center">&nbsp;<br />&nbsp;</div>');
1736}
1737
1738for (var i=0; i<Segments.length; i++){
1739        document.write('<div id="D' + i + '" class="CardStyle" onmousedown="beginDrag(event, ' + i + ')"></div>');
1740}
1741
1742//-->
1743
1744//]]>
1745</script>
1746
1747<div class="Feedback" id="FeedbackDiv">
1748<div class="FeedbackText" id="FeedbackContent"></div>
1749<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>
1750</div>
1751
1752<!-- BeginBottomNavButtons -->
1753
1754<!-- EndBottomNavButtons -->
1755
1756<!-- BeginSubmissionForm -->
1757
1758<!-- EndSubmissionForm -->
1759
1760</body>
1761</html>
Note: See TracBrowser for help on using the browser.