Tuesday, April 1, 2014

Secrets & Special Javascript Tricks

Secrets & Special Javascript Tricks

  • Refresh the Page
Create an action like this:
On: Mouse Click
Action: Modify Variable
Target: temp (Dummy Variable)
Value: Javascript: window.location.reload()
  • Close Button
In some cases a button with the Exit course / close window action does not work. If that happens to you, try this:

Add another action to the Exit button with:
On: Mouse Click
Action: Go To
Target: Web Address
Value: Javascript: top.window.close()

A recent tip from the Lectora forum by Tecocat was to "make sure that in your Publish options, you check the option that says ‘Published Content will be Presented in a Separate window than
the LMS.’ This will enable you to use the Exit Title action in Lectora when publishing to SCORM."
  • Get Current URL for Bookmarking
On: Show
Action: Modify Variable
Target: _bookmark (a retained variable)
Value: Javascript: location.href
Then, on returning to the course, the first page checks the variable _bookmark for not equal to zero and runs a Go To Web Address action using Var(_bookmark) as the target. Make sure this action does not run on the first page, otherwise it will overwrite your bookmark with the address of the first page.
  • Change the Browser Bar
To change the ½ inch bar at the top of the window which normally contains the page name, create an HTML object with this code. Remember you must have an action on the page that references the CurrentTitleName somehow.

<script>
x = VarCurrentTitleName.value;
x = x + " Course"+ unescape("%A0%A0%A0%A0%A0%A0%A0%A0%A0%A0%A0");
// the above inserts spaces to move the browser name to the right
document.title = x;  </script>

  • How to Reverse the Student Name from an LMS
The name you get from an LMS is in the form of “last, first middle”. To reverse them code this action with the below JavaScript function.

Action: Modify Variable
Target: _studentName
Value: Javascript: reverseName()
Condition: AICC_Student_Name  Is Not Empty
And in an HTML object enter this JavaScript:
<script language = "JavaScript">
function reverseName(){
    var temp = AICC_Student_Name.getValue().split(",");
    return temp[1] + " " + temp[0];
}
</script>
  • How to Disable the Browser Back Button
When someone clicks the IE back button, this code prevents the page from showing and returns immediately to the page where the back button was clicked.
  1. Click the "Add External HTML" button on the toolbar.
  2. From the Object Type dropdown menu, select "Meta tags".
  3. In the Custom HTML box type the following code: 
<script>history.forward();</script>
  • Dynamically Change the Which Object is on Top (Layering)
Use it like this:

On: Click
Action: Modify Variable
Target: any variable
Value: Javascript: HTMLname.objLyr.styObj.zIndex=1

where HTML name is the HTML name of your object from the General tab of the object properties. You may have to turn this on in File menu > Preferences. A high number brings it to the front, a low number pushes it to the back.
 
  • Trim Leading and Trailing Spaces
This function is useful to apply before evaluating a fill-in-the-blank question.

<script>
function trim(ans) {
  var s=ans.getValue()
  while (s.substring(0,1) == ' ') {
      s = s.substring(1,s.length);   }
  while (s.substring(s.length-1,s.length) == ' ') {
      s = s.substring(0,s.length-1);   }
return s; }
</script>

Use it like this:
On: Click
Action: Modify Variable
Target: Question_0001 (or whatever your question variable is)
Value: Javascript: trim(VarQuestion_0001)
  • How to Set the Focus on a Specific Entry Box
When you want to make it so that the cursor is in a specific entry box, you need to make it have the current focus. To do that, first open the properties of the entry box and get the HTML name and the entry name. 

Then create an action that looks generally like this:

On: show
Acton: Modify variable
Target: temp
Value: Javascript: document.entry17624form.Entry_1.focus()

For example, if the HTMLname = entry37 and the Entry name was Entry_1, then the value property would look like this:

Javascript: document.entry37form.Entry_1.focus()
  • How to Change the Background Color in a Table of Contents
Sometimes you may want to change the highlight color in a TOC, especially when you have selected a dark background with light text. In this case a light highlight color washes out the text.

Here is the action you need to change the highlight color to burgundy.
On: show
Acton: Modify variable
Target: temp
Value: Javascript: tocXXX.selNode.navObj.style.backgroundColor = '#6A0010'
Or
Value: Javascript: tocXXX.selNode.navObj.style.backgroundColor =
'rgb(106,0,16)'
Where tocXXX is the HTML name of your table of contents.
  • Change Cookie Retention
Try this as it seems to do the trick.

Note: This changes a Trivantis Javascript file. Do so at your own risk. I suggest you make a copy of this file before making the changes. Once modified, Trivantis no longer supports the file.

1. Open trivantis-cookies.js in C:\Program Files\Trivantis\Lectora Professional Publishing Suite\Support Files.

Insert
 if( typeof Var_expireDays !=  "undefined") days = Var_expireDays.getValue()  ;
right after line 8: if (days)  {

2. In your Lectora title, create retained variable  _expireDays and add a title level action that modifies _expireDays and sets it to either 30 or 90. This action needs to be on ALL pages (not popups).

Visit here to view the trivantis cookie = your computer user name+@~~local~~...
  • Display All Named Objects
function displayNames (){
// list all object ids and names
//alert("in")
var text = "";
var y = "";
for(x=0;x<document.all.length;x++){
txt = "(";
   if (document.all[x].id ){ txt = txt + "id="+document.all[x].id ;}
txt = txt + ",";
   if (document.all[x].name){ txt = txt + "  name=" + document.all[x].name;}
txt = txt + ")";
if (txt == "(,)") {txt = ""}
else {
text = text + txt + "\r";
y = y + txt + "</br>";
}
}
newwindow=window.open();
newdocument=newwindow.document;
newdocument.write(y);
inputObject.visibility = "hidden"
alert (text);
}
  • Display an Object's Properties
function displayProperties(inputObj, inputObjectName){
//function displayProperties(inputObjectName){
// Javascript: displayProperties(inputObj,"qu449")
//var result = new Array (0);
//alert("in")
var inputObject = inputObj
//varinputObject = document.getElementById(inputObjectName)
var properties = new Array (0);
var objects = new Array(0);
    var counter=1
    for (var i in inputObject) {
// if (typeof inputObject[i] == "object") objects.push ("<br>
>>"+inputObjectName + "." + i + " = " + inputObject[i] );
// else properties.push ("<br> >>"+inputObjectName + "." + i + " = " +
inputObject[i] );
if (typeof inputObject[i] == "object") objects.push ("<br>
>>"+inputObjectName + "." + i + " = " + inputObject[i] );
else properties.push ("<br> >>"+inputObjectName + "." + i + " = " +
inputObject[i] );
    }
properties = properties.sort();
objects = objects.sort()
x= properties.join() +
"<br>===============================<br>"+objects.join()
//alert(x.indexOf("0001"))
//alert(x)
//document.writeln(x)
newwindow=window.open();
newdocument=newwindow.document;
newdocument.write(x);
inputObject.visibility = "hidden"
}
  • Entering JavaScript Commands in the Browser Address Field
Instead of entering code within your module, during debugging you can enter JavaScript commands in the address bar. You don’t always get the same results as entering them inline in the code. This is particularly useful with the above two functions. Enter them like this:

Javascript: displayNames()
Javascript: displayProperties(HTMLname of an object)
  • How to Keep a Window on Top
Enter this into an HTML object.
<body onBlur="window.focus();">
  • How to Change Size and Location of Debug Window
I do not like the default location and size of the debug window so I figured out a way to change them. 

In Windows, navigate to the trivantis.js file which resides in "C:\Program Files\Trivantis\...\Support Files".
 
About line 44 you will find this line of code. I don’t remember the exact original height but I think it was 400.

topWnd.trivDebugWnd   = topWnd.open( 'trivantisdebug.html', 'TrivantisDebug',
'width=400,height=400,scrollbars=0,resizable=1,menubar=0,toolbar=0,location=0,s
tatus=0')

Change it and add the two parameters I show underlined at the end for positioning it on the screen.

topWnd.trivDebugWnd   = topWnd.open( 'trivantisdebug.html', 'TrivantisDebug',
'width=550,height=1100,scrollbars=0,resizable=1,menubar=0,toolbar=0,location=0,
status=0, top=0, left=0')
  • How to Hide/Show an Object Using JavaScript
Put one of these in the Value property of a Modify Variable action.

Javascript: image781.objLyr.hide();  Javascript: image781.objLyr.show()

Have not tried this but it might also work:

Javascript: img1234.actionShow();
  • How to Hide the Tooltip that Pops Up in a Multiple Choice Dropdown List Question
Create an HTML object and insert the following code in it.

<script>
function clearTitle(HTMLobjName) {
var Qname = HTMLobjName.name
var inputObject = HTMLobjName;
var comboBox = inputObject.childArray
var comboBoxName = comboBox[1]
var titleID = comboBoxName+"form"
//alert("title.id" = titleID)
var comboForm = document.getElementById(titleID)
//alert(comboForm)
var comboObject = comboForm.children[0]
//alert(comboObject.title)
comboObject.title = "";
}
</script>

Add an On Show action to the page as follows:

Action: Modify Variable
Target: any variable
Value: Javascript: clearTitle(qu999) 

"where qu999 is your the HTML object  name of your question".

No comments:

Post a Comment