❓ Help Fix connection(for bot only)

V_1 M · May 20, 2024

fix submit button to submit data in database and proceed to next page named welcome.php and some code error in this code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Kids</title>
<link rel="shortcut icon" href="src/icon.png" type="image/x-icon">
</head>
<style>
body {
background-image: url(src/introg.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
table {
margin: 0 auto;
border-collapse: collapse;
width: 100%;
height: 100%;
font-size: 100px;
}

td {
width: 100px;
text-align: center;
}

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

td {
width: 100%;
}
}
.center {
position: absolute;
width: 100%;
top: 270px;
height: 480px;
}
.play, label {
font-family: 'Moon Kids Personal Use', cursive;
}
.button-75 {
background-color: #ff797900;
border: 0;
border-radius: 10px;
color: #fff;
cursor: pointer;
font-size: 80px;
font-weight: bolder;
height: 54px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
letter-spacing: .4px;
line-height: 1;
padding-top: 3px;
text-decoration: none;
font-family: 'Moon Kids Personal Use', cursive;
}
.button-75:active {
outline: 0;
}
.button-75:hover {
outline: 0;
}
.button-75 span {
-webkit-transition: all 150ms;
-o-transition: all 150ms;
transition: all 150ms;
}
.button-75:hover span {
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
opacity: .75;
}
.text {
display: inline-block;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-inline: auto;
}
</style>
<body>
<div class="center">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="play"><Button class="button-75" onclick="openModal()"><span class="text">Play</span></Button></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<link rel="stylesheet" href="modal/style.css">
<div id="modal" class="modal">
<div class="modal-content">
<form id="pinform">
<span class="close">×</span><center><span class="picwel">
<img src="src/waving.gif" alt="admin"></span></center><br>
<label for="uname">What's your name?</label>
<input type="text" id="uname" name="uname" required autocomplete="off"/>
<input type="button" class="button" value="Submit" onclick="registerUser()" />
</form>
</div>
</div>
<?php
include('Connection.php');
session_start();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$uname = $_POST['uname'];
$dateCreated = date('Y-m-d H:i:s');

$checkUserQuery = "SELECT * FROM user WHERE username = '$uname'";
$checkUserResult = mysqli_query($connection, $checkUserQuery);

if (mysqli_num_rows($checkUserResult) > 0) {
// update
$updateQuery = "UPDATE user SET total_time_usage = total_time_usage + 1, date_last_used = '$dateCreated' WHERE username = '$uname'";
mysqli_query($connection, $updateQuery);
} else {
// add
$insertQuery = "INSERT INTO user (username, date_created, total_time_usage) VALUES ('$uname', '$dateCreated', 0)";
mysqli_query($connection, $insertQuery);
}
}
?>
</body>
<script>
// Function to open the modal
function openModal() {
document.getElementById("modal").style.display = "block";
}

// Function to close the modal
function closeModal() {
document.getElementById("modal").style.display = "none";
}
// Register user function
function registerUser() {
const username = document.getElementById("uname").value;
const xhr = new XMLHttpRequest();
xhr.open("POST", "register.php", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.success) {
alert("User registered successfully!");
} else {
alert("Failed to register user. Please try again.");
}
}
};
const data = {
username: username
};
xhr.send(JSON.stringify(data));
}
document.addEventListener("DOMContentLoaded", function() {
// Close the modal when the close button is clicked
document.querySelector(".close").addEventListener("click", function() {
closeModal();
});

// Close the modal when clicking outside the modal
window.addEventListener("click", function(event) {
if (event.target == document.getElementById("modal")) {
closeModal();
}
});
});
</script>
</html>

🤖 · May 20, 2024

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.

V_1 M · May 21, 2024

🤖 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!

not all the box should be drop only the box with id="1"

🤖 · May 21, 2024

V_1 M said:
not all the box should be drop only the box with id="1"

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!

Search

Search

❓ Help Fix connection(for bot only)

V_1 M

Forum Guru

🤖

🤖

V_1 M

Forum Guru

🤖

About this Thread

New Topics

Anong good alternative para sa grok?

Paano po mabalik Movies na forum? Hindi ko na po kasi makita, please help.

Your thoughts in 18k salary?

Kamusta po kayo?

Saan maganda nag download offline games? Like mga games na nakikita dati sa comp shop?

Saan pwede mag download movies? Yung kaya IDM, hardcoded!

Honga Naman. Bakit Nga Ba?!

Hello Ang pag babalik

Inplay psu for budget gaming

Pano po maibalik yung pagiging established?

Trending Topics

Online now

Forum statistics