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

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

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

  • New release
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
2       <html xmlns="http://www.w3.org/1999/xhtml"
3             xml:lang="en"><head><meta name="author" content="Created with Quandary by Half-Baked Software, registered to Martin Holmes."></meta><meta name="keywords" content="Quandary, Hot Potatoes, Half-Baked Software, Windows, University of Victoria"></meta>
4
5<!-- This is the core XHTML code which is used to build the exercise page. -->
6
7<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
8<meta name="DC:Creator" content="Martin Holmes" />
9<meta name="DC:Title" content="Hot Potatoes 6 Tutorial" />
10
11
12<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
13
14<title>
15Hot Potatoes 6 Tutorial
16</title>
17
18<!-- Made with executable version 2.0 Release 8 Build 0 -->
19
20<style type="text/css">
21
22
23/* This is the CSS stylesheet used in the exercise. */
24/* Elements in square brackets are replaced by data based on configuration settings when the exercise is built. */
25
26
27body{
28        font-family: Arial,sans-serif;
29        background-color: #d9d9d9;
30        color: #000000;
31 
32        margin-right: 5%;
33        margin-left: 5%;
34        font-size: small;
35
36}
37
38p{
39        text-align: left;
40        margin: 0px;
41        font-size: small;
42}
43
44div,span,td{
45        font-size: small;
46        color: #000000;
47}
48
49div.Titles{
50        padding: 10px;
51        text-align: center;
52        color: #000000;
53}
54
55button{
56        display: inline;
57}
58
59.ExerciseTitle{
60        font-size: large;
61        color: #000000;
62}
63
64div#Timer{
65        padding: 6px;
66        margin-left: auto;
67        margin-right: auto;
68        text-align: center;
69}
70
71span#TimerText{
72        padding: 6px;
73        border-width: 1px;
74        border-style: solid;
75        font-weight: bold;
76        display: none;
77}
78
79div.ControlButtons{
80        text-align: center;
81}
82
83.Instructions{
84        margin-top: 1em;
85}
86
87.DecisionPointTitle{
88        font-size: medium;
89}
90
91.DecisionPointText{
92        text-align: left;
93        margin: auto;
94}
95
96div.Assets{
97        margin: 20px;
98}
99
100table.AssetTable{
101        border-width: 3px;
102        border-style: double;
103        border-color: #000000;
104        padding: 5px;
105}
106
107table.AssetTable th{
108        background-color: #000000;
109        color: #ffffff;
110        padding: 5px;
111}
112
113div.LinkList{
114        margin-top: 10px;
115}
116
117table.LinkTable{
118        margin-left: auto;
119        margin-right: auto;
120        text-align: left;
121}
122
123.FeedbackText{
124        color: #000000;
125}
126
127table.DPTable{
128        margin-left: auto;
129        margin-right: auto;
130        border-width: 0px;
131        padding: 10px;
132        vertical-align: top;
133}
134
135div.Feedback {
136        background-color: #d9d9d9;
137        left: 33%;
138        width: 34%;
139        top: 33%;
140        z-index: 1;
141        border-style: solid;
142        border-width: 1px;
143        padding: 5px;
144        text-align: center;
145        color: #000000;
146        position: absolute;
147        display: none;
148        font-size: small;
149}
150
151div.DecisionPoint{
152        background-color: #ffffff;
153        text-align: center;
154        font-size: small;
155        color: #000000;
156        padding: 8px;
157        border-style: solid;
158        border-width: 1px 1px 1px 1px;
159        border-color: #000000;
160        margin: 1px;
161}
162
163.FuncButton {
164       
165        text-align: center;
166        border-style: solid;
167
168        color: #ffffff;
169        border-color: #ffffff;
170        background-color: #000000;
171
172        border-width: 2px;
173        padding: 3px 6px 3px 6px;
174        cursor: pointer;
175}
176
177.FuncButtonUp {
178        color: #ffffff;
179        text-align: center;
180        border-style: solid;
181
182        border-left-color: #ffffff;
183        border-top-color: #ffffff;
184        border-right-color: #7f7f7f;
185        border-bottom-color: #7f7f7f;
186        background-color: #000000;
187
188        border-width: 2px;
189        padding: 2px 7px 4px 5px;
190        cursor: pointer;
191}
192
193.FuncButtonDown {
194        color: #ffffff;
195        text-align: center;
196        border-style: solid;
197
198        border-left-color: #7f7f7f;
199        border-top-color: #7f7f7f;
200        border-right-color: #ffffff;
201        border-bottom-color: #ffffff;
202        background-color: #000000;
203
204        border-width: 2px;
205        padding: 4px 5px 2px 7px;
206        cursor: pointer;
207}
208
209div.NavButtonBar{
210        background-color: #0060A4;
211        text-align: center;
212        margin: 2px 0px 2px 0px;
213        clear: both;
214        font-size: small;
215}
216
217.NavButton {
218        border-style: solid;
219        border-color: #0060A4;
220        background-color: #0060A4;
221        border-width: 2px;
222        padding: 2px 2px 2px 2px;
223        color: #ffffff;
224        cursor: pointer;       
225}
226
227.NavButtonUp {
228        border-style: solid;
229
230        border-left-color: #7fafd1;
231        border-top-color: #7fafd1;
232        border-right-color: #003052;
233        border-bottom-color: #003052;
234        background-color: #0060A4;
235
236        border-width: 2px;
237        padding: 1px 3px 3px 1px;
238        color: #ffffff;
239        cursor: pointer;       
240}
241
242.NavButtonDown {
243        border-style: solid;
244
245        border-left-color: #003052;
246        border-top-color: #003052;
247        border-right-color: #7fafd1;
248        border-bottom-color: #7fafd1;
249        background-color: #0060A4;
250
251        background-color: #0060A4;
252        border-width: 2px;
253        padding: 3px 1px 1px 3px;
254        color: #ffffff;
255        cursor: pointer;       
256}
257
258a{
259        color: #0060A4;
260}
261
262a:visited{
263        color: #0000ff;
264}
265
266a:hover{
267        color: #0060A4;
268}
269
270
271</style>
272
273<!-- The following insertion allows you to add your own code directly to this head tag from the configuration screen -->
274
275<style type="text/css">
276strong{background-color: #ffff00;color:inherited;}
277</style>
278
279<script type="text/javascript">
280
281//<![CDATA[
282
283<!--
284
285
286//This is the JavaScript code needed to make the exercise function
287
288//Simple browser check comes first -- you may want to make this more sophisticated
289//if you have many users with old or obscure browsers
290
291if (document.getElementById == false){
292        alert('Your browser is not able to show this page properly. A modern browser that supports W3C standards is required.');
293}
294
295//USING USER-DEFINED STRINGS:
296//If you are using the user-defined strings on the Other tab of the Config screen,
297//make sure the strings are correctly escaped for use in JavaScript.
298
299//CODE FOR ASSETS AND ASSET BASKETS
300
301//ASSETS SECTION
302function Asset(ID, Name, InitVal, DecPlace, ShowDuring, ShowEnd, CurrVal, Parent){
303        this.ID = ID;
304        this.Name=Name;
305        this.InitVal=InitVal;
306        this.DecPlace=DecPlace;
307        this.ShowDuring=ShowDuring;
308        this.ShowEnd=ShowEnd;
309        this.CurrVal=CurrVal;
310        this.Parent = Parent;
311}
312
313function AssetGetCurrValString(){
314        var Num = this.CurrVal;
315        if (this.DecPlace > 0){
316                for (var i=0; i<this.DecPlace; i++){Num /= 10;}
317        }
318        var Result = Num.toString();
319        if (this.DecPlace > 0){
320                var DecLoc = Result.indexOf('.');
321                if (DecLoc < 0){Result += '.';}
322//Add leading zeros if required
323                while (((Result.length-1) - Result.indexOf('.'))<this.DecPlace){Result += '0';}
324//Truncate trailing places if required
325                while (((Result.length-1) - Result.indexOf('.'))>this.DecPlace){Result = Result.substring(0, Result.length-1);}
326        }
327        return Result;
328}
329Asset.prototype.GetCurrValString=AssetGetCurrValString;
330
331function AssetGetCurrValFloat(){
332        var Num = this.CurrVal;
333        if (this.DecPlace > 0){
334                for (var i=0; i<this.DecPlace; i++){Num /= 10;}
335        }
336                return Num;
337}
338Asset.prototype.GetCurrValFloat=AssetGetCurrValFloat;
339
340function AssetSetCurrValFromFloat(Num){
341        if (this.DecPlace > 0){
342                for (var i=0; i<this.DecPlace; i++){Num *= 10;}
343        }
344        this.CurrVal = Num;
345}
346Asset.prototype.SetCurrValFromFloat=AssetSetCurrValFromFloat;
347
348function AssetReportCurrState(){
349        return this.Name + ': ' + this.GetCurrValString();
350}
351Asset.prototype.ReportCurrState=AssetReportCurrState;
352
353function AssetMeetsRequirement(ReqType, Req){
354        var Result = true;
355        switch(ReqType){
356                case 0: break;
357                case 1: Result = (this.CurrVal > Req); break;
358                case 2: Result = (this.CurrVal < Req); break;
359                case 3: Result = (this.CurrVal == Req); break;
360        }
361        return Result;
362}
363Asset.prototype.MeetsRequirement=AssetMeetsRequirement;
364
365function AssetPerformTransaction(OperatorType, Operand){
366        if ((this.Name == '_Timer_Seconds')&&(this.Parent.Active == true)){
367                this.CurrVal = Seconds;
368        }
369        switch(OperatorType){
370//Operands coming into this function should already be massaged to be at the same decimal place level as
371//the asset being manipulated; therefore +, -, and = operators can use the values directly, but *, /, %
372//and ^ transactions will have to reduce the operand to its true value by dividing it.
373                case 1: this.CurrVal += Operand; break; //add
374                case 2: this.CurrVal -= Operand; break; //subtract
375                case 3: for (var x=0; x<this.DecPlace; x++){Operand /= 10;}this.CurrVal *= Operand; break; //multiply
376                case 4: for (var x=0; x<this.DecPlace; x++){Operand /= 10;}this.CurrVal /= Operand; break; //divide
377                case 5: this.CurrVal = Operand; break; //set equal to
378                case 6: for (var x=0; x<this.DecPlace; x++){Operand /= 10;}this.CurrVal *= (Operand/100); break; //percentage
379//Difficult case (power of); need to change the operand and the value to core values, do the calculation, then
380//change the value back
381                case 7:
382//Change the operand to core value
383                        for (var x=0; x<this.DecPlace; x++){Operand /= 10;}
384//Change the asset value to core value
385                        var y = this.CurrVal; for (var x=0; x<this.DecPlace; x++){y /= 10;}
386//Do the math
387                        x = y; for (var j=1; j<Operand; j++){y *= x;}
388//Raise the val again
389                        for (var x=0; x<this.DecPlace; x++){y *= 10;}
390//Set the value
391                        this.CurrVal = y;
392                        break;
393        }
394        this.CurrVal = Math.round(this.CurrVal);
395        if ((this.Name == '_Timer_Seconds')&&(this.Parent.Active == true)){
396                Seconds = this.CurrVal;
397        }
398}
399Asset.prototype.PerformTransaction=AssetPerformTransaction;
400
401function AssetCanBeShown(){
402        var Result = true;
403        if (IsEndPoint == true){
404                switch (this.ShowEnd){
405                        case 0: Result = true; break;
406                        case 1: Result = false; break;
407                        case 2: Result = (this.CurrVal != 0); break;
408                }
409        }
410        else{
411                switch (this.ShowDuring){
412                        case 0: Result = true; break;
413                        case 1: Result = false; break;
414                        case 2: Result = (this.CurrVal != 0); break;
415                }
416        }
417        return Result;
418}
419Asset.prototype.CanBeShown=AssetCanBeShown;
420
421function Basket(AList, Active){
422        this.Active = Active;
423        this.Assets = new Array();
424        if (AList.length > 0){
425                for (var i=0; i<AList.length; i++){
426                        this.Assets[i] = new Asset(i, AList[i][0], AList[i][1], AList[i][2], AList[i][3], AList[i][4], A[i][5], this);
427                }
428        }
429}
430
431function BasketGetEffectiveOperand(Trans){
432//The "effective operand" is the operand converted to the right decimal place level (so an operand of
433//5, which is to act on an asset with 2dps, should be converted to 500). This is especially difficult
434//when the operand is the value of another asset, since that may have its own dp setting, and the two
435//settings must be harmonized
436        var Operand = 0;
437        switch(Trans[2]){
438//First, a fixed value (this should already be specified at the right dp level)
439                case 0: Operand = Trans[3]; break;
440//Second, a random value; again, this should be specified at the right dp level already)
441                case 1: Operand = GetRand(Trans[3], Trans[4]); break;
442//Finally, the problem case: the value of another asset. In this case, we need to find out the dp
443//settings of both the source and target asset
444//First get the real value of the source asset (so 500 for an asset with 2dp would be 5)
445                case 2: Operand = this.Assets[Trans[5]].GetCurrValFloat();
446//Now multiply this up according to the dp setting of the target asset (so 5 operating on a target asset
447//with dp2 would become 500)
448                        for (var i=0; i<this.Assets[Trans[0]].DecPlace; i++){Operand *= 10;}
449                        break;
450        }
451        return Operand;
452}
453Basket.prototype.GetEffectiveOperand=BasketGetEffectiveOperand;
454
455function BasketReportCurrState(){
456        if (this.Assets.length < 1){return '';}
457        var Result = '';
458        for (var i=0; i<this.Assets.length; i++){
459                if (this.Assets[i].CanBeShown()==true){
460                        Result += '<tr><td style="text-align: right;">' + this.Assets[i].Name + ': </td>';
461                        Result += '<td style="text-align: left;">' + this.Assets[i].GetCurrValString() + '</td></tr>';
462                }
463        }
464        if (Result.length > 0){
465                Result = '<table class="AssetTable"><tr><th colspan="2">' + strYouHave + '</th></tr>' + Result + '</table>';
466        }
467        return Result;
468}
469Basket.prototype.ReportCurrState=BasketReportCurrState;
470
471function BasketCloneSelf(Copy, Active){
472        Copy = new Basket(A, false);
473        Copy.Active = Active;
474        for (var i=0; i<this.Assets.length; i++){
475                Copy.Assets[i].CurrVal = this.Assets[i].CurrVal;
476        }
477        return Copy;
478}
479Basket.prototype.CloneSelf=BasketCloneSelf;
480
481function BAssetMeetsRequirement(ANum, ReqType, Req){
482        return this.Assets[ANum].MeetsRequirement(ReqType, Req);
483}
484Basket.prototype.AssetMeetsRequirement=BAssetMeetsRequirement;
485
486function BAssetPerformTransaction(ANum, OpType, Operand){
487        this.Assets[ANum].PerformTransaction(OpType, Operand);
488}
489Basket.prototype.PerformTransaction=BAssetPerformTransaction;
490
491function BGetAssetValByName(AssetName){
492        var Result = 0;
493        for (var i=0; i<this.Assets.length; i++){
494                if (this.Assets[i].Name == AssetName){
495                        Result = this.Assets[i].CurrVal;
496                }
497        }
498        return Result;
499}
500Basket.prototype.GetAssetValByName=BGetAssetValByName;
501
502//VARIABLES AND INTERFACE STRINGS
503
504var CurrBasket;
505var TempBasket;
506var CurrNode=0;
507var strYouHave='You have: ';
508var strLinkCaption='Go!';
509var strFinishCaption='Go!';
510var strDefaultRefusalMessage='Sorry! You can\'t do that.';
511var strTimesUp = 'Your time has run out!';
512var strBookmarkExplanation = 'Your current position and settings have been encoded in <br />the URL of the page. Now set a bookmark in your <br />browser, so you can return here.<br />';
513var strExerciseComplete = 'You have reached the end of the exercise.';
514var ShowImpossibleLinks=true;
515var Interval;
516var StartTime = (new Date()).toLocaleString();
517var HPNStartTime = (new Date()).getTime();
518var SubmissionTimeout = 30000;
519var FollowingTrack = false;
520var CurrTime;
521var Started=false;
522
523var IsEndPoint = false;
524
525function TransactionList(NNum, LNum){
526        this.List = new Array();
527        var i;
528        for (i=0; i<N[NNum][4].length; i++){this.List[this.List.length] = N[NNum][4][i];}
529        for (i=0; i<N[NNum][3][LNum][2].length; i++){this.List[this.List.length] = N[NNum][3][LNum][2][i];}
530        for (i=0; i<N[N[NNum][3][LNum][0]][2].length; i++){this.List[this.List.length] = N[N[NNum][3][LNum][0]][2][i];}
531}
532
533function TestTransactions(NNum, LNum){
534        var T = new TransactionList(NNum, LNum);
535        var Result = '';
536//Create a clone of the current asset basket to operate on
537        var B = CurrBasket.CloneSelf(B, false);
538
539//For each transaction
540        for (var i=0; i<T.List.length; i++){
541//Test the requirement
542                if (B.AssetMeetsRequirement(T.List[i][0], T.List[i][7], T.List[i][6]) == true){
543//If it succeeds, do the transaction
544                        B.PerformTransaction(T.List[i][0], T.List[i][1], B.GetEffectiveOperand(T.List[i]));
545                }
546                else{
547//If it fails, check the refusal message
548                        if (T.List[i][8].length > 0){
549                                return T.List[i][8];
550                        }
551//If no refusal message, return a string with spaces, otherwise return refusal message
552                        else{
553                                return strDefaultRefusalMessage;
554                        }
555                }
556        }
557//If all have passed, return an empty string
558        return '';
559}
560
561function StartExercise(){
562        CurrBasket = new Basket(A, true);
563        ParseSearch();
564        CurrTime = new Date();
565        ShowCurrNode();
566
567        Started = true;
568}
569
570function StartUp(){
571        if (document.location.search.indexOf('___') > -1){
572                StartExercise();
573        }
574}
575
576function Restart(){
577        var d = document.location;
578        d.search = '';
579        document.location = d;
580}
581
582//CODE FOR HANDLING UNDO FUNCTIONALITY AND TRACKING NODE SEQUENCE
583function HNode(NNum, LNum, Bask){
584        this.NNum = NNum; //Number of the node
585        this.LNum = LNum; //Number of the link selected to leave the node
586        this.Basket = Bask.CloneSelf(A, false); //Copy of current basket of assets
587//      this.EntryTime = CurrTime.getTime() - HPNStartTime; //Stores time of entry to this node, offset by start time, in milliseconds
588        this.EntryTime = CurrTime.getTime(); //Stores absolute time of entry to this node
589        this.EntryTimeString = CurrTime.toLocaleString();
590        var D = new Date();
591//      this.ExitTime = D.getTime() - HPNStartTime; //Stores the time of exit from this node
592        this.ExitTime = D.getTime(); //Stores the absolute time of exit from this node
593
594        this.ExitTimeString = D.toLocaleString(); //Stores the time in human-readable format
595}
596
597function HNodeReportSelf(AddTime){
598        var S = this.NNum + ':' + this.LNum;
599        if (AddTime == true){
600                S += ':' + this.EntryTime;
601        }
602        return S;
603}
604HNode.prototype.ReportSelf=HNodeReportSelf;
605
606//Object containing the list of tracking node objects
607function HNodeList(){
608        this.Nodes = new Array();
609        var D = new Date();
610        this.StartTime = D.getTime(); // Stores the entry time of the exercise; =entry time to node 0
611        this.StartTimeString = D.toLocaleString();
612}
613
614function HNodeListReportAsSearch(IncludeTime){
615        var S = '___t;';
616        if (this.Nodes.length > 0){
617                S += this.Nodes[0].ReportSelf(IncludeTime);
618                for (var i=1; i<this.Nodes.length; i++){
619                        S += ',' + this.Nodes[i].ReportSelf(IncludeTime);
620                }
621        }
622        return S;
623}
624HNodeList.prototype.ReportAsSearch=HNodeListReportAsSearch;
625
626var H = new HNodeList(); //array of HNode elements
627
628function Undo(){
629        if (H.Nodes.length < 1){
630                return;
631        }
632        var LastNode = H.Nodes.pop();
633        CurrNode = LastNode.NNum;
634        CurrBasket = LastNode.Basket.CloneSelf(A, true);
635        ShowCurrNode();
636}
637
638//CODE FOR HANDLING URL ENCODING OF STATE
639function ParseSearch(){
640        if (document.location.search.length < 1){return;}
641//First, get the part of the search string we're interested in
642        var Temp = document.location.search.substring(document.location.search.lastIndexOf('___'), document.location.search.length);
643        if (Temp.length < 1){return;}
644
645        var S = Temp.split(';');
646//S[0] tells us this is a bookmark, or a track
647        if (S.length > 0){
648                if (S[0] == '___b'){
649//It's a bookmark
650                        ShowMessage(strBookmarkExplanation);
651                }
652                if (S[0] == '___t'){
653//It's tracking data
654                        ParseTrack(S[1]);
655                        return;
656                }
657        }
658//S[1] is the current node
659        if (S.length > 1){
660                if (S[1].length > 0){
661                        var CN=parseInt(S[1]);
662                        if ((CN>-1)&&(CN<N.length)){
663                                CurrNode = CN;
664                        }
665                }
666        }
667        if (S.length > 2){
668                if (S[2].length > 0){
669                        var AA=S[2].split(',');
670                        if (AA.length > 0){
671                                for (var i=0; i<AA.length; i++){
672                                        var Val = parseInt(AA[i]);
673                                        if ((i<A.length)&&(Val != NaN)){
674                                                CurrBasket.Assets[i].CurrVal = Val;
675                                        }
676                                }
677                        }
678                }
679        }
680
681}
682
683var Footprints = new Array();
684
685function ParseTrack(Track){
686        if (Track.length < 3){
687                return;
688        }
689
690        var Steps = Track.split(',');
691        if (Steps.length < 2){
692                return;
693        }
694//We have valid track data, so the exercise can be displayed accordingly
695        FollowingTrack = true;
696        var NNum = 0;
697        var LNum = 0;
698        var T = 0;
699        for (var i=0; i<Steps.length; i++){
700                var Step = Steps[i].split(':');
701                NNum = parseInt(Step[0]);
702                if (NNum > -1){
703                        LNum = parseInt(Step[1]);
704                        if (LNum > -1){
705                                if (Step.length > 2){
706                                        T = parseInt(Step[2]);
707                                }
708                                Footprints.push(new Array(NNum, LNum, T));
709                        }
710                }
711        }
712}
713
714function CreateBookmark(){
715        var S = '___b;' + CurrNode + ';';
716        if (CurrBasket.Assets.length > 0){
717                S += CurrBasket.Assets[0].CurrVal;
718                for (var i=1; i<CurrBasket.Assets.length; i++){
719                        S += ',' + CurrBasket.Assets[i].CurrVal;
720                }
721        }
722
723        return S;
724}
725
726function SetBookmark(){
727        if (Started == false){return;}
728        var Temp = document.location.search;
729        if (Temp.length < 1){
730                Temp = '?';
731        }
732        else{
733                Temp += '&';
734        }
735        document.location.search = Temp + CreateBookmark();
736}
737
738//CODE FOR HANDLING NAV BUTTONS AND FUNCTION BUTTONS
739
740function NavBtnOver(Btn){
741        if (Btn.className != 'NavButtonDown'){Btn.className = 'NavButtonUp';}
742}
743
744function NavBtnOut(Btn){
745        Btn.className = 'NavButton';
746}
747
748function NavBtnDown(Btn){
749        Btn.className = 'NavButtonDown';
750}
751
752function FuncBtnOver(Btn){
753        if (Btn.className != 'FuncButtonDown'){Btn.className = 'FuncButtonUp';}
754}
755
756function FuncBtnOut(Btn){
757        Btn.className = 'FuncButton';
758}
759
760function FuncBtnDown(Btn){
761        Btn.className = 'FuncButtonDown';
762}
763
764
765//CODE FOR HANDLING DISPLAY OF POPUP FEEDBACK BOX
766
767var topZ = 1000;
768
769function ShowMessage(Feedback){
770        var Output = Feedback + '<br /><br />';
771        document.getElementById('FeedbackContent').innerHTML = Output;
772        var FDiv = document.getElementById('FeedbackDiv');
773        topZ++;
774        FDiv.style.zIndex = topZ;
775        FDiv.style.display = 'block';
776        document.getElementById('FeedbackOKButton').focus();
777
778//[inclPreloadImages]
779//      RefreshImages();
780//[/inclPreloadImages]
781}
782
783function HideFeedback(){
784        document.getElementById('FeedbackDiv').style.display = 'none';
785        if (IsEndPoint == true){
786                Finish();
787        }
788}
789
790function MillisecondsToTimeReadout(MS){
791        var DT = new Date(MS);
792        return DT.getHours() + ':' + DT.getMinutes() + ':' + DT.getSeconds() + ':' + DT.getMilliseconds();
793}
794
795function ShowCurrNode(){
796        var DPT = N[CurrNode][0];
797        if ((FollowingTrack==true)&&(Footprints.length > 0)){
798                if (Footprints[0][2] > 0){
799                        DPT += ' (' + MillisecondsToTimeReadout(Footprints[0][2]) + ')';
800                }
801        }
802        document.getElementById('DPTitle').innerHTML = DPT;
803        document.getElementById('DPContentsDiv').innerHTML = N[CurrNode][1];
804        var Links = '';
805        var Refusal = '';
806        var ValidLinks = 0;
807        for (var LNum=0; LNum<N[CurrNode][3].length; LNum++){
808                if ((FollowingTrack==true)&&(Footprints.length > 0)){
809//We're following a track, so we only want to make a working link for the correct item
810                        if (LNum == Footprints[0][1]){
811                                Links += MakeLink(CurrNode, LNum);
812                                ValidLinks++;
813                        }
814                        else{
815                                Links += MakeDummyLink(CurrNode, LNum);
816                        }
817
818                }
819                else{
820                        Refusal = TestTransactions(CurrNode, LNum);
821                        if (Refusal.length > 0){
822                                if (N[CurrNode][3][LNum][4] < 1){
823                                        N[CurrNode][3][LNum][3] = Refusal;
824                                        Links += MakeRefusalLink(CurrNode, LNum);
825                                }
826                        }
827                        else{
828                                Links += MakeLink(CurrNode, LNum);
829                                ValidLinks++;
830                        }
831                }
832        }
833        if (Links.length > 0){
834                Links = '<table class="LinkTable">' + Links + '</table>';
835        }
836
837        if (ValidLinks < 1){
838                IsEndPoint = true;
839                if (document.getElementById('store') != null){
840                        Links = '<table class="LinkTable">' + MakeEndLink() + '</table>';
841                }
842                else{
843                        if (document.getElementById('UndoButton') == null){
844                                Links = '<table class="LinkTable"><tr><td>' + strExerciseComplete + '</td></tr></table>';
845                        }
846                }
847        }
848        document.getElementById('LinkListDiv').innerHTML = Links;
849
850//Show assets now -- endpoint issue may affect which are shown
851        document.getElementById('AssetsDiv').innerHTML = CurrBasket.ReportCurrState();
852
853//Remove the last footprint from the track
854        if (Footprints.length > 0){Footprints.shift();}
855
856        if ((IsEndPoint==true)&&(document.getElementById('UndoButton') == null)){
857//Record current state in the history array
858                H.Nodes.push(new HNode(CurrNode, LNum, CurrBasket));
859
860//Reset the current time
861                CurrTime = new Date();
862                setTimeout('Finish()', SubmissionTimeout);
863        }
864}
865
866function MakeRefusalLink(NNum, LNum){
867        var Result = '<tr><td><button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="ShowMessage(N[' + NNum + '][3][' + LNum + '][3])">' + strLinkCaption + '</button></td>';
868        Result += '<td>' + N[NNum][3][LNum][1] + '</td></tr>';
869        return Result;
870}
871
872function MakeLink(NNum, LNum){
873        var Result = '<tr><td><button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="FollowLink(' + LNum + ')">' + strLinkCaption + '</button></td>';
874        Result += '<td>' + N[NNum][3][LNum][1] + '</td></tr>';
875        return Result;
876}
877
878function MakeDummyLink(NNum, LNum){
879        var Result = '<tr><td style="text-align: right;">&nbsp;&#x25cf;&nbsp;</td>';
880        Result += '<td>' + N[NNum][3][LNum][1] + '</td></tr>';
881        return Result;
882}
883
884function MakeEndLink(){
885        var Result = '<tr><td><button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="Finish()">' + strFinishCaption + '</button></td>';
886        Result += '<td>' + strExerciseComplete + '</td></tr>';
887        return Result;
888}
889
890function FollowLink(LNum){
891
892//Record current state in the history array
893        H.Nodes.push(new HNode(CurrNode, LNum, CurrBasket));
894
895//Reset the current time
896        CurrTime = new Date();
897
898        var T = new TransactionList(CurrNode, LNum);
899//For each transaction
900        for (var i=0; i<T.List.length; i++){
901//Do the transaction
902                CurrBasket.PerformTransaction(T.List[i][0], T.List[i][1], CurrBasket.GetEffectiveOperand(T.List[i]));
903        }
904//Now change the node
905        CurrNode = N[CurrNode][3][LNum][0];
906        ShowCurrNode();
907}
908
909//CODE FOR HANDLING TIMER
910
911
912//HOTPOTNET FUNCTIONS
913function Finish(){
914//If there's a form, fill it out and submit it
915        try{
916                var F = document.getElementById('store');
917                if (F != null){
918                        F.starttime.value = HPNStartTime;
919                        F.endtime.value = (new Date()).getTime();
920                        F.mark.value = CurrBasket.GetAssetValByName('Score'); //if an asset called "Score" exists, this value will be submitted as the mark
921                        var Temp = '<?xml version="1.0"?><hpnetresult><fields>';
922                        Temp += '<field><fieldname>endbookmark</fieldname><fieldtype>url-search</fieldtype><fieldlabel>Click here to see the final position in the maze</fieldlabel><fieldlabelid>QuandaryViewFinalPosition</fieldlabelid><fielddata>' + CreateBookmark() + '</fielddata></field>';
923                        Temp += '<field><fieldname>track</fieldname><fieldtype>url-search</fieldtype><fieldlabel>Click here to track the student through the maze.</fieldlabel><fieldlabelid>QuandaryViewTrack</fieldlabelid><fielddata>' + H.ReportAsSearch(false) + '</fielddata></field>';
924                        Temp += '<field><fieldname>timedtrack</fieldname><fieldtype>url-search</fieldtype><fieldlabelid>QuandaryViewTimedTrack</fieldlabelid><fieldlabel>Click here to track the student through the maze with timing data.</fieldlabel><fielddata>' + H.ReportAsSearch(true) + '</fielddata></field>';
925                        Temp += '</fields></hpnetresult>';
926                        F.detail.value = Temp;
927                        F.submit();
928
929                }
930        }
931        catch(er){
932                return;
933        }
934}
935
936//UTILITY FUNCTIONS
937function GetRand(Lower, Upper){
938        var Rng = Upper-Lower;
939        return (Math.round(Math.random()*Rng)) + Lower;
940}
941
942var A = new Array();
943
944
945var N = new Array();
946N[0] = new Array();
947N[0][0] = 'Welcome to Hot Potatoes!';
948N[0][1] = 'This browser-based presentation will introduce the main exercise-types produced by the programs, and take you through the basic steps involved in creating an interactive exercise. Choose one of the options below.';
949N[0][2] = new Array();
950
951N[0][3] = new Array();
952N[0][3][0] = new Array();
953N[0][3][0][0] = 1;
954N[0][3][0][1] = 'What is Hot Potatoes?';
955N[0][3][0][2] = new Array();
956
957N[0][3][0][3] = '';
958N[0][3][0][4] = 0;
959
960N[0][3][1] = new Array();
961N[0][3][1][0] = 2;
962N[0][3][1][1] = 'What\'s new in version 6?';
963N[0][3][1][2] = new Array();
964
965N[0][3][1][3] = '';
966N[0][3][1][4] = 0;
967
968N[0][3][2] = new Array();
969N[0][3][2][0] = 3;
970N[0][3][2][1] = 'Getting started';
971N[0][3][2][2] = new Array();
972
973N[0][3][2][3] = '';
974N[0][3][2][4] = 0;
975
976N[0][3][3] = new Array();
977N[0][3][3][0] = 4;
978N[0][3][3][1] = 'The Potatoes, one by one';
979N[0][3][3][2] = new Array();
980
981N[0][3][3][3] = '';
982N[0][3][3][4] = 0;
983
984N[0][3][4] = new Array();
985N[0][3][4][0] = 17;
986N[0][3][4][1] = 'The <strong>hotpotatoes.net</strong> server';
987N[0][3][4][2] = new Array();
988
989N[0][3][4][3] = '';
990N[0][3][4][4] = 0;
991
992
993N[0][4] = new Array();
994
995
996N[1] = new Array();
997N[1][0] = 'What is Hot Potatoes?';
998N[1][1] = 'The <strong>Hot Potatoes</strong> suite is a set of six authoring tools, created by the Research and Development team at the University of Victoria <a href="http://web.uvic.ca/hrd/hcmc/">Humanities Computing and Media Centre</a>. They enable you to create interactive Web-based exercises of several basic types. The exercises are standard Web pages using XHTML 1.1 code for display, and JavaScript (ECMAScript) for interactivity. These core W3C standards are supported by all good modern browsers, including Internet Explorer 6+, Mozilla 1.2+, Phoenix, Safari, and many others. The authoring tools will also handle Unicode, so you can create exercises in virtually any language, or in a mixture of languages.<br /><br />You don\'t need to know anything about XHTML or JavaScript to use the programs. All you need to do is to enter your data -- texts, questions, answers etc. -- and the programs will create the Web pages for you. Then you can post them on your Web site. However, the programs are designed so that almost every aspect of the pages can be customized, so if you do know HTML or JavaScript code, you can make almost any change you want to the way the exercises work or to the format of the Web pages.<br /><br />If you work in a non-profit-making educational institution or context, and you are prepared to share your exercises by placing them on a publicly-accessible Web server, then you may use the Hot Potatoes suite free of charge. If you are working for a company or in a commercial context, or if you password-protect your exercises or distribute them only on an intranet, you will need to buy a licence (contact <a href="http://www.halfbakedsoftware.com/">Half-Baked Software</a> for information). However, whether you\'re commercial or otherwise, we do ask that you register the programs; all you have to do is to <a href="http://web.uvic.ca/hrd/hotpot/register.htm">fill in a form on our Website</a>. This helps us to stay in touch with our users and get some idea of who is using our programs. See the help file for more information on registration.<br /><br />Now go on to look at some examples of the kinds of exercises you can make using <strong>Hot Potatoes</strong>. (Note that the data files for all of these exercises are available in the tutorial folder if you want to look at them inside the authoring programs later.)<br />';
999N[1][2] = new Array();
1000
1001N[1][3] = new Array();
1002N[1][3][0] = new Array();
1003N[1][3][0][0] = 11;
1004N[1][3][0][1] = 'Example exercises';
1005N[1][3][0][2] = new Array();
1006
1007N[1][3][0][3] = '';
1008N[1][3][0][4] = 0;
1009
1010
1011N[1][4] = new Array();
1012
1013
1014N[2] = new Array();
1015N[2][0] = 'What\'s new in version 6?';
1016N[2][1] = 'The Help file contains a more detailed list of new features and changes, but these are the primary differences between version 5.5 and version 6.0:<ul><li><strong>Unicode support</strong>, so you can create exercises in virtually any language or in a mixture of languages. Unicode support is only enabled on Windows 2000 or XP; earlier versions of Windows do not support it.</li><li><strong>Mixed question types in a quiz.</strong> The old JBC (multiple-choice) application has been combined with JQuiz, and the new application allows you to create a quiz with a mixture of multiple-choice, short-answer and multi-select questions, along with a new question type ("hybrid").</li><li><strong>More sophisticated scoring in JQuiz.</strong> Questions can now be weighted, and individual answers can be given a "percentage correct" setting.</li><li><strong>Simpler output format.</strong> Instead of the old frames-based format, in which the content of exercise pages was written from JavaScript, the new XHTML-based pages are simpler and allow easier editing of the output pages in WYSIWYG editors such as DreamWeaver.</li><li>A <strong>timer</strong> can now be placed on exercises, rather than on associated reading texts as in previous versions.</li><li>Exercises and all associated media files can be uploaded automatically to an account on the <a href="http://www.hotpotatotes.net">www.hotpotatotes.net</a> server, so that your students can log on and have their results recorded.</li></ul>';
1017N[2][2] = new Array();
1018
1019N[2][3] = new Array();
1020N[2][3][0] = new Array();
1021N[2][3][0][0] = 0;
1022N[2][3][0][1] = 'Back to the index';
1023N[2][3][0][2] = new Array();
1024
1025N[2][3][0][3] = '';
1026N[2][3][0][4] = 0;
1027
1028N[2][3][1] = new Array();
1029N[2][3][1][0] = 3;
1030N[2][3][1][1] = 'Getting started';
1031N[2][3][1][2] = new Array();
1032
1033N[2][3][1][3] = '';
1034N[2][3][1][4] = 0;
1035
1036
1037N[2][4] = new Array();
1038
1039
1040N[3] = new Array();
1041N[3][0] = 'Getting started';
1042N[3][1] = 'The best way to get started with Hot Potatoes is to work through the example exercises; these will show you the different types of exercise you can make, and at the same time teach you some of the basic concepts. Then you can go on to making your first exercise.';
1043N[3][2] = new Array();
1044
1045N[3][3] = new Array();
1046N[3][3][0] = new Array();
1047N[3][3][0][0] = 11;
1048N[3][3][0][1] = 'Example exercises';
1049N[3][3][0][2] = new Array();
1050
1051N[3][3][0][3] = '';
1052N[3][3][0][4] = 0;
1053
1054N[3][3][1] = new Array();
1055N[3][3][1][0] = 12;
1056N[3][3][1][1] = 'The 2-minute challenge: Make your first exercise';
1057N[3][3][1][2] = new Array();
1058
1059N[3][3][1][3] = '';
1060N[3][3][1][4] = 0;
1061
1062N[3][3][2] = new Array();
1063N[3][3][2][0] = 13;
1064N[3][3][2][1] = 'Three steps in making an exercise';
1065N[3][3][2][2] = new Array();
1066
1067N[3][3][2][3] = '';
1068N[3][3][2][4] = 0;
1069
1070
1071N[3][4] = new Array();
1072
1073
1074N[4] = new Array();
1075N[4][0] = 'The Potatoes, one by one';
1076N[4][1] = 'There are six Potatoes in version 6 of Hot Potatoes. Choose the one you want to learn about:';
1077N[4][2] = new Array();
1078
1079N[4][3] = new Array();
1080N[4][3][0] = new Array();
1081N[4][3][0][0] = 5;
1082N[4][3][0][1] = 'JQuiz (question-based exercises)';
1083N[4][3][0][2] = new Array();
1084
1085N[4][3][0][3] = '';
1086N[4][3][0][4] = 0;
1087
1088N[4][3][1] = new Array();
1089N[4][3][1][0] = 6;
1090N[4][3][1][1] = 'JCloze (gapfill exercises)';
1091N[4][3][1][2] = new Array();
1092
1093N[4][3][1][3] = '';
1094N[4][3][1][4] = 0;
1095
1096N[4][3][2] = new Array();
1097N[4][3][2][0] = 7;
1098N[4][3][2][1] = 'JMatch (matching exercises)';
1099N[4][3][2][2] = new Array();
1100
1101N[4][3][2][3] = '';
1102N[4][3][2][4] = 0;
1103
1104N[4][3][3] = new Array();
1105N[4][3][3][0] = 8;
1106N[4][3][3][1] = 'JMix (jumble exercises)';
1107N[4][3][3][2] = new Array();
1108
1109N[4][3][3][3] = '';
1110N[4][3][3][4] = 0;
1111
1112N[4][3][4] = new Array();
1113N[4][3][4][0] = 9;
1114N[4][3][4][1] = 'JCross (crosswords)';
1115N[4][3][4][2] = new Array();
1116
1117N[4][3][4][3] = '';
1118N[4][3][4][4] = 0;
1119
1120N[4][3][5] = new Array();
1121N[4][3][5][0] = 10;
1122N[4][3][5][1] = 'The Masher (buildling linked units of material)';
1123N[4][3][5][2] = new Array();
1124
1125N[4][3][5][3] = '';
1126N[4][3][5][4] = 0;
1127
1128
1129N[4][4] = new Array();
1130
1131
1132N[5] = new Array();
1133N[5][0] = ' Introduction to JQuiz (question-based exercises)';
1134N[5][1] = 'JQuiz is a tool for making question-based exercises. Each quiz can consist of an unlimited number of questions. There are four basic question types:<br /><br />In <strong>multiple-choice questions</strong>, the student chooses an answer by clicking on a button. If the answer is correct, the button caption will change to a smiley face :-), and if it\'s wrong, it will change to an X (you can configure these bits of text in the configuration screen). In either case, the student will see feedback specific to that answer, explaining why it\'s right or wrong (assuming you write the feedback when you make the exercise!). If the answer is wrong, the student can continue choosing answers until a correct answer is selected. The score for each question is based on the number of tries taken to get a correct answer. Once a correct answer is chosen, the scoring is "frozen", but the student can still click on buttons to see the feedback for other answers without penalty.<br /><br />In <strong>short-answer questions</strong>, the students has to type the answer into a text box on the page, and press a <strong>Check</strong> button to see if it is correct. The page will try to match the student\'s answer to a list of correct or incorrect answers you have defined. If a match is found, the feedback for that answer will be shown. If not, then the page will try to find the nearest match among the specified correct answers, and signal to the student which parts of their answer are right and which parts are wrong. The score for each question is based on the number of attempts the student makes before getting a correct answer. You can also include a <strong>Hint</strong> button, which will give the student one letter of the answer; using the Hint button incurs a penalty on the score.<br /><br />A <strong>hybrid question</strong> is a combination of a multiple-choice question and a short-answer question. In this type of question, the student is first presented with a text box and asked to type the answer. However, if the student fails to get the answer right after a specified number of tries (which you can configure in the configuration screen), the question changes to a multiple-choice question to make it easier.<br /><br />Finally, a <strong>multi-select</strong> question asks the student to select several of a specific set of items. The idea here is that the student must select all the correct items, and not select all the wrong items. This type of question might take the format "Which of the following are nouns?", followed by a list of words. The student must check all the nouns, but not check any answers which are not nouns, then press a <strong>Check</strong> button. If the answer is not completely correct, the student will see a readout of the number of correct choices, and one piece of feedback; this would be the feedback from the first item in the list which was either <strong>selected when it shouldn\'t be selected</strong>, or <strong>not selected when it should be selected</strong>.<br /><br />To try out all these question types, go to this <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'jquiz2.htm\'); return false;">example quiz</a>.<br /><br />For an example of how to make a quiz in JQuiz, check out the "Three Steps" link below. For more information on how JQuiz works, check out the <strong>Help file</strong> -- just start JQuiz and press the <strong>F1</strong> key.';
1135N[5][2] = new Array();
1136
1137N[5][3] = new Array();
1138N[5][3][0] = new Array();
1139N[5][3][0][0] = 0;
1140N[5][3][0][1] = 'Index';
1141N[5][3][0][2] = new Array();
1142
1143N[5][3][0][3] = '';
1144N[5][3][0][4] = 0;
1145
1146N[5][3][1] = new Array();
1147N[5][3][1][0] = 13;
1148N[5][3][1][1] = 'Three steps in making an exercise';
1149N[5][3][1][2] = new Array();
1150
1151N[5][3][1][3] = '';
1152N[5][3][1][4] = 0;
1153
1154N[5][3][2] = new Array();
1155N[5][3][2][0] = 4;
1156N[5][3][2][1] = 'The Potatoes, one by one';
1157N[5][3][2][2] = new Array();
1158
1159N[5][3][2][3] = '';
1160N[5][3][2][4] = 0;
1161
1162
1163N[5][4] = new Array();
1164
1165
1166N[6] = new Array();
1167N[6][0] = ' Introduction to JCloze (gapfill exercises)';
1168N[6][1] = 'JCloze is used to make gap-fill or cloze exercises. The idea of a gap-fill exercise is that the student completes all the answers before checking; in other words, it\'s a holistic exercise. When all the answers have been entered, the student presses the <strong>Check</strong> button to mark the answers. Correct answers will be inserted into the text; any incorrect answers will be left in textboxes, so that they can be corrected. When the student checks an answer that is not completely correct, a penalty is incurred, so the score depends on the number of checks required before the answer is completely correct. <br /><br />In a JCloze exercise, you can include a <strong>Hint</strong> button which will give the student one free letter of the answer he or she is currently working on (based on where the cursor is). You can also include a specific clue for each gap. Using the <strong>Hint</strong> or <strong>Clue</strong> buttons.<br /><br />Making a gapfill is easy -- see the picture below for basic steps:<br /><br /><img src="jcloze1.png" alt="Making a JCloze exercise." title="Making a JCloze exercise." width="600" height="400"></img><br /><br />You can also look at this <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'jcloze1.htm\'); return false;">example JCloze exercise</a>. For more information on how JCloze works, check out the <strong>Help file</strong> -- just start JCloze and press the <strong>F1</strong> key.';
1169N[6][2] = new Array();
1170
1171N[6][3] = new Array();
1172N[6][3][0] = new Array();
1173N[6][3][0][0] = 0;
1174N[6][3][0][1] = 'Index';
1175N[6][3][0][2] = new Array();
1176
1177N[6][3][0][3] = '';
1178N[6][3][0][4] = 0;
1179
1180N[6][3][1] = new Array();
1181N[6][3][1][0] = 13;
1182N[6][3][1][1] = 'Three steps in making an exercise';
1183N[6][3][1][2] = new Array();
1184
1185N[6][3][1][3] = '';
1186N[6][3][1][4] = 0;
1187
1188N[6][3][2] = new Array();
1189N[6][3][2][0] = 4;
1190N[6][3][2][1] = 'The Potatoes, one by one';
1191N[6][3][2][2] = new Array();
1192
1193N[6][3][2][3] = '';
1194N[6][3][2][4] = 0;
1195
1196
1197N[6][4] = new Array();
1198
1199
1200N[7] = new Array();
1201N[7][0] = ' Introduction to JMatch (matching exercises)';
1202N[7][1] = 'JMatch is used to create matching exercises. Basically, this means that a list of items appears on one side, and each one must be matched up to an item on the other side.<br /><br />JMatch output comes in two types: <strong>standard</strong> and <strong>drag-drop</strong>. The standard output (see an <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'jmatch1.htm\'); return false;">example</a>) uses a drop-down list of items on the right. This is the format to use when you have more than seven or eight items, and the items on the right are only text; if you have only a few items, and especially if the items are graphics, you may want to use the drag-drop format (see this <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'jmatch2.htm\'); return false;">example</a>). Don\'t use the drag-drop format if you have more than eight items, because scrolling on the page will make dragging and dropping difficult.<br /><br />To make a JMatch exercise, enter each pair of items on the same line, as in the picture below. When you export to create the Web page, the program will shuffle the items on the right for you.<br /><br /><img src="jmatch1.png" alt="Making a JMatch exercise" title="Making a JMatch exercise" width="663" height="489"></img><br /><br />For more information on how JMatch works, check out the <strong>Help file</strong> -- just start JMatch and press the <strong>F1</strong> key.';
1203N[7][2] = new Array();
1204
1205N[7][3] = new Array();
1206N[7][3][0] = new Array();
1207N[7][3][0][0] = 0;
1208N[7][3][0][1] = 'Index';
1209N[7][3][0][2] = new Array();
1210
1211N[7][3][0][3] = '';
1212N[7][3][0][4] = 0;
1213
1214N[7][3][1] = new Array();
1215N[7][3][1][0] = 13;
1216N[7][3][1][1] = 'Three steps in making an exercise';
1217N[7][3][1][2] = new Array();
1218
1219N[7][3][1][3] = '';
1220N[7][3][1][4] = 0;
1221
1222N[7][3][2] = new Array();
1223N[7][3][2][0] = 4;
1224N[7][3][2][1] = 'The Potatoes, one by one';
1225N[7][3][2][2] = new Array();
1226
1227N[7][3][2][3] = '';
1228N[7][3][2][4] = 0;
1229
1230
1231N[7][4] = new Array();
1232
1233
1234N[8] = new Array();
1235N[8][0] = ' Introduction to JMix (jumbled sentence or jumbled word exercises)';
1236N[8][1] = 'JMix is used to make jumble exercises. You can jumble the words in a sentence, or the letters in a word. Like JMatch, JMix has two output formats: <strong>standard</strong>, and <strong>drag-drop</strong>. For examples, see this <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'jmix1.htm\'); return false;">standard exercise</a> and this <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'jmix2.htm\'); return false;">drag-drop exercise</a>.<br /><br />To see detailed instructions for making a simple JMix exercise, go to the 2-Minute Challenge link below.<br /><br />For more information on how JMix works, check out the <strong>Help file</strong> -- just start JMix and press the <strong>F1</strong> key.';
1237N[8][2] = new Array();
1238
1239N[8][3] = new Array();
1240N[8][3][0] = new Array();
1241N[8][3][0][0] = 0;
1242N[8][3][0][1] = 'Index';
1243N[8][3][0][2] = new Array();
1244
1245N[8][3][0][3] = '';
1246N[8][3][0][4] = 0;
1247
1248N[8][3][1] = new Array();
1249N[8][3][1][0] = 13;
1250N[8][3][1][1] = 'Three steps in making an exercise';
1251N[8][3][1][2] = new Array();
1252
1253N[8][3][1][3] = '';
1254N[8][3][1][4] = 0;
1255
1256N[8][3][2] = new Array();
1257N[8][3][2][0] = 4;
1258N[8][3][2][1] = 'The Potatoes, one by one';
1259N[8][3][2][2] = new Array();
1260
1261N[8][3][2][3] = '';
1262N[8][3][2][4] = 0;
1263
1264
1265N[8][4] = new Array();
1266
1267
1268N[9] = new Array();
1269N[9][0] = ' Introduction to JCross (crosswords)';
1270N[9][1] = 'JCross is used to make crossword exercises. There are two steps to making an exercise: first enter your letters in the grid, then add the clues. To enter letters in the grid, click on a square and type a letter. Try following the example in the picture below to get you started:<br /><br /><img src="jcross1.png" alt="Creating a crossword grid." title="Creating a crossword grid." width="550" height="470"></img><br /><br />When you\'ve created the grid, click on <strong>Add Clues</strong>. Then, to add each clue, click on the word, type the clue, and press the OK button:<br /><br /><img src="jcross2.png" alt="Adding clues." title="Adding clues." width="504" height="337"></img><br /><br />Here is an <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'jcross1.htm\'); return false;">example JCross crossword</a>. For more information on how JCross works, check out the <strong>Help file</strong> -- just start JCross and press the <strong>F1</strong> key.<br /><br />';
1271N[9][2] = new Array();
1272
1273N[9][3] = new Array();
1274N[9][3][0] = new Array();
1275N[9][3][0][0] = 0;
1276N[9][3][0][1] = 'Index';
1277N[9][3][0][2] = new Array();
1278
1279N[9][3][0][3] = '';
1280N[9][3][0][4] = 0;
1281
1282N[9][3][1] = new Array();
1283N[9][3][1][0] = 13;
1284N[9][3][1][1] = 'Three steps in making an exercise';
1285N[9][3][1][2] = new Array();
1286
1287N[9][3][1][3] = '';
1288N[9][3][1][4] = 0;
1289
1290N[9][3][2] = new Array();
1291N[9][3][2][0] = 4;
1292N[9][3][2][1] = 'The Potatoes, one by one';
1293N[9][3][2][2] = new Array();
1294
1295N[9][3][2][3] = '';
1296N[9][3][2][4] = 0;
1297
1298
1299N[9][4] = new Array();
1300
1301
1302N[10] = new Array();
1303N[10][0] = 'The Masher (buildling linked units of material)';
1304N[10][1] = 'The Masher is a different kind of application from the others in the Hot Potatoes suite. It\'s intended to help you make larger units of materials, linked together. The Masher requires a separate registration key, which you can only get if you buy a commercial licence for Hot Potatoes. Without the key, you can only make small units of exercises. The Masher is also used to upload files which are not Hot Potatoes exercises to the <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'http://www.hotpotatoes.net\'); return false;">www.hotpotatoes.net</a> server.<br /><br />The Masher has its own tutorial (click on <strong>Help / Tutorial</strong> in the Masher program, or <a href="mashertutorial.htm">go there now</a>), and a detailed Help file with full instructions. To see the Help file, start the Masher program and press the <strong>F1</strong> key.';
1305N[10][2] = new Array();
1306
1307N[10][3] = new Array();
1308N[10][3][0] = new Array();
1309N[10][3][0][0] = 0;
1310N[10][3][0][1] = 'Index';
1311N[10][3][0][2] = new Array();
1312
1313N[10][3][0][3] = '';
1314N[10][3][0][4] = 0;
1315
1316N[10][3][1] = new Array();
1317N[10][3][1][0] = 13;
1318N[10][3][1][1] = 'Three steps in making an exercise';
1319N[10][3][1][2] = new Array();
1320
1321N[10][3][1][3] = '';
1322N[10][3][1][4] = 0;
1323
1324N[10][3][2] = new Array();
1325N[10][3][2][0] = 4;
1326N[10][3][2][1] = 'The Potatoes, one by one';
1327N[10][3][2][2] = new Array();
1328
1329N[10][3][2][3] = '';
1330N[10][3][2][4] = 0;
1331
1332
1333N[10][4] = new Array();
1334
1335
1336N[11] = new Array();
1337N[11][0] = 'Example exercises';
1338N[11][1] = 'Clicking on a link will make the exercise pop up in a new window (so that you don\'t lose your place in this tutorial). Once you have one exercise in your browser, you can move through them by clicking on the Next button at the top of the exercise. When you\'ve finished working through the exercises, close that browser window and you\'ll see this window again. Then you can go on to try making your first exercise.<ul><li><a href="" style="cursor: pointer;" onclick="window.open(\'jquiz1.htm\'); return false;">JQuiz exercise</a></li><li><a href="" style="cursor: pointer;" onclick="window.open(\'jcloze1.htm\'); return false;">JCloze exercise 1</a></li><li><a href="" style="cursor: pointer;" onclick="window.open(\'jcloze2.htm\'); return false;">JCloze exercise 2</a></li><li><a href="" style="cursor: pointer;" onclick="window.open(\'jcross1.htm\'); return false;">JCross exercise</a></li><li><a href="" style="cursor: pointer;" onclick="window.open(\'jmix1.htm\'); return false;">JMix exercise 1</a></li><li><a href="" style="cursor: pointer;" onclick="window.open(\'jmix2.htm\'); return false;">JMix exercise 2 (drag/drop)</a></li><li><a href="" style="cursor: pointer;" onclick="window.open(\'jmatch1.htm\'); return false;">JMatch exercise 1</a></li><li><a href="" style="cursor: pointer;" onclick="window.open(\'jmatch2.htm\'); return false;">JMatch exercise 2 (drag/drop)</a></li></ul>';
1339N[11][2] = new Array();
1340
1341N[11][3] = new Array();
1342N[11][3][0] = new Array();
1343N[11][3][0][0] = 12;
1344N[11][3][0][1] = 'The 2-minute challenge: Make your first exercise';
1345N[11][3][0][2] = new Array();
1346
1347N[11][3][0][3] = '';
1348N[11][3][0][4] = 0;
1349
1350
1351N[11][4] = new Array();
1352
1353
1354N[12] = new Array();
1355N[12][0] = 'The 2-minute challenge: Make your first exercise';
1356N[12][1] = 'Now that you\'ve seen all the exercises at work, it\'s time to try creating your own exercise. We\'re willing to bet that you can do it in two minutes flat, using <strong>JMix</strong>. You might want to print this out first, so you can easily refer to it while working in JMix. Here\'s what you do:<br /><br />Start the <strong>JMix</strong> program, then<br /><ol><br /> <li>Enter a <strong>title</strong>.</li> <li>Enter a <strong>sentence</strong>. Break your sentence into segments, by putting each segment on a separate line.</li> <li>Click on one of the two the Web buttons, or choose "Create Web page" from the File menu. There are two output formats to choose from, standard and drag/drop. For this exercise, it doesn\'t matter which one you choose.</li> <li>Answer the question about "This" with "no".</li> <li>Choose a name for your Web page.</li> <li>Answer "Yes" to view the exercise in your browser.</li></ol><br />When you\'ve finished, come back here to continue the presentation! You might want to use the <strong>Bookmark</strong> button above to create a bookmark in your browser, so that you don\'t have to search for this section again.<br /><br /><img src="jmix1.png" alt="How to create an exercise in JMix" width="550" height="410" title="How to create an exercise in JMix"></img>';
1357N[12][2] = new Array();
1358
1359N[12][3] = new Array();
1360N[12][3][0] = new Array();
1361N[12][3][0][0] = 13;
1362N[12][3][0][1] = 'Three steps in making an exercise';
1363N[12][3][0][2] = new Array();
1364
1365N[12][3][0][3] = '';
1366N[12][3][0][4] = 0;
1367
1368
1369N[12][4] = new Array();
1370
1371
1372N[13] = new Array();
1373N[13][0] = 'Three steps in making an exercise';
1374N[13][1] = 'Although you probably found the 2-minute challenge very straightforward, you\'ll actually need to know more about how the programs work in order to take best advantage of them. This final section of the tutorial will take you step by step through the process of making an exercise using <strong>JQuiz</strong>, in order to introduce some of the basic concepts you\'ll need to be familiar with.<br /><br />There are three main steps in creating an exercise:<br /><br /><ol><li><strong>Entering data</strong> (questions, answers and so on)</li><li><strong>Configuring the output</strong> (preparing the button captions, instructions, and other features of your Web pages)</li><li><strong>Creating Web pages</strong> (compiling your exercise into HTML pages).</li></ol>';
1375N[13][2] = new Array();
1376
1377N[13][3] = new Array();
1378N[13][3][0] = new Array();
1379N[13][3][0][0] = 14;
1380N[13][3][0][1] = 'Step 1: Entering data';
1381N[13][3][0][2] = new Array();
1382
1383N[13][3][0][3] = '';
1384N[13][3][0][4] = 0;
1385
1386
1387N[13][4] = new Array();
1388
1389
1390N[14] = new Array();
1391N[14][0] = 'Step 1: Entering data';
1392N[14][1] = 'In this part of the tutorial, we\'re going to make a multiple-choice exercise using <strong>JQuiz</strong>. The first stage is to enter the questions and answers for your exercise. First, start the <strong>JQuiz</strong> program. You should see an interface like the one below. If your interface looks more complicated than this, it\'s probably switched to <strong>advanced mode</strong>; in that case, just click on <strong>Options / Mode / Beginner Mode</strong>.<br /><br />Look at the picture below, and type in the information:<br /><br /><ol><li>Type the title in the title box.</li><li>Type the question in the question box.</li><li>Make sure that "Multiple-choice" is selected in the drop-down list box to the right of the question. This defines the type of question you want to make.</li><li>Type the answers in the boxes on the left, and the feedback on the right. Note that each answer, right or wrong, has its own feedback.</li><li>Check the "Correct" checkbox next to answer B.</li></ol><br /><br /><img src="jquiz1.png" alt="JQuiz main interface showing a multiple-choice question." width="760" height="590" title="JQuiz main interface showing a multiple-choice question."></img>';
1393N[14][2] = new Array();
1394
1395N[14][3] = new Array();
1396N[14][3][0] = new Array();
1397N[14][3][0][0] = 15;
1398N[14][3][0][1] = 'Step 2: Configuring the output';
1399N[14][3][0][2] = new Array();
1400
1401N[14][3][0][3] = '';
1402N[14][3][0][4] = 0;
1403
1404
1405N[14][4] = new Array();
1406
1407
1408N[15] = new Array();
1409N[15][0] = 'Step 2: Configuring the output';
1410N[15][1] = 'When a Hot Potatoes program creates Web pages, it does so by combining 3 resources:<ul><li>The <strong>data</strong> you entered</li><li>The <strong>configuration</strong> information</li><li>A set of "<strong>source files</strong>", or templates, containing the page structure. </li></ul>We have already looked at data; the next step is Configuration. The configuration information is a collection of pieces of text, including instructions for doing the exercise, button captions, and link URLs, which are unlikely to change much from one exercise to another. For example, some of the sample exercises you looked at earlier in this presentation included a button labelled "Check", so that the student could check his or her answer. The caption "Check" is not likely to change from exercise to exercise, so it does not need to be stored with the data; however, you may need to change it (if you are creating quizzes in another language, for example).<br /><br />When you looked at the example multiple-choice exercise, you might remember that the exercise had a title, a subtitle, and some instructions at the top of the page. The title of each exercise is likely to be unique, so that\'s part of the <strong>data</strong>. However, the subtitle (e.g. "Multiple-choice exercise") and the instructions ("Choose the correct answer for each question") may be the same for most similar exercises, so these are part of the <strong>configuration</strong>. In Step 2, we\'re going to change the configuration.<br /><br />First, click on <strong>Options / Configure Output</strong> to get to the configuration screen. The first tab, labelled <strong>Titles/Instructions</strong>, holds the exercise subtitle and instructions. Type some text in, as in the example below, then press OK.<br /><br /><img src="jquiz_config.png" alt="JQuiz configuration screen" title="JQuiz configuration screen" width="600" height="366"></img>';
1411N[15][2] = new Array();
1412
1413N[15][3] = new Array();
1414N[15][3][0] = new Array();
1415N[15][3][0][0] = 16;
1416N[15][3][0][1] = 'Step 3: Creating a Web page';
1417N[15][3][0][2] = new Array();
1418
1419N[15][3][0][3] = '';
1420N[15][3][0][4] = 0;
1421
1422
1423N[15][4] = new Array();
1424
1425
1426N[16] = new Array();
1427N[16][0] = 'Step 3: Creating a Web page';
1428N[16][1] = 'The final step is to create a Web page from your data. All you need to do is click on <strong>Create Web page / Web page for v6 browsers</strong> from the File menu, then give your page a filename. Use the filename "<strong>test.htm</strong>":<br /><br /><img src="jquiz_output.png" alt="Creating a Web page with JQuiz" title="Creating a Web page with JQuiz" width="402" height="414"></img><br /><br />The program will tell you that it has produced a file, and let you view it in your Web browser. That\'s all there is to it!<br />';
1429N[16][2] = new Array();
1430
1431N[16][3] = new Array();
1432N[16][3][0] = new Array();
1433N[16][3][0][0] = 0;
1434N[16][3][0][1] = 'Index';
1435N[16][3][0][2] = new Array();
1436
1437N[16][3][0][3] = '';
1438N[16][3][0][4] = 0;
1439
1440N[16][3][1] = new Array();
1441N[16][3][1][0] = 4;
1442N[16][3][1][1] = 'The Potatoes, one by one';
1443N[16][3][1][2] = new Array();
1444
1445N[16][3][1][3] = '';
1446N[16][3][1][4] = 0;
1447
1448
1449N[16][4] = new Array();
1450
1451
1452N[17] = new Array();
1453N[17][0] = 'The hotpotatoes.net server';
1454N[17][1] = 'Whenever you create a Hot Potatoes exercise, you will see the following screen:<br /><br /><img src="hotpotnet1.png" alt="Viewing or uploading an exercise." title="Viewing or uploading an exercise." width="455" height="240"></img><br /><br />Generally, you will want to view the exercise in your browser to see if it works as you expect. However, the second option allows you to make use of the <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'http://www.hotpotatoes.net\'); return false;">www.hotpotatoes.net</a> hosting service. This is a Web server which can host your Hot Potatoes exercises, and allow you to password-protect them; your students can log on to the server and take the exercises, and you can check in later to find out their results. This service is not free, but it\'s fairly cheap, and you can test it out by creating a demo account and uploading a couple of exercises. To create a demo account, just click on "<strong>Upload the file to the hotpotatoes.net Website</strong>", then select the option "<strong>Create a demo account for me on hotpotatoes.net</strong>". <br /><br />For more information on the hotpotatoes.net service, see <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'http://www.hotpotatoes.info\'); return false;">www.hotpotatoes.info</a>.';
1455N[17][2] = new Array();
1456
1457N[17][3] = new Array();
1458N[17][3][0] = new Array();
1459N[17][3][0][0] = 0;
1460N[17][3][0][1] = 'Index';
1461N[17][3][0][2] = new Array();
1462
1463N[17][3][0][3] = '';
1464N[17][3][0][4] = 0;
1465
1466
1467N[17][4] = new Array();
1468
1469
1470
1471
1472
1473
1474//-->
1475
1476//]]>
1477
1478</script>
1479
1480</head>
1481
1482<body onload="StartUp()">
1483
1484<!-- BeginTopNavButtons -->
1485
1486
1487<div class="NavButtonBar">
1488
1489
1490
1491
1492<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)"  onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOver(this)" onclick="location='tutorial.htm?___q;0;'; return false;"> Index </button>
1493
1494
1495
1496
1497</div>
1498
1499
1500<!-- EndTopNavButtons -->
1501
1502<div class="Titles">
1503        <h2 class="ExerciseTitle">Hot Potatoes 6 Tutorial</h2>
1504
1505
1506
1507</div>
1508
1509<div class="DecisionPoint">
1510
1511
1512<div class="ControlButtons">
1513
1514<button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="SetBookmark()">Bookmark</button>
1515
1516<button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="Restart()">Restart</button>
1517
1518<button id="UndoButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="Undo()">Go back</button>
1519
1520</div>
1521
1522        <h2 id="DPTitle" class="DecisionPointTitle"></h2>
1523
1524<table class="DPTable"><tr>
1525<td>
1526
1527        <div id="DPContentsDiv" class="DecisionPointText">
1528
1529                <div class="Instructions">
1530                Welcome to the Hot Potatoes tutorial. This tutorial runs in your Web browser. Click on the Start button to enter the tutorial.<br />
1531                </div>
1532
1533                <div class="Instructions">
1534               
1535                </div>
1536
1537        </div>
1538
1539        <div id="LinkListDiv" class="LinkList">
1540
1541                <div style="text-align: center">
1542<button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="StartExercise()">Start</button>
1543                </div>
1544        </div>
1545
1546</td>
1547<td>
1548        <div id="AssetsDiv" class="Assets">
1549
1550        </div>
1551</td></tr></table>
1552</div>
1553
1554
1555<div class="Feedback" id="FeedbackDiv">
1556<div class="FeedbackText" id="FeedbackContent"></div>
1557<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="HideFeedback(); return false;">&nbsp;OK&nbsp;</button>
1558</div>
1559
1560<!-- BeginBottomNavButtons -->
1561
1562
1563<!-- <div class="NavButtonBar" id="BottomNavBar">
1564
1565
1566
1567
1568<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)"  onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOver(this)" onclick="location='tutorial.htm?___q;0;'; return false;"> Index </button>
1569
1570
1571
1572
1573</div> -->
1574
1575
1576<!-- EndBottomNavButtons -->
1577
1578<!-- BeginSubmissionForm -->
1579
1580<!-- EndSubmissionForm -->
1581
1582
1583</body>
1584</html>
Note: See TracBrowser for help on using the browser.