CTATDragNDrop Example

A simple Drag-N-Drop example for showing some basic functionality. As it is currently configured, Sink can only have a single item dragged to it. The correct answer is the blue circle. Use the submit button to submit Sink for grading. Drag items to Text Items to see per item grading, the words are the correct answers.

Source:

Square

triangle

Source:
<div id="source" class="CTATDragNDrop"
    data-ctat-tutor="false" name="DragNDropGroup">
  <div id="dndcircle" style="width:48px;height:48px;">
    <svg width="48" height="48">
      <circle cx="24" cy="24" r="20" stroke="darkblue"
         fill="blue" stroke-width="2px"/>
    </svg>
  </div>
  <div id="dndtext" class="unselectable">Square</div>
  <img id="dndimg" src="skindata/CTAT-icon.svg"/>
  <span id="dndtri" class="unselectable">triangle</span>
</div>

Sink:

Submit

Sink:
<div id="sink" class="CTATDragNDrop" name="DragNDropGroup"
  data-ctat-max-cardinality="1"
  data-ctat-tutor="false">
</div>
<div id="submit" class="CTATSubmitButton"
  data-ctat-target="sink">Submit</div>

Text Items:

Text Items:
<div id="textsink" class="CTATDragNDrop" name="DragNDropGroup"
     data-ctat-tutor="true"></div>