이미지로 된 정보를 학습자에게 제시하는 경우가 있다. 이미지가 크거나 매우 세밀할 경우 학습자는 해당 이미지에 담긴 정보를 확인하지 못할 수 있다. 이 경우 이미지 확대/축소 도구를 이용하여 학습자가 이미지 위에서 마우스를 움직여 이미지 일부를 확대하게 할 수 있다. 아래에 한 예를 제시한다.
이미지 확대/축소 도구를 생성하려면 다음 파일이 필요하다.
준비한 일반 크기 이미지 파일과 jquery.loupeAndLightbox.js 를 파일 업로드 페이지에 업로드한다. 이와 관련한 보다 구체적인 정보를 강좌에 강좌에 파일 추가하기 에서 확인할 수 있다.
신규 구성요소 추가 에서 HTML 을 클릭한 후 이미지 확대/축소(Zooming Image) 를 클릭한다.
신규 구성요소가 표시되면 편집 을 클릭한다.
구성요소 편집기에서 초기 문제 텍스트를 원하는 텍스트로 바꾼다.
HTML 탭으로 전환한다.
다음 플레이스홀더를 원하는 콘텐츠로 교체한다.
https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png 이를테면 파일명 및 경로는 /static/Image1.jpg 일 수 있다.
https://studio.edx.org/c4x/edX/DemoX/asset/pathways_overview_01.png 이를테면 파일명과 경로는 /static/Image2.jpg 일 수 있다.
https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js 이미 jquery.loupeAndLightbox.js 를 파일 및 업로드 페이지에 업로드했기 때문에 파일명과 경로는 /static/jquery .loupeAndLightbox.js 가 된다.
저장 을 클릭하여 HTML 구성요소를 저장한다.