Dans l’écran Variables, créez une variable nommée myVar et attribuez-lui une valeur NYC.
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 :
-
-
Ajoutez un bouton sur la scène de ce projet et sélectionnez Interactions dans le panneau de droite.
-
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.
-
Sélectionnez Terminé.
-
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. |
|
|
remove EventListener |
Supprime la fonction d’écouteur d’événement pour un événement particulier. |
|
|
É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= |
|
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)
questionType -
questionScoringType
Événements pris en charge :
|
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 :
|
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) |
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