sagaracharya
/
gaptcha


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!--
Gaptcha is a libre captcha used to separate bots from humans.
Copyright (C) 2020 Sagar Acharya <sagaracharya@tutanota.com>

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!doctype html>
<html>
    <head>

<!-- Copy this as it is to your site's 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>
<!-- Copy head till here -->

    </head>
    <body>

<!-- Copy this as it is to your site's 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>
<!-- Copy body till here-->

        <div id="gaptcha"></div>                <!-- Create this div in your html file. -->

    </body>
</html>