1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <!doctype html>
- <html>
- <head>
- <link rel="stylesheet" href="jquery-ui.min.css">
- <style>
- #containment-wrapper{ width: 400px; height:300px; border:2px solid #ccc; padding: 2px; background : #9d9d9d;}
- .options { width: 60px; height: 60px; margin: 0 10px 10px 0; padding-left: 9px}
- #dragBox {width : 500 px; height : 500 px; float: right; padding: 10px}
- #gaptchaheader {text-align: center; font-size: 26px; font-style: bold; color: white;}
- #instruction {text-align: center; color: #050c49; padding: 7px;}
- #ques {padding-left: 10px;}
- </style>
- <script src="jquery.min.js"></script>
- <script src="jquery-ui.min.js"></script>
- <script>
- $(function() {
- $("#image1").draggable({ containment: "#containment-wrapper", scroll: false });
- $("#image2").draggable({ containment: "#containment-wrapper", scroll: false });
- $("#image3").draggable({ containment: "#containment-wrapper", scroll: false });
- $("#image4").draggable({ containment: "#containment-wrapper", scroll: false });
- $("#dragBox").droppable({ drop: function(event, ui) {
- $(this)
- .addClass("ui-state-highlight");
- $('#image1').draggable("destroy");
- $('#image2').draggable("destroy");
- $('#image3').draggable("destroy");
- $('#image4').draggable("destroy");
- $('#gaptcha').html("<input type='text' value='"+ ui.draggable.prop('id') +"' readonly>");
- }});
- });
- </script>
- </head>
- <body>
- <div id="containment-wrapper">
- <br>
- <div id="gaptchaheader">GAPTCHA</div>
- <div id="instruction"> Drag the answer to the box given below. </div><br>
- <div id ="ques">Virat Kohli is a ____man.</div><br>
- <img src="images/1.jpg" id="image1" class="options">
- <img src="images/2.jpg" id="image2" class="options">
- <img src="images/3.jpg" id="image3" class="options">
- <img src="images/4.jpg" id="image4" class="options">
- <br>
- <div id="dragBox" class="ui-widget-header">
- Drag<br>answer<br>here
- </div>
- </div>
- <div id="gaptcha"></div>
- </body>
- </html>
|