/***** * TEPE e-Learning Interactions * JavaScript Library * Author: GB * Date: 15 March 2004 ***/ /***** * getObj(sId, [sNest]) * Description: Returns the appropriate object reference, cross-browser. * If NN4 and you wish to reference a nested layer, pass the parent layer id as well (nest), otherwise omit. * Parameters: sId - id of the layer you wish to return * sNest - optional, required for NN4 only. id of container layer if target layer is nested. * Author: GB * Date: 15 March 2004 ***/ function getObj(sId, sNest) { if (document.getElementById) { //return document.getElementById(sId) if (document.getElementById(sId)!==null && document.getElementById(sId)!==undefined) return document.getElementById(sId) // else alert("Object '" + sId + "' not found"); } else if (document.all) return document.all[sId]; else if (document.layers) if (sNest != ''){ return eval('document.'+sNest+'.document.layers["'+sId+'"]'); } else { return document.layers[sId]; } } /***** * hideLayer(sId, [bPersists]) * Description: Hides a specified object * You may optionally persist the space left by the object * Parameters: sId - id of the object you wish to hide * bPersists - optional, set to true to persist space consumed by the object. default action is to collapse space. * Author: GB * Date: 15 March 2004 ***/ function hideLayer(sId, bPersists) { targetLayer = getObj(sId); if (bPersists==true) { targetLayer.style.visibility='hidden'; } else { targetLayer.style.display='none'; } } /***** * showLayer(sId) * Description: Displays a specified object * Space is always expanded (there is no point in setting an object to 'block' if it is invisible!) * Parameters: sId - id of the object you wish to show * Author: GB * Date: 15 March 2004 ***/ function showLayer(sId) { targetLayer = getObj(sId); if (targetLayer!==null && targetLayer!==undefined) { targetLayer.style.display='block'; targetLayer.style.visibility='visible'; if(document.all && document.getElementById) targetLayer.filters.alpha.opacity=100; if(!document.all && document.getElementById) targetLayer.style.MozOpacity=100; } } /***** * toggleLayer(sId, bPersists) * Description: Displays a specified object * Space is always expanded (there is no point in setting an object to 'block' if it is invisible!) * Parameters: sId - id of the object you wish to show * Author: GB * Date: 15 March 2004 ***/ function toggleLayer(sId, bPersists) { targetLayer = getObj(sId); // if we're persisting the space occupied by the object, alter visibility. otherwise alter display, which is the default. if (bPersists==true) { if (targetLayer.style.visibility=='' || targetLayer.style.visibility=='visible') { targetLayer.style.visibility='hidden'; } else { targetLayer.style.visibility='visible'; } } else { if (targetLayer.style.display=='' || targetLayer.style.display=='block') { targetLayer.style.display='none'; } else { targetLayer.style.display='block'; } } } /***** * initMouseLayer() * Description: Sets up page to deal with a mouse layer object. *

- This must be inserted below the tag * Parameters: None * Author: GB * Date: 16 March 2004 ***/ function initMouseLayer() { if (document.layers) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = setMouseLayerPosition; } /***** * setMouseLayerPosition(e) * Description: Sets the position of the mouselayer object * Parameters: None (I believe the e is an event passed for netscape compatibility) * Author: GB * Date: 16 March 2004 ***/ function setMouseLayerPosition(e) { var x = (document.layers) ? e.pageX : event.x+document.body.scrollLeft; var y = (document.layers) ? e.pageY : event.y+document.body.scrollTop; getObj('mouseLayer').style.left = x - 60; getObj('mouseLayer').style.top = y + 20; } /***** * showMouseLayer(sText,sClassName) * Description: Displays the appropriate mouseover text and sets the layer to the specified class * Parameters: sText - HTML to write to the layer * sClassName - Name of the CSS class to use for the layer * Author: GB * Date: 16 March 2004 ***/ function showMouseLayer(sText,sClassName) { if (document.layers) { getObj('mouseLayer').document.write(sText); getObj('mouseLayer').document.close(); getObj('mouseLayer').style.visibility = "visible"; (sClassName==null)? getObj('mouseLayer').className='default' : getObj('mouseLayer').className=sClassName; } else if (document.all) { getObj('mouseLayer').innerHTML = sText; getObj('mouseLayer').style.visibility = "visible"; (sClassName==null)? getObj('mouseLayer').className='default' : getObj('mouseLayer').className=sClassName; } } /***** * hideMouseLayer() * Description: Hides the mouse layer * Parameters: None * Author: GB * Date: 16 March 2004 ***/ function hideMouseLayer() { getObj('mouseLayer').style.visibility = "hidden"; } /***** * fadeLayersIn(sId/asId, [lDelay]) * Description: Fades in layer * Parameters: sId - string/array of the layer(s) you wish to reveal * lDelay - delay in milliseconds between displaying the next layer. default is 1 second. * Ignore lFadeLayerLoop/lOpacityCount - these are used internally as the func is called recursively * Author: GB * Date: 18 March 2004 ***/ function fadeLayersIn(asId,lDelay, lFadeLayerLoop, lOpacityCount) { // if only a string is passed rather than the preferred array, it cleverly handles it! if(typeof(asId)=='string') asId=[asId]; // sets default values if this is the first time the function has been run. if (lDelay==null) lDelay=1000; if (lFadeLayerLoop==null) lFadeLayerLoop=0; targetLayer = getObj(asId[lFadeLayerLoop]); if (lOpacityCount==null) { if (targetLayer!==null && targetLayer!==undefined) { if(document.all && document.getElementById) lOpacityCount=targetLayer.filters.alpha.opacity; if(!document.all && document.getElementById) lOpacityCount=targetLayer.style.MozOpacity; } } // Creates a string based version of the array, ready to pass back to fadeLayersIn // This is basically because setTimeout is a bit of a hack - you can't pass a reference to an existing variable sIds=""; for (j=0;j0) sIds=sIds+","; sIds=sIds+"'"+asId[j] +"'"; } // if you're fading layers in, you're going to want to show them // this makes sure they're visible the first time this loop is run if (lOpacityCount==0) showLayer(asId[lFadeLayerLoop]); if(lOpacityCount!=100){ lOpacityCount+=2; if (targetLayer!==null && targetLayer!==undefined) { if(document.all && document.getElementById) targetLayer.filters.alpha.opacity = lOpacityCount; if(!document.all && document.getElementById) targetLayer.style.MozOpacity = lOpacityCount/100; setTimeout("fadeLayersIn([" + sIds + "],"+lDelay+","+lFadeLayerLoop+","+lOpacityCount+")"); } } else { lOpacityCount=0; lFadeLayerLoop++; if (lFadeLayerLoop0) sIds=sIds+","; sIds=sIds+"'"+asId[j] +"'"; } // if you're fading layers in, you're going to want to show them // this makes sure they're visible the first time this loop is run //if (lOpacityCount==0) showLayer(asId[lFadeLayerLoop]); if(lOpacityCount !==0){ lOpacityCount-=4; if (targetLayer!==null && targetLayer!==undefined) { if(document.all && document.getElementById) targetLayer.filters.alpha.opacity = lOpacityCount; if(!document.all && document.getElementById) targetLayer.style.MozOpacity = lOpacityCount/100; setTimeout("fadeLayersOut([" + sIds + "],"+lDelay+","+lFadeLayerLoop+","+lOpacityCount+")"); } } else { lOpacityCount=0; lFadeLayerLoop++; targetLayer.style.display='none'; if (lFadeLayerLoop0)&&(vOverlap>0))?hOverlap*vOverlap:0; // if the amount that is overlapping is more than our target amount (a quarter)... if(areaOverlap>requiredAreaOverlap){ // if the layer we're dragging is currently visible... if (dndlayer.style.visibility=='visible') { requiredAreaOverlap=areaOverlap; dndlayer.style.visibility='hidden'; document.all('target').children[0].src=dndlayer.children[0].src; document.all('target').style.cursor='move'; DragEl.style.cursor=''; if (DragEl.parentElement.id!=='target') chosenOption=DragEl.parentElement.id; } } else { dndlayer.style.visibility='hidden'; if (chosenOption!==undefined) { document.all(chosenOption).children[0].src=dndlayer.children[0].src; document.all(chosenOption).style.cursor='move'; } document.all('target').style.cursor=''; chosenOption=undefined; return; } DragEl=null; } function submitAnswer() { if (chosenOption!==undefined) { //document.all("answer1").value=chosenOption; alert(chosenOption); // frmQuestion.submit(); } else { alert("Please drag your impression of the individual to the 'DRAG HERE!' box before clicking 'Next'."); return false; } } /*** Deprecated Functions ***/ /***** * setLayerView(sId, sDisplay, sVisibility) * Description: Displays a layer. This layer does not consume screen space. * Parameters: sID - name of the layer you wish to reveal * Author: GB * Date: 15 March 2004 ***/ function setLayerView(sId, sDisplay,sVisibility) { targetLayer = getObj(sId); targetLayer.style.display=sDisplay; targetLayer.style.visibility=sVisibility; }