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

Revision 35, 47.8 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="Tutorial for the Hot Potatoes Masher Program" />
10
11
12<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
13
14<title>
15Tutorial for the Hot Potatoes Masher Program
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] = 'Contents of the tutorial';
948N[0][1] = 'Choose the topic you want to learn about.';
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 the Masher?';
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] = 'Building Masher units';
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] = 'Uploading files to hotpotatoes.net';
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] = 'Registration of the Masher';
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] = 5;
986N[0][3][4][1] = 'Advanced functions';
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 the Masher?';
998N[1][1] = 'The Masher has two basic functions:<br /><br /><ol><li>It is used to create complete units of Hot Potatoes exercises (and other Web pages). A unit created with the Masher can share the same appearance settings, and be linked together automatically by navigation buttons; an Index page is also created automatically. If you regularly create sequences of exercises and other pages -- "units" or "chapters" of teaching materials -- then the Masher can help you organize and build your sites quickly and easily.</li><li>It is also used to upload non-Hot Potatoes files to the <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'[http://www.hotpotatoes.net\');return false;">hotpotatoes.net</a> server. When you export an exercise to create a Web page from inside a Hot Potato, you can automatically upload the page and its linked media files to hotpotatoes.net; however, you may also want to upload other types of file (PDF documents, Word documents, images, etc.) for your students, and you can do this using the Masher</li></ol><br /><br />';
999N[1][2] = new Array();
1000
1001N[1][3] = new Array();
1002N[1][3][0] = new Array();
1003N[1][3][0][0] = 2;
1004N[1][3][0][1] = 'Learn about building Masher units';
1005N[1][3][0][2] = new Array();
1006
1007N[1][3][0][3] = '';
1008N[1][3][0][4] = 0;
1009
1010N[1][3][1] = new Array();
1011N[1][3][1][0] = 3;
1012N[1][3][1][1] = 'Learn about uploading files to hotpotatoes.net';
1013N[1][3][1][2] = new Array();
1014
1015N[1][3][1][3] = '';
1016N[1][3][1][4] = 0;
1017
1018
1019N[1][4] = new Array();
1020
1021
1022N[2] = new Array();
1023N[2][0] = 'Building Masher units';
1024N[2][1] = 'Using the Masher to build a unit takes a few steps:<br /><br /><ol><li>Choosing your materials</li><li>Putting them in order</li><li>Deciding on the appearance of the pages</li><li>Setting the navigation options</li><li>Adding a title for your unit</li><li>Saving your settings</li><li>Building the unit</li></ol><br /><br />';
1025N[2][2] = new Array();
1026
1027N[2][3] = new Array();
1028N[2][3][0] = new Array();
1029N[2][3][0][0] = 6;
1030N[2][3][0][1] = 'Basic advice before you start';
1031N[2][3][0][2] = new Array();
1032
1033N[2][3][0][3] = '';
1034N[2][3][0][4] = 0;
1035
1036
1037N[2][4] = new Array();
1038
1039
1040N[3] = new Array();
1041N[3][0] = 'Uploading files to hotpotatoes.net';
1042N[3][1] = 'The <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'http://www.hotpotatoes.net\');return false;">hotpotatoes.net</a> hosting service provides a location for you to store your Hot Potatoes pages and related files. Your students can log in to the server, do their exercises, and have their results stored, and you can check their progress. You can upload exercises from any Hot Potato program by exporting the exercise, and then choosing the upload option when the process is complete.<br /><br />However, you may also want to provide other kinds of material for your students on your hotpotatoes.net account. You can do this by uploading it from inside the Masher:<br /><br /><img src="mash_ul1.png" alt="Masher menu item: Upload file to hotpotatoes.net" title="Masher menu item: Upload file to hotpotatoes.net" width="367" height="70"></img><br /><br />Click on the menu item, then choose your file. You\'ll see this dialog box:<br /><br /><img src="mash_ul2.png" alt="Masher upload file to hotpotatoes.net: title and description dialog box." title="Masher upload file to hotpotatoes.net: title and description dialog box." width="437" height="305"></img><br /><br />Here you can specify a title and description for your file; these will appear for you and your students in the index of materials on the hotpotatoes.net server. You can also click on the View button to view the file if you want to check it\'s the right one.<br /><br />Next, you\'ll see the normal hotpotatoes.net logon dialog box (the same one you see when you upload an exercise from a Potato). Here, you can log on with your user name and password (if you have one), or create a demo account if you don\'t:<br /><br /><img src="mash_ul3.png" alt="Hotpotatoes.net logon screen" title="Hotpotatoes.net logon screen" width="404" height="245"></img><br /><br />If you press OK, and the logon is successful, the file will upload, and it will be available to your students. That\'s all there is to it!';
1043N[3][2] = new Array();
1044
1045N[3][3] = new Array();
1046N[3][3][0] = new Array();
1047N[3][3][0][0] = 0;
1048N[3][3][0][1] = 'Back to the contents of the tutorial';
1049N[3][3][0][2] = new Array();
1050
1051N[3][3][0][3] = '';
1052N[3][3][0][4] = 0;
1053
1054
1055N[3][4] = new Array();
1056
1057
1058N[4] = new Array();
1059N[4][0] = 'Registration of the Masher';
1060N[4][1] = 'The Masher is a professional-level tool, used by people making larger Websites and more complex teaching materials. For that reason, it is <strong>not included in the free use terms of Hot Potatoes</strong>. With the unregistered version of the Masher, you can build units with up to three exercises or pages in them. If you want to build larger units, you will need to <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'http://www.halfbakedsoftware.com/hotpot/\');return false;">buy a licence for Hot Potatoes</a>. When you buy a licence, we will send you a special key for the Masher, which you can enter into the program (<strong>Help / Register</strong>) to remove the limitation.<br /><br />The Masher\'s other function, uploading files to the <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'[http://www.hotpotatoes.net\');return false;">hotpotatoes.net</a> server, does <strong>not</strong> require registration.';
1061N[4][2] = new Array();
1062
1063N[4][3] = new Array();
1064N[4][3][0] = new Array();
1065N[4][3][0][0] = 0;
1066N[4][3][0][1] = 'Back to the contents of the tutorial';
1067N[4][3][0][2] = new Array();
1068
1069N[4][3][0][3] = '';
1070N[4][3][0][4] = 0;
1071
1072
1073N[4][4] = new Array();
1074
1075
1076N[5] = new Array();
1077N[5][0] = 'Advanced functions';
1078N[5][1] = 'There are three important advanced features in the Masher:<br /><br /><h3>User strings</h3><br />The <strong>User strings</strong> tab works the same way as the same item on the Custom tab in the Configuration screen of the rest of the Hot Potatoes programs. If you use modified source files (another advanced Hot Potatoes option), you can include in those files a placeholder such as <strong>[strUserDefined1]</strong>. When you build the pages, this placeholder will be replaced automatically by whatever you type in the <strong>User defined string #1</strong> box. The contents of the bottom box will be automatically inserted into the <strong>head</strong> element of all the pages; this can be useful for inserting a custom stylesheet or a little block of JavaScript code into all your pages.<br /><br /><h3>The Source tab</h3><br />The <strong>Source</strong> tab allows you to do two things: first, you can specify a particular source folder where all the programs will look for source files when building pages, and you can also see the contents of the source file used to create the Index page, and make modifications to it if you wish. For more information on customizing source files, see the Hot Potatoes Help file.<br /><br /><h3>The Batch tool</h3><br />If you click on <strong>Actions</strong> / <strong>Batch processing</strong>, you\'ll see a new window appear: the <strong>Batch</strong> window. The idea of this feature is to allow you to process a whole set of units in one operation. Imagine, for example, that you\'re creating a huge site to teach Latin. Your site has 25 units, and each unit contains a sequence of pages and exercises. You have created 25 <strong>.jms</strong> files in the Masher, one for each unit, so you can build each unit easily. However, sometimes you need to make a change to the whole site. You can do that using the Batch tool. Use the <strong>Add Files</strong> button in the Batch window to select and add all of your .jms files (or drag and drop them into the window). Then press <strong>Go!</strong>, and each one will be processed in turn, building all the units. This may take a while, so be prepared! If you wish, you can also set up (for example) Appearance settings in the main screen before running your batch operation, then choose <strong>Lock colour information</strong>, and the settings you specified will be used for all the output operations, whatever settings you specified in each individual <strong>.jms</strong> file. In this way, you could change the colour settings for a whole site very easily. When you have set up a batch operation, you can save the file list and the other settings using <strong>File</strong> / <strong>Save (As)</strong> in the Batch window. See the Masher Help file for more detailed information on batch processing.';
1079N[5][2] = new Array();
1080
1081N[5][3] = new Array();
1082N[5][3][0] = new Array();
1083N[5][3][0][0] = 0;
1084N[5][3][0][1] = 'Contents of the tutorial';
1085N[5][3][0][2] = new Array();
1086
1087N[5][3][0][3] = '';
1088N[5][3][0][4] = 0;
1089
1090
1091N[5][4] = new Array();
1092
1093
1094N[6] = new Array();
1095N[6][0] = 'Basic advice before you start';
1096N[6][1] = 'Although the Masher can accept files from any locations and output the results to any folder you specify, the cleanest and simplest way to work is this:<br /><br /><ol><li>Put all the Hot Potatoes data files for the unit you want to build in a single folder.</li><li>Copy any other files (other Web pages etc.) that you want to include into the same folder.</li><li>Make sure you save the Masher file in the same folder.</li></ol><br /><br />In other words, you might have a folder like this:<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;<b>unit_01</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>instructions.htm</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>jcloze1.jcl</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>jmatch1.jmt</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>unit_01.jms</b><br /><br />This consists of an HTML file you have created in some other program (such as DreamWeaver), two exercises (one JMatch and one JQuiz), and the Masher file that\'s going to be used to build the unit. When you have built the unit, it will look like this:<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;<b>unit_01</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><strong>index.htm</strong></b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>instructions.htm</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>jcloze1.jcl</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><strong>jcloze1.htm</strong></b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>jmatch1.jmt</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><strong>jmatch1.htm</strong></b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>unit_01.jms</b><br /><br />The new files are the HTML files created by the Masher, including an index page which links them together. We recommend that you always keep all these files in the same folder; it makes life simple, and makes backups easy.';
1097N[6][2] = new Array();
1098
1099N[6][3] = new Array();
1100N[6][3][0] = new Array();
1101N[6][3][0][0] = 7;
1102N[6][3][0][1] = 'Next: Choosing your materials';
1103N[6][3][0][2] = new Array();
1104
1105N[6][3][0][3] = '';
1106N[6][3][0][4] = 0;
1107
1108
1109N[6][4] = new Array();
1110
1111
1112N[7] = new Array();
1113N[7][0] = 'Choosing your materials';
1114N[7][1] = 'The first stage in building a Masher unit is to bring the materials into the Masher. Start the program, and make sure you\'ve selected the first tab in the interface (<strong>Files</strong>). Next, click on the <strong>Add Files</strong> button, and select one or more of the files you want to include in your unit. It\'s best if these are sitting in the same folder, as we mentioned. When you add a file, you\'ll see a dialog box like this:<br /><br /><img src="mash_f1.png" alt="Loading a file into the Masher" title="Loading a file into the Masher" width="452" height="294"></img><br /><br />For the moment, it\'s fine just to accept the defaults and press OK, but this is what the components mean:<ul><li>The first box shows the path to the HotPot data file (or other Web page).</li><li>The second box shows the filename that will be used when that file is exported to create a Web page as part of the unit.</li><li>The third box can be used to fix the name of the subsequent exercise page. Under normal circumstances, you wouldn\'t need to change this.</li><li>The fourth box allows you to choose the output format for a Hot Potatoes exercise. The options depend on which Potato is involved (so JMatch has three options, but JCloze has only one).</li></ul>Accept the defaults, and add your files.<br /><br />';
1115N[7][2] = new Array();
1116
1117N[7][3] = new Array();
1118N[7][3][0] = new Array();
1119N[7][3][0][0] = 8;
1120N[7][3][0][1] = 'Putting your files in order';
1121N[7][3][0][2] = new Array();
1122
1123N[7][3][0][3] = '';
1124N[7][3][0][4] = 0;
1125
1126
1127N[7][4] = new Array();
1128
1129
1130N[8] = new Array();
1131N[8][0] = 'Putting your files in order';
1132N[8][1] = 'When you\'ve added your files, you should see something like this:<br /><br /><img src="mash_f2.png" alt="Masher file list" title="Masher file list" width="500" height="490"></img><br /><br />You can see the sequence of files that will be included in the unit: it starts with a plain HTML page of instructions, and then there\'s a JCloze exercise, and a JMatch exercise. You can change the order of files in the sequence using the up/down buttons on the right. Note that every time you move a file in the sequence, the file names in the <strong>Next exercise</strong> column are automatically updated.<br /><br />If you want to change the output format of an exercise, just double-click on it, and you\'ll see the same dialog box you saw when you added it to the list.';
1133N[8][2] = new Array();
1134
1135N[8][3] = new Array();
1136N[8][3][0] = new Array();
1137N[8][3][0][0] = 9;
1138N[8][3][0][1] = 'Deciding on the appearance of the pages';
1139N[8][3][0][2] = new Array();
1140
1141N[8][3][0][3] = '';
1142N[8][3][0][4] = 0;
1143
1144
1145N[8][4] = new Array();
1146
1147
1148N[9] = new Array();
1149N[9][0] = 'Deciding on the appearance of the pages';
1150N[9][1] = 'The next stage is the <strong>Appearance</strong> tab. This is almost identical to the Appearance tab in the Configuration screen of the other Hot Potatoes programs, and it works the same way. The only difference is that you can make this choice:<br /><br /><img src="mash_ap1.png" alt="Masher appearance settings" title="Masher appearance settings" width="363" height="77"></img><br /><br />If you choose the first option, all the pages will be compiled using the colours you specify in this screen (so they will all look the same). If you choose the second button, then each file will be compiled using the colours that were set up in the program that created it. Normally, the first option would be the logical one, because you will probably want all the exercises in your unit to look similar.';
1151N[9][2] = new Array();
1152
1153N[9][3] = new Array();
1154N[9][3][0] = new Array();
1155N[9][3][0][0] = 10;
1156N[9][3][0][1] = 'Setting the navigation options';
1157N[9][3][0][2] = new Array();
1158
1159N[9][3][0][3] = '';
1160N[9][3][0][4] = 0;
1161
1162
1163N[9][4] = new Array();
1164
1165
1166N[10] = new Array();
1167N[10][0] = 'Setting the navigation options';
1168N[10][1] = 'The next tab is the <strong>User Strings</strong> tab, but let\'s ignore that for the moment; it\'s a pretty advanced function. Moving on to the <strong>Buttons</strong> tab, you\'ll see these options:<br /><br /><img src="mash_bt1.png" alt="Masher buttons tab" title="Masher buttons tab" width="500" height="215"></img><br /><br />The first part allows you to specify the navigation buttons you want to include in your unit pages. You can choose to include any of the three normal navigation buttons, and set the captions for them. Note that you don\'t have to worry about specifying the location of files here; the links are established automatically by the sequence of files in the Files tab.<br /><br />The final checkbox here relates to any HTML pages you have included (like the Instructions page in our example). You may have created a page like this in another authoring program such as DreamWeaver, but you presumably still want to include the same navigation system on the page, so that it can become part of the unit sequence. If you check this checkbox, the program will try to add navigation bars to the HTML page. If the HTML code is correct, this should work without problems, and your HTML page will have navigation bars like a Hot Potatoes exercise.';
1169N[10][2] = new Array();
1170
1171N[10][3] = new Array();
1172N[10][3][0] = new Array();
1173N[10][3][0][0] = 11;
1174N[10][3][0][1] = 'Adding a title for your unit';
1175N[10][3][0][2] = new Array();
1176
1177N[10][3][0][3] = '';
1178N[10][3][0][4] = 0;
1179
1180
1181N[10][4] = new Array();
1182
1183
1184N[11] = new Array();
1185N[11][0] = 'Adding a title for your unit';
1186N[11][1] = 'The next tab is the <strong>Source</strong> tab, but this is for advanced functions, so we\'ll ignore it for the moment. The final tab is the <strong>Index</strong> tab, which looks like this:<br /><br /><img src="mash_ix1.png" alt="Masher Index tab" title="Masher Index tab" width="500" height="105"></img><br /><br />All you need to do here is specify the name for your Unit. This will appear on the Index page that the program creates.';
1187N[11][2] = new Array();
1188
1189N[11][3] = new Array();
1190N[11][3][0] = new Array();
1191N[11][3][0][0] = 12;
1192N[11][3][0][1] = 'Saving your settings';
1193N[11][3][0][2] = new Array();
1194
1195N[11][3][0][3] = '';
1196N[11][3][0][4] = 0;
1197
1198
1199N[11][4] = new Array();
1200
1201
1202N[12] = new Array();
1203N[12][0] = 'Saving your settings';
1204N[12][1] = '<img src="mash_sv1.png" alt="Save your Masher file" title="Save your Masher file" width="175" height="260" style="float: right;"></img><br /><br />Before we go any further, it\'s a good idea to save your settings as a Masher file. Choose <strong>File</strong> / <strong>Save</strong> or <strong>Save As</strong>, and save your work as a <strong>.jms</strong> file. This saves all the settings in the Masher tabs, so that you can reload them later and build your unit again if you need to.';
1205N[12][2] = new Array();
1206
1207N[12][3] = new Array();
1208N[12][3][0] = new Array();
1209N[12][3][0][0] = 13;
1210N[12][3][0][1] = 'Building the unit';
1211N[12][3][0][2] = new Array();
1212
1213N[12][3][0][3] = '';
1214N[12][3][0][4] = 0;
1215
1216
1217N[12][4] = new Array();
1218
1219
1220N[13] = new Array();
1221N[13][0] = 'Building the unit';
1222N[13][1] = 'Finally, we\'ll build the unit. Just click on the <strong>Build unit</strong> button, and watch it happen!<br /><br />What actually happens is this:<br /><br />The Masher looks at each file in turn, and then starts the required Hot Potato, passing it all the information it needs to build the exercise into a Web page. The Potato starts up, exports the exercise to the target folder, then closes again. If there are any non-Hot Potatoes files, the Masher will load them and add a navigation bar if necessary. Finally, the Masher creates an Index page for the unit, listing all the contents, and saves this with the filename <strong>index.htm</strong> in the same folder. You should now have a complete unit of exercises, with an index and a functioning navigation system so that users can work through the materials in order. Simple!';
1223N[13][2] = new Array();
1224
1225N[13][3] = new Array();
1226N[13][3][0] = new Array();
1227N[13][3][0][0] = 0;
1228N[13][3][0][1] = 'Contents of the tutorial';
1229N[13][3][0][2] = new Array();
1230
1231N[13][3][0][3] = '';
1232N[13][3][0][4] = 0;
1233
1234N[13][3][1] = new Array();
1235N[13][3][1][0] = 5;
1236N[13][3][1][1] = 'Advanced functions';
1237N[13][3][1][2] = new Array();
1238
1239N[13][3][1][3] = '';
1240N[13][3][1][4] = 0;
1241
1242
1243N[13][4] = new Array();
1244
1245
1246
1247
1248
1249
1250//-->
1251
1252//]]>
1253
1254</script>
1255
1256</head>
1257
1258<body onload="StartUp()">
1259
1260<!-- BeginTopNavButtons -->
1261
1262
1263<div class="NavButtonBar">
1264
1265
1266
1267
1268<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)"  onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOver(this)" onclick="location='mashertutorial.htm?___q;0;'; return false;"> Index </button>
1269
1270
1271
1272
1273</div>
1274
1275
1276<!-- EndTopNavButtons -->
1277
1278<div class="Titles">
1279        <h2 class="ExerciseTitle">Tutorial for the Hot Potatoes Masher Program</h2>
1280
1281
1282
1283</div>
1284
1285<div class="DecisionPoint">
1286
1287
1288<div class="ControlButtons">
1289
1290<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>
1291
1292<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>
1293
1294<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>
1295
1296</div>
1297
1298        <h2 id="DPTitle" class="DecisionPointTitle"></h2>
1299
1300<table class="DPTable"><tr>
1301<td>
1302
1303        <div id="DPContentsDiv" class="DecisionPointText">
1304
1305                <div class="Instructions">
1306                <div style="text-align: center;"><img src="masher_logo.png" alt="masher_logo.png" title="masher_logo" width="410" height="310" style="margin: auto;"></img></div><br /><br />Welcome to the Masher tutorial. This tutorial runs in your Web browser. Click on the Start button to enter the tutorial.<br />
1307                </div>
1308
1309                <div class="Instructions">
1310               
1311                </div>
1312
1313        </div>
1314
1315        <div id="LinkListDiv" class="LinkList">
1316
1317                <div style="text-align: center">
1318<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>
1319                </div>
1320        </div>
1321
1322</td>
1323<td>
1324        <div id="AssetsDiv" class="Assets">
1325
1326        </div>
1327</td></tr></table>
1328</div>
1329
1330
1331<div class="Feedback" id="FeedbackDiv">
1332<div class="FeedbackText" id="FeedbackContent"></div>
1333<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>
1334</div>
1335
1336<!-- BeginBottomNavButtons -->
1337
1338
1339<!-- <div class="NavButtonBar" id="BottomNavBar">
1340
1341
1342
1343
1344<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)"  onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOver(this)" onclick="location='mashertutorial.htm?___q;0;'; return false;"> Index </button>
1345
1346
1347
1348
1349</div> -->
1350
1351
1352<!-- EndBottomNavButtons -->
1353
1354<!-- BeginSubmissionForm -->
1355
1356<!-- EndSubmissionForm -->
1357
1358
1359</body>
1360</html>
Note: See TracBrowser for help on using the browser.