사용 안내서 취소

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를 추가할 수 있습니다. 사용자가 상자나 단추의 내부 또는 외부를 클릭할 때 JavaScript가 실행될 수 있습니다. JavaScript를 사용하면 상호 작용을 추가하면서 다양한 방법으로 프로젝트를 확장할 수 있습니다.

  1. 클릭 상자, 텍스트 입력 상자 또는 단추를 클릭합니다.

  2. 속성 관리자의 동작 섹션에서, 성공한 경우 드롭다운 목록의 JavaScript 실행을 선택합니다.

  3. Script_Window를 클릭합니다.

  4. 텍스트 상자에 JavaScript 코드를 입력하고 [확인]을 클릭합니다. JavaScript가 다른 위치에 있는 경우 이를 복사하여 텍스트 상자에 붙여 넣습니다.

예제

이 예제에서는 텍스트 입력 상자에 이름을 입력한 후 버튼을 클릭합니다. 입력한 이름이 미리 정의된 값과 일치하는 경우 성공 메시지가 표시되고, 그렇지 않은 경우 실패 메시지가 표시됩니다.

  1. 프로젝트에 대한 uName 변수를 만듭니다. uName에는 어떤 값도 할당하지 마십시오. 변수를 만드는 방법에 대한 자세한 내용은 변수 만들기를 참조하십시오.

  2. 텍스트 입력 상자를 삽입하고(텍스트 > 텍스트 입력 상자) 텍스트 입력 상자에서 변수를 값으로 할당합니다. 상자에서 텍스트 캡션을 강조 표시하고 속성 관리자에서 [X]를 클릭합니다. [X]를 클릭하면 만든 변수를 선택하고 텍스트 입력 상자에서 해당 변수를 텍스트로 삽입한 드롭다운 목록이 표시됩니다.

    고급 동작 패널에서 설정할 이름 외 모든 이름에 대한 확인이 이루어집니다.

  3. 텍스트 입력 상자 가까이에 단추를 삽입합니다(상호 작용 > 단추). 단추를 선택하고 속성 관리자에서 동작을 클릭한 다음, 성공한 경우 드롭다운 목록에서 JavaScript 실행을 선택합니다.

    또한 브라우저에서 제출 단추를 클릭하면 슬라이드가 일시 정지되도록 프로젝트 계속 재생 확인란의 선택을 해제합니다.

  4. 스크립트 편집기에서 다음 JavaScript 코드를 입력합니다.

    myName=window.cpAPIInterface.getVariableValue("uName");
    if (myName=="John")
    {
             alert("Hello "+ myName + "!");
    }
    else
    {
             alert("Wrong name. Try again.");
    }
    
  5. 브라우저에서 프로젝트를 실행합니다. 텍스트 필드에 "John"을 입력하고 제출을 클릭하면 Hello John!이라고 표시된 팝업이 나타납니다.

    그 외 다른 단어를 입력하면 실패 메시지를 표시하는 팝업이 나타납니다.

두 번째 예제에서는 현재 날짜 또는 프로젝트의 슬라이드 개수와 같은 일부 기본 Captivate 변수를 사용합니다. 전체 Captivate 시스템 변수 목록은 Captivate 변수를 참조하십시오.

이전 절차에서와 같이 단추를 만들고, 이벤트를 클릭하면 일부 JavaScript 코드가 실행되도록 할당합니다.

현재 날짜가 DD/MM/YYYY 형식으로 표시하려면 cpInfoCurrentDateStringDDMMYYYY 변수를 사용합니다. 코드 편집기에서 다음 JavaScript 코드를 입력합니다.

myDate=window.cpAPIInterface.getVariableValue("cpInfoCurrentDateStringDDMMYYYY");
alert(myDate);
Adobe 로고

내 계정 로그인