ansaurus

Question

specific draggable is above a specific droppable

Answer 1

A:

When you're dragging and dropping, you're modifying the dom. Thus, you can just check if the right 'answer' draggable is in the correct 'question' droppable.

Your first set of code doesn't show your div structure, but consider the following:

<div id="q1"> The Capital of KSA  </div>
<div id="q2"> The Capital of UK   </div>
<div id="q3"> The Capital of USA  </div>

<div id="a1"> Riyadh  </div> 
<div id="a2"> London  </div>
<div id="a3"> Washington  </div>

You can now check if question1 contains answer1

if( $('#q1').find('#a1').length > 0 ) {
   alert('question 1 is right!');
}

I used .find to make the code easier to read, but i think you get the idea, ya?

edit: now i see what you're up to - you want the submit to hold that data. You need to note that before submitting the form into a form element, such as:

<form id="f1" action="page2.php" method="post" >
   <div id="Qdiv" style="position: absolute; top:242px; left:0px; wedth:120px">
     <div  id="q1" class="question"><label id="q1l"> The Capital of KSA</label></div>
     <div  id="q2" class="question"><label id="q2l"> The Capital of UK</label></div>
     <div  id="q3" class="question"><label id="q3l"> The Capital of USA</label></div>
   </div>
   <div id="answerDiv" style="position: absolute; top:242px; left:140px; wedth:100px">
     <div  id="a1" class="drag answer"><label id="a1l"> Riyadh</label></div>
     <div  id="a2" class="drag answer"><label id="a2l"> London</label></div>
     <div  id="a3" class="drag answer"><label id="a3l"> Washington</label></div>
  </div>
  <input type= "submit" id="sub1" value="Submit" style="position: absolute; top:310px; left:70px; /><br />
</form>
<script>
   $(function() {
      $('f1').submit(function() {
          $('.question').each(function() {
               var $question = $(this);
               var $answer = $(this).find('.answer');
               if ( $answers.length < 1 ) {
                   alert(' you must provide all answers');
                   return false;
               }
               var answerId = $answer.attr('id');
               var $answerForm = $(this).append('<input type="hidden" value="' + answerId + '" name="answer_' + $(this).attr('id') + '" />');
          });
      });
   });
</script>

Hopefully not too crude typing it in the browser. But the principle is you're going to make hidden form elements with the answer upon submit of the form. The function goes through each question and grabs the id of the answer - you'll end up with form elements that have a name like answer_q1 with a value of a1 - (or a2, if the user is wrong, ya?).

Btw, your submit button was after the form closing tag - it needs to be before it.

Dan Heberden 2010-06-03 17:54:35

Many Thanks Dan, But I used your code in the function that handles button click and i doesn't work. I really can't find what is the problem. Any clue?

2010-06-03 18:56:45

could you put the html markup for the q1,a1,etc items in your question?

Dan Heberden 2010-06-03 19:02:07

OK, can I ask u how can I show the structure of my code? it keeps appearing like first piece of code of my question :(

2010-06-03 19:18:36

Copy the source (e.g. <div id="...) into the body of your question, highlight it and press the code button in the toolbar. If you keep having issues, you can post it to a public collaboration site like jsfiddle.net. Copy the html (you can even post your javascript) and click "save as new" and append that url to your question

Dan Heberden 2010-06-03 19:49:32

Thank You sir, I post it as an answer

2010-06-03 20:04:40

Better to keep those kind of updates in your original question. I updated my answer for you.

Dan Heberden 2010-06-03 20:38:15

ansaurus

tags:

views:

answers:

specific draggable is above a specific droppable

related questions