Guide d'utilisation Annuler

Découvrez l’interface JavaScript commune pour Adobe Captivate

Rechercher

Dernière mise à jour le

Adobe Captivate permet à ses utilisateurs de créer du contenu plus puissant mais moins volumineux à l’aide de la nouvelle fonction d’interface JavaScript. Cette fonction offre une plate-forme commune pour exécuter des actions JavaScript entre les fichiers SWF et HTML. En outre, elle facilite l’accès JavaScript au contenu réel.

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. Vous pouvez facilement effectuer toutes ces petites tâches performantes sans vous demander si le contenu est au format SWF ou HTML.

Vous avez la possibilité d’utiliser l’interface JavaScript commune de deux manières :

Exécutez une action JavaScript à partir d’un projet Captivate.
Ajoutez le code JavaScript au contenu HTML publié lors de l’exécution.

Voir la section Exemples exemples pour plus d’informations.

Comme illustré dans le schéma ci-dessus, JavaScript sert d’interface entre le navigateur et le contenu (SWF/HTML5).

cpAPIInterface

Cet objet est l’objet principal qui contient l’interface JavaScript complète. Il contient de nombreuses petites fonctions d’utilitaire qui sont souvent utilisées pour l’exécution des actions JavaScript.

cpAPIInterface est un objet disponible pour les fenêtres. Pour accéder à l’objet d’interface, l’utilisation suivante est recommandée : window.cpAPIInterface

Méthodes :

Nom	Description	Paramètres	Utilisation
getVariableValue	Renvoie la valeur du nom de variable donné.	-	window.cpAPIInterface. getVariableValue ("cpQuizInfoStudentID");
setVariableValue	Définit la valeur du nom de variable donné avec la valeur donnée.	variableName:String	window.cpAPIInterface. setVariableValue ("cpQuizInfoStudentID", "John");
play	Lit le film.		window.cpAPIInterface. play();
pause	Met le film en pause.		window.cpAPIInterface. pause();
stop	Arrête le film.		window.cpAPIInterface. stop();
rewind	Rembobine et lit le film.		window.cpAPIInterface. rewind();
next	Passe le film à la diapositive suivante.		window.cpAPIInterface. next();
previous	Passe le film à la diapositive précédente.		window.cpAPIInterface. previous();
fastForward	Multiplie la vitesse du film par 2, puis par 4, puis rétablit la vitesse normale lors d’appels consécutifs.		window.cpAPIInterface. fastForward();
getPlaySpeed	Renvoie la vitesse de lecture du film en images par seconde (ips).		window.cpAPIInterface. getPlaySpeed();
getDurationInFrames	Renvoie le nombre total d’images du film.		window.cpAPIInterface. getDurationInFrames();
getDurationInSeconds	Renvoie la durée totale du film en secondes.		window.cpAPIInterface. getDurationInSeconds();
getVolume	Renvoie le volume du film en pourcentage.		window.cpAPIInterface. getVolume();
setVolume	Définit le volume du film.	volume:Number (range : 0 - 1)	window.cpAPIInterface. setVolume(0.7);
navigateToTime	Passe à une heure donnée (millisecondes) dans le film.	timeInMilliseconds:Number	window.cpAPIInterface. navigateToTime(3000);
canNavigateToTime	Renvoie une valeur booléenne indiquant si vous pouvez passer à une heure donnée dans le film ou non.	timeInMilliseconds:Number	window.cpAPIInterface. canNavigateToTime(3000);
getCurrentFrame	Renvoie l’image active du film.		window.cpAPIInterface. getCurrentFrame();
getCurrentSlideIndex	Renvoie l’index de la diapositive active du film.		window.cpAPIInterface. getCurrentSlideIndex();
getEventEmitter	Renvoie la poignée à l’objet cpAPIEventEmitter.		window.cpAPIInterface. getEventEmitter();

cpAPIEventEmitter

Cet objet est semblable à n’importe quel autre gestionnaire d’événements. Il fournit un mécanisme pour l’abonnement/le désabonnement à divers événements générés dans le contenu.

cpAPIEventEmitter est un objet disponible pour les fenêtres. Pour accéder à l’objet d’interface, l’utilisation suivante est recommandée : window.cpAPIEventEmitter

Méthodes :

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

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; lcpversion=STRING;
CPAPI_SLIDEEXIT	Indique que le film quitte une diapositive.	slideNumber=NUMBER; frameNumber=NUMBER; lcpversion=STRING; percentageSlideSeen= NUMBER;
CPAPI_ STARTPLAYBARSCRUBBING	Indique que l’utilisateur a commencé une recherche dans le film à l’aide de la barre de lecture.
CPAPI_ ENDPLAYBARSCRUBBING	Indique que l’utilisateur a arrêté la recherche dans le film à l’aide de la barre de lecture.
CPAPI_ INTERACTIVEITEMSUBMIT	Indique que l’utilisateur a effectué une interaction avec un élément interactif.	frameNumber=NUMBER; includedInQuiz=BOOLEAN; issuccess=BOOLEAN; itemname=STRING; objecttype=NUMBER; questioneventdata= [object Object]; slideNumber=NUMBER;
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é.
CPAPI_QUESTIONSKIP	Indique que l’utilisateur a ignoré une diapositive de question.	correctAnswer=STRING; infiniteAttempts=BOOLEAN; interactionID=NUMBER; objectiveID=STRING; questionAnswered=BOOLEAN; questionAnsweredCorrectly =BOOLEAN; questionAttempts=NUMBER; questionMaxAttempts=NUMBER; questionMaxScore=NUMBER; questionNumber=NUMBER; questionScore=NUMBER; questionScoringType= [object Object],{Name:STRING}; questionType=STRING; quizName=STRING; reportAnswers=BOOLEAN; selectedAnswer=STRING; slideNumber=NUMBER;	interactionType - 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"] - PretestQuestion GradedQuestion SurveyQuestion
CPAPI_QUESTIONSUBMIT	Indique que le film a répondu à une diapositive de question.	correctAnswer=STRING; infiniteAttempts=BOOLEAN; interactionID=NUMBER; objectiveID=STRING; questionAnswered=BOOLEAN; questionAnsweredCorrectly= BOOLEAN; questionAttempts=NUMBER; questionMaxAttempts=NUMBER; questionMaxScore=NUMBER; questionNumber=NUMBER; questionScore=NUMBER; questionScoringType=[object Object],{Name:STRING}; questionType=STRING; quizName=STRING; reportAnswers=BOOLEAN; selectedAnswer=STRING; slideNumber=NUMBER;
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.

moduleReadyEvent

Le contenu Captivate déclenche également un événement moduleReadyEvent sur l’objet de fenêtre parent afin d’indiquer que le contenu est chargé. Les utilisateurs peuvent utiliser cet événement comme une notification pour la disponibilité de l’interface JavaScript. L’extrait de code suivant permet d’ajouter un écouteur à moduleReadyEvent :

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

Exemples

Génération d’un numéro aléatoire

Le code ci-dessous permet de générer un numéro aléatoire compris entre 0 et 1.

alert(Math.random());

Le code suivant génère un nombre compris entre 1 et 10.

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

Le code suivant utilise une fonction pour générer un nombre aléatoire compris entre deux entiers qui sont transmis comme arguments dans la fonction.

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

getRandomInt(10, 300);

Utilisation de la géolocalisation

Avec la géolocalisation, vous pouvez utiliser l’emplacement géographique d’un stagiaire pour déclencher certains événements dans un cours ou pour déterminer les objets de formation à masquer ou à afficher.

Vous pouvez configurer ce scénario à l’aide des actions avancées, mais vous pouvez également configurer la prise en charge de la géolocalisation à l’aide de Javascript.

Créez une variable de type géolocalisation et affectez les valeurs suivantes à la variable :
- Latitude
- Longitude
- Précision
Créez un projet contenant deux objets, ss1 et ss2.

Selon la variable de géolocalisation configurée, vous afficherez l’objet ss2 et masquerez l’objet ss1.

Remarque :

Pour cacher n’importe quel objet, utilisez cp.hide("object_name");

Pour afficher n’importe quel objet, utilisez cp.show("object_name");

Sur la première diapositive, choisissez Actions et sélectionnez Exécuter JavaScript dans la liste déroulante Sur entrée. Dans la fenêtre de script, entrez le code suivant :

window.cpAPIInterface.setVariableValue(&quot;cpInfoGeoLocation&quot;,&quot;BLR&quot;);
if (window.cpAPIInterface.getVariableValue(&quot;cpInfoGeoLocation&quot;)===&quot;BLR&quot;)
{
    cp.hide(&quot;ss1&quot;); // hide object ss1
    cp.show(&quot;ss2&quot;); // show object ss2
}

Affichez un aperçu du projet. Vous pouvez voir qu’un objet est affiché ou masqué en fonction de la variable de géolocalisation.

Utilisation du stockage local

Avec le stockage local, vous pouvez stocker des données localement dans le navigateur. Par exemple,

localStorage.setItem(&quot;learnerName&quot;,&quot;John&quot;);

À l’aide de la notation point,

localStorage.learnerName=&quot;John&quot;;

Dans le stockage local, les données sont conservées, même lorsque vous fermez et rouvrez le navigateur.

Dans Adobe Captivate, vous pouvez utiliser le stockage local pour transférer des variables d’un cours à l’autre. Pour mettre en œuvre le stockage local,

Dans un projet vide, créez une variable learnerName qui stocke le nom du stagiaire.
Affectez la variable à une zone de texte. Le nom que vous indiquez dans la zone est affecté à la nouvelle variable.
Créez un bouton en regard de la zone de texte. Entrez le code JavaScript suivant de sorte que le code soit déclenché quand vous cliquez sur le bouton.
```
localStorage.setItem(&quot;learnerName&quot;, window.cpAPIInterface.getVariableValue(&quot;learnerName&quot;));
```
Affichez un aperçu du projet dans un navigateur. Entrez le nom d’un stagiaire et cliquez sur Envoyer. Une fois que vous attribuez le nom à la variable, la valeur est désormais stockée dans le stockage local.

Ouvrez le mode de débogueur du navigateur. Par exemple, dans Chrome, ouvrez le mode de débogueur et cliquez sur l’onglet Ressources. Développez le stockage local et sélectionnez l’hôte requis.

Vous pouvez voir la valeur de variable stockée dans le stockage local sous la forme d’une paire clé-valeur.

1	Nom du stagiaire.
2	Nom de la variable
3	Valeur de la variable.

Utilisation du stockage de session

Dans le stockage de session, les données stockées sont effacées quand vous arrêtez une session de page. Une session de page dure tant que la page est ouverte dans un navigateur. Si vous ouvrez la page dans un nouvel onglet ou une nouvelle fenêtre, une nouvelle session commence.

sessionStorage(&quot;learnerName&quot;,&quot;John&quot;);

Pour obtenir les données du stockage de session,

var myData = sessionStorage.getItem(&quot;learnerName&quot;);

Pour supprimer des données du stockage de session,

sessionStorage.removeItem(&quot;learnerName&quot;);

Dans Captivate, vous pouvez stocker le nom d’un stagiaire dans le stockage de session. Par exemple,

sessionStorage.setItem(&quot;newLearner&quot;, window.cpAPIInterface.getVariableValue(&quot;newLearner&quot;));

Après avoir affiché l’aperçu du projet dans le navigateur, ouvrez la console de débogage et, dans sessionStorage, vous pouvez retrouver le nom du stagiaire, comme indiqué ci-dessous :

1	Nom de la variable
2	Valeur de la variable.

Incrémentation du compteur de diapositive

Le code suivant obtient la valeur d’une variable personnalisée « mySlideVisitCounter », l’incrémente chaque fois que l’utilisateur ouvre une diapositive et la définit de nouveau dans le contenu.

//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(&quot;CPAPI_SLIDEENTER&quot;,function(e)
                 {
                  //get the current value of mySlideVisitCounter from Captivate content 
                  var lSlideVisitCtr = window.cpAPIInterface.getVariableValue(&quot;mySlideVisitCounter&quot;); 
                  //increment lSlideVisitCtr by 1
                  lSlideVisitCtr = lSlideVisitCtr + 1;
                  //set the value of mySlideVisitCounter in the Captivate content
                  window.cpAPIInterface.setVariableValue(&quot;mySlideVisitCounter&quot;,lSlideVisitCtr);
                 });
 }
}

Le code ci-dessus peut être utilisé comme suit :

Exécuter une action JavaScript
1. Dans un projet Captivate, cliquez sur l’onglet Actions dans l’Inspecteur des propriétés
2. Dans la liste déroulante A l’ouverture, sélectionnez Exécuter JavaScript et cliquez sur Script_Window
3. Collez le code JavaScript dans la fenêtre.
Vous pouvez exécuter une action JavaScript à partir de toute action Captivate comme le montre la capture d’écran suivante :

Modification du contenu publié

Vous pouvez également publier du contenu, puis accéder aux éléments internes du contenu à l’aide de l’interface JavaScript depuis l’extérieur.

Ajoutez l’extrait de code suivant dans le fichier HTML publié :

<script>
var interfaceObj;
var eventEmitterObj;
window.addEventListener(&quot;moduleReadyEvent&quot;, 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(&quot;CPAPI_SLIDEENTER&quot;,function(e)
                                                            {
                                                                //get the current value of mySlideVisitCounter from Captivate content  
                                                                var lSlideVisitCtr = interfaceObj.getVariableValue(&quot;mySlideVisitCounter&quot;);   
                                                                //increment lSlideVisitCtr by 1
                                                                lSlideVisitCtr = lSlideVisitCtr + 1;
                                                                //set the value of mySlideVisitCounter in the Captivate content
                                                                interfaceObj.setVariableValue(&quot;mySlideVisitCounter&quot;,lSlideVisitCtr);
                                                            });
    }
}
</script>

Accéder à votre compte