사용 안내서 취소

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

  1. Captivate 사용자 가이드
  2. Captivate 소개
    1. Adobe Captivate의 새로운 기능
    2. Adobe Captivate 시스템 요구 사항
    3. Adobe Captivate 다운로드
    4. Adobe Captivate(2019 릴리스) 업데이트 5의 새로운 기능
    5. Adobe Captivate(2019 릴리스) 업데이트 2의 새로운 기능
    6. Adobe Captivate 11.8 릴리스 노트
    7. Adobe Captivate 릴리스 노트
    8. Adobe Captivate Draft용 시스템 요구 사항 및 다운로드 지침
    9. Adobe Captivate를 이용한 반응형 프로젝트 디자인
  3. 프로젝트 만들기
    1. Adobe Captivate에서 다양한 유형의 프로젝트 만들기
    2. Adobe Captivate 프로젝트 크기 사용자 정의하기
    3. Adobe Captivate를 이용한 반응형 프로젝트 디자인
    4. 가상 현실(VR) 프로젝트 만들기
    5. Adobe Captivate에서 반응형 텍스트로 작업
    6. Adobe Captivate 테마 활용
    7. 반응형 프로젝트에서 보기별 속성을 적용하는 방법
    8. Adobe Captivate 프로젝트의 백업 파일 만들기
    9. 자산 패널
    10. Captivate에서 분기 및 강제 탐색 만들기
    11. 스테이지에서 이미지 바꾸기
  4. 개체 추가 및 관리
    1. Adobe Captivate에서 다중 상태 개체 작업
    2. 개체 효과
    3. Adobe Captivate 프로젝트에 웹 개체 삽입
    4. Adobe Captivate에서 개체 스타일로 작업
    5. Adobe Captivate에서 개체를 회전하는 방법
    6. 픽셀 단위로 개체 크기 조정 및 위치 변경하기
    7. 기본 옵션 도구 모음을 이용하여 개체 관리하기
    8. 슬라이드에서 개체를 병합하는 방법
    9. 라이브러리에서 개체를 관리하는 방법
    10. Adobe Captivate에서 개체를 그룹화하는 방법
    11. [고급 상호 작용] 패널을 사용하여 개체 정보 편집
    12. Adobe Captivate에서 개체를 복사, 붙여 넣기 및 복제하는 방법
    13. 개체의 가시성 제어
    14. Adobe Captivate에서 개체의 표시 순서를 변경하는 방법
    15. 개체에 그림자 적용하기
    16. Adobe Captivate에서 개체를 맞추는 방법
    17. Adobe Captivate에서 객체에 반사를 추가하는 방법
    18. Captivate 프로젝트로 자산 가져오기
  5. 슬라이드
    1. Adobe Captivate 프로젝트에 슬라이드 추가
    2. Adobe Captivate 프로젝트에서 슬라이드 편집
    3. Adobe Captivate 프로젝트 슬라이드 삭제하기
    4. Adobe Captivate에서 슬라이드 순서 변경하기
    5. Adobe Captivate에서 슬라이드 속성 설정
    6. Adobe Captivate에서 슬라이드 노트 추가 및 오디오 파일로 변환
    7. Adobe Captivate에서 지식 점검 슬라이드 설정
    8. Adobe Captivate에서 슬라이드 전환을 추가하는 방법
    9. Adobe Captivate에서 마스터 슬라이드 사용하기
    10. Adobe Captivate 슬라이드를 잠그는 방법
    11. Adobe Captivate 프로젝트에서 슬라이드 숨기기 또는 제외하기
    12. Adobe Captivate의 슬라이드 그룹화 및 그룹화 해제 방법
  6. 타임라인 및 눈금선
    1. 눈금자 및 안내선 사용
    2. Adobe Captivate에서 눈금선으로 작업
    3. 타임라인 작업
    4. Adobe Captivate 바로 가기 키
    5. 필름 스트립으로 작업하기
    6. Adobe Captivate 작업 영역을 사용자 정의하는 방법
    7. Adobe Captivate 라이브러리를 사용하는 방법
    8. Adobe Captivate에서 분기 패널을 사용하는 방법
  7. 퀴즈 만들기
    1. Adobe Captivate 프로젝트에 질문 슬라이드 삽입
    2. Adobe Captivate용 퀴즈 기본 설정 지정
    3. 학습자가 모든 퀴즈 답변을 한번에 제출하는 방법
    4. Adobe Captivate에서 질문 슬라이드 설정하기
    5. Adobe Captivate에서 무작위 질문 슬라이드 사용
    6. 사용자의 퀴즈 복귀를 허용하는 방법
    7. CSV 형식 파일에서 질문 가져오기
    8. GIFT 형식 파일에서 질문 가져오기
    9. Adobe Captivate에서 사전 테스트를 삽입하는 방법
  8. 오디오
    1. Adobe Captivate 프로젝트에 오디오 삽입하기
    2. Adobe Captivate에서 오디오 미리 듣기
    3. Adobe Captivate에서 오디오 파일 편집하기
    4. Adobe Captivate에서 오디오 세부 사항 보기
    5. 오디오 녹음 환경 설정 및 오디오 녹음
    6. Adobe Captivate에서 오디오 내보내기
  9. 비디오
    1. 슬라이드 비디오
    2. Adobe Captivate에서 이벤트 비디오로 작업
    3. Adobe Captivate에서 이벤트와 동기화된 비디오 간에 차이
  10. 대화형 개체
    1. Captivate 프로젝트에 대화형 단추 추가하기
    2. Adobe Captivate에서 클릭 상자 만들기
    3. Adobe Captivate에서 텍스트 입력 상자 추가
    4. 상자 및 단추에 오디오를 추가하는 방법
    5. Adobe Captivate에서 상자 및 단추에 JavaScript를 추가하는 방법
  11. 상호 작용
    1. Adobe Captivate에서 학습 상호 작용 만들기
    2. Adobe Captivate에서 드래그 앤 드롭 상호 작용 만들기
    3. Adobe Captivate에서 위젯과 상호 작용을 구성하는 방법
    4. 위젯에서 Adobe Captivate 변수 사용
    5. Adobe Captivate에서 위젯 속성 설정
    6. Adobe Captivate에서 정적, 대화형 및 질문 위젯을 만드는 방법
    7. Adobe Captivate 프로젝트에 위젯을 추가하는 방법
  12. 비대화형 개체
    1. 스마트 모양 생성 및 편집
    2. Captivate를 이용한 텍스트 캡션 편집 및 작성
    3. Captivate에서 이미지 및 롤오버 이미지 사용하기
    4. Adobe Captivate에서 스마트 모양을 사용자 정의하는 방법
    5. Adobe Captivate에서 확대/축소 영역을 만드는 방법
    6. 비대화형 개체에 오디오 설정하기
    7. Adobe Captivate에서 롤오버 슬라이드렛 만드는 방법
    8. Adobe Captivate에서 롤오버 캡션 만들기
    9. Adobe Captivate에서 마우스 속성 변경
    10. Captivate에서 강조 상자 사용하기
    11. Adobe Captivate에서 색상 견본으로 작업
    12. 비대화형 개체의 크기 및 위치 고정하기
    13. Adobe Captivate 프로젝트에 애니메이션 추가
  13. 고급 편집 및 프로젝트 검토
    1. Adobe Captivate 프로젝트를 연결하는 방법
    2. 콘텐트 가져오기, 내보내기 및 삭제
    3. 스킨
    4. Adobe Captivate에서 액세스 가능한 프로젝트 만들기
    5. Adobe Captivate를 이용하여 TOC(목차) 만들기
    6. Adobe Captivate 프로젝트 크기 조정
    7. 프로젝트 및 프로젝트 환경 설정
    8. Adobe Captivate에서 프로젝트를 미리 보는 방법
  14. 변수 및 고급 동작
    1. Adobe Captivate 변수
    2. Adobe Captivate에서 사용자 정의 변수 만드는 방법
    3. Adobe Captivate의 고급 동작
    4. Adobe Captivate 프로젝트의 공유 동작
    5. Adobe Captivate에서 사용자 정의 변수 편집 또는 삭제하기
    6. 이벤트에 고급 동작을 할당하는 방법
  15. 프로젝트 기록
    1. 대화형 비디오 만들기
    2. Captivate에서 자동 및 수동으로 기록하기
    3. Adobe Captivate에서 기록 환경 설정
    4. Adobe Captivate에서 비디오 데모 녹화
    5. Adobe Captivate에서 소프트웨어 시뮬레이션 기록하기
    6. 기록을 일시 중지하는 방법
  16. 프로젝트 게시
    1. 반응형 프로젝트를 미리 보고 게시
    2. Adobe Captivate Prime에 프로젝트 게시
    3. Adobe Captivate에서 프로젝트를 HTML5 파일로 게시하기
    4. 프로젝트를 실행 파일로 게시
    5. Adobe Captivate에서 프로젝트를 MP4 파일로 게시
    6. Adobe Captivate에서 게시 환경 설정 지정
    7. Adobe Captivate에서 Adobe 글꼴의 웹 글꼴 사용
    8. 내부 서버에 퀴즈 결과 보고
  17. 다른 응용 프로그램과 함께 Adobe Captivate 사용
    1. Captivate에서 Powerpoint 프레젠테이션 가져오기 및 편집하기
    2. 교육 관리 시스템에 Adobe Captivate 프로젝트 업로드
    3. Adobe Captivate의 공통 JavaScript 인터페이스 알아보기
    4. Captivate 프로젝트를 Microsoft Word로 게시하는 방법
    5. Captivate에서 Adobe Connect 사용하기
    6. Captivate 프로젝트를 RoboHelp 온라인 도움말 시스템에 추가하는 방법
    7. Adobe 다중 SCORM 패키지 프로그램을 사용하여 다중 SCO를 패키지하는 방법
  18. Adobe Captivate 문제 해결
    1. 최신 버전의 Adobe Captivate, Adobe FrameMaker 및 Adobe RoboHelp의 알려진 문제 및 제한 사항을 해결합니다.
    2. MacOS Big Sur (macOS 11)의 Captivate (2019 릴리스) 초기 빌드
    3. VR 콘텐츠에 대한 핫픽스가 장치에서 재생되지 않음
    4. 장치에서 실시간 미리보기에 대한 SSL 구성
    5. MacOS Catalina의 Captivate(2019 릴리스) 활성화 문제
    6. Captivate 반응형 강의가 브라우저에서 자동 재생되지 않습니다.
    7. Adobe Captivate의 자산 패널 관련 문제(2019 릴리스)
    8. Adobe Captivate를 설치하는 동안 오류 103
    9. Captivate 프로젝트 미리보기 시 발생하는 문제

 

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개 개체 ss1ss2가 포함된 프로젝트를 만듭니다.

    구성된 지리적 위치 변수에 따라 개체 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 로고

내 계정 로그인