Interfaz JavaScript para Adobe Captivate

Introducción

Gracias a la nueva función de interfaz JavaScript, Adobe Captivate le permite crear contenido aún más potentes y a la vez más ágiles. Esta función ofrece una plataforma común para ejecutar acciones de JavaScript en sus proyectos y añade interactividad más potente. 

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. 

Las API de JavaScript pueden usarse de dos maneras:

  • Ejecute acciones de JavaScript desde el proyecto. 

  • Agregar código JavaScript al contenido html publicado en tiempo de ejecución.

Adobe Captivate es compatible con los siguientes objetos:

  • cpAPIInterface: contiene funciones de utilidades, que suelen ser necesarias para ejecutar acciones de JavaScript.
  • cpAPIEventEmitter: puede suscribirse o dar de baja su suscripción a los distintos eventos generados dentro del contenido.
  • cp: contiene utilidades para activar acciones a nivel de objeto.

cpAPIInterface

cpAPIEventEmitter es un objeto disponible en el ámbito de ventana. Para acceder al objeto de interfaz, utilice Window. cpAPIEventEmitter

A continuación, se indican los métodos compatibles con Adobe Captivate:

Método Descripción Parámetro Uso
getVariableValue Devuelve el valor de la variable especificada.
  window.cpAPIInterface. getVariableValue ("varOne");
setVariableValue 
Establece el valor de un nombre de variable con el valor especificado. variableName:Cadena
window.cpAPIInterface.setVariableValue ("cpQuizInfoStudentID", "John");
play Reproduce un proyecto   window.cpAPIInterface. play();
pause Pausa un proyecto   window.cpAPIInterface.pause();
next Ir a la diapositiva siguiente   window.cpAPIInterface.next();
previous Ir a la diapositiva anterior   window.cpAPIInterface.previous();
getDurationInSeconds Devuelve la duración total del proyecto en segundos.
  window.cpAPIInterface.getDurationInSeconds();
getEventEmitter El identificador se devuelve al objeto cpAPIEventEmitter. 
  window.cpAPIInterface.getEventEmitter();
getCurrentSlideIndex Devuelve el índice de la diapositiva actual del proyecto.   window.cpAPIInterface.getCurrentSlideIndex();

 

 

Métodos en desuso

  • getCurrentFrame
  • GetDurationInFrames

Ejemplo 1

En este ejemplo, se crea una variable utilizando el flujo de trabajo de creación de variables.A continuación, utilizaremos la nueva variable, cambiaremos su valor e imprimiremos el nuevo valor como un mensaje de alerta.

Siga los pasos que se indican a continuación para definir y obtener el valor de la variable:

  1. En la pantalla variables, cree una variable denominada myVar y asigne un valor NYC a la variable.

  2. Añada un botón en el escenario del proyecto y seleccione Interacciones en el panel derecho.

  3. En el panel Acción, seleccione Más > Ejecutar JavaScript . Escriba el siguiente código:

    window.cpAPIInterface.setVariableValue("myVar","BLR");

    var getVar=window.cpAPIInterface.getVariableValue("myVar");

    alert(getVar);

    Esto es lo que hicimos:

    • Línea 1: hemos cambiado el valor de la variable, MyVar, a un nuevo valor, BLR. Hemos utilizado el método setVariableValue para cambiar el valor.

    • Línea 2: usamos el método getVariableValue para recuperar el nuevo valor que hemos establecido en la línea anterior. A continuación, almacenamos el valor en una nueva variable, getVar.

    • Línea 3: se muestra el nuevo valor dentro de un cuadro de alerta. 

  4. A continuación, seleccione Listo.

  5. Previsualice el proyecto y seleccione el botón. El cuadro de alerta se muestra como un menú emergente.

Ejemplo 2

En este ejemplo, se utilizará una variable del sistema, Date.DateMMDDYY, para imprimir la fecha actual. El proceso se mantiene tal y como se describe en el ejemplo anterior.

En el editor de JavaScript, escriba el código siguiente:

dateVar=window.cpAPIInterface.getVariableValue("Date.DateMMDDYY");

alert(dateVar);

Al obtener una vista previa del proyecto y seleccionar el botón, verá un cuadro de alerta que muestra la fecha actual.

cpAPIEventEmitter

cpAPIEventEmitter es un objeto disponible en el ámbito de ventana. Para acceder al objeto de interfaz, utilice Window. cpAPIEventEmitter

A continuación se indican los métodos compatibles:

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");

Eventos admitidos

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=NUMBER;

frameNumber=NUMBER; (En desuso)

 lcpversion=STRING; (No compatible)

 

CPAPI_SLIDEEXIT

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

slideNumber=NUMBER;

frameNumber=NUMBER; (en desuso)

lcpversion=STRING; (No compatible)

percentageSlideSeen =
NUMBER (No compatible)

 
CPAPI_
STARTPLAYBARSCRUBBING
Informa de que el usuario ha empezado a desplazarse por la película con la barra de reproducción. No admitido  
CPAPI_
ENDPLAYBARSCRUBBING
Informa de que el usuario ha dejado de desplazarse por la película con la barra de reproducción. No admitido  
CPAPI_INTERACTIVEITEM Informa de que el usuario ha interactuado con un elemento interactivo. frameNumber=NUMBER; (en desuso)
includedInQuiz=BOOLEAN; (No compatible)
issuccess=BOOLEAN; (No compatible)
itemname=STRING;
objecttype=NUMBER;
questioneventdata=
[object Object]; (No compatible)
slideNumber=NUMBER;
 
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 ha comenzado.    
CPAPI_MOVIESTOP Informa de que la película se ha detenido. (No admitido)
 
CPAPI_QUESTIONSKIP Informa de que el usuario ha omitido una diapositiva de pregunta. correctAnswer=STRING;
infiniteAttempts=BOOLEAN;
interactionID=NUMBER; 
objectiveID=STRING; (No compatible)
questionAnswered=BOOLEAN;
questionAnsweredCorrectly
=BOOLEAN;
questionAttempts=NUMBER;
questionMaxAttempts=NUMBER;
questionMaxScore=NUMBER;
questionNumber=NUMBER;
questionScore=NUMBER;
questionScoringType=
[object Object],{Name:STRING}; (No compatible)
questionType=STRING;
quizName=STRING; (No compatible)
reportAnswers=BOOLEAN; 
selectedAnswer=STRING;
slideNumber=NUMBER;

interactionType : (no compatible)

  • choice
  • true-false
  • fill-in
  • long-fill-in
  • hotspot
  • sequencing
  • matching
  • likert

questionType -

  • choice
  • true-false
  • fill-in
  • long-fill-in
  • hot-spot
  • sequencing
  • matching
  • likert

questionScoringType
["Nombre"]
 -NO COMPATIBLE

  • PretestQuestion
  • GradedQuestion
  • SurveyQuestion

Eventos admitidos:

  • correctAnswer
  • infiniteAttempts
  • interactionID
  • questionAnswered
  • questionAnsweredCorrectly
  • questionAttempts
  • questionMaxAttempts
  • questionMaxScore
  • questionNumber
  • questionScore
  • QuestionType (choice, true-false, long-fill-in, sequencing, matching)
  • reportAnswers
  • selectedAnswer
  • slideNumber
CPAPI_QUESTIONSUBMIT Informa de que la película ha respondido a una diapositiva de pregunta. correctAnswer=STRING;
infiniteAttempts=BOOLEAN;
interactionID=NUMBER; (No compatible)
objectiveID=STRING; (No compatible)
questionAnswered=BOOLEAN;
questionAnsweredCorrectly=
BOOLEAN;
questionAttempts=NUMBER;
questionMaxAttempts=NUMBER;
questionMaxScore=NUMBER;
questionNumber=NUMBER;
questionScore=NUMBER;
questionScoringType=[object Object],{Name:STRING}; (Not supported)
questionType=STRING;
quizName=STRING; (No compatible)
reportAnswers=BOOLEAN; 
selectedAnswer=STRING; 
slideNumber=NUMBER;

Eventos admitidos:

  • correctAnswer
  • infiniteAttempts
  • interactionID
  • questionAnswered
  • questionAnsweredCorrectly
  • questionAttempts
  • questionMaxAttempts
  • questionMaxScore
  • questionNumber
  • questionScore
  • QuestionType (choice, true-false, long-fill-in, sequencing, matching)
  • reportAnswers
  • selectedAnswer
  • slideNumber
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; (No compatible)
varName=STRING;
oldVal=STRING;
newVal=STRING;

 

Ejemplo

Inicie un emisor de eventos para el CPAPI_VARIABLEVALUECHANGED de eventos. Al activarse, se advierte del estado de un grupo de botones de opción, independientemente de si se hace clic en la primera o en la segunda opción.

var alertEvent = function(){alert("Valor de variable cambiado")};

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED", alertEvent , "radioOption1");

En el grupo de botones de opción, utilice el siguiente código de JS en los eventos de selección:

Botón 1

window.cpAPIInterface.setVariableValue("radioOption1", 'Ha seleccionado la primera opción');

Botón 2

var option1 = window.cpAPIInterface.getVariableValue("radioOption1"); 

window.cpAPIInterface.setVariableValue("radioOption1", 'Ha seleccionado la segunda opción')

cp

Activador de acciones en el nivel de objeto.A continuación se indican los métodos compatibles:

  • mostrar

  • ocultar

Ejemplo

cp.hide("ss1"); // ocultar objeto ss1

cp.show("ss2"); // mostrar objeto ss2

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?