Pasted

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            #div1, #div2
            {
                float:left;
                width: 350px;
                height: 70px;
                padding: 10px;
                border: 1px solid #aaaaaa;
            }
            
            #div1bis, #div2bis
            {
                float:left;
                padding-left:5px;
            }
            
            .flex
            {
                padding-left: 150px;
            }
        </style>
        <script>
            function allowDrop(ev)
            {
                ev.preventDefault();
            }
            
            function drag(ev){
                ev.dataTransfer.setData("text", ev.target.id);
            }
            
            function drop(ev)
            {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.appendChild(document.getElementById(data));
            }
            
            function reload()
            {
                location.reload();
            }
            
            function check()
            {
                var goodResponses = 0;
                var offsets = document.getElementById('drag1').getBoundingClientRect();
                var top = offsets.top;
                var left = offsets.left;
                //alert(top + ' , ' + left)
                if ((top == 61) && (left == 19))
                {
                    document.getElementById("div1").style.border = "thick solid #008000";
                    goodResponses++;
                }
                else
                {
                    document.getElementById("div1").style.border = "thick solid #FF0000";
                }
                offsets = document.getElementById('drag2').getBoundingClientRect();
                top = offsets.top;
                left = offsets.left;
                if ((top == 169) && (left == 19))
                {
                    document.getElementById("div2").style.border = "thick solid #008000";
                    goodResponses++;
                }
                else
                {
                    document.getElementById("div2").style.border = "thick solid #FF0000";
                }
                if (goodResponses == 2)
                {
                    document.getElementById("div3").innerHTML = "Congrats";
                }
                else
                {
                    document.getElementById("div3").innerHTML = "Try again";
                }
                setTimeout(reload, 3000)
            }
        </script>
    </head>
    <body>
        <p>Drag the images into the right rectangles :</p>  
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br><br>
        <div id="div1bis">logo</div>
        <br><br><br><br>
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br><br>
        <div id="div2bis">logo2</div>
        <br><br><br><br>
        <div class="flex"> 
             <button type="button" onclick='check()'>Check</button>
        </div>
        <div id="div3"></div>
        <br>
        <img id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69" alt="" src="data:image/png;base64,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" />
        <img id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69" alt="" src="data:image/png;base64,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" />
    </body>
</html>