source: hotpotatoes/trunk/fuentes/javahotpot/interface/previewappearance.ht_ @ 201

Last change on this file since 201 was 201, checked in by jrpelegrina, 4 years ago

First release to xenial

File size: 17.2 KB
Line 
1<?xml version="1.0"?>
2       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
3       <html xmlns="http://www.w3.org/1999/xhtml"
4             xml:lang="en"><head>
5
6<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
7
8<title>
9Preview Appearance
10</title>
11
12
13<style type="text/css">
14
15body{
16        font-family: [strFontFace];
17        background-color: [strPageBGColor];
18        color: [strTextColor];
19        [inclGraphicURL]        background-image: url([strGraphicURL]);[/inclGraphicURL]
20        margin-right: 5%;
21        margin-left: 5%;
22        font-size: small;
23}
24
25p{
26        text-align: left;
27        margin: 0px;
28        font-size: small;
29}
30
31div,span,td{
32        font-size: small;
33        color: [strTextColor];
34}
35
36div.Titles{
37        padding: 10px;
38        text-align: center;
39        color: [strTitleColor];
40}
41
42button{
43        display: inline;
44}
45
46.ExerciseTitle{
47        font-size: large;
48        color: [strTitleColor];
49}
50
51.ExerciseSubtitle{
52        color: [strTitleColor];
53}
54
55span.Instructions{
56
57}
58
59div.ExerciseText{
60
61}
62
63.FeedbackText{
64        color: [strTitleColor];
65}
66
67div.Feedback {
68        background-color: [strPageBGColor];
69        left: 33%;
70        width: 34%;
71        top: 33%;
72        z-index: 1;
73        border-style: solid;
74        border-width: 1px;
75        padding: 5px;
76        text-align: center;
77        color: [strTitleColor];
78        position: absolute;
79        display: none;
80        font-size: small;
81}
82
83div.ExerciseDiv{
84        color: [strTextColor];
85}
86
87div.StdDiv{
88        background-color: [strExBGColor];
89        text-align: center;
90        font-size: small;
91        color: [strTextColor];
92        padding: 8px;
93        border-style: solid;
94        border-width: 1px 1px 1px 1px;
95        border-color: [strTextColor];
96        margin: 1px;
97}
98
99.FuncButton {
100        text-align: center;
101        border-style: solid;
102        border-left-color: [strFuncLightColor];
103        border-top-color: [strFuncLightColor];
104        border-right-color: [strFuncShadeColor];
105        border-bottom-color: [strFuncShadeColor];
106        color: [strTextColor];
107        background-color: [strExBGColor];
108        border-width: 2px;
109        padding: 3px 6px 3px 6px;
110        cursor: pointer;
111}
112
113.FuncButtonUp {
114        color: [strExBGColor];
115        text-align: center;
116        border-style: solid;
117        border-left-color: [strFuncLightColor];
118        border-top-color: [strFuncLightColor];
119        border-right-color: [strFuncShadeColor];
120        border-bottom-color: [strFuncShadeColor];
121        background-color: [strTextColor];
122        color: [strExBGColor];
123        border-width: 2px;
124        padding: 3px 6px 3px 6px;
125        cursor: pointer;
126}
127
128.FuncButtonDown {
129        color: [strExBGColor];
130        text-align: center;
131        border-style: solid;
132        border-left-color: [strFuncShadeColor];
133        border-top-color: [strFuncShadeColor];
134        border-right-color: [strFuncLightColor];
135        border-bottom-color: [strFuncLightColor];
136        background-color: [strTextColor];
137        color: [strExBGColor];
138        border-width: 2px;
139        padding: 3px 6px 3px 6px;
140        cursor: pointer;
141}
142
143/*BeginNavBarStyle*/
144
145div.NavButtonBar{
146        background-color: [strNavBarColor];
147        text-align: center;
148        margin: 2px 0px 2px 0px;
149        clear: both;
150        font-size: small;
151}
152
153.NavButton {
154        border-style: solid;
155        border-left-color: [strNavLightColor];
156        border-top-color: [strNavLightColor];
157        border-right-color: [strNavShadeColor];
158        border-bottom-color: [strNavShadeColor];
159        background-color: [strNavBarColor];
160        color: [strNavTextColor];
161        border-width: 2px;
162        cursor: pointer;       
163}
164
165.NavButtonUp {
166        border-style: solid;
167        border-left-color: [strNavLightColor];
168        border-top-color: [strNavLightColor];
169        border-right-color: [strNavShadeColor];
170        border-bottom-color: [strNavShadeColor];
171        color: [strNavBarColor];
172        background-color: [strNavTextColor];
173        border-width: 2px;
174        cursor: pointer;       
175}
176
177.NavButtonDown {
178        border-style: solid;
179        border-left-color: [strNavShadeColor];
180        border-top-color: [strNavShadeColor];
181        border-right-color: [strNavLightColor];
182        border-bottom-color: [strNavLightColor];
183        color: [strNavBarColor];
184        background-color: [strNavTextColor];
185        border-width: 2px;
186        cursor: pointer;       
187}
188
189/*EndNavBarStyle*/
190
191a{
192        color: [strLinkColor];
193}
194
195a: visited{
196        color: [strVLinkColor];
197}
198
199a:hover{
200        color: [strLinkColor];
201}
202
203
204
205
206
207</style>
208
209<script type="text/javascript">
210
211//<![CDATA[
212
213<!--
214
215 //start of browsercheck.js
216 
217function Client(){
218//if not a DOM browser, hopeless
219        this.min = false; if (document.getElementById){this.min = true;};
220
221        this.ua = navigator.userAgent;
222        this.name = navigator.appName;
223        this.ver = navigator.appVersion; 
224
225//Get data about the browser
226        this.mac = (this.ver.indexOf('Mac') != -1);
227        this.win = (this.ver.indexOf('Windows') != -1);
228
229//Look for Gecko
230        this.gecko = (this.ua.indexOf('Gecko') > 1);
231        if (this.gecko){
232                this.geckoVer = parseInt(this.ua.substring(this.ua.indexOf('Gecko')+6, this.ua.length));
233                if (this.geckoVer < 20020000){this.min = false;}
234        }
235       
236//Look for Firebird
237        this.firebird = (this.ua.indexOf('Firebird') > 1);
238       
239//Look for Safari
240        this.safari = (this.ua.indexOf('Safari') > 1);
241        if (this.safari){
242                this.gecko = false;
243        }
244       
245//Look for IE
246        this.ie = (this.ua.indexOf('MSIE') > 0);
247        if (this.ie){
248                this.ieVer = parseFloat(this.ua.substring(this.ua.indexOf('MSIE')+5, this.ua.length));
249                if (this.ieVer < 5.5){this.min = false;}
250        }
251       
252//Look for Opera
253        this.opera = (this.ua.indexOf('Opera') > 0);
254        if (this.opera){
255                this.operaVer = parseFloat(this.ua.substring(this.ua.indexOf('Opera')+6, this.ua.length));
256                if (this.operaVer < 7.04){this.min = false;}
257        }
258        if (this.min == false){
259                alert('Your browser may not be able to handle this page.');
260        }
261       
262//Special case for the horrible ie5mac
263        this.ie5mac = (this.ie&&this.mac&&(this.ieVer<6));
264}
265
266var C = new Client();
267
268//CODE FOR HANDLING NAV BUTTONS AND FUNCTION BUTTONS
269
270function NavBtnOver(Btn){
271        if (Btn.className != 'NavButtonDown'){Btn.className = 'NavButtonUp';}
272}
273
274function NavBtnOut(Btn){
275        Btn.className = 'NavButton';
276}
277
278function NavBtnDown(Btn){
279        Btn.className = 'NavButtonDown';
280}
281
282function FuncBtnOver(Btn){
283        if (Btn.className != 'FuncButtonDown'){Btn.className = 'FuncButtonUp';}
284}
285
286function FuncBtnOut(Btn){
287        Btn.className = 'FuncButton';
288}
289
290function FuncBtnDown(Btn){
291        Btn.className = 'FuncButtonDown';
292}
293
294function FocusAButton(){
295        if (document.getElementById('CheckButton1') != null){
296                document.getElementById('CheckButton1').focus();
297        }
298        else{
299                if (document.getElementById('CheckButton2') != null){
300                        document.getElementById('CheckButton2').focus();
301                }
302                else{
303                        document.getElementsByTagName('button')[0].focus();
304                }
305        }
306}
307
308
309//[strJSShowMessage]
310//CODE FOR HANDLING DISPLAY OF POPUP FEEDBACK BOX
311
312var topZ = 1000;
313
314function CheckAnswers(){
315
316//Show the feedback and rebuild the exercise
317        ShowMessage('Feedback appears here');
318       
319}
320
321function ShowMessage(Feedback){
322        var Output = Feedback + '<br /><br />';
323        document.getElementById('FeedbackContent').innerHTML = Output;
324        var FDiv = document.getElementById('FeedbackDiv');
325        topZ++;
326        FDiv.style.zIndex = topZ;
327        FDiv.style.top = TopSettingWithScrollOffset(30) + 'px';
328//IE can't focus a hidden div; Moz needs to focus before display to avoid jumping
329        if (C.gecko){
330                document.getElementById('FeedbackOKButton').focus();
331        }
332        FDiv.style.display = 'block';
333
334        ShowElements(false, 'input');
335        ShowElements(false, 'select');
336        ShowElements(false, 'object');
337        if (C.ie){
338                document.getElementById('FeedbackOKButton').focus();
339        }
340}
341
342function ShowElements(Show, TagName){
343//Special for IE bug -- hide all the form elements that will show through the popup
344        if (C.ie){
345                var Els = document.getElementsByTagName(TagName);
346                for (var i=0; i<Els.length; i++){
347                        if (Show == true){
348                                Els[i].style.display = 'inline';
349                        }
350                        else{
351                                Els[i].style.display = 'none';
352                        }
353                }
354        }
355}
356
357function HideFeedback(){
358        document.getElementById('FeedbackDiv').style.display = 'none';
359        ShowElements(true, 'input');
360        ShowElements(true, 'select');
361        ShowElements(true, 'object');
362        if (Finished == true){
363                Finish();
364        }
365}
366
367
368//[strJSUtilities]
369//GENERAL UTILITY FUNCTIONS AND VARIABLES
370
371//PAGE DIMENSION FUNCTIONS
372function PageDim(){
373//Get the page width and height
374        this.W = 600;
375        this.H = 400;
376        this.W = document.getElementsByTagName('body')[0].clientWidth;
377        this.H = document.getElementsByTagName('body')[0].clientHeight;
378}
379
380var pg = null;
381
382function GetPageXY(El) {
383        var XY = {x: 0, y: 0};
384        while(El){
385                XY.x += El.offsetLeft;
386                XY.y += El.offsetTop;
387                El = El.offsetParent;
388        }
389        return XY;
390}
391
392function GetScrollTop(){
393        if (document.documentElement && document.documentElement.scrollTop){
394                return document.documentElement.scrollTop;
395        }
396        else{
397                if (document.body){
398                        return document.body.scrollTop;
399                }
400                else{
401                        return window.pageYOffset;
402                }
403        }
404}
405
406function GetViewportHeight(){
407        if (window.innerWidth){
408                return window.innerWidth;
409        }
410        else{
411                return document.getElementsByTagName('body')[0].clientHeight;
412        }
413}
414
415function TopSettingWithScrollOffset(TopPercent){
416        var T = Math.floor(GetViewportHeight() * (TopPercent/100));
417        return GetScrollTop() + T;
418}
419
420//CODE FOR AVOIDING LOSS OF DATA WHEN BACKSPACE KEY INVOKES history.back()
421var InTextBox = false;
422
423function SuppressBackspace(e){
424        if (InTextBox == true){return;}
425        if (C.ie) {
426                thisKey = window.event.keyCode;
427        }
428        else {
429                thisKey = e.keyCode;
430        }
431
432        var Suppress = false;
433
434        if (thisKey == 8) {
435                Suppress = true;
436        }
437
438        if (Suppress == true){
439                if (C.ie){
440                        window.event.returnValue = false;       
441                        window.event.cancelBubble = true;
442                }
443                else{
444                        e.preventDefault();
445                }
446        }
447}
448
449if (C.ie){
450        document.attachEvent('onkeydown',SuppressBackspace);
451        window.attachEvent('onkeydown',SuppressBackspace);
452}
453else{
454        window.addEventListener('keypress',SuppressBackspace,false);
455}
456
457function WriteToInstructions(Feedback) {
458        document.getElementById('InstructionsDiv').innerHTML = Feedback;
459}
460
461function FocusAButton(){
462        if (document.getElementById('CheckButton1') != null){
463                document.getElementById('CheckButton1').focus();
464        }
465        else{
466                document.getElementsByTagName('button')[0].focus();
467        }
468}
469
470//EXTENSION TO ARRAY OBJECT
471function Array_IndexOf(Input){
472        var Result = -1;
473        for (var i=0; i<this.length; i++){
474                if (this[i] == Input){
475                        Result = i;
476                }
477        }
478        return Result;
479}
480Array.prototype.indexOf = Array_IndexOf;
481
482//IE HAS RENDERING BUG WITH BOTTOM NAVBAR
483function RemoveBottomNavBarForIE(){
484        if ((C.ie)&&(document.getElementById('Reading') != null)){
485                if (document.getElementById('BottomNavBar') != null){
486                        document.getElementById('TheBody').removeChild(document.getElementById('BottomNavBar'));
487                }
488        }
489}
490
491//jmatch6.js
492var TotalUnfixedLeftItems = 0;
493var TotCorrectChoices = 0;
494var Penalties = 0;
495var Finished = false;
496var Score = 0;
497var Interval = null;
498var Locked = false;
499var ShuffleQs = false;
500var QsToShow = 3;
501
502function StartUp(){
503        RemoveBottomNavBarForIE();
504
505        SetUpItems(ShuffleQs,QsToShow);
506
507        TotalUnfixedLeftItems = document.getElementById('MatchDiv').getElementsByTagName('select').length;
508
509//Create arrays
510        CreateStatusArrays();
511
512}
513
514Status = new Array();
515
516function CreateStatusArrays(){
517        var Selects = document.getElementById('Questions').getElementsByTagName('select');
518        for (var x=0; x<Selects.length; x++){
519                Status[x] = new Array();
520                Status[x][0] = 0; // Item not matched correctly yet
521                Status[x][1] = 0; //Tries at this item so far
522                Status[x][2] = Selects[x].id; //Store a ref to the original drop-down
523        }
524}
525
526function GetKeyFromSelectContainer(Container){
527        var Result = -1;
528        if (Container.getElementsByTagName('select').length > 0){
529                var Select = Container.getElementsByTagName('select')[0];
530                if (Select != null){
531                        Result = parseInt(Select.id.substring(1, Select.id.length));
532                }
533        }
534        return Result;
535}
536
537function GetKeyFromSelect(Select){
538        var Result = -1;
539        if (Select != null){
540                Result = parseInt(Select.id.substring(1, Select.id.length));
541        }
542        return Result;
543}
544
545var OriginalKeys = new Array();
546var ReducedKeys = new Array();
547
548function GetUniqueKeys(Container, TargetArray){
549        TargetArray.length = 0;
550        var x = -1;
551        var SList = Container.getElementsByTagName('select');
552        if (SList.length > 0){
553                for (var i=0; i<SList.length; i++){
554                        x = GetKeyFromSelect(SList[i]);
555                        if (TargetArray.indexOf(x) < 0){
556                                TargetArray.push(x);
557                        }
558                }
559        }
560}
561
562function SetUpItems(ShuffleQs, ReduceTo){
563        var QList = new Array();
564        var i, j, k, Selects, Options;
565
566//Remove all the table rows and put them in an array for processing
567        var Qs = document.getElementById('Questions');
568       
569//First, get a list of keys
570        GetUniqueKeys(Qs, OriginalKeys);
571
572//Remove the table rows to an array
573        while (Qs.getElementsByTagName('tr').length > 0){
574                QList.push(Qs.removeChild(Qs.getElementsByTagName('tr')[0]));
575        }
576
577        var Reducing = (QList.length > ReduceTo);
578       
579//If required, select random rows to delete
580        if (Reducing == true){
581                var DumpItem = 0;
582                while (ReduceTo < QList.length){
583       
584//Get a number to delete from the array
585                        DumpItem = Math.floor(QList.length*Math.random());
586                        for (i=DumpItem; i<(QList.length-1); i++){
587                                QList[i] = QList[i+1];
588                        }
589                        QList.length = QList.length-1;
590                }
591        }
592//Shuffle the rows if necessary
593        if (ShuffleQs == true){
594                QList = Shuffle(QList);
595        }
596
597        TotalUnfixedLeftItems = QList.length;
598       
599//Write the rows back to the table body
600        for (i=0; i<QList.length; i++){
601                Qs.appendChild(QList[i]);
602        }
603       
604//Now we need to remove any drop-down options that no longer have associated select items
605        if (Reducing == true){
606                GetUniqueKeys(Qs, ReducedKeys);
607               
608                Selects = Qs.getElementsByTagName('select');
609                for (i=0; i<Selects.length; i++){
610                        Options = Selects[i].getElementsByTagName('option');
611                        for (j=Options.length-1; j>=0; j--){
612                                if (OptionRequired(Options[j].value) == false){
613                                        Selects[i].removeChild(Options[j]);
614                                }
615                        }
616                }
617        }
618}
619
620function OptionRequired(Key){
621        if (ReducedKeys.indexOf(Key) > -1){
622                return true;
623        }
624        else{
625                if (OriginalKeys.indexOf(Key) > -1){
626                        return false;
627                }
628                else{
629                        return true;
630                }
631        }
632}
633
634//-->
635
636//]]>
637
638</script>
639
640
641</head>
642
643<body onload="StartUp()" id="TheBody">
644
645<!-- BeginTopNavButtons -->
646<div class="NavButtonBar" id="TopNavBar">
647<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" onclick="history.back(); return false;"> &lt;= </button>
648<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" onclick="location='index.htm'; return false;"> Index </button>
649<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" onclick="location='nextpage.htm'; return false;">=&gt;</button>
650</div>
651<!-- EndTopNavButtons -->
652
653<div class="Titles">
654        <h2 class="ExerciseTitle">Exercise Title</h2>
655        <h3 class="ExerciseSubtitle">Exercise Subtitle</h3>
656</div>
657
658<div id="InstructionsDiv" class="StdDiv">
659        <p id="Instructions">Instructions</p>
660</div>
661
662<div id="MainDiv" class="StdDiv">
663
664<button id="CheckButton1" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()">&nbsp;Check Button&nbsp;</button>
665
666<div id="MatchDiv" style="text-align: center;">
667
668<form id="QForm" method="post" action="" onsubmit="return false;">
669<table border="0" style="margin: 2em auto 2em auto;"><tbody id="Questions">
670
671<tr><td>Exercise Contents appear here</td></tr>
672<tr><td>Here's a link to the <a href="http://web.uvic.ca/hrd/hotpot/">Hot Potatoes home page</a></td></tr>
673<tr><td>Questions, Answers, etc.</td></tr>
674
675</tbody></table>
676</form>
677</div>
678
679<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()">&nbsp;Check Button&nbsp;</button>
680
681</div>
682
683<div class="Feedback" id="FeedbackDiv">
684<div class="FeedbackText" id="FeedbackContent"></div>
685<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;">&nbsp;OK&nbsp;</button>
686</div>
687
688<!-- BeginBottomNavButtons -->
689<div class="NavButtonBar" id="BottomNavBar">
690<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" ; return false;"> &lt;= </button><!-- onclick="history.back() -->
691<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" ; return false;"> Index </button><!-- onclick="location='index.htm' -->
692<button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" ; return false;"> =&gt; </button> <!-- onclick="location='nextpage.htm' -->
693/div>
694<!-- EndBottomNavButtons -->
695
696</body>
697
698</html>
Note: See TracBrowser for help on using the repository browser.