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 : 

  1. Exécutez une action JavaScript à partir d’un projet Captivate.
  2. 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 : 
    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
    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
  • 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
["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("moduleReadyEvent", 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 argumentsdansla fonction.

function 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.

  1. Créez une variable de type géolocalisation et affectez les valeurs suivantes à la variable :

    • Latitude
    • Longitude
    • Précision
  2. Créez un projet contenant deux objets,ss1et 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");

  3. 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("cpInfoGeoLocation","BLR");
    if (window.cpAPIInterface.getVariableValue("cpInfoGeoLocation")==="BLR")
    {
        cp.hide("ss1"); // hide object ss1
        cp.show("ss2"); // show object ss2
    }
    
  4. Prévisualisez le 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("learnerName","John");

À l’aide de la notation point,

localStorage.learnerName="John";

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,

  1. Dans un projet vide, créez une variable learnerName qui stocke le nom du stagiaire.

  2. Affectez la variable à une zone de texte. Le nom que vous indiquez dans la zone est affecté à la nouvelle variable.

  3. 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("learnerName", window.cpAPIInterface.getVariableValue("learnerName"));
  4. 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.

  5. 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("learnerName","John");

Pour obtenir les données du stockage de session,

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

Pour supprimer des données du stockage de session,

sessionStorage.removeItem("learnerName");

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

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

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

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

 

  1. 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 :

  2. 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("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>

Exemple de projet

Vous pouvez télécharger l’exemple de projet Captivate joint pour référence. 

Telechargement

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne