javascript - (jQuery plugin to) drag & drop answers in multiple choice quiz

I'm making a webpage where the user has to connect elements from two lists in a quiz. For example, imagine a quiz question where you have two lists, one with countries and one with capitals, and the user has to connect the capitals to the correct countries.

Preferably, there should be a way for the user to drag the elements from the second list to an area next to the elements of the first list. Like this:

Here, you would drag the blue boxes into the gray rectangles.

Is there a jQuery plugin or other JavaScript library that does something like this already? Or do I have to implement it myself? If so, does anyone have some pointers to articles describing solutions to similar problems, or ideas on how one can best solve this?

Preferably, there should be a way for the user to drag the elements from the second list to an area next to the elements of the first list. Like this:

Here, you would drag the blue boxes into the gray rectangles.

Share Improve this question edited Oct 8, 2012 at 17:58 asked Oct 7, 2012 at 14:22 JW. 2,5012 gold badges24 silver badges26 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

You can use Jquery-UI, see this fiddle:

https://jsfiddle/esedic/xg9f3hhy/

HTML:

<h3>Treatment Areas</h3>
<div class="container">
  <div data-value="1" class="draggable">
    <p>Back</p>
  </div>
  <div data-value="1" class="droppable">
    <div class="droparea"></div>
    <p>Area 1</p>
  </div>
</div>
<div class="container">
  <div data-value="2" class="draggable">
    <p>Adomen</p>
  </div>
  <div data-value="2" class="droppable">
    <div class="droparea"></div>
    <p>Area 2</p>
  </div>
</div>
<div class="container">
  <div data-value="3" class="draggable">
    <p>Chest</p>
  </div>
  <div data-value="3" class="droppable">
    <div class="droparea"></div>
    <p>Area 3</p>
  </div>
</div>

Jquery:

$('.draggable').draggable({

  //cursor: 'move'
});
$('.droppable').droppable({
  drop: function(event, ui) {
    $(this).addClass('ui-state-highlight');
    ui.draggable.position({
      of: $(this),
      my: 'left top',
      at: 'left+6 top+6'
    });
    $('.draggable').each(function(i) { 
      $(this).data('value', i+1); 
    }).filter(':first').trigger('listData');
  }
});

$('.draggable').on('listData', function() {
  $('.droppable').each(function() {
    console.log( $(this).text() + ' - ' + $(this).data('value') ); 
  });
});

SCSS:

body {
    padding: 1em;
}

.draggable {
    width: 100px;
    padding: 5px;
    float: left;
    margin: 10px 10px 10px 0;
    background: red;
    color: #fff;
    cursor: move;

      p {
      margin: 2px 0;
  }
}

.droppable {
    width: 300px;
    padding: 5px 10px 5px 5px;
    float: right;
    margin: 10px;
    border: 1px solid #ddd;

    p {
      float: right;
      width: 50px;
      height: 30px;
      padding: 5px 5px 0 0;
      text-align: center;
      margin: 0;
  }
}

.container {
    clear: both;
    margin: 10px;
    width: 100%;
}

.droparea {
    float: left;
    border: 1px dashed red;
    width: 108px;
    height: 30px;
}

Considered using the jQuery UI droppable? It does pretty much the thing you want. Just set the gray boxes as droppable and the blue ones as draggable.

You'll probably use the revert option.

This Drag & Drop Javascript code,its works on browser but not works in ibook app of ipad,please give me the solution even i used jquery.ui.touch-punch.min.js

  <?xml version="1.0" encoding="UTF-8"?>  
    <!DOCTYPE html> 
     <html xmlns="http://www.w3/1999/xhtml" xmlns:epub="http://www.idpf/2007/OEBPS" xmlns:ibooks="http://apple./ibooks/html-extensions">
<head>
    <title>Demo 2: Drag and drop</title>

    <style type="text/css">
    /* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
    #mainContainer{
        width:600px;
        margin:0 auto;
        margin-top:10px;
        border:1px solid #000;
        padding:2px;
    }

    #capitals{
        width:200px;
        float:left;
        border:1px solid #000;
        background-color:#E2EBED;
        padding:3px;
        height:400px;
    }
    #countries{
        width:300px;
        float:right;
            margin: 4px 61px 3px -8px;
        height:400px;
    }   
    #labels{
        width: 120px;
        float:right;
              margin: -403px 116px 3px -8px;
        height:400px;
        /*border: 1px solid red;*/
    }   
    .dragableBox,.dragableBoxRight{
        width:80px;
            height: 10px;
        border:1px solid #000;
        background-color:#FFF;      
        margin-bottom:5px;
        padding:10px;
        font-weight:bold;
        text-align:center;
    }
    .dragableBox,.labelBoxRight{
        width:80px;
            height: 10px;
        border:1px solid #000;
        background-color:#FFF;      
        margin-bottom:5px;
        padding:10px;
        font-weight:bold;
        text-align:center;
    }
    div.dragableBoxRight{
    height: 31px;
        width:110px;
        /*float:left;*/
        margin-right:5px;
        padding:5px;
        background-color:#D3D3D3;
        border: 1px dashed;
    }
    div.labelBoxRight{
               height: 31px;
        width:110px;
        /*float:left;*/
        margin-right:5px;
        padding:5px;
        background-color:#E2EBED;
    }
    .dropBox{
        width:190px;
        border:1px solid #000;
        background-color:#E2EBED;
        height:400px;
        margin-bottom:10px;
        padding:3px;
        overflow:auto;
    }       
    a{
        color:#F00;
    }

    .clear{
        clear:both;
    }
    img{
        border:0px;
    }   
    </style>    

</head>
<body>  

    <div id="mainContainer">

        <div id="capitals">

            <div id="dropContent">
                <div class="dragableBox" id="box1">Br<sup>&#x002B;</sup></div>
                <div class="dragableBox" id="box2">Br<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box3">CN<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box4">NO<sub>2</sub><sup>&#x002B;</sup></div>
                <div class="dragableBox" id="box5">NO<sub>2</sub><sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box6">NH<sub>2</sub><sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box7">RC=C<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box8">MeCO<sup>&#x002B;</sup></div>
            </div>
        </div>
        <div id="countries">
            <div id="box106" class="dragableBoxRight"></div>
            <div id="box107" class="dragableBoxRight"></div>
            <div id="box101" class="dragableBoxRight"></div>
            <div id="box104" class="dragableBoxRight"></div>
            <div id="box105" class="dragableBoxRight"></div>
            <div id="box102" class="dragableBoxRight"></div>
            <div id="box103" class="dragableBoxRight"></div>
            <div id="box108" class="dragableBoxRight"></div>


        </div>
        <div id="labels">
            <div id="boxl106" class="labelBoxRight">nucleophiles</div>
            <div id="boxl107" class="labelBoxRight">Electrophiles</div>
            <div id="boxl101" class="labelBoxRight">nucleophiles</div>
            <div id="boxl104" class="labelBoxRight">Electrophiles</div>
            <div id="boxl105" class="labelBoxRight">nucleophiles</div>
            <div id="boxl102" class="labelBoxRight">Electrophiles</div>
            <div id="boxl103" class="labelBoxRight">nucleophiles</div>
            <div id="boxl104" class="labelBoxRight">nucleophiles</div>

        </div>
        <div class="clear"></div>
        <div class="konaBody"></div>
    </div>

<div id="debug"></div>
<input type="button" value="reset" name="reset" onclick="r1();"/>
      <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js"></script>
     <script src="js/jquery-ui.js"></script>
     <script type="text/javascript" src="js/drag-drop-custom.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/hammer.min.js"></script>
   <!-- <link href="css/jquery-ui.css" rel="stylesheet"
        type="text/css" />-->

<script type="text/javascript">
     <![CDATA[

// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
    var targetObj = document.getElementById(targetId);  // Creating reference to target obj
    var subDivs = targetObj.getElementsByTagName('div');    // Number of subdivs
    if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
    var sourceObj = document.getElementById(idOfDraggedItem);   // Creating reference to source, i.e. dragged object
    var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;    // Find numeric id of target
    var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source

    if(numericIdTarget-numericIdSource==100){   // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
                                                // Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
        sourceObj.style.backgroundColor='#0F0'; // Set green background color for dragged object
    }else{
        sourceObj.style.backgroundColor=''; // Reset back to default white background color
    }
    if(targetId=='capitals'){
    // Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
        targetObj = targetObj.getElementsByTagName('div')[0];   

    }
    targetObj.appendChild(sourceObj);   // Append   
}

function r1()
{


}

var dragDropObj = new DHTMLgoodies_dragDrop();  // Creating drag and drop object

// Assigning drag events to the capitals
dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box8',true); 

// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems');
dragDropObj.addTarget('box108','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop

dragDropObj.init(); // Initizlizing drag and drop object
    ]]>
</script>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - (jQuery plugin to) drag & drop answers in multiple choice quiz - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)