8.12. 드래그 앤 드롭 문제(기존)¶

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

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

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

• Allopurinol.gif
• AllopurinolAnswer.gif

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

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

**문제 코드 ** :

<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.12.2.1. 태그¶

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

Tag: <drag_and_drop_input>

속성

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

Children

• <draggable>
• <target>

Tag: <draggable>

드래그 앤 드롭 문제에서 단일의 드래그될 수 있는 개체를 지정한다.

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

채점자가 작업하려면, 각각의 드래그 될 수 있는 것은 고유 ID를 가지고 있어야 한다.

속성

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

Children

(none)

Tag: <target>

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

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

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

속성

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

Children

(none)

8.12.3.1. 드래그가 가능한 대상의 한계¶

• 현재 드래그가 가능한 대상의 중첩 수준에 제한이 있다.

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

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

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

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

  기본 대상이 없는 경우, 단일 수준의 중첩(기본 이미지에 대한 드래그)만을 가질 수 있다. 이 경우 사용자는 기본 이미지에 대한 각 드래블이 가능한 대상의 (x, y) 위치를 보고받을 것이다.

8.12.4.1. 드래그 가능한 대상에 대한 답안 양식¶

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

예를 들어, 3개의 드래그가 가능한 대상 - up, s, 및 p 을 가진다고 가정한다. 드래그가 가능한 대상은 s 와 p 는 자체에 대상을 가진다. 좀 더 구체적으로, p 는 세 개의 대상 - 1, 2, 및 3 을 가진다. 첫 번째 요구사항은 기본 이미지에 특정 대상에 s 와 p 를 배치하는 것이다. 두 번째 요구사항은 드래그가 가능한 대상 up 이 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'
    }
]

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

8.12.5.1. Set 과 +number¶

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

• set() 작동은 “드래그 가능한 대상의 수는 어떤 수라도 대상에 끌 수 있다”의 경우에 대한 규칙을 만들 수 있도록 허용한다.

  {
    'draggables': ['draggable_1'],
    'targets': ['target3', 'target6', 'target9'],
    'rule': 'anyof'
  }
  

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

  {
    'draggables': ['draggable_1', 'draggable_1'],
    'targets': ['target3', 'target6', 'target9'],
    'rule': 'anyof+number'
  }
  

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

  {
    'draggables': ['draggable_1', 'draggable_1', 'draggable_2'],
    'targets': ['target3', 'target6', 'target9'],
    'rule': 'exact'
  }
  
  
  이 예를 제대로 다루기 위해 draggable_1 와 draggable_2 를 위해 다른 규정을 적용한다.
  

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

  {
    'draggables': ['draggable_1'],
    'targets': ['target3', 'target6', 'target9'],
    'rule': 'unordered_equal'
  }
  

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

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

  {
    'draggables': ['draggable_1', 'draggable_1', 'draggable_2'],
    'targets': ['target3', 'target6', 'target9'],
    'rule': 'unordered_equal+number'
  }
  

number 를 사용하지 않는 경우, 드래그 가능 대상 목록은 [draggable_1, draggable_2]로 설정될 것이다.