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

Revision 35, 49.2 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='Usted tiene: ';
508var strLinkCaption='Entrar!';
509var strFinishCaption='Entrar!';
510var strDefaultRefusalMessage='Disculpe, no puede hacer eso.';
511var strTimesUp = 'Su tiempo se ha terminado!';
512var strBookmarkExplanation = 'Su posición actual y su configuración han sido codificadas en la <br />URL de la página. Ahora defina un marcador en su<br />navegador, así podrá volver aquí.<br />';
513var strExerciseComplete = 'Ha llegado al final del ejercicio.';
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] = 'Índice de Contenidos del tutorial';
948N[0][1] = 'Elija el tema sobre el que quiera aprender mas.';
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] = '¿Qué es 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] = 'Elaboración de unidades con The Masher';
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] = 'Publicar ejercicios y archivos en 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] = 'Registro de la aplicación 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] = 'Funciones avanzadas';
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] = '¿Qué es the Masher?';
998N[1][1] = 'The Masher cumple dos funciones:<br /><br /><ol><li>Se utiliza para crear unidades completas de ejercicios de Hot Potatoes (y de otras páginas Web). Una unidad creada con The Masher compartirá el mismo aspecto y configuración, y los ejercicios que la componenen estáran enlazados automaticamente mediante botones de navegación; tambiñen se crea automáticamente una págiona Índice. Si usted elabora d eforma regular series de ejercicios y de otras páginas -- "unidaes" o "capítulos" de materiales educativos -- entonces, The Masher puede ayudarle a organizarse y elaborarlas de forma rápida y sencilla.</li><li>También se utiliza para publicar archivos de todo tipo, que no son de Hot Potatoes, en el servidor de <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'[http://www.hotpotatoes.net\');return false;">hotpotatoes.net</a>. Cuando exporta un ejercicio para crear una página web desde Hot Potato, usted podrá publicarla, junto con los archivos enlazados, automáticamente en hotpotatoes.net. Además, puede que quiera publicar otro tipo de ficheros (documentos PDF, docuemntos de texto, imágene, etc.) para sus alumnos, y esto podría hacerlo mediante 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] = 'Aprender a elaborar unidades con THe Masher';
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] = 'Aprender a publicar archivos en 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] = 'Elaboración de unidades con The Masher';
1024N[2][1] = 'La elaboración de unidades con The Masher se realiza en muy pocos pasos:<br /><br /><ol><li>Elección de los materiales</li><li>Establecer el orden deseado</li><li>Elección del aspecto que presentarán las páginas de la unidad </li><li>Configuración de las opciones de navegación</li><li>Definir un título para su unidad</li><li>Guardar su configuración</li><li>Construir la unidad</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] = 'Consejos antes de que empiece';
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] = 'Publicar ejercicios y archivos en hotpotatoes.net';
1042N[3][1] = 'El servicio de hospedaje de páginas web <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'http://www.hotpotatoes.net\');return false;">hotpotatoes.net</a> proporciona un lugar donde publicar sus páginas, y sus ficheros asociados, elaboradas con Hot Potatoes. Sus alumnos podrán conectarse al servidor, realizar sus ejercicios, y obtener los resultadso, que quedarán almacenados en el servidor, y posteriormente, usted podrá comprobar su progreso. Usted podrça publicar ejercicios desde cualquiera de las patatas simplemente exportando el ejercicio y seleccionando la opción de publicar.<br /><br />Pero, puede que usted desee proporcionar a sus alumnos otros materiales en su cuenta de hotpotatoes.net, y esto podrá hacerlo publicando dichos materiales desde The Masher:<br /><br /><img src="mash_ul1.png" alt="Elemento de menú en The Masher: Publicar archivo en hotpotatoes.net" title="Elemento de menú en The Masher: Publicar archivo en hotpotatoes.net" width="396" height="77"></img><br /><br />Pulse en el elemento del menú, a continuación seleccione su archivo. Usted verá el siguiente cuadro de diálogo:<br /><br /><img src="mash_ul2.png" alt="Publicando un archivo con The Masher en hotpotatoes.net: cuadro de diálogo de título y descripción." title="Publicando un archivo con The Masher en hotpotatoes.net: cuadro de diálogo de título y descripción." width="437" height="312"></img><br /><br />Aquí podra especificar un título y una descripción de su archivo; esto aparecerá en el índice de materiales en el servidor de hotpotatoes.net. También puede pulsar en el botón View para comprobar el archivo antes de publicarlo.<br /><br />Seguidamente, verá el cuadro de diálogo de acceso a hotpotatoes.net (el mismo que vería desde cualquier patata al publicar un ejercicio). Aquí, podrá conectarse con su nombre de usaurio y contraseña (si dispone de una), o podrá crear una cuenta demo:<br /><br /><img src="mash_ul3.png" alt="Ventana de identificación en Hotpotatoes.net" title="Ventana de identificación en Hotpotatoes.net" width="404" height="245"></img><br /><br />Si pulsa en el botón OK, y la idntificación es correcta, el archivo será publicado y estará disponible para sus alumnos. Y esto es todo';
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] = 'Volver al índice de contenidos del 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] = 'Registro de la aplicación The Masher';
1060N[4][1] = 'The Masher es una herramienta profesional, utilizada por personas que gestionan sitios Web y materiales educativos más complejos. Por esta razón, <strong>no está incluida en la licencia de libre uso de Hot Potatoes</strong>. Con la versión sin registrar de The Masher, podrá eleborar unidades de hasta tres ejercicios o páginas. Si desea elaboarra unidades mayores, deberá <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'http://www.halfbakedsoftware.com/hotpot/\');return false;">una licencia comercial de Hot Potatoes</a>. Cuando usted adquiera una licencia, le remitiremos una clave especial para el programa The Masher, que deberá introducir en la aplicación (<strong>Help / Register</strong>) para eliminar las limitaciones.<br /><br />La otra funcionalidad de The Masher, la publicación de archivos en <a style="cursor: pointer; text-decoration: underline;" onclick="window.open(\'[http://www.hotpotatoes.net\');return false;">hotpotatoes.net</a>, <strong>no</strong> necesita de ningún tipo de registro.';
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] = 'Volver al índice de contenidos del 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] = 'Funciones avanzadas';
1078N[5][1] = 'The Masgher presenta tres caracterísiticas avanzadas importantes:<br /><br /><h3>Cadenas definidas por el usuario</h3><br />La ficha de <strong>Cadenas definidas por el usuario</strong> es equivalente al mismo elemento de la ficha Personalizar de la ventana de configuración de los demás programas de Hot Potatoes. Si utiliza archivos fuente modificados (otra de las opciones avanzadas de Hot Potatoes), podrá incluir en dichos archivos definiciones como <strong>[strUserDefined1]</strong>. Al elaborar las páginas, estás definiciones serán sustituidas automáticamente por cualquier cosa que usted teclee en la casilla reservada a la <strong>Cadena definida por el usuario #1</strong>. Los contenidos de la casilla serán introducidos automáticamente en los <strong>encabezamientoshead</strong> de todas las páginas; esto puede ser muy útil a la hora de insertar una hoja de estilo persoanlizada o un pequeño fragmento de código JavaScript en todas sus páginas.<br /><br /><h3>La ficha Fuente </h3><br />La Ficha <strong>Fuente</strong> le permite hacer dos cosas: la primera es que puede especificar una carpeta fuente determinada en la que todoas las aplicaciones buscarán los archivos fuente al elaborar las páginas, y usted podrá ver también el contenido del archivo fuente utilizado para crear la página Índice, y por tanto modificarlo si así lo desea. Para mas información sobre la personalización de los archivos fuente, consulte el Archivo de Ayuda de Hot Potatoes.<br /><br /><h3>La herramienta de procesamiento por lotes</h3><br />Si pulsa en <strong>Acciones</strong> / <strong>Procesamiento por lotes </strong>, verá una nueva ventana: la ventana de <strong>Procesamiento por lotes</strong>. La idea es que usted pueda procesar un conjunto de unidades en una sola operación. Imagínese, por ejemplo, que usted ha desarrollado un sitio web para enseñar Latín. Su sito web está formado por 25 unidades y cada unidad contiene una secuencia de páginas y ejercicios. Usted habrá creado 25 archivos <strong>.jms</strong> en The Masher, uno para cada unidad, para poder elaboarr cada unidad de forma sencilla. Habrá momentos en que tendrá que modificar todo el sitio web y usted podrá hacerlo utilizando la herramienta de procesamiento por lotes. Utilice el botón <strong>Añadir Archivos</strong> de la venta de Procesamiento por lotes para seleccionar y añadir sus archivos .jms (o arrástrelos y suéltelos en la ventana). A continuación pulse en el botón <strong>Ejecutar</strong>, y se procesarán los archivos y se elaborarán las unidades. Esto puede que tarde un tiempo, por tanto esté preparado para esperar. Si usted lo desea, puede configurar (por ejemplo) el Aspecto en la ventana principal antes de realizar el procesamiento por lotes, elegir después <strong>Bloquear información de color</strong>, y la configuración seleccionada será aplicada a todas las operaciones, independientemente de la configuración especificada en cada uno de los archivos <strong>.jms</strong>. Así, usted podría cambiar la configuración de color de todo su sitio web de forma sencilla. Una vez definida una operación de procesamiento por lotes, usted podrá guardar la lista de archivos y el resto de los parámetros de configuración mediante <strong>Archivo</strong> / <strong>Guardar (como)</strong> en la ventana de Procesamiento por lotes. Consulte el Archivo de Ayuda de The Masher para más información.';
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] = 'Índice de contenidos del 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] = 'Consejos antes de quenempiece';
1096N[6][1] = 'Aunque The Masher puede aceptar archivos desde cualquier lugar y colocarlos en cualquier carpeta que usted especifique, la forma mas limpia y sencilla de trabajar es la siguiente:<br /><br /><ol><li>Coloque todos los archivos de datos de la unidad que quiere elaborar en la misma carpeta.</li><li>Copie cualquier archivo (otras páginas Web, etc.) que quiera incluir en la misma carpeta.</li><li>Comprueba que tiene el archivo de The Masher en al misma carpeta.</li></ol><br />En otras palabras, deberá tener una carpeta como esta:<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;<b>unidad_01</b><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>instrucciones.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>unidad_01.jms</b><br /><br />Que está formada por una archivo HTML creado por usted en otro programa (como por ejemplo DreamWeaver), dos ejercicios (uno de JMatch y otro de JQuiz), y el archivo de The Masher que va a utilizarse para elaborar la unidad. Una vez elaborada la unidad, tendrá algo como esto:<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;<b>unidad_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>instrucciones.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>unidad_01.jms</b><br /><br />Los nuevos archivos son los archivos HTML creados por The Masher, incluyendo una página Índice que enlaza todos los ejercicios. Le recomendamos que mantenga siempre estos archivos en la misma carpeta; así todo será más fácil, y será más sencillo hacer copias de seguridad.';
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] = 'Siguiente: Selección de sus materiales';
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] = 'Selección de sus materiales';
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. Nornally, 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;"> 
1269Índice </button>
1270
1271
1272
1273
1274</div>
1275
1276
1277<!-- EndTopNavButtons -->
1278
1279<div class="Titles">
1280        <h2 class="ExerciseTitle">Tutorial en castellano del programa de Hot Potatoes
1281    The Masher</h2>
1282
1283
1284
1285</div>
1286
1287<div class="DecisionPoint">
1288
1289
1290<div class="ControlButtons">
1291
1292<button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="SetBookmark()">
1293Marcador</button>
1294
1295<button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="Restart()">
1296Volver a empezar</button>
1297
1298<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()">
1299Atrás</button>
1300
1301</div>
1302
1303        <h2 id="DPTitle" class="DecisionPointTitle"></h2>
1304
1305<table class="DPTable"><tr>
1306<td>
1307
1308        <div id="DPContentsDiv" class="DecisionPointText">
1309
1310                <div class="Instructions">
1311                <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 />
1312        Bienvenido al tutorial sobre The Masher. Este tutorial se ejecuta en su
1313        navegador Web. Pulse en el botón comenzar para entrar en el tutorial.<br />
1314                </div>
1315
1316                <div class="Instructions">
1317               
1318                </div>
1319
1320        </div>
1321
1322        <div id="LinkListDiv" class="LinkList">
1323
1324                <div style="text-align: center">
1325<button class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)"  onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="StartExercise()">
1326Comenzar</button>
1327                </div>
1328        </div>
1329
1330</td>
1331<td>
1332        <div id="AssetsDiv" class="Assets">
1333
1334        </div>
1335</td></tr></table>
1336</div>
1337
1338
1339<div class="Feedback" id="FeedbackDiv">
1340<div class="FeedbackText" id="FeedbackContent"></div>
1341<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>
1342</div>
1343
1344<!-- BeginBottomNavButtons -->
1345
1346
1347<!-- <div class="NavButtonBar" id="BottomNavBar">
1348
1349
1350
1351
1352<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>
1353
1354
1355
1356
1357</div> -->
1358
1359
1360<!-- EndBottomNavButtons -->
1361
1362<!-- BeginSubmissionForm -->
1363
1364<!-- EndSubmissionForm -->
1365
1366
1367</body>
1368</html>
Note: See TracBrowser for help on using the browser.