specific draggable is above a specific droppable
I am a begginer in JQuery and I want to make a simple matching quiz so I used this code to create the qustions div and answers div
edit:
<HTML>
<HEAD>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</HEAD>
<BODY onload="location.href='#bottom'">
<form id="f1" action="#" 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>
<img src="images/correct.png"id="myImage"style="display: none;"/>
<img src="images/false.png"id="myImage1"style="display: none;"/>
<a name="bottom"style="position: absolute; top:300px; left:70px;" ></a>
<script>
$(function() {
$("#a1").draggable();
$("#q1").droppable({
accept: '#a1', //I used this to make only a1 acceptable for q1
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('label').html('Dropped!'); // this is just for testing if accept works
}
});
});
$(function() {
$("#a2").draggable();
$("#q2").droppable({
accept: '#a2', //I used this to make only a2 acceptable for q2
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('label').html('Dropped!'); // this is just for testing if accept works
}
});
});
$(function() {
$("#a3").draggable();
$("#q3").droppable({
accept: '#a3', //I used this to make only a3 acceptable for q3
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('label').html('Dropped!'); // this is just for testing if accept works
}
});
});
$(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>
</body>
</html>
I want to enable the user to drag Riyadh, London, and Washington to any of The capital of KSA The capital of UK The capital of USA and submit his/her answer after submitting it I want the button handler to check if every draggable is above its correct droppable. If yes, correct.png appears. othewise false.png appears.
I really thank u mr.Dan Heberden for your help but I tried ur code and it doesn't show what I expect like the alert(' you must provide all answers'); and I couldn't find out why.
I tried to use other codes but they also fail, sorry for being bothersome but I really need your help so I posted my whole page :$
your help will be appreciat开发者_Python百科ed :)
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.
加载中,请稍侯......
精彩评论