Interface JavaScript pour Adobe Captivate

Introduction

Adobe Captivate vous permet de créer du contenu plus puissant, mais moins volumineux à l’aide de la nouvelle fonctionnalité d’interface JavaScript. Cette fonctionnalité vous fournit une plate-forme commune pour exécuter des actions JavaScript dans vos projets et ajoute une interactivité plus puissante. 

Désormais, vous pouvez écrire des extraits JavaScript plus petits pour accéder à différentes variables dans le contenu. Vous pouvez vous abonner à divers événements générés par le contenu. 

Les API JavaScript peuvent être utilisées de deux manières :

  • Exécutez des actions JavaScript à partir du projet. 

  • Ajoutez le code JavaScript au contenu HTML publié lors de l’exécution.

Adobe Captivate prend en charge les objets suivants :

  • cpAPIInterface : contient des fonctions d’utilitaire, souvent requises pour exécuter des actions JavaScript.
  • cpAPIEventEmitter : vous pouvez vous abonner ou vous désabonner aux différents événements générés dans le contenu.
  • cp : contient des utilitaires permettant de déclencher des actions au niveau de l’objet.

cpAPIInterface

cpAPIEventEmitter est un objet disponible pour les fenêtres. Pour accéder à l’objet d’interface, utilisez window.cpAPIEventEmitter.

Voici les méthodes prises en charge dans Adobe Captivate :

Méthode  Description Paramètre Utilisation
getVariableValue Renvoie la valeur de la variable spécifiée. 
  window.cpAPIInterface. getVariableValue ("varOne");
setVariableValue 
Définit la valeur du nom de variable donné avec la valeur donnée. variableName:String
window.cpAPIInterface.setVariableValue ("cpQuizInfoStudentID", "John");
play Lit un projet   window.cpAPIInterface. play();
pause Suspend un projet   window.cpAPIInterface.pause();
next Aller à la diapositive suivante   window.cpAPIInterface.next();
previous Aller à la diapositive précédente   window.cpAPIInterface.previous();
getDurationInSeconds Renvoie la durée totale du projet en secondes. 
  window.cpAPIInterface.getDurationInSeconds();
getEventEmitter Renvoie la poignée à l'objet cpAPIEventEmitter. 
  window.cpAPIInterface.getEventEmitter();
getCurrentSlideIndex Renvoie l’index de la diapositive active du projet.   window.cpAPIInterface.getCurrentSlideIndex();

 

 

Méthodes obsolètes

  • getCurrentFrame
  • GetDurationInFrames

Exemple 1

Dans cet exemple, nous allons créer une variable suivant le processus de création de variables. Nous utiliserons ensuite cette nouvelle variable, modifierons sa valeur, puis l’imprimerons sous forme de message d'alerte.

Suivez les étapes pour définir et obtenir la valeur de la variable :

  1. Dans l’écran Variables, créez une variable nommée myVar et attribuez-lui une valeur NYC. 

  2. Ajoutez un bouton sur la scène de ce projet et sélectionnez Interactions dans le panneau de droite. 

  3. Dans le panneau Action, sélectionnez Plus > Exécuter JavaScript. Saisissez le code suivant :

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

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

    alert(getVar);

    Voici ce que nous avons fait :

    • Ligne 1 : nous avons remplacé la valeur de la variable, myVar, par une nouvelle valeur, BLR. Nous avons utilisé la méthode setVariableValue pour modifier la valeur.

    • Ligne 2 : nous avons utilisé la méthode getVariableValue pour récupérer la nouvelle valeur définie à la ligne précédente. Nous avons ensuite stocké la valeur dans une nouvelle variable, getVar.

    • Ligne 3 : nous affichons la nouvelle valeur dans une boîte d’alerte. 

  4. Sélectionnez Terminé.

  5. Prévisualisez le projet et sélectionnez le bouton. La boîte d’alerte s’affiche sous forme de fenêtre contextuelle. 

Exemple 2

Dans cet exemple, nous allons utiliser une variable système, Date.DateMMDDYY, pour imprimer la date actuelle. Le processus reste tel que documenté dans l’exemple précédent.

Dans l’éditeur JavaScript, saisissez le code :

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

alert(dateVar);

Lorsque vous prévisualisez le projet et sélectionnez le bouton, une boîte d’alerte affiche la date du jour.

cpAPIEventEmitter

cpAPIEventEmitter est un objet disponible pour les fenêtres. Pour accéder à l’objet d’interface, utilisez window.cpAPIEventEmitter.

Voici les méthodes prises en charge :

Nom Description Paramètres Utilisation
add
EventListener
Ajoute une fonction d’écouteur d’événement à un événement particulier.
  • eventName : l’un des
    noms d’événements répertoriés sur cette page.
  • eventListenerFunction :
    toute fonction JavaScript.
  • variableName : 
    1. facultatif. 
    2. Un des noms de variable
      Captivate dont le changement de valeur doit faire l’objet d’une notification.
    3. Ne doit être utilisé qu’avec les événements
      CPAPI_
      VARIABLEVALUECHANGED.
  • window.
    cpAPIEventEmitter.
    addEventListener("CPAPI_
    MOVIESTART
    ",
    function(){alert
    ("Movie Started");});
  • window.
    cpAPIEventEmitter.
    addEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert("Variable
    Value Changed");},
    "cpQuizInfoStudentID");
remove
EventListener
Supprime la fonction d’écouteur d’événement pour un événement particulier.
  • eventName :
    l’un des noms d’événements répertoriés
    sur cette page.
  • eventListenerFunction :
    toute fonction JavaScript.
  • variableName : 
    • facultatif. 
    • Un des noms de variable
      Captivate dont le changement de valeur doit faire l’objet d’une notification.
    • Ne doit être utilisé qu’avec les événements CPAPI_
      VARIABLEVALUECHANGED.
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_MOVIESTART",
    function()
    {alert("Movie Started");});
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert
    ("Variable Value Changed");},
    "cpQuizInfoStudentID");

Événements pris en charge

Liste des événements :

Nom Description Données d’événement Enumérations

CPAPI_SLIDEENTER

Indique que le film est passé à une nouvelle diapositive.

slideNumber=NUMBER;

frameNumber=NUMBER; (Obsolète)

 lcpversion=CHAÎNE; (non pris en charge)

 

CPAPI_SLIDEEXIT

Indique que le film quitte une diapositive.

slideNumber=NUMBER;

frameNumber=NUMBER; (obsolète)

lcpversion=CHAÎNE; (non pris en charge)

percentageSlideSeen=
NUMBER; (Not supported)

 
CPAPI_
STARTPLAYBARSCRUBBING
Indique que l’utilisateur a commencé une recherche dans le film à l’aide de la barre de lecture. Non prise en charge  
CPAPI_
ENDPLAYBARSCRUBBING
Indique que l’utilisateur a arrêté la recherche dans le film à l’aide de la barre de lecture. Non prise en charge  
CPAPI_INTERACTIVEITEM Indique que l’utilisateur a effectué une interaction avec un élément interactif. frameNumber=NOMBRE; (obsolète)
includedInQuiz=BOOLÉEN; (non pris en charge)
issuccess=BOOLÉEN; (non pris en charge)
itemname=CHAÎNE;
objecttype=NOMBRE;
questioneventdata=
[object Object]; (non pris en charge)
slideNumber=NOMBRE;
 
CPAPI_MOVIEPAUSE Indique que le film est en pause.    
CPAPI_MOVIERESUME Indique que le film a quitté l’état de pause.    
CPAPI_MOVIESTART Indique que le film a commencé.    
CPAPI_MOVIESTOP Indique que le film s’est arrêté. (Non prise en charge)
 
CPAPI_QUESTIONSKIP Indique que l’utilisateur a ignoré une diapositive de question. correctAnswer=STRING;
infiniteAttempts=BOOLEAN;
interactionID=NUMBER; 
objectiveID=STRING; (non pris en charge)
questionAnswered=BOOLEAN;
questionAnsweredCorrectly
=BOOLEAN;
questionAttempts=NUMBER;
questionMaxAttempts=NUMBER;
questionMaxScore=NUMBER;
questionNumber=NUMBER;
questionScore=NUMBER;
questionScoringType=
[object Object],{Name:STRING}; (non pris en charge)
questionType=STRING;
quizName=STRING; (non pris en charge)
reportAnswers=BOOLEAN; 
selectedAnswer=STRING;
slideNumber=NUMBER;

interactionType - (Not supported)

  • choice
  • vrai/faux
  • à compléter
  • réponse longue à compléter
  • zone réactive
  • séquencement
  • correspondance
  • likert

questionType -

  • choice
  • vrai/faux
  • à compléter
  • réponse longue à compléter
  • zone réactive
  • séquencement
  • correspondance
  • likert

questionScoringType
["Name"]
 -  NON PRIS EN CHARGE

  • PretestQuestion
  • GradedQuestion
  • SurveyQuestion

Événements pris en charge :

  • correctAnswer
  • infiniteAttempts
  • interactionID
  • questionAnswered
  • questionAnsweredCorrectly
  • questionAttempts
  • questionMaxAttempts
  • questionMaxScore
  • questionNumber
  • questionScore
  • QuestionType (choix, vrai-faux, remplissage long, séquencement, correspondance)
  • reportAnswers
  • selectedAnswer
  • slideNumber
CPAPI_QUESTIONSUBMIT Indique que le film a répondu à une diapositive de question. correctAnswer=STRING;
infiniteAttempts=BOOLEAN;
interactionID=NUMBER; (non pris en charge)
objectiveID=STRING; (non pris en charge)
questionAnswered=BOOLEAN;
questionAnsweredCorrectly=
BOOLEAN;
questionAttempts=NUMBER;
questionMaxAttempts=NUMBER;
questionMaxScore=NUMBER;
questionNumber=NUMBER;
questionScore=NUMBER;
questionScoringType=[object Object],{Name:STRING}; (non pris en charge)
questionType=STRING;
quizName=STRING; (non pris en charge)
reportAnswers=BOOLEAN; 
selectedAnswer=STRING; 
slideNumber=NUMBER;

Événements pris en charge :

  • correctAnswer
  • infiniteAttempts
  • interactionID
  • questionAnswered
  • questionAnsweredCorrectly
  • questionAttempts
  • questionMaxAttempts
  • questionMaxScore
  • questionNumber
  • questionScore
  • QuestionType (choix, vrai-faux, remplissage long, séquencement, correspondance)
  • reportAnswers
  • selectedAnswer
  • slideNumber
CPAPI_
VARIABLEVALUECHANGED

L’abonnement à cet événement nécessite un paramètre supplémentaire : variableName. Une fois l’abonnement effectué, toute modification de la valeur de la variable indiquée fait l’objet d’une notification.

captivateVersion=CHAÎNE; (non pris en charge)
varName=CHAÎNE;
oldVal=CHAÎNE;
newVal=CHAÎNE;

 

Exemple

Lancez un émetteur d’événement pour l’événement CPAPI_VARIABLEVALUECHANGED. Lorsqu’il est déclenché, il alerte l’état d’un groupe de boutons radio, que la première ou la seconde option soit sélectionnée.

var alertEvent = function(){alert("Variable Value Changed")};

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

Dans le groupe de boutons radio, utilisez le code JS ci-dessous pour les événements de sélection :

Bouton 1

window.cpAPIInterface.setVariableValue("radioOption1", 'Vous avez sélectionné la première option');

Bouton 2

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

window.cpAPIInterface.setVariableValue("radioOption1", 'Vous avez sélectionné la deuxième option')

cp

Déclenchez des actions au niveau de l’objet. Voici les méthodes prises en charge :

  • afficher

  • masquer

Exemple

cp.hide("ss1"); // masquer l’objet ss1

cp.show("ss2"); // afficher l’objet ss2

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?