Mit Adobe Captivate können Benutzer leistungsstarke und teilnehmerfreundliche Inhalt mithilfe der neuen JavaScript-Benutzeroberfläche erstellen. Diese Funktion ist eine allgemeine Plattform für die Ausführung von JavaScript-Aktionen zwischen SWF und HTML. Dadurch wird JavaScript-Zugriff auf Inhalte erleichtert.

Jetzt können Sie kleinere JavaScript-Snippets schreiben, um auf unterschiedliche Variablen in den Inhalten zuzugriefen. Sie können verschiedene Ereignisse, die von den Inhalten generiert wurden, abonnieren. Sie können diese kleinen, aber leistungsstarken Aufgaben durchführen, ohne darüber nachzudenken, ob die Inhalte SWF- oder HTML-Inhalte sind. 

Sie können die allgemeine JavaScript-Benutzeroberfläche folgendermaßen verwenden:

  1. Führen Sie die JavaScript-Aktion von einem Captivate-Projekt aus durch. 
  2. Fügen Sie JavaScript-Code der veröffentlichten HTML zur Laufzeit hinzu.
Weitere Informationen finden Sie unter Beispiele

Wie oben im Diagramm dargestellt, fungiert JavaScript als eine Benutzeroberfläche zwischen Browser und Inhalt(SWF/HTML5). 

cpAPIInterface

Dieses Objekt ist das Hauptobjekt mit der vollständigen JavaScript-Benutzeroberfläche. Es enthält viele kleine Hilfsprogrammfunktionen, die oft zum Ausführen von JavaScript-Aktionen erforderlich sind. 

cpAPIInterface ist ein Objekt, das im Fensterbereich verfügbar ist. Um auf das Objekt der Benutzeroberfläche zuzugriefen, finden Sie im Folgenden die empfohlene Nutzung : window.cpAPIInterface

Methoden:

Name

Beschreibung

Parameter

Verwendung

getVariableValue Gibt den Wert des vorgegebenen Variablennamens zurück. - window.cpAPIInterface.
getVariableValue
("cpQuizInfoStudentID");
setVariableValue Legt den Wert des vorgegebenen Variablennamens mit dem vorgegebenen Wert fest. variableName:String window.cpAPIInterface.
setVariableValue
("cpQuizInfoStudentID",
"John");
Abspielen Gibt den Film wieder.   window.cpAPIInterface.
play();
pause Hält den Film an.   window.cpAPIInterface.
pause();
Stoppen Hält den Film an.   window.cpAPIInterface.
stop();
rewind Spult den Film zurück und spielt ihn ab.   window.cpAPIInterface.
rewind();
next Sucht die nächste Folie des Films.   window.cpAPIInterface.
next();
previous Sucht die vorherige Folie des Films.   window.cpAPIInterface.
previous();
fastForward Erhöht die Filmgeschwindigkeit auf 2x, dann 4x und dann zurück auf die normale Geschwindigkeit bei aufeinanderfolgenden Aufrufen.   window.cpAPIInterface.
fastForward();
getPlaySpeed Gibt die Wiedergabegeschwindigkeit des Film in Frames pro Sekunde (fps) zurück.   window.cpAPIInterface.
getPlaySpeed();
getDurationInFrames Gibt die Gesamtzahl von Frames im Film zurück.   window.cpAPIInterface.
getDurationInFrames();
getDurationInSeconds Gibt die Gesamtdauer des Films in Sekunden zurück.   window.cpAPIInterface.
getDurationInSeconds();
getVolume Gibt die Lautstärke des Films in Prozent zurück.   window.cpAPIInterface.
getVolume();
setVolume Legt die Lautstärke des Films fest. volume:Number (range : 0 - 1) window.cpAPIInterface.
setVolume(0.7);
navigateToTime Sucht eine bestimmte Zeit (Millisekunden) im Film. timeInMilliseconds:Number window.cpAPIInterface.
navigateToTime(3000);
canNavigateToTime Gibt einen booleschen Wert zurück, der zeigt, ob Sie nach einer bestimmten Zeit in dem Film suchen können. timeInMilliseconds:Number window.cpAPIInterface.
canNavigateToTime(3000);
getCurrentFrame Gibt den aktuellen Frame des Films zurück.   window.cpAPIInterface.
getCurrentFrame();
getCurrentSlideIndex Gibt den aktuellen Folienindex des Films zurück.   window.cpAPIInterface.
getCurrentSlideIndex();
getEventEmitter Gibt den Ziehpunkt an das cpAPIEventEmitter-Objekt zurück.   window.cpAPIInterface.
getEventEmitter();

cpAPIEventEmitter

Diese Objekt ist ähnlich dem eines Event Manager. Es stellt den Mechanismus bereit, mit dem verschiedene Ereignisse, die im Inhalt generiert werden, abonniert /abbestellt werden können.

cpAPIEventEmitter ist eine Objekt, das im Fensterbereich verfügbar ist. Um auf das Objekt der Benutzeroberfläche zuzugreifen, finden Sie im Folgenden die empfohlene Nutzung : window.cpAPIEventEmitterwindow.cpAPIInterface

Methoden:

Name Beschreibung Parameter Verwendung

EventListener hinzufügen
Fügt eine Ereignis-Listener-Funktion einem bestimmten Ereignis hinzu.
  • eventName : Einer der
    Ereignisnamen, die auf dieser Seite aufgeführt sind.
  • eventListenerFunction :
    Eine beliebige JavaScript-Funktion.
  • variableName : 
    1. optional. 
    2. Einer der Captivate
      -Variablennamen, dessen Wertänderung angegeben werden muss.
    3. Darf nur mit dem
      CPAPI_
      VARIABLEVALUECHANGED
      -Ereignis verwendet werden.
  • Fenster.
    cpAPIEventEmitter.
    addEventListener("CPAPI_
    MOVIESTART
    ",
    function(){alert
    ("Movie Started");});
  • Fenster.
    cpAPIEventEmitter.
    addEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert("Variable
    Value Changed");},
    "cpQuizInfoStudentID");

EventListener entfernen
Entfernt die Ereignis-Listener-Funktion für ein bestimmtes Ereignis.
  • eventName :
    Einer der Ereignisnamen, die auf
    dieser Seite aufgeführt sind.
  • eventListenerFunction : Eine
    beliebige JavaScript-Funktion.
  • variableName : 
    • optional. 
    • Einer der Captivate
      -Variablennamen, dessen Wertänderung angegeben werden muss.
    • Darf nur mit dem CPAPI_
      VARIABLEVALUECHANGED
      -Ereignis verwendet werden.
  • Fenster.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_MOVIESTART",
    function()
    {alert("Movie Started");});
  • Fenster.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert
    ("Variable Value Changed");},
    "cpQuizInfoStudentID");

Liste von Ereignissen:

Name Beschreibung Ereignisdaten Enumerationen

CPAPI_SLIDEENTER

Zeigt, dass sich der Film auf einer neuen Folie befindet.

slideNumber=NUMBER;

frameNumber=NUMBER;

 lcpversion=STRING;

 

CPAPI_SLIDEEXIT

Zeigt, dass der Film eine Folie beendet.

slideNumber=NUMBER;

frameNumber=NUMBER;

lcpversion=STRING;

percentageSlideSeen=
NUMMER;

 
CPAPI_
STARTPLAYBARSCRUBBING
Zeigt, dass der Benutzer im Film mithilfe der Wiedergabeleiste sucht.    
CPAPI_
ENDPLAYBARSCRUBBING
Zeigt, dass der Benutzer nicht mehr mithilfe der Wiedergabeleiste sucht.    
CPAPI_
INTERACTIVEITEMSUBMIT
Zeigt, dass der Benutzer eine Interaktion mit einem interaktiven Element ausgeführt hat. frameNumber=NUMBER;
includedInQuiz=BOOLEAN;
issuccess=BOOLEAN;
itemname=STRING;
objecttype=NUMBER;
questioneventdata=
[object Object];
slideNumber=NUMBER;
 
CPAPI_MOVIEPAUSE Zeigt, dass der Film angehalten wurde.    
CPAPI_MOVIERESUME Zeigt, dass der Film an der angehaltenen Stelle wieder fortgesetzt wurde.    
CPAPI_MOVIESTART Zeigt, dass der Film begonnen wurde.    
CPAPI_MOVIESTOP Zeigt, dass der Film angehalten wurde.    
CPAPI_QUESTIONSKIP Zeigt, dass der Benutzer eine Fragefolie übersprungen hat. 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 Zeigt, dass der Film eine Fragefolie beantwortet hat. 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

Das Abonnieren dieses Ereignisses erfordert einen zusätzlichen Parameter - variableName. Nachdem das Ereignis abonniert wurde, werden alle Änderungen des Werts der bereitgestellten Variable angezeigt.

captivateVersion=STRING;
varName=STRING;
oldVal=STRING;
newVal=STRING;

 

moduleReadyEvent

Captivate-Inhalte lösen auch ein moduleReadyEvent auf dem übergeordneten Fensterobjekt aus, um anzuzueigen, dass der Inhalt geladen wurde. Benutzer können dieses Ereignis als Bestätigung für die Verfügbarkeit der JavaScript-Benutzeroberfläche verwenden. Mit folgenden Snippets können Sie einen Listener zum moduleReadyEvent hinzufügen:

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

Beispiele

Generieren einer zufälligen Zahl

Der folgende Code erzeugt eine Zahl zwischen 0 und 1.

alert(Math.random());

Der folgende Code erzeugt eine Zahl zwischen 1 und 10.

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

Der folgende Code verwendet eine Funktion, um eine zufällige Zahl zwischen zwei Ganzzahlen zu generieren, die als Argumenteinder Funktion übergeben werden.

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

getRandomInt(10, 300);

Verwenden von Geolocation

Beim Verwenden der Geolocation können Sie den geografischen Standort eines Teilnehmers verwenden, um bestimmte Ereignisse in einem Kurs auszulösen oder zu ermitteln, welche Lernobjekte ausgeblendet oder angezeigt werden.

Sie können dieses Szenario mit erweiterten Aktionen konfigurieren; Sie können jedoch auch Geolocation-Support mithilfe von JavaScript konfigurieren.

  1. Erstellen Sie eine Variable des Typs „Geolocation“ und weisen Sie die folgenden Werte der Variablen zu:

    • Breitengrad
    • Längengrad
    • Genauigkeit
  2. Erstellen Sie ein Projekt mit zwei überlappenden Objekten,ss1und ss2.

    Zeigen Sie abhängig von der konfigurierten Geolocation-Variablen Objekt ss2 an, und blenden Sie Objekt ss1 aus.

    Hinweis:

    Um ein Objekt auszublenden, verwenden Sie cp.hide("object_name");

    Um ein beliebiges Objekt anzuzeigen, verwenden Sie cp.show("object_name");

  3. Wählen Sie auf der ersten Folie Aktionen und wählen Sie JavaScript ausführen aus der Dropdownliste Bei Eingabe. Geben Sie in das Skriptfenster den folgenden Code ein:

    window.cpAPIInterface.setVariableValue("cpInfoGeoLocation","BLR");
    if (window.cpAPIInterface.getVariableValue("cpInfoGeoLocation")==="BLR")
    {
        cp.hide("ss1"); // hide object ss1
        cp.show("ss2"); // show object ss2
    }
    
  4. Projekt in der Vorschau anzeigen. Sie können sehen, dass ein Objekt basierend auf der Geolocation-Variablen angezeigt oder ausgeblendet wird.

Verwenden des lokalen Speichers

Mit dem lokalen Speicher können Sie Daten im Browser lokal speichern. Beispiel:

localStorage.setItem("learnerName","John");

Verwenden der Punktnotation

localStorage.learnerName="John";

Daten im lokalen Speicher sind persistent, auch wenn Sie den Browser schließen und erneut öffnen.

In Adobe Captivate können Sie den lokalen Speicher verwenden, um Variablen von einem Kurs zum nächsten zu übertragen. Um die Einstellungen für den lokalen Speicher zu implementieren,

  1. Erstellen Sie in einem leeren Projekt eine Variable learnerName, die den Namen des Teilnehmers speichert.

  2. Weisen Sie die Variable einem Texteingabefeld zu. Jeder der Namen, den Sie in das Feld eingeben, wird der neuen Variable zugewiesen.

  3. Erstellen Sie eine Schaltfläche in der Nähe des Textfelds. Geben Sie den folgenden JavaScript-Code ein, damit der Code ausgelöst wird, wenn Sie auf die Schaltfläche klicken.

    localStorage.setItem("learnerName", window.cpAPIInterface.getVariableValue("learnerName"));
  4. Projekt in einem Webbrowser in einer Vorschau anzeigen. Geben Sie den Namen eines Teilnehmers ein und klicken Sie auf Senden. Nachdem Sie den Namen der Variablen zugewiesen haben, wird der Wert jetzt im lokalen Speicher gespeichert.

  5. Öffnen Sie den Debuggermodus des Browsers. Öffnen Sie beispielsweise in Chrome den Debuggermodus und klicken Sie auf die Registerkarte Ressourcen. Erweitern Sie den lokalen Speicher und wählen Sie anschließend den erforderlichen Host.

    Sie können den Variablenwert anzeigen, der im lokalen Speicher als Schlüsselwertpaar gespeichert ist.

    1 Name des Teilnehmers.
    2 Name der Variablen.
    3 Wert der Variablen.

Verwenden des Sitzungsspeichers

Im Sitzungsspeicher werden die gespeicherten Daten gelöscht, wenn Sie eine Seitensitzung beenden. Eine Seitensitzung dauert solange die Seite in einem Browser geöffnet ist. Wenn Sie die Seite in einer neuen Registerkarte oder in einem Fenster öffnen, wird eine neue Sitzung gestartet.

sessionStorage("learnerName","John");

Um die Daten vom Sitzungsspeicher zu erhalten,

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

Um Daten aus dem Sitzungsspeicher zu entfernen,

sessionStorage.removeItem("learnerName");

In Captivate können Sie den Namen eines Teilnehmers im Sitzungsspeicher speichern. Beispiel:

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

Nachdem Sie das Projekt im Browser als Vorschau angezeigt haben, öffnen Sie die Debugger-Konsole und im sessionStorage, können Sie den Namen des Teilnehmers finden, wie im Folgenden dargestellt:

1 Name der Variablen.
2 Wert der Variablen.

Erhöhen des Foliendatensatzzählers

Der folgende Code erhält Wert einer benutzerdefinierten Variable mySlideVisitCounter, inkrementiert sie, wenn der Benutzer eine Folie eingibt und sie zurück in den Inhalt setzt.

//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);
																	});
	}
}

Der obige Code kann wie folgt verwendet werden:

 

  1. JavaScript-Aktion ausführen
     
    1. Klicken Sie im Captivate-Projekt im Eigenschafteninspektor auf „Aktionen“

    2. Wählen Sie im OnEnter-Dropdown-Menü „JavaScript ausführen“ und klicken Sie auf „Script_Window“

    3. Fügen Sie den JavaScript-Code in das Fenster ein.

    Sie können eine JavaScript-Aktion in jeder Captivate-Aktion ausführen, wie in folgendem Screenshot gezeigt:

  2. Veröffentlichten Inhalt ändern 

    Sie können den Inhalt auch veröffentlichen und dann mithilfe der JavaScript-Benutzeroberfläche von außen darauf zugreifen.

    Fügen Sie folgendes Snippet der veröffentlichten HTML hinzu:

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

Beispielprojekt

Sie können die angehängte Captivate-Beispielprojekt als Referenz herunterladen.

Herunterladen

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie