Benutzerhandbuch Abbrechen

Erfahren Sie mehr über die gemeinsame JavaScript-Benutzeroberfläche für Adobe Captivate

Suchen

Zuletzt aktualisiert am

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:

Führen Sie die JavaScript-Aktion von einem Captivate-Projekt aus durch.
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 : optional. Einer der Captivate -Variablennamen, dessen Wertänderung angegeben werden muss. 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 Reihenfolge Zuordnung Likert questionType - choice true-false fill-in long-fill-in hot-spot Reihenfolge Zuordnung 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(&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();
});

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 Argumente in der 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.

Erstellen Sie eine Variable des Typs „Geolocation“ und weisen Sie die folgenden Werte der Variablen zu:
- Breitengrad
- Längengrad
- Genauigkeit
Erstellen Sie ein Projekt mit zwei überlappenden Objekten, ss1 und 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");

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(&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
}

Zeigen Sie das Projekt in der Vorschau an. 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(&quot;learnerName&quot;,&quot;John&quot;);

Verwenden der Punktnotation

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

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,

Erstellen Sie in einem leeren Projekt eine Variable learnerName, die den Namen des Teilnehmers speichert.
Weisen Sie die Variable einem Texteingabefeld zu. Jeder der Namen, den Sie in das Feld eingeben, wird der neuen Variable zugewiesen.
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(&quot;learnerName&quot;, window.cpAPIInterface.getVariableValue(&quot;learnerName&quot;));
```
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.

Ö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(&quot;learnerName&quot;,&quot;John&quot;);

Um die Daten vom Sitzungsspeicher zu erhalten,

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

Um Daten aus dem Sitzungsspeicher zu entfernen,

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

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

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

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

Der obige Code kann wie folgt verwendet werden:

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:

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

Bei Ihrem Konto anmelden