Gracias a la nueva función de interfaz JavaScript, Adobe Captivate permite a los usuarios crear contenido aún más eficaz. Esta función ofrece una plataforma común para la ejecución de acciones JavaScript entre SWF y HTML. Además, facilita todavía más el acceso al contenido mediante JavaScript.

Ahora, puede escribir fragmentos de código JavaScript más pequeños para acceder a distintas variables del contenido. Puede suscribirse a los distintos eventos generados por el contenido. Además, puede llevar a cabo todas estas pequeñas y eficaces tareas fácilmente, sin preocuparse por si el contenido es SWF o HTML. 

La interfaz común de JavaScript puede usarse de dos maneras: 

  1. Ejecutar acciones de JavaScript desde el proyecto de Captivate. 
  2. Agregar código JavaScript al contenido html publicado en tiempo de ejecución.
Consulte la sección Ejemplos para obtener más información. 

Como puede verse en el diagrama anterior, JavaScript actúa como una interfaz entre el navegador y el contenido (SWF/HTML5). 

cpAPIInterface

Este es el objeto principal que contiene toda la interfaz JavaScript. Contiene diversas funciones de utilidad pequeñas que se requieren a menudo en las acciones Ejecutar Javascript. 

cpAPIInterface es un objeto disponible en el ámbito de ventana. Para acceder al objeto de interfaz, se recomienda el uso siguiente: window.cpAPIInterface

Métodos:

Nombre

Descripción

Parámetros

Uso

getVariableValue Devuelve el valor del nombre de variable proporcionado. - window.cpAPIInterface.
getVariableValue
("cpQuizInfoStudentID");
setVariableValue Define el valor del nombre de variable proporcionado con el valor especificado. variableName:Cadena window.cpAPIInterface.
setVariableValue
("cpQuizInfoStudentID",
"John");
play Reproduce la película.   window.cpAPIInterface.
play();
pause Pone en pausa la película.   window.cpAPIInterface.
pause();
stop Detiene la película.   window.cpAPIInterface.
stop();
rewind Rebobina y reproduce la película.   window.cpAPIInterface.
rewind();
next La película pasa a la diapositiva siguiente.   window.cpAPIInterface.
next();
previous La película pasa a la diapositiva anterior.   window.cpAPIInterface.
previous();
fastForward Aumenta la velocidad de la película a 2x, después a 4x y después vuelve a la reproducción normal al realizarse llamadas consecutivas.   window.cpAPIInterface.
fastForward();
getPlaySpeed Devuelve la velocidad de reproducción de la película en fotogramas por segundo (fps).   window.cpAPIInterface.
getPlaySpeed();
getDurationInFrames Devuelve el número total de fotogramas de la película.   window.cpAPIInterface.
getDurationInFrames();
getDurationInSeconds Devuelve la duración total de la película en segundos.   window.cpAPIInterface.
getDurationInSeconds();
getVolume Devuelve el volumen de la película en modo de porcentaje.   window.cpAPIInterface.
getVolume();
setVolume Define el volumen de la película. volume:Número (intervalo : 0 - 1) window.cpAPIInterface.
setVolume(0.7);
navigateToTime Accede a un tiempo determinado (milisegundos) de la película. timeInMilliseconds:Número window.cpAPIInterface.
navigateToTime(3000);
canNavigateToTime Devuelve el valor booleano que muestra si se puede o no acceder a un tiempo determinado de la película. timeInMilliseconds:Número window.cpAPIInterface.
canNavigateToTime(3000);
getCurrentFrame Devuelve el fotograma actual de la película.   window.cpAPIInterface.
getCurrentFrame();
getCurrentSlideIndex Devuelve el índice de diapositivas actual de la película.   window.cpAPIInterface.
getCurrentSlideIndex();
getEventEmitter El identificador se devuelve al objeto cpAPIEventEmitter.   window.cpAPIInterface.
getEventEmitter();

cpAPIEventEmitter

Este objeto se parece a cualquier otro administrador de eventos. Proporciona un mecanismo para suscribirse o anular la suscripción a distintos eventos generados dentro del contenido.

cpAPIEventEmitter es un objeto disponible en el ámbito de ventana. Para acceder al objeto de interfaz, se recomienda el uso siguiente: window.cpAPIEventEmitter

Métodos:

Nombre Descripción Parámetros Uso
add
EventListener
Agrega una función de escucha de eventos a un evento determinado.
  • eventName : uno de los
    nombres de evento que se muestran en esta página.
  • eventListenerFunction :
    cualquier función de JavaScript.
  • variableName : 
    1. opcional. 
    2. Uno de los nombres de variable de
      Captivate cuyo cambio de valor debe notificarse.
    3. Solo debe usarse con el evento
      CPAPI_
      VARIABLEVALUECHANGED.
  • window.
    cpAPIEventEmitter.
    addEventListener("CPAPI_
    MOVIESTART
    ",
    function(){alert
    ("Película empezada");});
  • window.
    cpAPIEventEmitter.
    addEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert("Valor
    de variable cambiado");},
    "cpQuizInfoStudentID");
remove
EventListener
Elimina la función de escucha de eventos de un evento determinado.
  • eventName :
    uno de los nombres de evento que se muestran
    en esta página.
  • eventListenerFunction : cualquier
    función de JavaScript.
  • variableName : 
    • opcional. 
    • Uno de los nombres de variable de
      Captivate cuyo cambio de valor debe notificarse.
    • Solo debe usarse con el evento CPAPI_
      VARIABLEVALUECHANGED.
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_MOVIESTART",
    function()
    {alert("Película empezada");});
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert
    ("Valor de variable cambiado");},
    "cpQuizInfoStudentID");

Lista de eventos:

Nombre Descripción Datos de evento Enumeraciones

CPAPI_SLIDEENTER

Informa de que la película ha entrado en una nueva diapositiva.

slideNumber=NÚMERO;

frameNumber=NÚMERO;

 lcpversion=CADENA;

 

CPAPI_SLIDEEXIT

Informa de que la película está saliendo de una diapositiva.

slideNumber=NÚMERO;

frameNumber=NÚMERO;

lcpversion=CADENA;

percentageSlideSeen=
NÚMERO;

 
CPAPI_
STARTPLAYBARSCRUBBING
Informa de que el usuario ha empezado a desplazarse por la película con la barra de reproducción.    
CPAPI_
ENDPLAYBARSCRUBBING
Informa de que el usuario ha dejado de desplazarse por la película con la barra de reproducción.    
CPAPI_
INTERACTIVEITEMSUBMIT
Informa de que el usuario ha interactuado con un elemento interactivo. frameNumber=NÚMERO;
includedInQuiz=BOOLEANO;
issuccess=BOOLEANO;
itemname=CADENA;
objecttype=NÚMERO;
questioneventdata=
[object Object];
slideNumber=NÚMERO;
 
CPAPI_MOVIEPAUSE Informa de que la película se ha puesto en pausa.    
CPAPI_MOVIERESUME Informa de que la película ha vuelto a reproducirse después de estar en pausa.    
CPAPI_MOVIESTART Informa de que la película se ha iniciado.    
CPAPI_MOVIESTOP Informa de que la película se ha detenido.    
CPAPI_QUESTIONSKIP Informa de que el usuario ha omitido una diapositiva de pregunta. correctAnswer=CADENA;
infiniteAttempts=BOOLEANO;
interactionID=NÚMERO;
objectiveID=CADENA;
questionAnswered=BOOLEANO;
questionAnsweredCorrectly
=BOOLEANO;
questionAttempts=NÚMERO;
questionMaxAttempts=NÚMERO;
questionMaxScore=NÚMERO;
questionNumber=NÚMERO;
questionScore=NÚMERO;
questionScoringType=
[object Object],{Name:CADENA};
questionType=CADENA;
quizName=CADENA;
reportAnswers=BOOLEANO;
selectedAnswer=CADENA;
slideNumber=NÚMERO;

interactionType -

  • opción múltiple
  • verdadero/falso
  • rellenar
  • rellenar (largo)
  • zona interactiva
  • secuencia
  • asociación
  • likert

questionType -

  • opción múltiple
  • verdadero/falso
  • rellenar
  • rellenar (largo)
  • zona interactiva
  • secuencia
  • asociación
  • likert

questionScoringType
["Nombre"]
 -

  • Prueba preliminar
  • Pregunta calificada
  • Pregunta de encuesta
CPAPI_QUESTIONSUBMIT Informa de que el usuario ha respondido a una diapositiva de pregunta. correctAnswer=CADENA;
infiniteAttempts=BOOLEANO;
interactionID=NÚMERO;
objectiveID=CADENA;
questionAnswered=BOOLEANO;
questionAnsweredCorrectly=
BOOLEANO;
questionAttempts=NÚMERO;
questionMaxAttempts=NÚMERO;
questionMaxScore=NÚMERO;
questionNumber=NÚMERO;
questionScore=NÚMERO;
questionScoringType=[object Object],{Name:CADENA};
questionType=CADENA;
quizName=CADENA;
reportAnswers=BOOLEANO;
selectedAnswer=CADENA;
slideNumber=NÚMERO;
 
CPAPI_
VARIABLEVALUECHANGED

La suscripción a este evento requiere un parámetro adicional: variableName. Una vez iniciada la suscripción, se notificará cualquier cambio realizado en la variable proporcionada.

captivateVersion=STRING;
varName=STRING;
oldVal=STRING;
newVal=STRING;

 

moduleReadyEvent

El contenido de Captivate también publica un evento moduleReadyEvent en el objeto de ventana principal para informar de que el contenido se ha cargado. Los usuarios pueden usar este evento como notificación de la disponibilidad de la interfaz JavaScript. El fragmento de código siguiente le permite agregar una función de escucha a moduleReadyEvent :

window.addEventListener("moduleReadyEvent", function(evt)
{
	//evt.Data carries the interface object.
	//It is same as window.cpAPIInterface
	var interfaceObj = evt.Data;
	var eventEmitterObj = interfaceObj.getEventEmitter();
});

Ejemplos

Generación de un número aleatorio

El código siguiente genera un número aleatorio entre 0 y 1.

alert(Math.random());

El código siguiente genera un número entre 1 y 10.

alert(Math.floor((Math.random()*10)+1));

El código siguiente utiliza una función para generar un número aleatorio entre dos enteros que se transfieren como argumentosenla función.

function getRandomInt(min, max) {
   var jsRandomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
   alert(jsRandomNumber);
}

getRandomInt(10, 300);

Uso de la geolocalización

Con la geolocalización, puede utilizar la ubicación geográfica del estudiante para activar ciertos eventos en un curso o determinar qué objetos de aprendizaje permanecen ocultos o se muestran.

Puede configurar esta situación utilizando Acciones avanzadas, pero también establecer el soporte de la geolocalización utilizando JavaScript.

  1. Cree una variable del tipo Geoubicación y asígnele los valores siguientes:

    • Latitud
    • Longitud
    • Precisión
  2. Cree un proyecto con dos objetos,ss1y ss2.

    En función de la variable Geoubicación configurada, mostrará el objeto ss2 y ocultará el objeto ss1.

    Nota:

    Para ocultar un objeto, utilice cp.hide("object_name");

    Para mostrar un objeto, utilice cp.show("object_name");

  3. En la primera diapositiva, seleccione Acciones y Ejecutar JavaScript en la lista desplegable Al entrar. En la ventana Script, introduzca el código siguiente:

    window.cpAPIInterface.setVariableValue("cpInfoGeoLocation","BLR");
    if (window.cpAPIInterface.getVariableValue("cpInfoGeoLocation")==="BLR")
    {
        cp.hide("ss1"); // hide object ss1
        cp.show("ss2"); // show object ss2
    }
    
  4. Obtenga una vista preliminar del proyecto. En función de la variable Geolocalización, un objeto se muestra o se oculta.

Uso de almacenamiento local

Con el almacenamiento local, puede guardar datos localmente en el navegador. Por ejemplo,

localStorage.setItem("learnerName","John");

Con la notación de puntos,

localStorage.learnerName="John";

En el almacenamiento local, los datos se mantienen incluso después de cerrar y volver a abrir el navegador.

En Adobe Captivate, puede utilizar el almacenamiento local para transferir variables de un curso al siguiente. Para implementar el almacenamiento local,

  1. En un proyecto en blanco, cree una variable learnerName que guarde el nombre del estudiante.

  2. Asigne la variable a un cuadro de entrada de texto. Cualquier nombre que introduzca en el cuadro se asignará a la nueva variable.

  3. Cree un botón junto al cuadro de entrada de texto. Introduzca el código de JavaScript siguiente para que se active el código al hacer clic en el botón.

    localStorage.setItem("learnerName", window.cpAPIInterface.getVariableValue("learnerName"));
  4. Previsualice el proyecto en un navegador. Escriba el nombre de un estudiante y haga clic en Enviar. Una vez asignado el nombre a la variable, el valor se guarda en el almacenamiento local.

  5. Abra el modo de depuración del navegador. Por ejemplo, en Chrome, abra el modo de depurador y haga clic en la ficha Recursos. Expanda el almacenamiento local y elija el host deseado.

    Puede ver el valor de la variable guardado en el almacenamiento local como par clave-valor.

    1 Nombre del estudiante.
    2 Nombre de la variable.
    3 Valor de la variable.

Uso del almacenamiento de sesión

En el almacenamiento de sesión, los datos almacenados se borran al finalizar la sesión de página. Una sesión de página está activa mientras esté abierta la página en un navegador. Si abre la página en una pestaña o una ventana nuevas, se inicia una sesión nueva.

sessionStorage("learnerName","John");

Para obtener los datos del almacenamiento de sesión,

var myData = sessionStorage.getItem("learnerName");

Para eliminar los datos del almacenamiento de sesión,

sessionStorage.removeItem("learnerName");

en Captivate, puede guardar el nombre de un estudiante en el almacenamiento de sesión. Por ejemplo,

sessionStorage.setItem("newLearner", window.cpAPIInterface.getVariableValue("newLearner"));

Después de previsualizar el proyecto en el navegador, abra la consola de depuración y, en sessionStorage, encontrará el nombre del estudiante, como se muestra a continuación:

1 Nombre de la variable.
2 Valor de la variable.

Incremento del contador de diapositivas

El código siguiente obtiene un valor de la variable personalizada "mySlideVisitCounter", lo incrementa cuando un usuario entra en una diapositiva y lo define en el contenido.

//check if window.cpAPIInterface is available
if(window.cpAPIInterface) 
{
	//check if window.cpAPIEventEmitter is available
	if(window.cpAPIEventEmitter) 
	{
		//add a listener to CPAPI_SLIDEENTER event
		window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER",function(e)
																	{
																		//get the current value of mySlideVisitCounter from Captivate content	
																		var lSlideVisitCtr = window.cpAPIInterface.getVariableValue("mySlideVisitCounter");	
																		//increment lSlideVisitCtr by 1
																		lSlideVisitCtr = lSlideVisitCtr + 1;
																		//set the value of mySlideVisitCounter in the Captivate content
																		window.cpAPIInterface.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
																	});
	}
}

El código anterior puede usarse de la manera siguiente:

 

  1. Ejecutar acción de JavaScript
     
    1. Desde el proyecto de Captivate, haga clic en la ficha Acciones en el Inspector de propiedades

    2. En el menú desplegable Al entrar, seleccione Ejecutar Javascript y haga clic en Ventana_Script

    3. Pegue el código de JavaScript en la ventana. 

    Es posible ejecutar acciones de Javascript desde cualquier acción de Captivate, como se muestra en la captura de pantalla siguiente: 

  2. Modificar el contenido publicado 

    También puede publicar el contenido y, a continuación, acceder a interior del contenido mediante la interfaz JavaScript desde fuera.

    Agregue el fragmento de código siguiente a la salida HTML publicada:

    <script>
    var interfaceObj;
    var eventEmitterObj;
    window.addEventListener("moduleReadyEvent", function(evt)
    {
        //evt.Data carries the interface object.
        //It is same as window.cpAPIInterface
        interfaceObj = evt.Data;
        eventEmitterObj = interfaceObj.getEventEmitter();
    });
    //check if window.cpAPIInterface is available
    if(interfaceObj)
    {
        //check if window.cpAPIEventEmitter is available
        if(eventEmitterObj)
        {
            //add a listener to CPAPI_SLIDEENTER event
            eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e)
                                                                {
                                                                    //get the current value of mySlideVisitCounter from Captivate content  
                                                                    var lSlideVisitCtr = interfaceObj.getVariableValue("mySlideVisitCounter");   
                                                                    //increment lSlideVisitCtr by 1
                                                                    lSlideVisitCtr = lSlideVisitCtr + 1;
                                                                    //set the value of mySlideVisitCounter in the Captivate content
                                                                    interfaceObj.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
                                                                });
        }
    }
    </script>

Proyecto de muestra

Si lo desea, puede descargar el proyecto de muestra de Captivate siguiente para usarlo como referencia. 

Descargar

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea