8.11. 드래그 앤 드롭(Drag & Drop) 문제(업그레이드 버전)

주석

K-MOOC은 이 문제 유형에 대해 전체 지원을 제공한다.

드래그 앤 드롭 문제에서 학습자는 텍스트나 오브젝트를 드래그하여 이미지의 특정 위치에 드롭하여 질문에 응답한다. 이 장에선 어떻게 강좌에 드래그 앤 드롭 문제를 활용하는지 설명한다.

주석

이 드래그 앤 드롭 문제 유형은 이전 있었던 유형의 새로운 버전이다. 새로운 드래그 앤 드롭 문제 유형은 많은 기능이 추가되었으며 강좌 개발에 활용할 수 있다. 이전 드래그 앤 드롭 문제 유형은 드래그 앤 드롭 문제(기존) 를 참고하면 된다.

8.11.1. 드래그 앤 드롭 문제 개관

드래그 앤 드롭 문제는 배경 이미지와 학습자가 드래그 할 수 있는 하나 이상의 대상으로 구성된다. 드래그 대상과 드롭의 수에는 제한이 없다. 또, 드롭 위치가 없는 가짜 드래그 대상을 만들 수 있고 드래그 대상이 없는 가짜 드롭 위치도 만들 수 있다.

학습자가 학습 관리 시스템에서 드래그 앤 드롭 문제를 볼 때 상단 하단으로 나뉜다. 학습자는 상단에서 드래그 대상을 선택해 하단의 드롭 위치에 놓는다.

학습자가 대상을 선택하고 드래그하는 방식은 브라우저에 따라 다르다. 예를 들어 마우스를 누른 채 대상을 드래그하고 드롭 위치에서 마우스에서 손을 뗄 수도 있다. 모바일 환경에서 드래그 앤 드롭 문제를 푸는 학습자는 상단에서 대상을 밀어 드롭 위치에 놓을 수도 있다. 키보드를 사용하는 학습자는 화살표를 이용해 문제를 풀 수도 있다.

각 드래그 대상을 올바른 드롭 위치에 올려 놓았을 때 문제는 끝난다. 드래그 대상은 일부 문제에서 수치 입력을 필요로 할 수도 있다.

학습자는 점수를 받기 위해선 모든 드래그 대상을 드롭 위치에 올려야 한다. 만약 드래그 대상이 수치 입력을 필요로 하지 않으면 드래그 앤 드롭 만으로 문제를 풀 수 있다. 만약 수치 입력이 필요하다면 올바른 수치를 입력한 대상에 대해서 부분 점수를 얻는다.

다음 이미지는 드래그 앤 드랍 문제 예제이다.

An example of a simple drag and drop problem. The components of the problem, such as its title, text, and introductory feedback are labeled.

다음은 드래그 대상을 올바른 드롭 위치에 올렸을 때 학습자가 보게 되는 성공적인 피드백 이미지이다. 각 드래그 대상은 서로 다른 성공적인 피드백 메시지를 갖는다.

An example of a simple drag and drop problem. The success feedback message appears above the background image.

다음 이미지는 잘못된 드롭 위치에 드래그 대상을 올려 놓았을 때 학습자가 보게 되는 오답 피드백 메시지다. 각 드래그 대상은 서로 다른 오답 피드백 메시지를 갖는다.

An example of a simple drag and drop problem. The error feedback message appears over the background image.

다음 이미지는 완성된 드래그 앤 드롭 문제다. 문제 풀이를 완료하면 학습자에게 최종 피드백 메시지가 보여진다.

An example of a simple drag and drop problem. The problem is complete and the final feedback message appears below the background image.

8.11.1.1. 배경 이미지 이해하기

드래그 앤 드롭 이미지의 배경 이미지는 학습자가 대상을 올려놓는 역할을 한다.

드롭 위치는 배경 이미지의 사각형 부분이다. 사각형의 변은 감출 수 있으며 드롭 위치라는 표시를 할 수도 있다.

배경 이미지는 강좌 화면 크기와 맞아야 한다. 너무 넓은 이미지에 대해 학습 관리 시스템은 자동으로 크기를 맞춰준다. 크기 조절 후의 이미지가 학습자에게 어떻게 보일지 고려하며 크기를 맞춰야 한다. 강좌 화면의 너비는 학습자가 사용하는 브라우저와 장치에 따라 다르다.

드롭 위치는 너비, 높이, (x)값, (y)값을 설정해 정한다. 각 값의 단위는 픽셀이다. (x)값은 배경 이미지의 좌측 끝과 드롭 위치의 좌측 끝의 거리를 나타내며 (y)값은 배경 이미지의 맨 윗 부분과 드롭 위치의 맨 윗 부분 간의 거리를 나타낸다.

A background image and target zones shown in the drag and drop problem editing dialog box.

주석

드롭 위치의 크기 및 위치를 나타내는 픽셀 좌표는 이미지 편집 프로그램을 사용해서 정할 수도 있다. 이미지 편집 프로그램에서 배경 이미지를 열어 픽셀 좌표를 찾을 수 있다.

8.11.1.2. 드래그 대상 이해하기

드래그 대상은 라벨이나 이미지를 담고 있는 상자다. 드래그 앤 드롭 문제에서 학습자는 상단의 드래그 대상을 선택하고 배경 이미지의 드롭 위치에 놓는다.

드래그 대상의 크기를 문제 너비의 비율로 설정할 수도 있다. 만약 크기를 정하지 않으면 학습 관리 시스템은 텍스트 길이와 이미지 크기를 바탕으로 임의로 설정한다. 문제에서 배경과 라벨 텍스트 색도 정할 수 있다.

각 드래그 대상은 배경 이미지에서 드롭 위치와 연결되지 않거나 하나의 드롭 위치와 연결된다.

각 대상은 반드시 텍스트 라벨이 있어야 하며 텍스트 라벨만 있을 경우 그대로 드래그 대상에 등장하며 이미지와 함께 있을 경우 이미지가 라벨로서 등장한다.

8.11.1.2.1. 드래그 대상 사용하기

다음은 이미지를 포함한 드래그 대상이다. 텍스트를 포함한 대상의 경우 드래그 앤 드롭 문제 개관 을 참고하면 된다.

Draggable items with image labels in the item area of a drag and drop problem.

드래그 대상 이미지는 대체 설명을 포함한다. 대체 설명은 이미지를 텍스트로서 설명하며 만약 학습자가 시각 장애가 있다면 이 텍스트를 이용해 문제를 풀 수 있다.

드래그 대상 이미지는 문제의 상단 내에 있어야 한다. 만약 이미지가 너무 크다면 학습 관리 시스템이 크기를 자동으로 줄이므로 줄인 후 어떻게 보일지를 고려하여야 한다.

주석

이미지 파일이 없거나 보이지 않으면 학습 관리 시스템은 텍스트 설명을 라벨로 사용한다.

8.11.1.2.2. 드래그 대상 수치 입력 사용하기

드래그 대상이 올바른 드롭 위치에 놓여졌다면 수치를 입력하도록 할 수 있다. 학습자가 입력할 수치를 정할 수 있으며 오차범위를 인정할 수 있다. 복수정답은 정답 수치 이외의 정답으로 인정되는 값들을 말한다.

예를 들어 만약 정답 값이 5 고 복수정답이 1, 6, 5, 4 이라면 3, 7 등의 다른 숫자들은 모두 오답이 된다.

다음은 드롭 위치에 놓여졌을 때 수치를 입력할 수 있는 드래그 대상이다. 하나는 정답을 입력한 이미지이며 하나는 오답을 입력한 이미지이다.

Draggable items placed on the background image. Each draggable item displays number input entered by a learner. The number input for one item is correct. The number input for the other item is incorrect.

8.11.2. 드래그 앤 드랍 문제 설정하기

드래그 앤 드랍 문제를 추가하기 전에 강좌에서 사용할 수 있도록 설정해야 한다.

드래그 앤 드랍 문제 설정을 위해서 고급 설정 페이지의 고급 모듈 목록"drag-and-drop-v2" 키를 추가해야 한다. (키 값은 “ “ 사이에 입력해야 한다.) 자세한 사항은 추가 연습문제 및 도구 설정 를 참고하면 된다.

드래그 앤 드랍 문제를 설정하면 새 구성요소 추가하기고급 메뉴에 드래그 앤 드랍 이 등장한다.

주석

새 구성요소 추가하기 화면의 문제>고급 에도 드래그 앤 드랍 문제가 있다. 이는 새 구성요소 추가하기고급 메뉴에 있는 drag-and-drop-v2 로 대체된 이전 드래그 앤 드랍 문제이다.

8.11.3. 드래그 앤 드랍 문제 만들기

드래그 앤 드랍 문제를 추가하기 전에 강좌에서 설정해야 한다. 자세한 사항은 드래그 앤 드랍 문제 설정하기 를 참고하면 된다.

드래그 앤 드랍 문제를 만들기 위해서

  1. 문제를 만들고 싶은 학습활동의 새 구성요소 추가하기 메뉴에서 고급 을 선택한다.

  2. 고급 구성요소 목록에서 드래그 앤 드랍 을 선택한다.

    Studio는 학습활동에 드래그 앤 드랍 문제를 추가한다.

  3. 편집 을 클릭하면 편집 다이얼로그 박스가 열린다.

    드래그 앤 드롭 문제 설정을 다룰 수 있으며 자세한 사항은 드래그 앤 드롭 편집 도구 이해하기 를 참고하면 된다.

    편집 다이얼로그 박스는 다수의 화면을 포함하며 각 화면 설정을 마치고 계속 을 선택한다. 마지막 화면에서 저장 을 클릭하면 된다.

    드래그 앤 드랍 문제의 다음 부분 설정은 특히 중요하다.

    • 문제 이름, 텍스트, 소개 피드백과 최종 피드백을 편집한다. 드래그 앤 드롭 문제에서 텍스트가 나타나는 방식에 대해서는 드래그 앤 드롭 문제 개관 을 참고하면 된다.

    • 배경 URL 필드에서 배경 이미지를 선택한다. 강좌의 추가한 파일의 URL이나 인터넷에 있는 이미지의 URL을 입력한다. 강좌 파일에 대한 자세한 사항은 강좌에 파일 추가하기 를 참고하면 된다. 배경 이미지에 관한 자세한 사항은 배경 이미지 이해하기 를 참고하면 된다.

      배경 이미지에 URL을 입력한 후 배경 바꾸기 를 선택한다.

      인터넷에 있는 이미지의 URL일 경우 저작권 침해 우려가 없는 것을 확실히 해야한다.

    • 예제 드래그 앤 드롭 문제의 드롭 위치를 제거한다. 드롭 위치 추가를 선택하여 드롭 위치를 지정한다. 자세한 사항은 배경 이미지 이해하기 를 참고하면 된다.

    • 예제 드래그 앤 드롭 문제의 드래그 대상을 제거한다. 대상 추가를 클릭해 드래그 대상을 추가한다. 드롭 위치를 위치 필드에서 정하고 라벨, 정답 피드백 텍스트와 오답 피드백 텍스트를 추가한다. 텍스트 추가에 관해선 드래그 앤 드롭 문제 개관 을, 드래그 대상에 대해선 드래그 대상 이해하기 를 참고하면 된다.

8.11.4. 드래그 앤 드롭 편집 도구 이해하기

다음은 편집 다이얼로그 박스에서 사용하는 도구에 대한 설명이다.

도구 설명
문제 이름 드래그 앤 드롭 문제 위에 나타나는 이름이다. 예제는 드래그 앤 드롭 문제 개관 을 보면 된다.
이름 보기 학습 관리 시스템에서 문제 위 이름 표시 여부를 설정한다.
최대 점수 문제를 풀었을 때 학습자가 받을 수 있는 최대 점수를 의미한다. 드래그 대상이 수치 입력을 포함한다면 학습자는 부분 점수를 받을 수도 있다. 만약 수치 입력 칸이 없다면 최대 점수를 받게 된다. 자세한 사항은 성적 규정 설정하기 를 참고하면 된다.
문제 텍스트 학습 관리 시스템에서 문제 위에 나타나는 텍스트를 의미한다. 문제에 대한 설명이나 푸는 법에 대한 설명을 쓸 수 있다. 자세한 사항은 드래그 앤 드롭 문제 개관 을 참고하면 된다.
“문제” 이름 보이기 문제 텍스트 위 단어 문제 표시 여부를 설정한다.
소개 피드백 학습 시작 전 문제의 피드백 부분에 나타나는 텍스트를 의미한다.
최종 피드백 학습자가 문제를 푼 뒤 나타나는 피드백 부분의 텍스트를 의미한다.
배경 URL

문제의 드롭 위치를 포함하는 이미지의 URL을 뜻한다. 이 URL은 강좌에 추가한 이미지의 것일 수도 있으며 인터넷 상의 이미지의 것일 수도 있다. 자세한 사항은 배경 이미지 이해하기 를 참고하면 된다.

이 필드에 새 URL을 입력할 때 반드시 배경 바꾸기 를 선택해야 한다. 배경 바꾸기 를 선택하지 않으면 편집 다이얼로그 박스에서 다른 설정을 저장할 때 이 값은 저장되지 않는다.

배경 설명 이미지를 보지 못하는 학습자를 위한 배경 이미지 설명이다.
이미지 상의 표시 라벨명 학습 관리 시스템 배경 이미지의 드롭 위치 텍스트 표시 여부를 설정한다.
이미지 상 위치 표시 학습 관리 시스템 배경 이미지에 드롭 위치 구분 표시 여부를 설정한다.
위치 텍스트 드롭 위치의 이름을 의미한다. 드래그 대상 설정 중 드롭 위치의 이름을 선택할 수 있다.
위치 설명 직접 드롭 위치를 볼 수 없는 학습자를 위한 드롭 위치에 관한 설명을 의미한다.
위치 폭 픽셀 단위로 표시된 드롭 위치의 가로 크기를 뜻한다.
위치 높이 픽셀 단위로 표시된 드롭 위치의 세로 크기를 뜻한다.
위치 X 배경 이미지 좌측 끝과 드롭 위치 좌측 끝 간의 거리를 뜻한다.
위치 Y 배경 이미지 최상단과 드롭 위치 최상단 간의 거리를 뜻한다.
위치 추가 편집 다이얼로그 박스에 새 드롭 위치 설정 도구를 추가한다.
배경색 드래그 대상 라벨 뒤에 나타나는 색을 의미한다. 칼라 차트나 기타 CSS 색상 기능을 이용해 색을 지정할 수 있다. 자세한 사항은 W3C CSS color specification 을 참고하면 된다. 이 설정은 선택사항이며 색을 지정하지 않으면 학습 관리 시스템은 기본 색을 자동으로 지정한다.
텍스트 색 드래그 대상 텍스트 라벨의 색을 의미하며 칼라 차트나 기타 CSS 색상 기능을 이용해 색을 지정할 수 있다. 자세한 사항은 W3C CSS color specification 을 참고하면 된다. 이 설정은 선택사항이며 색을 지정하지 않으면 학습 관리 시스템은 기본 색을 자동으로 지정한다.
드래그 대상 텍스트 문제의 드래그 대상에 나타나는 텍스트를 설정한다.
드래그 대상 위치 드래그 대상에 대한 드롭 위치를 지정할 수 있으며 학습자는 이를 바탕으로 문제를 푼다.
드래그 대상 이미지 URL

선택사항으로서 드래그 대상 이미지에 대한 URL을 의미한다.

이 URL은 강좌에 추가한 파일에 대한 것일 수 있으며 인터넷 상의 파일에 대한 것일 수도 있다.

드래그 대상 이미지 설명 이미지 라벨을 볼 수 없는 학습자를 위한 드래그 대상 이미지 라벨을 설명하는 텍스트를 의미한다.
정답 피드백 드래그 대상을 올바른 드롭 위치에 올려 놓았을 때 나타나는 메시지다. 예제는 드래그 앤 드롭 문제 개관 을 참고하면 된다. 이것은 선택사항 설정으로서 피드백을 등록하지 않으면 학습 관리 시스템은 아무 메시지도 보여주지 않는다.
오답 피드백 드래그 대상을 잘못된 드롭 위치에 올려 놓았을 때 나타나는 메시지다. 예제는 드래그 앤 드롭 문제 개관 을 참고하면 된다. 이것은 선택사항 설정으로서 피드백을 등록하지 않으면 학습 관리 시스템은 아무 메시지도 보여주지 않는다.
드래그 대상 보기 고급 설정 드래그 대상의 고급 설정이다.
선호 드래그 대상 폭 문제 폭의 비율(0에서 100 사이의 숫자)로 표시되는 드래그 대상의 가로 폭을 뜻한다.
드래그 대상 수치 입력 값 올바른 드롭 위치에 드래그 대상을 올려 놓았을 때 학습자가 입력해야 하는 수치 값이다. 자세한 사항은 드래그 대상 수치 입력 사용하기 를 참고하면 된다.
복수정답 인정 수치 입력 값 드래그 대상 수치 입력에서 복수정답으로 인정되는 값이다. 자세한 사항은 드래그 대상 수치 입력 사용하기 를 참고하면 된다.
대상 추가 편집 다이얼로그 박스에 새 드래그 대상의 설정을 추가한다.

8.11.5. 드래그 앤 드롭 문제 모양 바꾸기

강좌 내 드래그 앤 드롭 문제의 모양을 바꿀 수 있다.

드래그 앤 드롭 문제를 만들 때 문제의 전체적인 모양을 결정짓는 드래그 대상 배경 색텍스트 색 을 선택할 수 있다.