Adobe Captivate의 JavaScript 인터페이스

소개

Adobe Captivate에서 새 JavaScript 인터페이스 기능을 사용하여 학습자 콘텐츠를 더욱 효과적으로 만들 수 있습니다. 이 기능은 프로젝트에서 JavaScript 동작을 실행하기 위한 공통 플랫폼을 제공하고 더 강력한 상호 작용을 추가합니다. 

이제 더 작은 JavaScript 스니펫을 써 콘텐츠의 다양한 변수에 액세스할 수 있습니다. 콘텐츠가 생성한 다양한 이벤트를 구독할 수 있습니다. 

JavaScript API는 다음 두 가지 방법으로 사용할 수 있습니다. 

  • 프로젝트에서 JavaScript 동작을 실행합니다. 

  • JavaScript 코드를 런타임에 게시한 HTML에 추가합니다.

Adobe Captivate는 다음과 같은 개체를 지원합니다.

  • cpAPIInterface: JavaScript 동작 실행 시 자주 필요한 유틸리티 기능을 포함합니다.
  • cpAPIEventEmitter: 콘텐츠 내 생성된 다양한 이벤트를 구독 또는 구독 취소할 수 있습니다.
  • cp: 개체 수준 동작을 트리거하는 utils를 포함합니다.

cpAPIInterface

cpAPIEventEmitter는 창 범위에서 사용할 수 있는 개체입니다. 인터페이스 개체에 액세스하려면 window.cpAPIEventEmitter를 사용하십시오.

Adobe Captivate에서는 다음 메서드가 지원됩니다.

메서드 설명 매개 변수 사용
getVariableValue 지정된 변수의 값을 반환합니다.
  window.cpAPIInterface. getVariableValue ("varOne”);
setVariableValue 
변수 이름의 값을 지정된 값으로 설정합니다. variableName: String
window.cpAPIInterface.setVariableValue ("cpQuizInfoStudentID", "John");
play 프로젝트를 재생합니다.   window.cpAPIInterface. play();
pause 프로젝트를 일시 중지합니다.   window.cpAPIInterface.pause();
next 다음 슬라이드로 이동합니다.   window.cpAPIInterface.next();
previous 이전 슬라이드로 이동합니다.   window.cpAPIInterface.previous();
getDurationInSeconds 초 단위로 프로젝트의 전체 지속 시간을 반환합니다. 
  window.cpAPIInterface.getDurationInSeconds();
getEventEmitter cpAPIEventEmitter 개체에 대한 핸들을 반환합니다. 
  window.cpAPIInterface.getEventEmitter();
getCurrentSlideIndex 프로젝트의 현재 슬라이드 인덱스를 반환합니다.   window.cpAPIInterface.getCurrentSlideIndex();

 

 

더 이상 사용되지 않는 메서드

  • getCurrentFrame
  • GetDurationInFrames

예 1

이 예제에서는 변수 생성 워크플로우를 사용하여 변수를 만듭니다. 그런 다음 새 변수를 사용하고 해당 값을 변경하고 경고 메시지로 인쇄합니다.

다음 단계에 따라 변수 값을 설정하고 가져오십시오.

  1. 변수 화면에서 myVar라는 변수를 만들고 변수에 NYC 값을 할당합니다. 

  2. 이 프로젝트에서 스테이지에 버튼을 추가하고 오른쪽 패널에서 상호 작용을 선택합니다. 

  3. 동작 패널에서 추가 > JavaScript 실행을 선택합니다. 다음 코드를 입력합니다.

    window.cpAPIInterface.setVariableValue("myVar","BLR");

    var getVar=window.cpAPIInterface.getVariableValue("myVar");

    alert(getVar);

    수행한 작업은 다음과 같습니다.

    • 1행: myVar 변수의 값을 새 값인 BLR로 변경했습니다. setVariableValue 메서드를 사용하여 값을 변경했습니다.

    • 2행: getVariableValue 메서드를 사용하여 이전 줄에 설정한 새 값을 불러왔습니다. 그런 다음 값을 새 변수인 getVar에 저장합니다.

    • 3행: 경고 상자에 새 값을 표시합니다. 

  4. 완료를 선택합니다.

  5. 프로젝트를 미리 보고 버튼을 선택합니다. 경고 상자가 팝업으로 표시됩니다. 

예 2

이 예제에서는 시스템 변수, Date.DateMMDDYY를 사용하여 현재 날짜를 인쇄합니다. 프로세스는 이전 예에 설명된 대로 유지됩니다.

JavaScript 편집기에서 다음 코드를 입력합니다.

dateVar=window.cpAPIInterface.getVariableValue("Date.DateMMDDYY");

alert(dateVar);

프로젝트를 미리 보고 버튼을 선택하면 경고 상자에 현재 날짜가 표시됩니다.

cpAPIEventEmitter

cpAPIEventEmitter는 창 범위에서 사용할 수 있는 개체입니다. 인터페이스 개체에 액세스하려면 window.cpAPIEventEmitter를 사용하십시오.

지원되는 방법은 다음과 같습니다.

이름 설명 매개 변수 사용
add
EventListener
특정 이벤트에 이벤트 리스너 함수를 추가합니다.
  • eventName : 이 페이지에
    나열된 이벤트 이름 중 하나입니다.
  • eventListenerFunction:
    모든 JavaScript 함수
  • variableName: 
    1. 선택 사항. 
    2. 값이 변경된 Captivate
      변수 이름 중 하나는 알려야 합니다.

    3. CPAPI_
      VARIABLEVALUECHANGED
      이벤트만 사용해야 합니다.
  • window.
    cpAPIEventEmitter.
    addEventListener("CPAPI_
    MOVIESTART
    ",
    function(){alert
    ("동영상 시작됨");});
  • window.
    cpAPIEventEmitter.
    addEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert("변수
    값 변경됨");},
    "cpQuizInfoStudentID");
remove
EventListener
특정 이벤트에서 이벤트 리스너 함수를 제거합니다.
  • eventName :이 페이지에
    나열된 이벤트 이름 중 하나
    입니다.
  • eventListenerFunction: 모든
    JavaScript 함수
  • variableName: 
    • 선택 사항. 
    • 값이 변경된 Captivate
      변수 이름 중 하나는 알려야 합니다.
    • CPAPI_
      VARIABLEVALUECHANGED
      이벤트만 사용해야 합니다.
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_MOVIESTART",
    function()
    {alert("동영상 시작됨");});
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert
    ("변수값 변경됨");},
    "cpQuizInfoStudentID");

지원되는 이벤트

이벤트 목록:

이름 설명 이벤트 데이터 열거

CPAPI_SLIDEENTER

동영상에 새 슬라이드가 입력되었음을 알립니다.

slideNumber=NUMBER;

frameNumber=NUMBER; (더 이상 사용되지 않음)

 lcpversion=STRING; (지원되지 않음)

 

CPAPI_SLIDEEXIT

동영상이 기존 슬라이드임을 알립니다.

slideNumber=NUMBER;

frameNumber=NUMBER; (더 이상 사용되지 않음)

lcpversion=STRING; (지원되지 않음)

percentageSlideSeen=
NUMBER; (지원되지 않음)

 
CPAPI_
STARTPLAYBARSCRUBBING
사용자가 재생 막대를 사용하여 동영상을 검색하기 시작했음을 알립니다. 지원되지 않음  
CPAPI_
ENDPLAYBARSCRUBBING
사용자가 재생 막대를 사용하여 동영상 검색을 중지했음을 알립니다. 지원되지 않음  
CPAPI_INTERACTIVEITEM 사용자가 대화형 항목을 사용하여 상호 작용을 수행했음을 알립니다. frameNumber=NUMBER; (더 이상 사용되지 않음)
includedInQuiz=BOOLEAN; (지원되지 않음)
issuccess=BOOLEAN; (지원되지 않음)
itemname=STRING;
objecttype=NUMBER;
questioneventdata=
[object Object]; (지원되지 않음)
slideNumber=NUMBER;
 
CPAPI_MOVIEPAUSE 동영상이 일시 중지되었음을 알립니다.    
CPAPI_MOVIERESUME 동영상이 일시 중지 상태에서 다시 재생되었음을 알립니다.    
CPAPI_MOVIESTART 동영상이 시작되었음을 알립니다.    
CPAPI_MOVIESTOP 동영상이 중지되었음을 알립니다. (지원되지 않음)
 
CPAPI_QUESTIONSKIP 사용자가 질문 슬라이드를 건너뛰었음을 알립니다. 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

지원되는 이벤트:

  • correctAnswer
  • infiniteAttempts
  • interactionID
  • questionAnswered
  • questionAnsweredCorrectly
  • questionAttempts
  • questionMaxAttempts
  • questionMaxScore
  • questionNumber
  • questionScore
  • QuestionType(choice, true-false, long-fill-in, sequencing, matching)
  • reportAnswers
  • selectedAnswer
  • slideNumber
CPAPI_QUESTIONSUBMIT 동영상이 질문 슬라이드에 대답했음을 알립니다. 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;

지원되는 이벤트:

  • correctAnswer
  • infiniteAttempts
  • interactionID
  • questionAnswered
  • questionAnsweredCorrectly
  • questionAttempts
  • questionMaxAttempts
  • questionMaxScore
  • questionNumber
  • questionScore
  • QuestionType(choice, true-false, long-fill-in, sequencing, matching)
  • reportAnswers
  • selectedAnswer
  • slideNumber
CPAPI_
VARIABLEVALUECHANGED

이 이벤트를 구독하려면 추가 매개 변수가 필요합니다 - variableName. 이 이벤트를 구독하면 제공된 변수 값의 모든 변경 사항에 대한 알림을 받게 됩니다.

captivateVersion=STRING; (지원되지 않음)
varName=STRING;
oldVal=STRING;
newVal=STRING;

 

CPAPI_VARIABLEVALUECHANGED 이벤트에 대한 이벤트 이미터를 시작합니다. 트리거될 때 첫 번째 또는 두 번째 옵션을 선택했는지, 라디오 버튼 그룹의 상태를 알립니다.

var alertEvent = function(){alert("Variable Value Changed")};

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED", alertEvent , "radioOption1");

라디오 버튼 그룹의 경우, 선택 이벤트에 대해 다음 JS 코드를 사용합니다.

버튼 1

window.cpAPIInterface.setVariableValue("radioOption1", 'You have selected first option');

버튼 2

var option1 = window.cpAPIInterface.getVariableValue("radioOption1"); 

window.cpAPIInterface.setVariableValue("radioOption1", 'You have selected second option')

cp

개체 수준 동작을 트리거합니다. 지원되는 방법은 다음과 같습니다.

  • show

  • hide

cp.hide("ss1"); // 개체 ss1을 숨김

cp.show("ss2"); // 개체 ss2를 표시함

쉽고 빠르게 지원 받기

신규 사용자이신가요?