Monumenti (Drag and Drop)
Bild: Monumenti (Drag and Drop)
Monumenti-dragdrop.htm
— 38 KB
Dateiinhalt
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta name="author" content="Created with Hot Potatoes by Half-Baked Software, registered to Lorenz Manthey."></meta><meta name="keywords" content="Hot Potatoes, Hot Potatoes, Half-Baked Software, Windows, University of Victoria"></meta> <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" /> <meta name="DC:Creator" content="Lorenz Manthey" /> <meta name="DC:Title" content="Monumenti d'Italia" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Monumenti d'Italia </title> <!-- Made with executable version 6.3 Release 0 Build 4 --> <!-- The following insertion allows you to add your own code directly to this head tag from the configuration screen --> <style type="text/css"> /* This is the CSS stylesheet used in the exercise. */ /* Elements in square brackets are replaced by data based on configuration settings when the exercise is built. */ /* BeginCorePageCSS */ /* Made with executable version 6.3 Release 0 Build 4 */ /* Hack to hide a nested Quicktime player from IE, which can't handle it. */ * html object.MediaPlayerNotForIE { display: none; } body{ font-family: Arial,"Georgia Ref",Geneva; background-color: #f2ebb3; color: #000000; margin-right: 5%; margin-left: 5%; font-size: 18pt; } p{ text-align: left; margin: 0px; font-size: 100%; } table,div,span,td{ font-size: 100%; color: #000000; } div.Titles{ padding: 0.5em;; text-align: center; color: #000000; } button{ font-family: Arial,"Georgia Ref",Geneva; font-size: 100%; display: inline; } .ExerciseTitle{ font-size: 140%; color: #000000; } .ExerciseSubtitle{ font-size: 120%; color: #000000; } div.StdDiv{ background-color: #e1d353; text-align: center; font-size: 100%; color: #000000; padding: 0.5em; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #000000; margin-bottom: 1px; } /* EndCorePageCSS */ .RTLText{ text-align: right; font-size: 150%; direction: rtl; font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", Arial,"Georgia Ref",Geneva; } .CentredRTLText{ text-align: center; font-size: 150%; direction: rtl; font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", Arial,"Georgia Ref",Geneva; } button p.RTLText{ text-align: center; } .RTLGapBox{ text-align: right; font-size: 150%; direction: rtl; font-family: "Times New Roman", Arial,"Georgia Ref",Geneva; } .Guess{ font-weight: bold; } .CorrectAnswer{ font-weight: bold; } div#Timer{ padding: 0.25em; margin-left: auto; margin-right: auto; text-align: center; color: #000000; } span#TimerText{ padding: 0.25em; border-width: 1px; border-style: solid; font-weight: bold; display: none; color: #000000; } span.Instructions{ } div.ExerciseText{ } .FeedbackText, .FeedbackText span.CorrectAnswer, .FeedbackText span.Guess, .FeedbackText span.Answer{ color: #000000; } .LeftItem{ font-size: 100%; color: #000000; text-align: left; } .RightItem{ font-weight: bold; font-size: 100%; color: #000000; } span.CorrectMark{ } input, textarea{ font-family: Arial,"Georgia Ref",Geneva; font-size: 120%; } select{ font-size: 100%; } div.Feedback { background-color: #f2ebb3; left: 33%; width: 34%; top: 33%; z-index: 1; border-style: solid; border-width: 1px; padding: 5px; text-align: center; color: #000000; position: absolute; display: none; font-size: 100%; } div.ExerciseDiv{ color: #000000; } /* JMatch flashcard styles */ table.FlashcardTable{ background-color: transparent; color: #000000; border-color: #000000; margin-left: 5%; margin-right: 5%; margin-top: 2em; margin-bottom: 2em; width: 90%; position: relative; text-align: center; padding: 0px; } table.FlashcardTable tr{ border-style: none; margin: 0px; padding: 0px; background-color: #e1d353; } table.FlashcardTable td.Showing{ font-size: 140%; text-align: center; width: 50%; display: table-cell; padding: 2em; margin: 0px; border-style: solid; border-width: 1px; color: #000000; background-color: #e1d353; } table.FlashcardTable td.Hidden{ display: none; } /* JMix styles */ div#SegmentDiv{ margin-top: 2em; margin-bottom: 2em; text-align: center; } a.ExSegment{ font-size: 120%; font-weight: bold; text-decoration: none; color: #000000; } span.RemainingWordList{ font-style: italic; } div.DropLine { position: absolute; text-align: center; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000; width: 80%; } /* JCloze styles */ .ClozeWordList{ text-align: center; font-weight: bold; } div.ClozeBody{ text-align: left; margin-top: 2em; margin-bottom: 2em; line-height: 2.0 } span.GapSpan{ font-weight: bold; } /* JCross styles */ table.CrosswordGrid{ margin: auto auto 1em auto; border-collapse: collapse; padding: 0px; background-color: #000000; } table.CrosswordGrid tbody tr td{ width: 1.5em; height: 1.5em; text-align: center; vertical-align: middle; font-size: 140%; padding: 1px; margin: 0px; border-style: solid; border-width: 1px; border-color: #000000; color: #000000; } table.CrosswordGrid span{ color: #000000; } table.CrosswordGrid td.BlankCell{ background-color: #000000; color: #000000; } table.CrosswordGrid td.LetterOnlyCell{ text-align: center; vertical-align: middle; background-color: #ffffff; color: #000000; font-weight: bold; } table.CrosswordGrid td.NumLetterCell{ text-align: left; vertical-align: top; background-color: #ffffff; color: #000000; padding: 1px; font-weight: bold; } .NumLetterCellText{ cursor: pointer; color: #000000; } .GridNum{ vertical-align: super; font-size: 66%; font-weight: bold; text-decoration: none; color: #000000; } .GridNum:hover, .GridNum:visited{ color: #000000; } table#Clues{ margin: auto; vertical-align: top; } table#Clues td{ vertical-align: top; } table.ClueList{ margin: auto; } td.ClueNum{ text-align: right; font-weight: bold; vertical-align: top; } td.Clue{ text-align: left; } div#ClueEntry{ text-align: left; margin-bottom: 1em; } /* Keypad styles */ div.Keypad{ text-align: center; display: none; /* initially hidden, shown if needed */ margin-bottom: 0.5em; } div.Keypad button{ font-family: Arial,"Georgia Ref",Geneva; font-size: 120%; background-color: #ffffff; color: #000000; width: 2em; } /* JQuiz styles */ div.QuestionNavigation{ text-align: center; } .QNum{ margin: 0em 1em 0.5em 1em; font-weight: bold; vertical-align: middle; } textarea{ font-family: Arial,"Georgia Ref",Geneva; } .QuestionText{ text-align: left; margin: 0px; font-size: 100%; } .Answer{ font-size: 120%; letter-spacing: 0.1em; } .PartialAnswer{ font-size: 120%; letter-spacing: 0.1em; color: #000000; } .Highlight{ color: #000000; background-color: #ffff00; font-weight: bold; font-size: 120%; } ol.QuizQuestions{ text-align: left; list-style-type: none; } li.QuizQuestion{ padding: 1em; border-style: solid; border-width: 0px 0px 1px 0px; } ol.MCAnswers{ text-align: left; list-style-type: upper-alpha; padding: 1em; } ol.MCAnswers li{ margin-bottom: 1em; } ol.MSelAnswers{ text-align: left; list-style-type: lower-alpha; padding: 1em; } div.ShortAnswer{ padding: 1em; } .FuncButton { text-align: center; border-style: solid; border-left-color: #f0e9a9; border-top-color: #f0e9a9; border-right-color: #706929; border-bottom-color: #706929; color: #000000; background-color: #e1d353; border-width: 2px; padding: 3px 6px 3px 6px; cursor: pointer; } .FuncButtonUp { color: #e1d353; text-align: center; border-style: solid; border-left-color: #f0e9a9; border-top-color: #f0e9a9; border-right-color: #706929; border-bottom-color: #706929; background-color: #000000; color: #e1d353; border-width: 2px; padding: 3px 6px 3px 6px; cursor: pointer; } .FuncButtonDown { color: #e1d353; text-align: center; border-style: solid; border-left-color: #706929; border-top-color: #706929; border-right-color: #f0e9a9; border-bottom-color: #f0e9a9; background-color: #000000; color: #e1d353; border-width: 2px; padding: 3px 6px 3px 6px; cursor: pointer; } /*BeginNavBarStyle*/ div.NavButtonBar{ background-color: #e3d257; text-align: center; margin: 2px 0px 2px 0px; clear: both; font-size: 100%; } .NavButton { border-style: solid; border-left-color: #f1e8ab; border-top-color: #f1e8ab; border-right-color: #71692b; border-bottom-color: #71692b; background-color: #e3d257; color: #000000; border-width: 2px; cursor: pointer; } .NavButtonUp { border-style: solid; border-left-color: #f1e8ab; border-top-color: #f1e8ab; border-right-color: #71692b; border-bottom-color: #71692b; color: #e3d257; background-color: #000000; border-width: 2px; cursor: pointer; } .NavButtonDown { border-style: solid; border-left-color: #71692b; border-top-color: #71692b; border-right-color: #f1e8ab; border-bottom-color: #f1e8ab; color: #e3d257; background-color: #000000; border-width: 2px; cursor: pointer; } /*EndNavBarStyle*/ a{ color: #0000cc; } a:visited{ color: #0000ff; } a:hover{ color: #0000cc; } div.CardStyle { position: absolute; font-family: Arial,"Georgia Ref",Geneva; font-size: 100%; padding: 5px; border-style: solid; border-width: 1px; color: #000000; background-color: #e1d353; left: -50px; top: -50px; overflow: visible; } .rtl{ text-align: right; font-size: 140%; } </style> <script type="text/javascript"> //<![CDATA[ <!-- function Client(){ //if not a DOM browser, hopeless this.min = false; if (document.getElementById){this.min = true;}; this.ua = navigator.userAgent; this.name = navigator.appName; this.ver = navigator.appVersion; //Get data about the browser this.mac = (this.ver.indexOf('Mac') != -1); this.win = (this.ver.indexOf('Windows') != -1); //Look for Gecko this.gecko = (this.ua.indexOf('Gecko') > 1); if (this.gecko){ this.geckoVer = parseInt(this.ua.substring(this.ua.indexOf('Gecko')+6, this.ua.length)); if (this.geckoVer < 20020000){this.min = false;} } //Look for Firebird this.firebird = (this.ua.indexOf('Firebird') > 1); //Look for Safari this.safari = (this.ua.indexOf('Safari') > 1); if (this.safari){ this.gecko = false; } //Look for IE this.ie = (this.ua.indexOf('MSIE') > 0); if (this.ie){ this.ieVer = parseFloat(this.ua.substring(this.ua.indexOf('MSIE')+5, this.ua.length)); if (this.ieVer < 5.5){this.min = false;} } //Look for Opera this.opera = (this.ua.indexOf('Opera') > 0); if (this.opera){ this.operaVer = parseFloat(this.ua.substring(this.ua.indexOf('Opera')+6, this.ua.length)); if (this.operaVer < 7.04){this.min = false;} } if (this.min == false){ alert('Your browser may not be able to handle this page.'); } //Special case for the horrible ie5mac this.ie5mac = (this.ie&&this.mac&&(this.ieVer<6)); } var C = new Client(); //for (prop in C){ // alert(prop + ': ' + C[prop]); //} //CODE FOR HANDLING NAV BUTTONS AND FUNCTION BUTTONS //[strNavBarJS] function NavBtnOver(Btn){ if (Btn.className != 'NavButtonDown'){Btn.className = 'NavButtonUp';} } function NavBtnOut(Btn){ Btn.className = 'NavButton'; } function NavBtnDown(Btn){ Btn.className = 'NavButtonDown'; } //[/strNavBarJS] function FuncBtnOver(Btn){ if (Btn.className != 'FuncButtonDown'){Btn.className = 'FuncButtonUp';} } function FuncBtnOut(Btn){ Btn.className = 'FuncButton'; } function FuncBtnDown(Btn){ Btn.className = 'FuncButtonDown'; } function FocusAButton(){ if (document.getElementById('CheckButton1') != null){ document.getElementById('CheckButton1').focus(); } else{ if (document.getElementById('CheckButton2') != null){ document.getElementById('CheckButton2').focus(); } else{ document.getElementsByTagName('button')[0].focus(); } } } //CODE FOR HANDLING DISPLAY OF POPUP FEEDBACK BOX var topZ = 1000; function ShowMessage(Feedback){ var Output = Feedback + '<br /><br />'; document.getElementById('FeedbackContent').innerHTML = Output; var FDiv = document.getElementById('FeedbackDiv'); topZ++; FDiv.style.zIndex = topZ; FDiv.style.top = TopSettingWithScrollOffset(30) + 'px'; FDiv.style.display = 'block'; ShowElements(false, 'input'); ShowElements(false, 'select'); ShowElements(false, 'object'); ShowElements(true, 'object', 'FeedbackContent'); //Focus the OK button setTimeout("document.getElementById('FeedbackOKButton').focus()", 50); // // RefreshImages(); // } function ShowElements(Show, TagName, ContainerToReverse){ // added third argument to allow objects in the feedback box to appear //IE bug -- hide all the form elements that will show through the popup //FF on Mac bug : doesn't redisplay objects whose visibility is set to visible //unless the object's display property is changed //get container object (by Id passed in, or use document otherwise) TopNode = document.getElementById(ContainerToReverse); var Els; if (TopNode != null) { Els = TopNode.getElementsByTagName(TagName); } else { Els = document.getElementsByTagName(TagName); } for (var i=0; i<Els.length; i++){ if (TagName == "object") { //manipulate object elements in all browsers if (Show == true){ Els[i].style.visibility = 'visible'; //get Mac FireFox to manipulate display, to force screen redraw if (C.mac && C.gecko) {Els[i].style.display = '';} } else{ Els[i].style.visibility = 'hidden'; if (C.mac && C.gecko) {Els[i].style.display = 'none';} } } else { // tagName is either input or select (that is, Form Elements) // ie6 has a problem with Form elements, so manipulate those if (C.ie) { if (C.ieVer < 7) { if (Show == true){ Els[i].style.visibility = 'visible'; } else{ Els[i].style.visibility = 'hidden'; } } } } } } function HideFeedback(){ document.getElementById('FeedbackDiv').style.display = 'none'; ShowElements(true, 'input'); ShowElements(true, 'select'); ShowElements(true, 'object'); if (Finished == true){ Finish(); } } //GENERAL UTILITY FUNCTIONS AND VARIABLES //PAGE DIMENSION FUNCTIONS function PageDim(){ //Get the page width and height this.W = 600; this.H = 400; this.W = document.getElementsByTagName('body')[0].clientWidth; this.H = document.getElementsByTagName('body')[0].clientHeight; } var pg = null; function GetPageXY(El) { var XY = {x: 0, y: 0}; while(El){ XY.x += El.offsetLeft; XY.y += El.offsetTop; El = El.offsetParent; } return XY; } function GetScrollTop(){ if (typeof(window.pageYOffset) == 'number'){ return window.pageYOffset; } else{ if ((document.body)&&(document.body.scrollTop)){ return document.body.scrollTop; } else{ if ((document.documentElement)&&(document.documentElement.scrollTop)){ return document.documentElement.scrollTop; } else{ return 0; } } } } function GetViewportHeight(){ if (typeof window.innerHeight != 'undefined'){ return window.innerHeight; } else{ if (((typeof document.documentElement != 'undefined')&&(typeof document.documentElement.clientHeight != 'undefined'))&&(document.documentElement.clientHeight != 0)){ return document.documentElement.clientHeight; } else{ return document.getElementsByTagName('body')[0].clientHeight; } } } function TopSettingWithScrollOffset(TopPercent){ var T = Math.floor(GetViewportHeight() * (TopPercent/100)); return GetScrollTop() + T; } //CODE FOR AVOIDING LOSS OF DATA WHEN BACKSPACE KEY INVOKES history.back() var InTextBox = false; function SuppressBackspace(e){ if (InTextBox == true){return;} if (C.ie) { thisKey = window.event.keyCode; } else { thisKey = e.keyCode; } var Suppress = false; if (thisKey == 8) { Suppress = true; } if (Suppress == true){ if (C.ie){ window.event.returnValue = false; window.event.cancelBubble = true; } else{ e.preventDefault(); } } } if (C.ie){ document.attachEvent('onkeydown',SuppressBackspace); window.attachEvent('onkeydown',SuppressBackspace); } else{ if (window.addEventListener){ window.addEventListener('keypress',SuppressBackspace,false); } } function ReduceItems(InArray, ReduceToSize){ var ItemToDump=0; var j=0; while (InArray.length > ReduceToSize){ ItemToDump = Math.floor(InArray.length*Math.random()); InArray.splice(ItemToDump, 1); } } function Shuffle(InArray){ var Num; var Temp = new Array(); var Len = InArray.length; var j = Len; for (var i=0; i<Len; i++){ Temp[i] = InArray[i]; } for (i=0; i<Len; i++){ Num = Math.floor(j * Math.random()); InArray[i] = Temp[Num]; for (var k=Num; k < (j-1); k++) { Temp[k] = Temp[k+1]; } j--; } return InArray; } function WriteToInstructions(Feedback) { document.getElementById('InstructionsDiv').innerHTML = Feedback; RefreshImages(); } Imgs = new Array(); function PreloadImages(){ var a = PreloadImages.arguments; for (var i=0; i<a.length; i++){ Imgs[i] = new Image(); Imgs[i].src = a[i]; } } function RefreshImages(){ for (var i=0; i<document.images.length; i++){ if (document.images[i].name.substring(0,6) != 'NavBar'){ document.images[i].src = document.images[i].src; } } } function EscapeDoubleQuotes(InString){ return InString.replace(/"/g, '"') } function TrimString(InString){ var x = 0; if (InString.length != 0) { while ((InString.charAt(InString.length - 1) == '\u0020') || (InString.charAt(InString.length - 1) == '\u000A') || (InString.charAt(InString.length - 1) == '\u000D')){ InString = InString.substring(0, InString.length - 1) } while ((InString.charAt(0) == '\u0020') || (InString.charAt(0) == '\u000A') || (InString.charAt(0) == '\u000D')){ InString = InString.substring(1, InString.length) } while (InString.indexOf(' ') != -1) { x = InString.indexOf(' ') InString = InString.substring(0, x) + InString.substring(x+1, InString.length) } return InString; } else { return ''; } } function FindLongest(InArray){ if (InArray.length < 1){return -1;} var Longest = 0; for (var i=1; i<InArray.length; i++){ if (InArray[i].length > InArray[Longest].length){ Longest = i; } } return Longest; } //UNICODE CHARACTER FUNCTIONS function IsCombiningDiacritic(CharNum){ var Result = (((CharNum >= 0x0300)&&(CharNum <= 0x370))||((CharNum >= 0x20d0)&&(CharNum <= 0x20ff))); Result = Result || (((CharNum >= 0x3099)&&(CharNum <= 0x309a))||((CharNum >= 0xfe20)&&(CharNum <= 0xfe23))); return Result; } function IsCJK(CharNum){ return ((CharNum >= 0x3000)&&(CharNum < 0xd800)); } //SETUP FUNCTIONS //BROWSER WILL REFILL TEXT BOXES FROM CACHE IF NOT PREVENTED function ClearTextBoxes(){ var NList = document.getElementsByTagName('input'); for (var i=0; i<NList.length; i++){ if ((NList[i].id.indexOf('Guess') > -1)||(NList[i].id.indexOf('Gap') > -1)){ NList[i].value = ''; } if (NList[i].id.indexOf('Chk') > -1){ NList[i].checked = ''; } } } //EXTENSION TO ARRAY OBJECT function Array_IndexOf(Input){ var Result = -1; for (var i=0; i<this.length; i++){ if (this[i] == Input){ Result = i; } } return Result; } Array.prototype.indexOf = Array_IndexOf; //IE HAS RENDERING BUG WITH BOTTOM NAVBAR function RemoveBottomNavBarForIE(){ if ((C.ie)&&(document.getElementById('Reading') != null)){ if (document.getElementById('BottomNavBar') != null){ document.getElementById('TheBody').removeChild(document.getElementById('BottomNavBar')); } } } //HOTPOTNET-RELATED CODE var HPNStartTime = (new Date()).getTime(); var SubmissionTimeout = 30000; var Detail = ''; //Global that is used to submit tracking data function Finish(){ //If there's a form, fill it out and submit it if (document.store != null){ Frm = document.store; Frm.starttime.value = HPNStartTime; Frm.endtime.value = (new Date()).getTime(); Frm.mark.value = Score; Frm.detail.value = Detail; Frm.submit(); } } function Card(ID, OverlapTolerance){ this.elm=document.getElementById(ID); this.name=ID; this.css=this.elm.style; this.elm.style.left = 0 +'px'; this.elm.style.top = 0 +'px'; this.HomeL = 0; this.HomeT = 0; this.tag=-1; this.index=-1; this.OverlapTolerance = OverlapTolerance; } function CardGetL(){return parseInt(this.css.left)} Card.prototype.GetL=CardGetL; function CardGetT(){return parseInt(this.css.top)} Card.prototype.GetT=CardGetT; function CardGetW(){return parseInt(this.elm.offsetWidth)} Card.prototype.GetW=CardGetW; function CardGetH(){return parseInt(this.elm.offsetHeight)} Card.prototype.GetH=CardGetH; function CardGetB(){return this.GetT()+this.GetH()} Card.prototype.GetB=CardGetB; function CardGetR(){return this.GetL()+this.GetW()} Card.prototype.GetR=CardGetR; function CardSetL(NewL){this.css.left = NewL+'px'} Card.prototype.SetL=CardSetL; function CardSetT(NewT){this.css.top = NewT+'px'} Card.prototype.SetT=CardSetT; function CardSetW(NewW){this.css.width = NewW+'px'} Card.prototype.SetW=CardSetW; function CardSetH(NewH){this.css.height = NewH+'px'} Card.prototype.SetH=CardSetH; function CardInside(X,Y){ var Result=false; if(X>=this.GetL()){if(X<=this.GetR()){if(Y>=this.GetT()){if(Y<=this.GetB()){Result=true;}}}} return Result; } Card.prototype.Inside=CardInside; function CardSwapColours(){ var c=this.css.backgroundColor; this.css.backgroundColor=this.css.color; this.css.color=c; } Card.prototype.SwapColours=CardSwapColours; function CardHighlight(){ this.css.backgroundColor='#000000'; this.css.color='#e1d353'; } Card.prototype.Highlight=CardHighlight; function CardUnhighlight(){ this.css.backgroundColor='#e1d353'; this.css.color='#000000'; } Card.prototype.Unhighlight=CardUnhighlight; function CardOverlap(OtherCard){ var smR=(this.GetR()<(OtherCard.GetR()+this.OverlapTolerance))? this.GetR(): (OtherCard.GetR()+this.OverlapTolerance); var lgL=(this.GetL()>OtherCard.GetL())? this.GetL(): OtherCard.GetL(); var HDim=smR-lgL; if (HDim<1){return 0;} var smB=(this.GetB()<OtherCard.GetB())? this.GetB(): OtherCard.GetB(); var lgT=(this.GetT()>OtherCard.GetT())? this.GetT(): OtherCard.GetT(); var VDim=smB-lgT; if (VDim<1){return 0;} return (HDim*VDim); } Card.prototype.Overlap=CardOverlap; function CardDockToR(OtherCard){ this.SetL(OtherCard.GetR() + 5); this.SetT(OtherCard.GetT()); } Card.prototype.DockToR=CardDockToR; function CardSetHome(){ this.HomeL=this.GetL(); this.HomeT=this.GetT(); } Card.prototype.SetHome=CardSetHome; function CardGoHome(){ this.SetL(this.HomeL); this.SetT(this.HomeT); } Card.prototype.GoHome=CardGoHome; //Fix for 6.2.5.2: avoid image dragging problem in draggable cards function CardSetHTML(HTML){ this.elm.innerHTML = HTML; var DragImgs = this.elm.getElementsByTagName('img'); if (DragImgs.length > 0){ for (var i=0; i<DragImgs.length; i++){ DragImgs[i]. onmousedown = function(){return false;} } } } Card.prototype.SetHTML = CardSetHTML; function doDrag(e) { if (CurrDrag == -1) {return}; if (C.ie){var Ev = window.event}else{var Ev = e} var difX = Ev.clientX-window.lastX; var difY = Ev.clientY-window.lastY; var newX = DC[CurrDrag].GetL()+difX; var newY = DC[CurrDrag].GetT()+difY; DC[CurrDrag].SetL(newX); DC[CurrDrag].SetT(newY); window.lastX = Ev.clientX; window.lastY = Ev.clientY; return false; } function beginDrag(e, DragNum) { CurrDrag = DragNum; if (C.ie){ var Ev = window.event; document.onmousemove=doDrag; document.onmouseup=endDrag; } else{ var Ev = e; window.onmousemove=doDrag; window.onmouseup=endDrag; } DC[CurrDrag].Highlight(); topZ++; DC[CurrDrag].css.zIndex = topZ; window.lastX=Ev.clientX; window.lastY=Ev.clientY; return false; } function endDrag(e) { if (CurrDrag == -1) {return}; DC[CurrDrag].Unhighlight(); if (C.ie){document.onmousemove=null}else{window.onmousemove=null;} onEndDrag(); CurrDrag = -1; //Need a bugfix for Opera focus problem here if (C.opera){FocusAButton();} return true; } var CurrDrag = -1; var topZ = 100; //JMATCH-SPECIFIC CORE JAVASCRIPT CODE var CorrectResponse = 'Esatto!'; var IncorrectResponse = 'Mi dispiace, riprova!'; var YourScoreIs = 'Il tuo punteggio è: '; var DivWidth = 600; //default value var FeedbackWidth = 200; //default var ExBGColor = '#e1d353'; var PageBGColor = '#f2ebb3'; var TextColor = '#000000'; var TitleColor = '#000000'; var Penalties = 0; var Score = 0; var TimeOver = false; var Locked = false; var ShuffleQs = true; var QsToShow = 19; var DragWidth = 200; var LeftColPos = 100; var RightColPos = 500; var DragTop = 120; var Finished = false; var AnswersTried = ''; //Fixed and draggable card arrays FC = new Array(); DC = new Array(); function onEndDrag(){ //Is it dropped on any of the fixed cards? var Docked = false; var DropTarget = DroppedOnFixed(CurrDrag); if (DropTarget > -1){ //If so, send home any card that is currently docked there for (var i=0; i<DC.length; i++){ if (DC[i].tag == DropTarget+1){ DC[i].GoHome(); DC[i].tag = 0; D[i][2] = 0; } } //Dock the dropped card DC[CurrDrag].DockToR(FC[DropTarget]); D[CurrDrag][2] = F[DropTarget][1]; DC[CurrDrag].tag = DropTarget+1; Docked = true; } if (Docked == false){ DC[CurrDrag].GoHome(); DC[CurrDrag].tag = 0; D[CurrDrag][2] = 0; } } function DroppedOnFixed(DNum){ var Result = -1; var OverlapArea = 0; var Temp = 0; for (var i=0; i<FC.length; i++){ Temp = DC[DNum].Overlap(FC[i]); if (Temp > OverlapArea){ OverlapArea = Temp; Result = i; } } return Result; } function StartUp(){ PreloadImages('Monumenti-Bilder/alberobello.jpg','Monumenti-Bilder/castel.jpg','Monumenti-Bilder/colosseo.jpg','Monumenti-Bilder/fontanatrevi.jpg','Monumenti-Bilder/giulietta.jpg','Monumenti-Bilder/sanmarco.jpg','Monumenti-Bilder/matera.jpg','Monumenti-Bilder/milanoduomo.jpg','Monumenti-Bilder/mole.jpg','Monumenti-Bilder/napoli.jpg','Monumenti-Bilder/petersdom.jpg','Monumenti-Bilder/piazzaspagna.jpg','Monumenti-Bilder/pisao.jpg','Monumenti-Bilder/pompeji.jpg','Monumenti-Bilder/pontevecchi.jpg','Monumenti-Bilder/rialto.jpg','Monumenti-Bilder/santantonio.jpg','Monumenti-Bilder/siena.jpg','Monumenti-Bilder/arena.jpg'); //Calculate page dimensions and positions pg = new PageDim(); DivWidth = Math.floor((pg.W*4)/5); DragWidth = Math.floor((DivWidth*3)/10); LeftColPos = Math.floor(pg.W/15); RightColPos = pg.W - (DragWidth + LeftColPos); DragTop = parseInt(document.getElementById('CheckButtonDiv').offsetHeight) + parseInt(document.getElementById('CheckButtonDiv').offsetTop) + 10; if (C.ie){ DragTop += 15; } //Reduce array if required if (QsToShow < F.length){ ReduceItems2(); } //Shuffle the left items if required if (ShuffleQs == true){ F = Shuffle(F); } //Shuffle the items on the right D = Shuffle(D); var CurrTop = DragTop; var TempInt = 0; var DropHome = 0; var Widest = 0; var CardContent = ''; for (var i=0; i<F.length; i++){ CardContent = F[i][0]; FC[i] = new Card('F' + i, 10); FC[i].elm.innerHTML = CardContent; if (FC[i].GetW() > Widest){ Widest = FC[i].GetW(); } } if (Widest > DragWidth){Widest = DragWidth;} CurrTop = DragTop; DragWidth = Math.floor((DivWidth-Widest)/2) - 24; RightColPos = DivWidth + LeftColPos - (DragWidth + 14); var Highest = 0; var WidestRight = 0; for (i=0; i<D.length; i++){ DC[i] = new Card('D' + i, 10); CardContent = D[i][0]; //Fix for 6.2.5.2 problem with dragging images. DC[i].SetHTML(CardContent); //DC[i].elm.innerHTML = CardContent; //old version if (DC[i].GetW() > DragWidth){DC[i].SetW(DragWidth);} DC[i].css.cursor = 'move'; DC[i].css.backgroundColor = '#e1d353'; DC[i].css.color = '#000000'; TempInt = DC[i].GetH(); if (TempInt > Highest){Highest = TempInt;} TempInt = DC[i].GetW(); if (TempInt > WidestRight){WidestRight = TempInt;} } //Fix for 6.2: the reduction by 12 seems to be required -- no idea why! var HeightToSet = Highest-12; var WidthToSet = WidestRight-12; for (i=0; i<D.length; i++){ DC[i].SetT(CurrTop); DC[i].SetL(RightColPos); if (DC[i].GetH() < Highest){ DC[i].SetH(HeightToSet); } if (DC[i].GetW() < WidestRight){ DC[i].SetW(WidthToSet); } DC[i].SetHome(); DC[i].tag = -1; CurrTop = CurrTop + DC[i].GetH() + 5; } CurrTop = DragTop; for (var i=0; i<F.length; i++){ FC[i].SetW(Widest); if (FC[i].GetH() < Highest){ FC[i].SetH(HeightToSet); } FC[i].SetT(CurrTop); FC[i].SetL(LeftColPos); FC[i].SetHome(); TempInt = FC[i].GetH(); CurrTop = CurrTop + TempInt + 5; } } F = new Array(); F[0] = new Array(); F[0][0]='<img src="Monumenti-Bilder/alberobello.jpg" alt="alberobello.jpg" title="alberobello" width="100" height="75"></img><br />'; F[0][1] = 1; F[1] = new Array(); F[1][0]='<img src="Monumenti-Bilder/castel.jpg" alt="castel.jpg" title="castel" width="100" height="75"></img>'; F[1][1] = 2; F[2] = new Array(); F[2][0]='<img src="Monumenti-Bilder/colosseo.jpg" alt="colosseo.jpg" title="colosseo" width="100" height="66"></img>'; F[2][1] = 3; F[3] = new Array(); F[3][0]='<img src="Monumenti-Bilder/fontanatrevi.jpg" alt="fontanatrevi.jpg" title="fontanatrevi" width="100" height="66"></img>'; F[3][1] = 4; F[4] = new Array(); F[4][0]='<img src="Monumenti-Bilder/giulietta.jpg" alt="giulietta.jpg" title="giulietta" width="100" height="150"></img>'; F[4][1] = 5; F[5] = new Array(); F[5][0]='<img src="Monumenti-Bilder/sanmarco.jpg" alt="sanmarco.jpg" title="sanmarco" width="100" height="67"></img>'; F[5][1] = 6; F[6] = new Array(); F[6][0]='<img src="Monumenti-Bilder/matera.jpg" alt="matera.jpg" title="matera" width="100" height="75"></img>'; F[6][1] = 7; F[7] = new Array(); F[7][0]='<img src="Monumenti-Bilder/milanoduomo.jpg" alt="milanoduomo.jpg" title="milanoduomo" width="100" height="68"></img>'; F[7][1] = 8; F[8] = new Array(); F[8][0]='<img src="Monumenti-Bilder/mole.jpg" alt="mole.jpg" title="mole" width="100" height="133"></img>'; F[8][1] = 9; F[9] = new Array(); F[9][0]='<img src="Monumenti-Bilder/napoli.jpg" alt="napoli.jpg" title="napoli" width="100" height="67"></img>'; F[9][1] = 10; F[10] = new Array(); F[10][0]='<img src="Monumenti-Bilder/petersdom.jpg" alt="petersdom.jpg" title="petersdom" width="100" height="75"></img>'; F[10][1] = 11; F[11] = new Array(); F[11][0]='<img src="Monumenti-Bilder/piazzaspagna.jpg" alt="piazzaspagna.jpg" title="piazzaspagna" width="100" height="67"></img>'; F[11][1] = 12; F[12] = new Array(); F[12][0]='<img src="Monumenti-Bilder/pisao.jpg" alt="pisao.jpg" title="pisao" width="100" height="133"></img>'; F[12][1] = 13; F[13] = new Array(); F[13][0]='<img src="Monumenti-Bilder/pompeji.jpg" alt="pompeji.jpg" title="pompeji" width="100" height="75"></img>'; F[13][1] = 14; F[14] = new Array(); F[14][0]='<img src="Monumenti-Bilder/pontevecchi.jpg" alt="pontevecchi.jpg" title="pontevecchi" width="100" height="75"></img>'; F[14][1] = 15; F[15] = new Array(); F[15][0]='<img src="Monumenti-Bilder/rialto.jpg" alt="rialto.jpg" title="rialto" width="100" height="75"></img><br /><br />'; F[15][1] = 16; F[16] = new Array(); F[16][0]='<img src="Monumenti-Bilder/santantonio.jpg" alt="santantonio.jpg" title="santantonio" width="100" height="70"></img>'; F[16][1] = 17; F[17] = new Array(); F[17][0]='<img src="Monumenti-Bilder/siena.jpg" alt="siena.jpg" title="siena" width="100" height="67"></img>'; F[17][1] = 18; F[18] = new Array(); F[18][0]='<img src="Monumenti-Bilder/arena.jpg" alt="arena.jpg" title="arena" width="100" height="67"></img>'; F[18][1] = 19; D = new Array(); D[0] = new Array(); D[0][0]='I trulli di Alberobello'; D[0][1] = 1; D[0][2] = 0; D[1] = new Array(); D[1][0]='Il Castel del Monte, Puglia'; D[1][1] = 2; D[1][2] = 0; D[2] = new Array(); D[2][0]='Il Colosseo, Roma'; D[2][1] = 3; D[2][2] = 0; D[3] = new Array(); D[3][0]='La Fontana di Trevi, Roma'; D[3][1] = 4; D[3][2] = 0; D[4] = new Array(); D[4][0]='La casa di Giulietta, Verona'; D[4][1] = 5; D[4][2] = 0; D[5] = new Array(); D[5][0]='La basilica di San Marco, Venezia'; D[5][1] = 6; D[5][2] = 0; D[6] = new Array(); D[6][0]='I sassi di Matera'; D[6][1] = 7; D[6][2] = 0; D[7] = new Array(); D[7][0]='Il Duomo di Milano'; D[7][1] = 8; D[7][2] = 0; D[8] = new Array(); D[8][0]='La Mole Antonelliana, Torino'; D[8][1] = 9; D[8][2] = 0; D[9] = new Array(); D[9][0]='Il Maschio Angioino, Napoli'; D[9][1] = 10; D[9][2] = 0; D[10] = new Array(); D[10][0]='La basilica di San Pietro, Roma'; D[10][1] = 11; D[10][2] = 0; D[11] = new Array(); D[11][0]='Piazza di Spagna, Roma'; D[11][1] = 12; D[11][2] = 0; D[12] = new Array(); D[12][0]='La torre pendente, Pisa'; D[12][1] = 13; D[12][2] = 0; D[13] = new Array(); D[13][0]='Gli scavi di Pompeji'; D[13][1] = 14; D[13][2] = 0; D[14] = new Array(); D[14][0]='Il Ponte Vecchio, Firenze'; D[14][1] = 15; D[14][2] = 0; D[15] = new Array(); D[15][0]='Il Ponte di Rialto, Venezia'; D[15][1] = 16; D[15][2] = 0; D[16] = new Array(); D[16][0]='La basilica di Sant\'Antonio, Padova'; D[16][1] = 17; D[16][2] = 0; D[17] = new Array(); D[17][0]='Piazza del Campo, Siena'; D[17][1] = 18; D[17][2] = 0; D[18] = new Array(); D[18][0]='L\'Arena, Verona'; D[18][1] = 19; D[18][2] = 0; function ReduceItems2(){ var ItemToDump=0; var j=0; while (F.length > QsToShow){ ItemToDump = Math.floor(F.length*Math.random()); for (j=ItemToDump; j<(F.length-1); j++){ F[j] = F[j+1]; } for (j=ItemToDump; j<(D.length-1); j++){ D[j] = D[j+1]; } F.length = F.length-1; D.length = D.length-1; } } function TimerStartUp(){ setTimeout('StartUp()', 300); } function CheckAnswers(){ if (Locked == true){return;} //Set the default score and response var TotalCorrect = 0; Score = 0; var Feedback = ''; //for each fixed, check to see if the tag value for the draggable is the same as the fixed if (AnswersTried.length > 0){AnswersTried += ' | ';} var i, j; for (i=0; i<D.length; i++){ if (i>0){AnswersTried += ',';} AnswersTried += D[i][1] + '.' + D[i][2] + ''; if ((D[i][2] == D[i][1])&&(D[i][2] > 0)){ TotalCorrect++; } else{ //Change made for version 6.0.3.41: don't send wrong items home, //show them in a more conspicuous way. // DC[i].GoHome(); DC[i].SetL(DC[i].GetL() + 10); DC[i].Highlight(); } } Score = Math.floor((100*(TotalCorrect-Penalties))/F.length); var AllDone = false; if (TotalCorrect == F.length) { AllDone = true; } if (AllDone == true){ Feedback = YourScoreIs + ' ' + Score + '%.'; ShowMessage(Feedback + '<br />' + CorrectResponse); } else { Feedback = YourScoreIs + ' ' + Score + '%.' + '<br />' + IncorrectResponse; ShowMessage(Feedback); Penalties++; // Penalty for inaccurate check } //If the exercise is over, deal with that if ((AllDone == true)||(TimeOver == true)){ TimeOver = true; Locked = true; Finished = true; setTimeout('Finish()', SubmissionTimeout); WriteToInstructions(Feedback); } } //--> //]]> </script> </head> <body onload="TimerStartUp()" id="TheBody" > <!-- BeginTopNavButtons --> <div class="NavButtonBar" id="TopNavBar"> <button class="NavButton" onfocus="NavBtnOver(this)" onblur="NavBtnOut(this)" onmouseover="NavBtnOver(this)" onmouseout="NavBtnOut(this)" onmousedown="NavBtnDown(this)" onmouseup="NavBtnOut(this)" onclick="location='indice.html'; return false;"> Quellennachweise der Fotos und Urheberrechte </button> </div> <!-- EndTopNavButtons --> <div class="Titles"> <h2 class="ExerciseTitle">Monumenti d'Italia</h2> <h3 class="ExerciseSubtitle">Esercizio di abbinamento </h3> </div> <div id="InstructionsDiv" class="StdDiv"> <div id="Instructions"><div align="center">Abbina le descrizioni alle foto</div></div> </div> <div class="StdDiv" id="CheckButtonDiv"> <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()"> Controlla risposta </button> </div> <script type="text/javascript"> //<![CDATA[ <!-- for (var i=0; i<F.length; i++){ document.write('<div id="F' + i + '" class="CardStyle"></div>'); } for (var i=0; i<D.length; i++){ document.write('<div id="D' + i + '" class="CardStyle" onmousedown="beginDrag(event, ' + i + ')"></div>'); } //--> //]]> </script> <div class="Feedback" id="FeedbackDiv"> <div class="FeedbackText" id="FeedbackContent"></div> <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;"> OK </button> </div> <!-- BeginBottomNavButtons --> <!-- EndBottomNavButtons --> <!-- BeginSubmissionForm --> <!-- EndSubmissionForm --> </body> </html>