What's new

Help Fix connection(for bot only)

Status
Not open for further replies.
Solution
🤖
V_1 M said:
not all the box should be drop only the box with id="1"
Click to expand...
To ensure that only the box with the ID "1" can be dropped and trigger the completion alert, you can update the drop function to check specifically for the ID of the droppable area. Here's how you can modify the code:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Normal Level</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    /* Your existing CSS styles */
</style>
<body>
    <!-- Your existing HTML content -->

    <script>
        const spans = document.querySelectorAll('.word span');
        spans.forEach((span, idx) => {...
Sort by date Sort by votes
It seems like you are having issues with submitting data to the database and proceeding to the next page named welcome.php, as well as some code errors in the provided code snippet. Let's address these one by one:

1. Fixing Submit Button and Database Handling:
- In your HTML code, you have a form with an input button to submit the user data. However, the registerUser() function is sending the data to register.php instead of handling it within the same file. To fix this, you can modify the registerUser() function to handle the database operation directly in the same file.
- Update the registerUser() function to handle the database operation within the same file. Here's an example of how you can modify the function:

JavaScript: 
function registerUser() {
    const username = document.getElementById("uname").value;
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "", true); // Empty string indicates the current page
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            alert(xhr.responseText); // You can display a success message here
            window.location.href = 'welcome.php'; // Redirect to welcome.php after successful submission
        }
    };
    const data = "uname=" + username;
    xhr.send(data);
}

2. Fixing Code Errors:
- There are a few syntax errors and incorrect usage of media queries in your CSS code. Here are the corrections:

CSS: 
@media screen and (max-width: 600px) {
    table, tr, td {
        display: block;
    }

    td {
        width: 100%;
    }
}

3. Further Suggestions:
- Ensure that your server-side code is secure against SQL injection attacks by using prepared statements or parameterized queries.
- Make sure your database connection is correctly established and that the Connection.php file is included before using the $connection variable.
- Consider adding validation for the user input before submitting it to the database.

By implementing these changes, you should be able to fix the issues related to submitting data to the database and proceed to the welcome.php page. If you encounter any further difficulties or have additional requirements, feel free to ask for more assistance.
 
Upvote 0 Downvote
🤖 said:
To add an alert when the user completes the dropping action and prompt the user to continue to the next page or cancel, you can modify the existing code by adding a confirmation dialog. Here's how you can achieve this:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Normal Level</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    /* Your existing CSS styles */
</style>
<body>
    <!-- Your existing HTML content -->

    <script>
        const spans = document.querySelectorAll('.word span');
        spans.forEach((span, idx) => {
            span.addEventListener('click', (e) => {
                e.target.classList.add('active');
            });
            span.addEventListener('animationend', (e) => {
                e.target.classList.remove('active');
            });
            // Initial animation
            setTimeout(() => {
                span.classList.add('active');
            }, 750 * (idx + 1))
        });

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

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var draggedBox = document.getElementById(data);
            var dropzone = ev.target;
            if (data.replace("box", "") === dropzone.id.replace("dropbox", "")) {
                dropzone.appendChild(draggedBox);
               
                // Check if all boxes are dropped
                if(document.querySelectorAll('.box').length === document.querySelectorAll('.droppable .box').length) {
                    // Confirm dialog to ask the user to continue or cancel
                    if(confirm("Congratulations! You have completed the puzzle. Continue to the next page?")) {
                        // Redirect to the next page
                        window.location.href = "next_page.html";
                    } else {
                        // User clicked cancel
                        alert("You can stay on this page or perform another action.");
                    }
                }
            } else {
                alert("Invalid Drop. Please drop the number with the same id.");
            }
        }
    </script>
</body>
</html>

In this updated code, when the user completes dropping all the boxes correctly, a confirmation dialog will appear asking the user if they want to continue to the next page or cancel. If the user chooses to continue, they will be redirected to the next page. If they choose to cancel, an alert will inform them that they can stay on the current page or perform another action.

Feel free to customize the confirmation message and actions based on your specific requirements. If you have any more questions or need further assistance, feel free to ask!
Click to expand...
not all the box should be drop only the box with id="1"
 
Upvote 0 Downvote
V_1 M said:
not all the box should be drop only the box with id="1"
Click to expand...
To ensure that only the box with the ID "1" can be dropped and trigger the completion alert, you can update the drop function to check specifically for the ID of the droppable area. Here's how you can modify the code:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Normal Level</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    /* Your existing CSS styles */
</style>
<body>
    <!-- Your existing HTML content -->

    <script>
        const spans = document.querySelectorAll('.word span');
        spans.forEach((span, idx) => {
            span.addEventListener('click', (e) => {
                e.target.classList.add('active');
            });
            span.addEventListener('animationend', (e) => {
                e.target.classList.remove('active');
            });
            // Initial animation
            setTimeout(() => {
                span.classList.add('active');
            }, 750 * (idx + 1))
        });

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

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var draggedBox = document.getElementById(data);
            var dropzone = ev.target;
            if (dropzone.id === "dropbox1") {
                if (data === "box1") { // Only allow box with ID "1" to be dropped
                    dropzone.appendChild(draggedBox);
                    // Check if the correct box is dropped
                    if (data === "box1") {
                        // Confirm dialog to ask the user to continue or cancel
                        if(confirm("Congratulations! You have completed the puzzle. Continue to the next page?")) {
                            // Redirect to the next page
                            window.location.href = "next_page.html";
                        } else {
                            // User clicked cancel
                            alert("You can stay on this page or perform another action.");
                        }
                    }
                } else {
                    alert("Invalid Drop. Please drop the correct box.");
                }
            } else {
                alert("Invalid Drop. Please drop the box in the correct area.");
            }
        }
    </script>
</body>
</html>

In this updated code, the drop function checks if the dropped box has the ID "box1" (the box you want to be dropped) and if it is being dropped in the correct droppable area with the ID "dropbox1". If both conditions are met, the completion alert will be shown. Otherwise, appropriate error alerts will be displayed.

Feel free to test this code and adjust it further based on your specific requirements. If you have any more questions or need further assistance, feel free to ask!
 
Upvote 0 Downvote
Solution
Status
Not open for further replies.

Similar threads

Popular Tags

about account ako android ang ano app ask assignment bot canva dito ehi established facebook fb globe help how how to in lang legit mag naman need netflix only or paano pano pasabit phc phc bot phc robot phcorner premium pro pwede question robot shopee sim smart spotify sun tv unlock vpn wifi

Users search this thread by keywords

  1. connect bot

About this Thread

  • 3
    Replies
  • 87
    Views
  • 2
    Participants
Last reply from:
🤖

New Topics

Popular On This Forum

Online statistics

Members online
751
Guests online
4,753
Total visitors
5,504
Back
Top