BLACKSITE


	: 216.73.216.123
	: 68.178.150.17 / tanujprocess.com
	: Linux bom1plmcpnl502248.prod.bom1.secureserver.net 4.18.0-553.51.1.lve.el8.x86_64 #1 SMP Tue May 6 15:14:12 UTC 2025 x86_64
: /home/g0gqrqcbap8b/public_html/smartbookspublishers.com/game-sample/
files >> /home/g0gqrqcbap8b/public_html/smartbookspublishers.com/game-sample/maths-primer-game-five.php
 <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Maths Primer | Match the Days of the Week Part A</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <?php include('include/css.php'); ?>
     <style>
        .left, .right {
            display: inline-block;
            width: 40%;
            padding: 10px;
            vertical-align: top;
        }
        .left {
            text-align: left;
        }
        .right {
            text-align: right;
        }
        .drag-item {
            padding: 13px;
            background-color: lightblue;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
            font-size: 18px;
            margin-bottom: 17px;
            text-align: center;
        }
        .drop-zone {
            width: 100%;
            height: 50px;
            border: 2px dashed #bbb;
            margin: 10px;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            color: #888;
            border-radius: 5px;
        }
        .correct {
            background-color: lightgreen;
        }
        .incorrect {
            background-color: lightcoral;
        }
    </style>
   </head>
   <body>
      <?php include('include/header.php'); ?>
      <div class="container control-section mt-50 wow fadeInUp">
         <h1 class="title pt-2 pb-2">Game - 5 (Matching)</h1>
         <h2 class="title">Match the Days of the Week</h2>
            <div class="row justify-content-center">
                
                <div class="message text-center" id="message"></div>
                
                <div class="col-lg-6 left"> 
                <div class="drop-zone" id="monday" data-correct="drag-monday">1<sup>st</sup> Day of Week</div><br>
                <div class="drop-zone" id="tuesday" data-correct="drag-tuesday">2<sup>nd</sup> Day of Week</div><br>
                <div class="drop-zone" id="wednesday" data-correct="drag-wednesday">3<sup>rd</sup> Day of Week</div><br>
                <div class="drop-zone" id="thursday" data-correct="drag-thursday">4<sup>th</sup> Day of Week</div><br>
                <div class="drop-zone" id="friday" data-correct="drag-friday">5<sup>th</sup> Day of Week</div><br>
                <div class="drop-zone" id="saturday" data-correct="drag-saturday">6<sup>th</sup> Day of Week</div><br>
                <div class="drop-zone" id="sunday" data-correct="drag-sunday">Last Day of Week</div>
                </div>
                <div class="col-lg-6 right">
                    <div class="drag-item" id="drag-thursday" draggable="true" ondragstart="drag(event)">Thursday</div>
                    <div class="drag-item" id="drag-saturday" draggable="true" ondragstart="drag(event)">Saturday</div>
                    <div class="drag-item" id="drag-friday" draggable="true" ondragstart="drag(event)">Friday</div>
                    <div class="drag-item" id="drag-wednesday" draggable="true" ondragstart="drag(event)">Wednesday</div>
                     <div class="drag-item" id="drag-sunday" draggable="true" ondragstart="drag(event)">Sunday</div>
                     <div class="drag-item" id="drag-tuesday" draggable="true" ondragstart="drag(event)">Tuesday</div>
                    <div class="drag-item" id="drag-monday" draggable="true" ondragstart="drag(event)">Monday</div>
                </div>
            </div>
                <div class="row jackpot-slot pt-0">
                    <div class="col-6">
                        <div class="running">
                            <a href="maths-primer-game.php"><button type="submit" class="btn btn-info">Back</button></a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="running">
                            <a href="maths-primer-game.php"><button type="submit" class="btn">Next</button></a>
                        </div>
                    </div>
                </div>
            
        </div>
        
        <audio id="correctSound" src="sound/good-Its-correct-answer.mp3"></audio>
        <audio id="wrongSound" src="sound/please-try-again.mp3"></audio>

        <script>
            function allowDrop(event) {
                event.preventDefault();
            }

            function drag(event) {
                event.dataTransfer.setData("text", event.target.id);
            }

            $(".drop-zone").on("dragover", allowDrop);

            $(".drop-zone").on("drop", function(event) {
                event.preventDefault();
                const draggedElement = $("#" + event.originalEvent.dataTransfer.getData("text"));
                const dropZone = $(this);

                if (dropZone.data("correct") === draggedElement.attr("id")) {
                    dropZone.addClass("correct");
                    dropZone.text(draggedElement.text());
                    draggedElement.hide();
                    playSound("correct");
                } else {
                    playSound("wrong");
                    dropZone.addClass("incorrect");
                    setTimeout(() => {
                        dropZone.removeClass("incorrect");
                        dropZone.text(dropZone.data("correct") === undefined ? dropZone.text() : dropZone.data("correct"));
                    }, 1000);
                }
            });

            function playSound(type) {
                const sound = type === "correct" ? document.getElementById("correctSound") : document.getElementById("wrongSound");
                sound.play();
            }
        </script>

      <?php include('include/footer.php'); ?>
      <?php include('include/js.php'); ?>
   </body>
</html>