How to use custom Javascript functions?

Jan 09, 2013

Hi...

I have a course with two videos and a "ticker" which change the state to indicate if the video is finished or started. When I leave the course and return, i need this tickers change to the apropiate color.

In flash, I use "external interface call" to call a javascript funcion in our js. funcions (this functions comunicates with SABa and return a value of the suspend data wich I use to change the tickers once the course loads

I need to replicate that in storyline but i have no idea of code. I don't know how to make the call to the funcion neither in what js file put this functions.

How can I control this behavior to retreive values of the suspendata?

I want to use this method too to control wich slides have the user visited or completes to send the data to the SABA platform and get more info than the final score

I want to begin using Storyline to create courses instead flash but i need to know if i can do things like that... retrieve and put values to the suspend data evreytime i want, and how...

Thanks for help and patience

10 Replies
Steve Flowers

Hi, Juanjo - 

You shouldn't need to use JavaScript to do this It's built-in to Storyline's variable management and you can use states as well as some slide properties to retain the state. Storyline will store and retrieve these values from suspend data for you. 

To create and store values in suspend data, create a variable. You can use triggers to control the value of this variable. Let us know if you need a quick example of this.

If you need to use JavaScript for something, you can use the JavaScript trigger in the triggers panel. I think you can avoid that for the purposes you've described above:)

Juanjo Haro

Oh, an example, please... my role in these questions is to create the flash but i dont' undertand how the scorm works and now i'm alone trying  this

I explain how it works and i need to better undertand (sorry, my english is too poor)

When slide loads (begins) i send false to the suspend-data

When slide finish, i send true to the suspend data

Then when the course starts, i can recover all the suspend data values (1 for slide) and change the markers

Ufff, is hard to me to explain, sorry

One question, i don't know if this can be donde in only a file or has to be done with many files and one slide in each

Thanks for saving my life...

Steve Flowers

Hi, Juanjo - 

See the attached example. This is a quick example that employs three quizzes and three sections. The sections as well as the scores for the quizzes alternately drive the completion marking of the navigation components. This was built during the beta over a year ago so I'm not sure how it will behave today.

If this doesn't work for you, give me a shout. I'll pop it open and simplify

Steve

Juanjo Haro

Hi... Fisrt, i'm very so sorry if i bore you with this or asking so much. We are in a process to change from Flash to html5 and I need to offer the client the same thing we do with flash or similar and depends on this to buy that software, wich i love to use.. and i'm very desperate :(

i've tested this en Reload Scorm Player, wich is the software we use to test the courso we do and i have this.

When i run the course: The suspend data is empy.

in the middle of the course with two slides viewed: the suspend data is empty

What I need is , when the slide begin, send to this suspend_data a "false" value. When the slide finish, i send "true" to this suspend data.  At this point the suspend_data will look like that, depending on which slide are finished or not: true,,,false,true,true,,,false -->one for slide

To do that in the flash, we call this javascript function where "numModActual" is the array poition to change and "numModTotales" is the total number of slides and "cadena" is the array we need to do that:

We call this to fill the suspen_data, so we send the complete array to that point verytime we call the function.

doLMSSetValue("cmi.suspend_data",cadena);

doLMSCommit();

function cambiarEstado(numModActual)

{     

//alert("totalmod cambiarEstado="+numModTotales);

var cadena=new Array(numModTotales);

var cadena_ModVisitadas =new Array(numModTotales);

var ModVisitadas= new Array(numModTotales);

var cadena_ModVisitadas = doLMSGetValue("cmi.suspend_data"); 

ModVisitadas=cadena_ModVisitadas.split(",");

ModVisitadas[numModActual]='false';    

//alert("cadenacambiarEstado="+ModVisitadas[numModActual]);

cadena = ModVisitadas.join(',');

doLMSSetValue("cmi.suspend_data",cadena);

doLMSCommit();

}

When the slide finish we call the function. Here we send a true to the position in suspend_data

/** Function: completarCurso(numModActual)

** Inputs:  numModActual, slide visited

** Description: check the status of the course and send to LMS 

**/

function completarCurso(numModActual)

{

//alert("num apartado="+ numModActual);

var cont=0;

var cadena= new Array(numModTotales);

var ModVisitadas= new Array(numModTotales);

var cadena_ModVisitadas =new Array(numModTotales);

cadena_ModVisitadas = doLMSGetValue("cmi.suspend_data"); 

ModVisitadas=cadena_ModVisitadas.split(",");

//alert("valor del lms="+  ModVisitadas[numModActual]);

if(ModVisitadas[numModActual]!='true')

{

ModVisitadas[numModActual]='true';  

//alert(" HA COMPLETADO  "+ModVisitadas[numModActual]);

cadena = ModVisitadas.join(',');

doLMSSetValue( "cmi.suspend_data",cadena);

doLMSCommit();   

//var cadena_ModVisitadas = doLMSGetValue("cmi.suspend_data"); 

//ModVisitadas=cadena_ModVisitadas.split(",");

}

//Comprobamos que ningun modulo este sin iniciar o sin terminar

for(i=0;i

{

if(ModVisitadas[i]=='true')

{

cont++;

//alert("CURSO COMPLETADO"+cont);

}

if(cont==numModTotales)//Si no existe ningun modulo sin terminar llamo a la funcion completar curso.

{

//completar();

//alert("CURSO COMPLETADO");

}

else//Si falta algun modulo de terminar saco el porcentaje de completados.

{

var completado=cont*10;

var porcentaje=cont*100/numModTotales;

//alert(" HA COMPLETADO EN "+porcentaje+"% DEL CURSO");

}

return ModVisitadas[numModActual];

}

At the end of the course, thats the file shows in suspend data

We need to have here a thing like that "true,true,true,true,true..." one for slide visited.

With this array we can read the values at the beginning of the course and set the menu items to visited or completed to inform the student wich slides are done by him. In flash i call:

function estadoActual(numModActual)

{

//var cadena=new Array(numModTotales);

var cadena_ModVisitadas =new Array(numModTotales);

var ModVisitadas= new Array(numModTotales);

var cadena_ModVisitadas = doLMSGetValue("cmi.suspend_data"); 

ModVisitadas=cadena_ModVisitadas.split(",");

var estado=ModVisitadas[numModActual];

//alert("Estado de la posición "+ numModActual + " = " + estado);

return estado;

}

 

Flash code used:

var tamano=1;    -> NUMBER OF MENU ITEMS

trace("tamaño: "+ tamano);

var i=0;

contador = 0;

for(i=0;i

{

var devolucion = ExternalInterface.call("estadoActual",i); --> CALL THE THE ARRAY OF SUSPEND DATE CREATED BY THE JS FUNCTIONS

// var devolucion = 'true'; 

if(devolucion=='false'){//naranja --> DEVOLUCION IS THE VARIABLE RETURNED BY THE JS FUNCTION (EMPTY, TRUE OF FALSE)

  eval("semaforo_"+[i]).gotoAndStop(2); --> CHANGES THE MENU ITEM

  estados[i] = 2;

  contador = 1;

  aviso._visible = false;

  loadMovieNum("video.swf",1);

}

else if(devolucion==''){//rojo

eval("semaforo_"+[i]).gotoAndStop(1);

estados[i] = 1;

}

else if(devolucion=='true'){//verde

if (i == 1)

{

btn_test.enabled = true;

btn_test._alpha = 100;

}

eval("semaforo_"+[i]).gotoAndStop(3);

estados[i] = 3;

contador = 1;

aviso._visible = false;

loadMovieNum("video.swf",1);

}

 

 

In resume, i need to control what slides are visited to mark in the menu, everytime we begin the course and my client wnats to see the suspend_data with these values to know the progress of their students.

Is a way to do that in Articulate?. If not, how i can call these javascript functions and in wich js file i put the to work with the calls from the slides.

I send you the js file with our functions if you need to check that (sorry that is in spanish)

Thanks for help!

Steve Flowers

Complex answer to this one. Rest assured, all of the slide completion, the states of any persistant stuff, as well as variables are being stored in suspend_data automatically if you're running from an LMS. There's noplace else for that stuff to go

The trouble is, it's pretty obfuscated. You can't really read it the way that you describe (you point this out in your final graphic).

No easy answer here. Is it possible to rip the guts out of the suspend / restore javascript methods? Sure. But that leaves you needing to hand code in those features for each slide or persistent state you want to capture and restore. I wouldn't recommend it.

Juanjo Haro

Oh... so, there's is no way to, at the begginig of the course, see in a menu what slides are done y what not? I mean, when the students leaves the course, all restore to initial states?

Ok, assuiming this is not possible and I try the javascrip method... how can i put my functions y which js file and how can i call it from the slide?

Juanjo Haro

Yeah, i understand that but what variables... some kind of system... how to read that info from the lms or whatever...

Sorry man, i can understand how all this works cause is my first time dealing wich such a thing... is so frustrating and i'm very sorry to bore you with this

Can you send me a file, or example where this is used and still asking for the javascript question...

:(

Juanjo Haro

Hi... it was question to change my way of thinking (this is not flash and it is done. But now i have another question...

I have a button iniatially disabled what changes to normal when the time line starts and some variables changes to 1. In flash works fine, running in Moodle and Reload Scorm Player but i IPad, running on moodle and web, this buttons appears from the fisrt time active...

Any suggestions?

This discussion is closed. You can start a new discussion or contact Articulate Support.