Response title
This is preview!
<img id="question" src="../../images/images/screen_renamed.jpg"><br><br> <img class="ans1" id="ans1" src="../../images/images/slice1.jpg" /> <img class="ans2" id="ans2" src="../../images/images/slice2.jpg"/> <img class="ans3" id="ans3" src="../../images/images/slice3.jpg"/> <img class="ans4" id="ans4" src="../../images/images/slice4.jpg"/><br><br> <table align="center" cellpadding="0" cellspacing="0"> <tr> <td><div id="answer1"></div></td> <td><div id="answer2"></div></td> </tr> <tr> <td><div id="answer3"></div></td> <td><div id="answer4"></div></td> </tr> </table> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript"> <!-- Answer 1 --> $(document).ready(function(){ $('.ans1').draggable({ opacity: 0.70, containment: 'parent', revert: true, drag: function(){ var image = $(this).attr('id'); }}); // $('#answer1').droppable({ hoverClass: 'border', containment: 'parent', //tolerance: 'fit', accept: '.ans1', drop: function(ev, ui){ var answer = $(this).attr('id'); if(answer == 'answer1' && ui.draggable[0].id == 'ans1'){ $('#answer1').html('<img src="../../images/images/slice1.jpg" />'); var ans1 = true; alert('OK'); }else{ alert('Question 1 is Wrong'); var ans1 = false; } } }); }); </script> <!-- Answer 2 --> <script type="text/javascript"> $(document).ready(function(){ $('.ans2').draggable({ opacity: 0.70, containment: 'parent', revert: true, drag: function(){ var image = $(this).attr('id'); }}); // $('#answer2').droppable({ hoverClass: 'border', containment: 'parent', //tolerance: 'fit', accept: '.ans2', drop: function(ev, ui){ var answer = $(this).attr('id'); if(answer == 'answer2' && ui.draggable[0].id == 'ans2'){ $('#answer2').html('<img src="../../images/images/slice2.jpg" />'); var ans2 = true; alert('OK'); }else{ alert('Question 2 is Wrong'); var ans2 = false; } } }); }); </script> <!-- Answer 3 --> <script type="text/javascript"> $(document).ready(function(){ $('.ans3').draggable({ opacity: 0.70, containment: 'parent', revert: true, drag: function(){ var image = $(this).attr('id'); }}); // $('#answer3').droppable({ hoverClass: 'border', containment: 'parent', //tolerance: 'fit', accept: '.ans3', drop: function(ev, ui){ var answer = $(this).attr('id'); if(answer == 'answer3' && ui.draggable[0].id == 'ans3'){ $('#answer3').html('<img src="../../images/images/slice3.jpg" />'); var ans3 = true; alert('OK'); }else{ var ans3 = false; alert('Question 3 is Wrong'); } } }); }); </script> <!-- Answer 4 --> <script type="text/javascript"> $(document).ready(function(){ $('.ans4').draggable({ opacity: 0.70, containment: 'parent', revert: true, drag: function(){ var image = $(this).attr('id'); }}); // $('#answer4').droppable({ hoverClass: 'border', containment: 'parent', //tolerance: 'fit', accept: '.ans4', drop: function(ev, ui){ var answer = $(this).attr('id'); if(answer == 'answer4' && ui.draggable[0].id == 'ans4'){ $('#answer4').html('<img src="../../images/images/slice4.jpg" />'); var ans4 = true; alert('OK'); }else{ var ans4 = false; alert('Question 4 is Wrong'); } } }); }); </script> <script type="text/javascript"> function success(){ if(ans1 == true && ans2 == true && ans3 == true && ans4 == true){ window.location.href = "http://localhost/development/WebStore.pk/php/success.php"; }else{ alert("Please complete first humen check above."); } } success(); </script>
© 2013 jQuery Foundation
Sponsored by and others.