Question

I working on a page in which I need to drag items from one list, drop them in a drop zone, then compare the order in which they were dropped with an answer key using a submit button. Basically a very simple drag and drop quiz. My problem is figuring out the best way to accomplish this. I know a small amount of JQuery, and PHP so any help would be appreciated.

<ul id="answerList">
    <li><a draggable="true" href"#" id="one">Question 1</li>
    <li><a draggable="true" href"#" id="two">Question 2</li>
    <li><a draggable="true" href"#" id="three">Question 3</li>
</ul>

<ul id="answerDrop">
    <li>Drop Answer Here</li>
</ul>

<div id="submitBtn">
     <input type="button">
</div>

Answer 1

Here’s is your HTML:

<ul id="answerList">
    <li><a draggable="true" href"#" id="one">Question 1</li>
    <li><a draggable="true" href"#" id="one">Question 2</li>
    <li><a draggable="true" href"#" id="one">Question 3</li>
</ul>

For starters, IDs must be unique.

In your drop area:

<ul id="answerDrop">
    <li>Drop Answer Here</li>
</ul>

To view the contents on the dropped items you can use:

$('#answerDrop a').each(function() {
      alert($(this).attr('id'));
})

They will come out in the order they’re shown, but you really need to grab the unique ID to tell which is which.