8.8. 드래그 앤 드롭(Drag & Drop) 문제¶

8.8.1.1. Drag and Drop 문제 코드 샘플¶

이미지에 표시되는 드래그 드롭 문제를 만들려면, K-MOOC에서 두 개의 파일을 다운로드 한 후, 파일 업로드 페이지로 이 파일을 업로드하고 난 다음, 문제 구성 요소에 문제에 대한 코드를 추가해야 한다.

1. 다음 파일을 다운로드한다

• Allopurinol.gif
• AllopurinolAnswer.gif

.zip 저장소에서 위의 두 파일을 다운로드 하려면, http://files.edx.org/DragAndDropProblemFiles.zip 를 클릭한다.

2. 파일 업로드 페이지로 Allopurinol.gif 및 AllopurinolAnswer.gif 파일을 업로드 한다.
3. 문제를 만들려는 학습활동에서, 신규 구성요소 추가 아래에 문제 를 클릭하고 난 다음, 고급 탭을 클릭한다.
4. 드래그 앤 드롭 을 클릭한다.
5. 표시되는 구성요소에서, 편집 을 클릭한다.
6. 구성요소 편집기에서, 예제 코드를 다음 코드로 대체한다.
7. 저장 을 클릭한다.

문제 코드 :

<problem>
  <p> Allopurinol is a drug used to treat and prevent gout, a very painful
  form of arthritis. Once only a “rich man’s disease”, gout has become more
  and more common in recent decades – affecting about 3 million people in
  the United States alone. Deposits of needle-like crystals of uric acid
  in connective tissue or joint spaces cause the symptoms of swelling,
  stiffness and intense pain. Individuals with gout overproduce uric acid
  because they cannot eliminate it efficiently. Allopurinol treats and
  prevents gout by stopping the overproduction of uric acid through
  inhibition of an enzyme required for the synthesis of uric acid. </p>
  <p> You are shown one of many possible molecules. On the structure of
  allopurinol below, identify the functional groups that are present by
  dragging the functional group name listed onto the appropriate target
  boxes on the structure. If you want to change an answer, you have to
  drag off the name as well. You may need to scroll through the names of
  functional groups to see all options. </p>
  <customresponse>
    <drag_and_drop_input no_labels="true" one_per_target="true"
    target_outline="true" img="/static/Allopurinol.gif">
      <draggable can_reuse="true" label="methyl" id="1"/>
      <draggable can_reuse="true" label="hydroxyl" id="2"/>
      <draggable can_reuse="true" label="amino" id="3"/>
      <draggable can_reuse="true" label="carboxyl" id="4"/>
      <draggable can_reuse="true" label="aldehyde" id="5"/>
      <draggable can_reuse="true" label="phosphate" id="6"/>
      <draggable can_reuse="true" label="sulfhydryl" id="7"/>
      <draggable can_reuse="true" label="phenyl" id="8"/>
      <draggable can_reuse="true" label="none" id="none"/>
      <target id="0" h="53" w="66" y="55.100006103515625" x="131.5"/>
      <target id="1" h="113" w="55" y="140.10000610351562" x="181.5"/>
    </drag_and_drop_input>
    <answer type="loncapa/python">
correct_answer = [ {'draggables': ['2'], 'targets': ['0' ], 'rule':'unordered_equal' },
{'draggables': ['none'], 'targets': ['1' ], 'rule':'unordered_equal' }]
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
    </answer>
  </customresponse>
  <solution>
    <img src="/static/AllopurinolAnswer.gif"/>
  </solution>
</problem>

8.8.2.1. 태그¶

• <customresponse>:문제가 사용자 지정 응답 문제임을 나타낸다.
• <drag_and_drop_input>: 사용자 지정 응답 문제는 드래그 앤 드롭 문제임을 나타낸다.
• <draggable>: 학습자 기본 이미지 위로 드래그 하는 단일 개체를 지정한다.
• <target>: draggable이 끌어다 놓아야 하는 기본 이미지 위의 위치를 지정한다.

Tag: <drag_and_drop_input>

속성

속성	설명
img (필수사항)	기본 이미지가 될 이미지의 상대적인 경로이다. 모든 draggables는 그 이미지 위로 끌어 올 수 있다.
target_outline	윤곽선 (회색 파선)이 (대상이 지정된 경우) 대상 주변에 그려질 수 있는지 여부를 지정한다. 그것은 ‘true’ 또는 ‘false’ 가 될 수 있다. 지정되어 있지 않으면 대상은 윤곽선이 필요 없다.
one_per_target	하나 이상의 draggabl이 단일 대상에 놓여지도록 허용 여부를 지정한다. 그것은 ‘true’ 또는 ‘false’가 될 수 있다. 지정되어 있지 않으면 기본 값은 ‘true’이다.
no_labels (필수)	기본값은 false 이며, 라벨이 설정되지 않은 경우 기본 행동에서, 라벨은 id로부터 얻어진다. no_labels이 true 이면, 라벨은 id에서 자동으로 채워지지 않으며, 라벨을 설정할 수 없고, 단지 아이콘만 얻을 수 있다.

Children

• <draggable>
• <target>

Tag: <draggable>

드래그 앤 드롭 문제에서 단일 draggable 개체를 지정한다.

이용자가 슬라이더로부터 끌어 기본 이미지 위에 놓아야만 하는 것이다. 끌기 작업 후, draggable 의 중심이 이미지의 직사각형 크기 밖에 있는 경우, 그것은 슬라이더로 반환될 것이다.

채점자가 작업하려면, 각 draggable은 고유 ID를 가지고 있어야 한다.

속성

속성	설명
id (필수)	개체의 고유 식별자이다.
label (선택)	이용자에게 표시되는 텍스트 라벨이다.
icon (선택)	draggables이 이미지라면, 이미지 파일에 대한 상대적 경로이다.
can_reuse	true 또는 false, 기본값은 false이다. true 인 경우 같은 draggable은 여러 번 사용될 수 있다.

Children

(없음)

Tag: <target>

학습자가 draggable 항목을 끌어다 놓아야 하는 기본 이미지 위의 위치를 지정한다. 디자인에 따라, draggable 의 중심이 대상 내에 있는 경우, (즉, [[x, y], [x + w, y + h]] 에 의해 정의된 사각형에서), 위치는 대상 내에 있다. 그렇지 않으면, 위치는 외부이다.

하나 이상의 대상을 지정하고, 학습자는 대상 외부에 있는 위치에 draggable 항목을 놓아야 하는 경우, draggable 항목은 슬라이더로 반환된다.

대상을 지정하지 않으면, 학습자는 draggable 항목을 기본 이미지의 아무 곳에 놓을 수 있다.

속성

속성	설명
id (필수)	대상 개체의 고유 식별자.
x	대상의 상단 왼쪽 모서리에 배치 될 기본 이미지상의 X-좌표.
y	대상의 상단 왼쪽 모서리에 배치 될 기본 이미지상의 Y-좌표.
w	픽셀로 대상의 너비.
h	픽셀로 대상의 높이.

Children

(없음)

8.8.3.1. Targets on Draggables의 한계¶

• 현재 대상의 중첩 수준에 제한이 있다.

  비록 대상 자신이 draggables에 있는 그런 대상에 대한 draggables의 많은 수를 쌓아 놓을 수 있을지라도, 드래그 앤 드롭 문제는 대상의 최대 두 가지 수준만 있는 경우 채점될 것이다. 첫 번째 수준은 기본 대상이다. 그들은 기본 이미지에 부착된다. 두 번째 수준은 draggables에 대해 정의된 대상이다.

• 또 다른 한계는 다른 대상에 대해 대상 범위가 확인되지 않는다는 것이다.

  대상이 서로 중복되지 않도록 확인해야 한다. 또한 draggables에 대한 대상은 실제 부모 draggable 보다 더 작아야 함을 확인해야 한다. 기술적으로 이것은 필수적이 않지만 유용성 관점에서는 바람직하다.

• 기본 대상이 정의되어 있는 경우에만 draggables에 대한 대상을 가질 수 있다 (기본 대상은 기본 이미지에 부착된다.).

  기본 대상이 없는 경우, 단일 수준의 중첩(기본 이미지에 대한 draggables)만을 가질 수 있다. 이 경우 클라이언트 쪽은 기본 이미지에 대한 각 draggable의 (x, y) 위치를 보고받을 것이다.

8.8.4.1. Targets on Draggables에 대한 답안 양식¶

위에서 설명한 경우와 같이, 답안은 각각의 draggable에 대한 정확한 위치를 제공해야 한다 (draggable이 놓여져야 하는 대상에 대한 위치). 자체가 draggable인 대상에 draggable을 놓아야 하는 경우, 답안은 대상-draggable-대상의 사슬을 포함해야 한다.

예를 들어, 3개의 draggables- up, s, 및 p``을 가진다고 가정한다. Draggables ``s 와 p 는 자체에 대상을 가진다. 좀 더 구체적으로, p 는 세 개의 대상-1, 2, 및 3``을 가진다. 첫 번째 요구사항은 기본 이미지에 특정 대상에 ``s 와 p 를 배치하는 것이다. 두 번째 요구사항은 draggable up 이 draggable p 의 특정 대상에 배치되는 것이다. 아래는 문제에서 발췌된 부분이다

<draggable id=”up” icon=”/static/images/images_list/lcao-mo/up.png” can_reuse=”true” />

<draggable id=”s” icon=”/static/images/images_list/lcao-mo/orbital_single.png” label=”s orbital” can_reuse=”true” >

<target id=”1” x=”0” y=”0” w=”32” h=”32”/>

</draggable>

<draggable id=”p” icon=”/static/images/images_list/lcao-mo/orbital_triple.png” can_reuse=”true” label=”p orbital” >

<target id=”1” x=”0” y=”0” w=”32” h=”32”/> <target id=”2” x=”34” y=”0” w=”32” h=”32”/> <target id=”3” x=”68” y=”0” w=”32” h=”32”/>

</draggable>

...

correct_answer = [

{

‘draggables’: [‘p’], ‘targets’: [‘p-left-target’, ‘p-right-target’], ‘rule’: ‘unordered_equal’

}, {

‘draggables’: [‘s’], ‘targets’: [‘s-left-target’, ‘s-right-target’], ‘rule’: ‘unordered_equal’

}, {

‘draggables’: [‘up’], ‘targets’: [‘p-left-target[p][1]’, ‘p-left-target[p][2]’, ‘p-right-

target[p][2]’, ‘p-right-target[p][3]’,],

‘rule’: ‘unordered_equal’

}

]

비록 하나의 draggable이 하나 이상의 사슬에 포함된 경우일지라도 모든 draggables에 대한 규칙을 지정해야 한다.

8.8.5.1. Set 과 +number¶

. set() 과 +number 는 재사용 가능한 draggables의 경우에 대해서만 필요하다. 다른 경우에는 목록에 동등한 draggables 이 없으며 따라서 set()은 아무것도 하지 않는다.

• set() 작동은 “어떤 수의 같은 draggable 도 대상에 끌 수 있다”의 경우에 대한 규칙을 만들 수 있도록 허용한다.

  {

  ‘draggables’: [‘draggable_1’], ‘targets’: [‘target3’, ‘target6’, ‘target9’], ‘rule’: ‘anyof’

  }

• 끌어다 놓을 수 있는 draggable의 수를 정하고 싶을 때, number 규칙은 재사용 가능한 draggables의 경우에 대해 사용된다. 이 예제에서는 draggables_1의 두 가지 사례만이 끌어질 수 있다.

  {

  ‘draggables’: [‘draggable_1’, ‘draggable_1’], ‘targets’: [‘target3’, ‘target6’, ‘target9’], ‘rule’: ‘anyof+number’

  }

• exact 규칙을 사용할 때, 어떤 재사용 가능한 draggable이 어느 대상에 있는지 인식할 수 없기 때문에, number 는 필요 없다. 예를 들면:

  {

  ‘draggables’: [‘draggable_1’, ‘draggable_1’, ‘draggable_2’], ‘targets’: [‘target3’, ‘target6’, ‘target9’], ‘rule’: ‘exact’

  }

  이 예를 제대로 다루기 위해 draggable_1 와 draggable_2 를 위해 다른 규정을 적용한다.

• unordered_equal (또는 exact)에 대하여, 대상 길이가 draggables의 수에 대한 제약을 제공할 것이므로 그룹에 동일한 draggable만 있는 경우, number 는 필요 없다

  {

  ‘draggables’: [‘draggable_1’], ‘targets’: [‘target3’, ‘target6’, ‘target9’], ‘rule’: ‘unordered_equal’

  }

  즉, draggable_1 만을 유일하게 끌어올 수 있다.

• 하지만 목록에 하나 이상의 다른 재사용 가능한 draggable을 가지는 경우, number 규칙을 사용할 수 있다.

  {

  ‘draggables’: [‘draggable_1’, ‘draggable_1’, ‘draggable_2’], ‘targets’: [‘target3’, ‘target6’, ‘target9’], ‘rule’: ‘unordered_equal+number’

  }

number 를 사용하지 않는 경우, draggables 목록은 [draggable_1, draggable_2]로 설정될 것이다.