Skip to main content

Drag & Drop

<?xml version="1.0" encoding="UTF-8"?>
<question type="dragdrop">
  <text>Hieronder zie je een afbeelding van een destillatie. Sleep de begrippen onder de afbeelding naar de juiste plaats in het figuur.
  </text>

  <!-- the (background) image that the draggables are dragged on.
  This example uses these images. Attach them to the node using the upload
  functionality and de-select the "list" option for each file to hide them
  from the user.

  Text inside the <hotspot> tag is used as hovertip for that hotspot.

  http://pkedu.fbt.wur.nl/webman7/cases/NLT_bioethanol/images/destileer_op...  -->
  <matchImg src="[attachurl:destileer_opstelling.png]">
    <!-- hotspots that are checked to see if they contain draggables. -->
    <hotspot shape="rect" coords="2,91,119,124" identifier="hdamp">Hier zit de damp</hotspot>
    <hotspot shape="rect" coords="6,196,123,229" identifier="hkolf" />
    <hotspot shape="rect" coords="6,268,123,301" identifier="hbran" />
    <hotspot shape="rect" coords="244,21,361,54" identifier="hther">Hier wordt de temperatuur gemeten</hotspot>
    <hotspot shape="rect" coords="499,272,616,305" identifier="hopva" />
    <hotspot shape="rect" coords="500,314,617,347" identifier="hdest"/>
    <hotspot shape="rect" coords="376,79,493,112" identifier="hkoel" />
    <hotspot shape="rect" coords="235,210,318,243" identifier="hwuit" />
    <hotspot shape="rect" coords="335,233,418,266" identifier="hwin" />

        <!--
    draggables are the images that are dragged to hotspots.
    They can either contain any html or a single image.
    Image example: <draggable identifier="d1" src="[attachurl:text_damp.png]" />
    Html example: <draggable identifier="d1"><span>Damp</span><span class="hovertip">This is a tooltip!</span></draggable>
    -->
    <draggable identifier="d1"><span>Damp</span><span class="hovertip">This is a tooltip!</span></draggable>
    <draggable identifier="d2">Destillatie kolf</draggable>
    <draggable identifier="d3">Brander</draggable>
    <draggable identifier="d4" class="reduced">Thermometer</draggable>
    <draggable identifier="d5" class="minimal">Opvangkolf</draggable>
    <draggable identifier="d6">Destillaat</draggable>
    <draggable identifier="d7">Koeler</draggable>
    <draggable identifier="d8" class="small">Uit</draggable>
    <draggable identifier="d9">In</draggable>
  </matchImg>

  <startstate value="d1,590,11;d2,566.5,228;d3,587,83;d4,567,204;d5,575,179;d6,583,131;d7,590,35;d8,581.5,155;d9,584,107;" />
  <hint mintries="1">De vloeistof met het laagste kookpunt verdampt als eerste en komt in het destillaat terecht.</hint>
  <hint mintries="2">Het mengsel dat gescheiden wordt, bevindt zich in de destillatie kolf.</hint>

     <!--
     Mappings can use <and> <or> and <not> just like fillblanks questions.
     -->
  <mapping correct="1">
    <combination hotspot="hdamp" draggable="d1" />
    <combination hotspot="hkolf" draggable="d2" />
    <combination hotspot="hbran" draggable="d3" />
    <combination hotspot="hther" draggable="d4" />
    <combination hotspot="hopva" draggable="d5" />
    <combination hotspot="hdest" draggable="d6" />
    <combination hotspot="hkoel" draggable="d7" />
    <combination hotspot="hwuit" draggable="d8" />
    <combination hotspot="hwin" draggable="d9" />

    <feedback>
            Helemaal correct. Je hebt alle onderdelen van de destillatie benoemd.
    </feedback>
  </mapping>

  <mapping correct="0">
    <combination hotspotpattern="h.*" draggablepattern="d[0-9]" />
    <feedback>
            You have at least one draggable on one hotspot.
    </feedback>
  </mapping>

  <mapping correct="0">
    <combination hotspot="hdamp" draggablepattern="d[0-9]" />
    <feedback>
            You have at least one draggable on hotspot "damp".
    </feedback>
  </mapping>

  <mapping correct="0">
    <combination hotspotpattern="h.*" draggable="d1" />
    <feedback>
            You have draggable "Damp" on a hotspot.
    </feedback>
  </mapping>

</question>