Adobe Captivate의 공통 JavaScript 인터페이스 알아보기

검색

Adobe Captivate에서 JavaScript 인터페이스 새 기능을 사용하여 학습자 콘텐트를 더욱 효과적으로 만들 수 있습니다. 이 기능은 SWF와 HTML 간의 JavaScript 동작 실행을 위한 공통 플랫폼을 제공합니다. 또한 JavaScript가 실제 컨텐츠에 보다 쉽게 액세스하도록 지원합니다.

이제 더 작은 JavaScript 스니펫을 써 컨텐츠의 다양한 변수에 액세스할 수 있습니다. 컨텐츠가 생성한 다양한 이벤트를 구독할 수 있습니다. 컨텐츠 형식이 SWF인지 HTML인지 여부에 관계없이 수행 가능한 작지만 강력한 작업입니다. 

다음은 공통 JavaScript 인터페이스를 사용하는 두 가지 방법입니다.

  1. Captivate 프로젝트에서 JavaScript 동작을 수행합니다. 
  2. JavaScript 코드를 런타임에 게시한 html에 추가합니다.
자세한 내용은 예제 섹션을 참고하십시오. 

위 다이어그램과 같이 JavaScript는 브라우저와 컨텐츠(SWF/HTML5) 사이에서 인터페이스 역할을 합니다. 

cpAPIInterface

이 개체는 완전한 JavaScript 인터페이스를 갖추고 있는 기본 개체입니다. 이 개체는 JavaScript 동작 실행 시 자주 필요한 다양한 작은 유틸리티 기능을 포함합니다. 

cpAPIInterface는 창 범위에서 사용할 수 있는 개체입니다. 인터페이스 개체에 액세스하려면 다음을 사용하는 것이 좋습니다.  window.cpAPIInterface

메서드:

이름

설명

매개 변수

사용
getVariableValue 지정된 변수 이름 값을 반환합니다. - window.cpAPIInterface.
getVariableValue
("cpQuizInfoStudentID)";
setVariableValue 지정된 값으로 지정된 변수 이름 값을 설정합니다. variableName:String window.cpAPIInterface.
setVariableValue
("cpQuizInfoStudentID",
"John");
play 동영상이 재생됩니다.   window.cpAPIInterface.
play();
pause 동영상이 일시 중지됩니다.   window.cpAPIInterface.
pause();
stop 동영상 재생이 중지됩니다.   window.cpAPIInterface.
stop();
rewind 동영상이 되감기되고 재생됩니다.   window.cpAPIInterface.
rewind();
next 다음 슬라이드에서 동영상을 찾습니다.   window.cpAPIInterface.
next();
previous 이전 슬라이드에서 동영상을 찾습니다.   window.cpAPIInterface.
previous();
fastForward 동영상 재생 속도가 2배, 4배로 빨라졌다가 정상 속도로 돌아오는 과정이 요청에 따라 반복됩니다.   window.cpAPIInterface.
fastForward();
getPlaySpeed 초당 프레임(fps)으로 동영상 재생 속도를 반환합니다.   window.cpAPIInterface.
getPlaySpeed();
getDurationInFrames 동영상의 총 프레임 수를 반환합니다.   window.cpAPIInterface.
getDurationInFrames();
getDurationInSeconds 초 단위로 동영상의 전체 지속 시간을 반환합니다.   window.cpAPIInterface.
getDurationInSeconds();
getVolume 백분율로 동영상의 볼륨을 반환합니다.   window.cpAPIInterface.
getVolume();
setVolume 동영상 볼륨을 설정 합니다. volume:Number (range : 0 - 1) window.cpAPIInterface.
setVolume(0.7);
navigateToTime 동영상에서 특정 시간(밀리초)을 검색합니다. timeInMilliseconds:Number window.cpAPIInterface.
navigateToTime(3000);
canNavigateToTime 동영상에서 특정 시간을 검색할 수 있는지 상관없이 나타나는 부울 값을 반환합니다. timeInMilliseconds:Number window.cpAPIInterface.
canNavigateToTime(3000);
getCurrentFrame 동영상의 현재 프레임을 반환 합니다.   window.cpAPIInterface.
getCurrentFrame();
getCurrentSlideIndex 동영상의 현재 슬라이드 인덱스를 반환합니다.   window.cpAPIInterface.
getCurrentSlideIndex();
getEventEmitter cpAPIEventEmitter 개체에 대한 핸들을 반환합니다.   window.cpAPIInterface.
getEventEmitter();

cpAPIEventEmitter

이 개체는 다른 이벤트 관리자와 비슷합니다. 컨텐츠에서 생성된 다양한 이벤트를 구독/구독 해지할 수 있는 매커니즘을 제공합니다.

cpAPIEventEmitter는 창 범위에서 사용할 수 있는 개체입니다. 인터페이스 개체에 액세스하려면 다음을 사용하는 것이 좋습니다. window.cpAPIEventEmitter

메서드:

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

    3. 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		 특정 이벤트에서 이벤트 리스너 함수를 제거합니다.
  • eventName:
    이 페이지에 나열된
    이벤트 이름 중 하나
  • eventListenerFunction: 모든
    JavaScript 함수
  • variableName: 
    • 선택 사항. 
    • 값이 변경된 Captivate
      변수 이름 중 하나는 알려야 합니다.
    • CPAPI_
      VARIABLEVALUECHANGED       이벤트만 사용해야 합니다.
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_MOVIESTART",
    function()
    {alert("Movie Started");});
  • window.
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED    ",
    function(){alert
    ("Variable Value Changed");},
    "cpQuizInfoStudentID");

이벤트 목록:

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

CPAPI_SLIDEENTER

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

slideNumber=NUMBER;

frameNumber=NUMBER;

 lcpversion=STRING;

  

CPAPI_SLIDEEXIT

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

slideNumber=NUMBER;

frameNumber=NUMBER;

lcpversion=STRING;

percentageSlideSeen=
NUMBER;

  
CPAPI_
STARTPLAYBARSCRUBBING		 사용자가 재생 막대를 사용하여 동영상을 검색하기 시작했음을 알립니다.    
CPAPI_
ENDPLAYBARSCRUBBING		 사용자가 재생 막대를 사용하여 동영상 검색을 중지했음을 알립니다.    
CPAPI_
INTERACTIVEITEMSUBMIT		 사용자가 대화형 항목을 사용하여 상호 작용을 수행했음을 알립니다. 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
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;		  
CPAPI_
VARIABLEVALUECHANGED

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

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

  

moduleReadyEvent

또한 Captivate 컨텐츠는 부모창 개체에서 moduleReadyEvent 를 파이어하여 컨텐츠가 로드되었음을 알립니다. 사용자는 이 이벤트를 통해 JavaScript 인터페이스를 사용할 수 있는지 알 수 있습니다. 다음 스니펫은 moduleReadyEvent에 대한 수신기 추가를 허용합니다. 

window.addEventListener("moduleReadyEvent", function(evt)
{
 //evt.Data는 인터페이스 개체를 전달합니다.
 //window.cpAPIInterface와 같음
 var interfaceObj = evt.Data;
 var eventEmitterObj = interfaceObj.getEventEmitter();
});

예제

난수 생성

아래의 코드는 0과 1 사이의 난수를 생성합니다.

alert(Math.random());

다음 코드는 1과 10 사이의 숫자를 생성합니다.

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

다음 코드는 함수를 사용하여 함수에서 인수로 전달되는 두 개 정수 사이의 난수를 생성합니다.

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

getRandomInt(10, 300);

지리적 위치 사용

지리적 위치를 사용하면 학습자의 지리적 위치를 사용하여 과정에서 특정 이벤트를 트리거하고, 숨기거나 표시할 학습 개체를 결정할 수 있습니다.

고급 동작을 사용하여 이 시나리오를 구성할 수 있지만 JavaScript를 사용하여 지리적 위치 지원을 구성할 수도 있습니다.

  1. 지리적 위치 유형의 변수를 만들고 다음 값을 해당 변수에 지정합니다.

    • 위도
    • 경도
    • 정확도

  2. 2개 개체 ss1 및 ss2가 포함된 프로젝트를 만듭니다.

    구성된 지리적 위치 변수에 따라 개체 ss2가 표시되고 개체 ss1이 숨겨집니다.

    참고:

    개체를 숨기려면 cp.hide("object_name") 사용;

    개체를 표시하려면 cp.show("object_name") 사용;

  3. 첫 번째 슬라이드에서 동작을 선택하고 입력할 때 드롭다운 목록에서 JavaScript 실행을 선택합니다. 스크립트 창에 다음 코드를 입력합니다.

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

  4. 프로젝트를 미리 봅니다. 지리적 위치 변수에 기반하여 표시되거나 숨겨진 개체를 볼 수 있습니다.

로컬 저장소 사용

로컬 저장소를 사용하면 브라우저 내에서 데이터를 로컬로 저장할 수 있습니다. 예:

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

점 표기법 사용:

localStorage.learnerName="John";

브라우저를 닫고 다시 연 후에도 로컬 저장소에 데이터가 계속 저장됩니다.

Adobe Captivate에서는 로컬 저장소를 사용하여 하나의 과정에서 다음 과정으로 변수를 전송할 수 있습니다. 로컬 저장소를 구현하려면:

  1. 빈 프로젝트에서 학습자의 이름이 저장된 learnerName 변수를 만듭니다.

  2. 텍스트 입력 상자에 변수를 할당합니다. 상자에 입력하는 이름이 새 변수에 할당됩니다.

  3. 텍스트 입력 상자 가까이에 단추를 만듭니다. 단추를 클릭하면 코드가 트리거되도록 다음 JavaScript 코드를 입력합니다.

    localStorage.setItem("learnerName", window.cpAPIInterface.getVariableValue("learnerName"));

  4. 브라우저에서 프로젝트를 미리 봅니다. 학습자의 이름을 입력하고 제출을 클릭합니다. 이름이 변수에 할당되면 해당 값이 로컬 저장소에 저장됩니다.

  5. 브라우저의 디버거 모드를 엽니다. 예를 들어, Chrome에서 디버거 모드를 열고 리소스 탭을 클릭합니다. 로컬 저장소를 확장한 다음 필요한 호스트를 선택합니다.

    로컬 저장소에 저장된 변수 값을 키-값 쌍으로 확인할 수 있습니다.

    1

    학습자 이름

    2

    변수 이름

    3

    변수 값

세션 저장소 사용

세션 저장소에서는 페이지 세션을 종료하면 저장된 데이터가 삭제됩니다. 페이지 세션은 해당 페이지가 브라우저에서 열려 있는 한 유지됩니다. 새로운 탭 또는 창에서 해당 페이지를 열면 새로운 세션이 시작됩니다.

sessionStorage("learnerName","John");

세션 저장소에서 데이터를 가져오려면:

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

세션 저장소에서 데이터를 제거하려면:

sessionStorage.removeItem("learnerName");

Captivate에서는 세션 저장소에 학습자 이름을 저장할 수 있습니다. 예:

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

브라우저에서 프로젝트를 미리 본 후 디버거 콘솔을 열면 세션 저장소에 아래와 같이 학습자의 이름이 표시됩니다.

1

변수 이름

2

변수 값

슬라이드 수 증가

다음 코드는 사용자가 슬라이드를 입력하고 콘텐트에서 다시 설정할 때마다 증가되는 사용자 변수 값 "mySlideVisitCounter"를 표시합니다.

//window.cpAPIInterface 사용 가능 여부 확인
if(window.cpAPIInterface) 
{
 //window.cpAPIEventEmitter 사용 가능 여부 확인
 if(window.cpAPIEventEmitter) 
 {
  //CPAPI_SLIDEENTER 이벤트에 수신기 추가
  window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER",function(e)
                 {
                  //Captivate 콘텐츠에서 현재 mySlideVisitCounter 값 가져오기 
                  var lSlideVisitCtr = window.cpAPIInterface.getVariableValue("mySlideVisitCounter"); 
                  //lSlideVisitCtr을 1만큼 증가
                  lSlideVisitCtr = lSlideVisitCtr + 1;
                  //Captivate 콘텐츠에서 mySlideVisitCounter 값 설정
                  window.cpAPIInterface.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
                 });
 }
}

위 코드는 다음과 같이 사용 할 수 있습니다:

 

  1. JavaScript 동작 수행
    1. Captivate 프로젝트의 속성 관리자에서 [동작] 탭을 클릭합니다.

    2. OnEnter 드롭다운에서 [JavaScript 수행]을 선택하고 [Script_Window]를 클릭합니다.

    3. 창에 JavaScript 코드를 붙여 넣습니다. 

    다음 스크린 샷과 같이 모든 Captivate 동작에서 JavaScript 동작을 수행할 수 있습니다.

  2. 게시된 컨텐츠 수정

    또한 외부에서 JavaScript 인터페이스를 사용하여 컨텐츠를 게시하고 내부 컨텐츠에 액세스할 수 있습니다.

    게시된 HTML에서 다음 스니펫을 추가합니다.

    <script>
var interfaceObj;
var eventEmitterObj;
window.addEventListener(&quot;moduleReadyEvent&quot;, function(evt)
{
    //evt.DataData는 인터페이스 개체를 전달합니다.
    //window.cpAPIInterface와 동일
    interfaceObj = evt.Data;
    eventEmitterObj = interfaceObj.getEventEmitter();
});
//window.cpAPIInterface 사용 가능 여부 확인
if(interfaceObj)
{
    //window.cpAPIEventEmitter 사용 가능 여부 확인
    if(eventEmitterObj)
    {
        //CPAPI_SLIDEENTER 이벤트에 수신기 추가
        eventEmitterObj.addEventListener(&quot;CPAPI_SLIDEENTER&quot;,function(e)
                                                            {
                                                                //Captivate 콘텐츠에서 현재 mySlideVisitCounter 값 가져오기  
                                                                var lSlideVisitCtr = interfaceObj.getVariableValue(&quot;mySlideVisitCounter&quot;);   
                                                                //lSlideVisitCtr을 1만큼 증가
                                                                lSlideVisitCtr = lSlideVisitCtr + 1;
                                                                //Captivate 콘텐츠에서 mySlideVisitCounter 값 설정
                                                                interfaceObj.setVariableValue(&quot;mySlideVisitCounter&quot;,lSlideVisitCtr);
                                                            });
    }
}
</script>
Adobe 로고

내 계정 로그인

빠른 링크

내 플랜 모두 보기 내 플랜 관리

법적 고지 사항    |    온라인 개인정보 처리방침