Question 378555 in PHP Question posted in
Official manual can be found here.

Php – Form Numbers as Images

So essentially I haven’t found a way to be able to have my dice rolls (represented by a form box with randomised digits from 1-6 (inclusive)), represented as images instead of number, however I do not know JS and would like to be able to do this with CSS, PHP and HTML. I also have been unable to style the checkboxes, sorry if I seem ignorant. Here is the script:

<!doctype html>
<html lang="en">
<style>
    body {
        background-color: black;
        font-family: helvetica;
        text-align: center;
        background-size: 105%;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-image: url(https://i.ytimg.com/vi/DfkFYgNLSmw/maxresdefault.jpg);
    }
    .header {
        z-index: 10;
        background-color: black;
        color:White;
        padding: 27px;
        padding-top: 52px;
        padding-bottom: 52px;
        text-align: center;
        justify-content: center;
        position: fixed;
        top: 12.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding-left: 45%;
        padding-right: 45%;
    }
    .die {
        text-align: center;
        justify-content: center;
        position: fixed;
        top: 35%;
        bottom: 50%;
        transform: translate(7%, -50%);
        
        
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .die > div {
        background-color: black;
        margin: 10px;
        padding: 20px;
        font-size: 30px;
        color: white;
    }
    .die > div > div {
        background-color: dodgerblue;
        justify-content: center;
        padding: 15px;
        padding-top: 0px;
    }
    .button {
        text-align: center;
        justify-content: center;
        position: fixed;
        top: 60%;
        left: 50%;
        padding-top: 9px;
        padding-bottom: 9px;
        padding-left: 25px;
        padding-right: 25px;
        transform: translate(-50%, -50%);
        background-color: gold;
    }
    .button:active {
        background-color: goldenrod;
    }
    .scroll {
        text-align: center;
        justify-content: center;
        position: fixed;
        bottom: 12px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        height: 2px;
        width: 320px;
        background-color: white;
        mix-blend-mode: difference;
    }
    .statistics {
        width: 0;
        height: 0;
        border-left: 250px solid transparent;
        border-right: 1750px solid transparent;
        border-bottom: 850px solid white;
        position: absolute;
        bottom: -100%;
        left: -25%;
        z-index: 9;
        mix-blend-mode: difference;
        /* Make sticky text something something so it drags down from the header (y) */
    }
    .underneath {
        height: 650px;
        width: 150%;
        background-color: black;
        position: absolute;
        bottom: -212%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<head>
<title>Yahtzee</title>
</head>
<div class="header">
    <h1>Yahtzee</h1>
</div>
<body>
<?php
session_start();
$message = '';
if (isset($_POST["dice1check"])) {
$dice1check = 'checked';
$dice1 = $_POST["dice1"];
} else {
$dice1check = '';
$dice1 = rand(1,6);
}
echo"";
if (isset($_POST["dice2check"])) {
$dice2check = 'checked';
$dice2 = $_POST["dice2"];
} else {
$dice2check = '';
$dice2 = rand(1,6);
}

echo"";
if (isset($_POST["dice3check"])) {
$dice3check = 'checked';
$dice3 = $_POST["dice3"];
} else {
$dice3check = '';
$dice3 = rand(1,6);
}

echo"";
if (isset($_POST["dice4check"])) {
$dice4check = 'checked';
$dice4 = $_POST["dice4"];
} else {
$dice4check = '';
$dice4 = rand(1,6);
}

echo"";
if (isset($_POST["dice5check"])) {
$dice5check = 'checked';
$dice5 = $_POST["dice5"];
} else {
$dice5check = '';
$dice5 = rand(1,6);
}

echo"<br>";
echo $message;
?>

    <form name="diceroller" method="post" action="<?php htmlentities($_SERVER['PHP_SELF'])?>">
<div class="die">
    <div>
        <label for="dice1">Dice 1</label> <br>
        <input type="text" name="dice1" class="textbox" value="<?php echo $dice1;?>">
        <br>
        <label for="dice1check">Check to keep</label>
        <div>
            <input type="checkbox" name="dice1check" <?php echo $dice1check;?>>
        </div>
    </div>
    <br> <br>
    <div>
        <label for="dice2">Dice 2</label> <br>
        <input type="text" name="dice2" class="textbox" value="<?php echo $dice2;?>">
        <br>
        <label for="dice2check">Check to keep</label>
        <div>
            <input type="checkbox" name="dice2check" <?php echo $dice2check;?>>
        </div>
    </div>
    <br> <br>
    <div>
        <label for="dice3">Dice 3</label> <br>
        <input type="text" name="dice3" class="textbox" value="<?php echo $dice3;?>">
        <br>
        <label for="dice3check">Check to keep</label>
        <div>
            <input type="checkbox" name="dice3check" <?php echo $dice3check;?>>
        </div>
    </div>
    <br> <br>
    <div>
        <label for="dice4">Dice 4</label> <br>
        <input type="text" name="dice4" class="textbox" value="<?php echo $dice4;?>">
        <br>
        <label for="dice4check">Check to keep</label>
        <div>
            <input type="checkbox" name="dice4check" <?php echo $dice4check;?>>
        </div>
    </div>
    <br> <br>
    <div>
        <label for="dice5">Dice 5</label> <br>
        <input type="text" name="dice5" class="textbox" value="<?php echo $dice5;?>">
        <br>
        <label for="dice5check">Check to keep</label>
        <div>
            <input type="checkbox" name="dice5check" <?php echo $dice5check;?>>
        </div>
    </div>
</div>
    <br> <br>
    <button class="button">
        <input type="submit" name="submit" value="Roll" class="button">
    </button>

    </form>
    
<div class="scroll">
    <header1>SCROLL FOR STATISTICS</header1>
</div>
<div class="statistics">
</div>
<div class="underneath">
    
</div>
</imp>
</body>
</html>

I tried using JS but failed 😅

Tags:

3

Answers


  1. 0

    I removed all PHP code and here is javascript version of code. In addition to that Try to not use position absolute if it is not necessary.

    <body>
<div class="header">
    <h1>Yahtzee</h1>
</div>




<form name="diceroller" method="post" action="<?php htmlentities($_SERVER['PHP_SELF'])?>">
    <div class="die">
        <div>
            <label for="dice1">Dice 1</label> <br>
            <input type="text" name="dice1" class="textbox" value="<?= rand(1,6) ;?>">
            <br>
            <label for="dice1check">Check to keep</label>
            <div>
                <input type="checkbox" name="dice1check">
            </div>
        </div>
        <br> <br>
        <div>
            <label for="dice2">Dice 2</label> <br>
            <input type="text" name="dice2" class="textbox" value="<?= rand(1,6); ?>">
            <br>
            <label for="dice2check">Check to keep</label>
            <div>
                <input type="checkbox" name="dice2check">
            </div>
        </div>
        <br> <br>
        <div>
            <label for="dice3">Dice 3</label> <br>
            <input type="text" name="dice3" class="textbox" value="<?= rand(1,6); ?>">
            <br>
            <label for="dice3check">Check to keep</label>
            <div>
                <input type="checkbox" name="dice3check">
            </div>
        </div>
        <br> <br>
        <div>
            <label for="dice4">Dice 4</label> <br>
            <input type="text" name="dice4" class="textbox" value="<?= rand(1,6); ?>">
            <br>
            <label for="dice4check">Check to keep</label>
            <div>
                <input type="checkbox" name="dice4check" />
            </div>
        </div>
        <br> <br>
        <div>
            <label for="dice5">Dice 5</label> <br>
            <input type="text" name="dice5" class="textbox" value="<?= rand(1,6); ?> ">
            <br>
            <label for="dice5check">Check to keep</label>
            <div>
                <input type="checkbox" name="dice5check">
            </div>
        </div>
    </div>
    <br> <br>
    <button class="button">Roll</button>
</form>
<div class="scroll">
    <header1>SCROLL FOR STATISTICS</header1>
</div>
<div class="statistics">
</div>
<div class="underneath">

</div>

    <script>
    let dice1check = document.querySelector("input[name='dice1check']")
    let dice2check = document.querySelector("input[name='dice2check']")
    let dice3check = document.querySelector("input[name='dice3check']")
    let dice4check = document.querySelector("input[name='dice4check']")
    let dice5check = document.querySelector("input[name='dice5check']")

    let dice1 = document.querySelector("input[name='dice1'")
    let dice2 = document.querySelector("input[name='dice2'")
    let dice3 = document.querySelector("input[name='dice3'")
    let dice4 = document.querySelector("input[name='dice4'")
    let dice5 = document.querySelector("input[name='dice5'")


    function randomise(diceElement, checkElement) {
        if (!checkElement.checked) {
            let random = Math.floor(Math.random() * 6) + 1
            diceElement.value = random
        }
    }

    document.querySelector("button").addEventListener("click", function (e) {
        e.preventDefault()
        randomise(dice1, dice1check)
        randomise(dice2, dice2check)
        randomise(dice3, dice3check)
        randomise(dice4, dice4check)
        randomise(dice5, dice5check)

    })


</script>
    Login or Signup to reply.
  2. 0

    The dices class (which enclose the checkboxes) and the "Roll" button are hidden (overlapped) by other elements on your page.

    For your information, z-index is the CSS property that controls the stacking order of overlapping elements on a page.

    So you may specify the class dice to have a larger z-index value say z-index:50000 and the button to have z-index:50001 (so that they will not be overlapped by other elements on top) , and then it will work

    So, based on your original code:

    (1) Change

        <button class="button">
        <input type="submit" name="submit" value="Roll" class="button">
    </button>

    to

        <button class="button" style="z-index:50001">
        <input type="submit" name="submit" value="Roll" class="button">
    </button>

    and

    (2) change

     .die {
        text-align: center;
        justify-content: center;
        position: fixed;
        top: 35%;
        bottom: 50%;
        transform: translate(7%, -50%);        
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    to

     .die {
        text-align: center;
        justify-content: center;
        position: fixed;
        top: 35%;
        bottom: 50%;
        transform: translate(7%, -50%);
        z-index:50000;        
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    Login or Signup to reply.
  3. 0

    To achieve your goal of displaying dice rolls as images instead of numbers using only HTML, CSS, and PHP, you can create image files for each side of the dice (1 to 6) and then use PHP to randomly select and display these images based on the dice roll. Here’s how you can modify your code to accomplish this:

    Create six image files named dice1.png, dice2.png, …, dice6.png, representing each side of the dice.
    Modify your PHP code to select a random number between 1 and 6 and then use that number to construct the filename of the corresponding image.
    Here’s the modified PHP code:

    <?php
session_start();
$message = '';

// Function to generate a random dice roll and return the filename of the corresponding image
function rollDice(&$check, &$value) {
    if (isset($_POST[$check])) {
        $check = 'checked';
        $value = $_POST[$check];
    } else {
        $check = '';
        $value = rand(1,6);
    }
    return "dice" . $value . ".png";
}

$dice1Image = rollDice("dice1check", $dice1);
$dice2Image = rollDice("dice2check", $dice2);
$dice3Image = rollDice("dice3check", $dice3);
$dice4Image = rollDice("dice4check", $dice4);
$dice5Image = rollDice("dice5check", $dice5);

?>

    Save to grepper
    Now, update your HTML code to display these images instead of the input fields:

    <div class="die">
    <div>
        <label for="dice1">Dice 1</label> <br>
        <img src="<?php echo $dice1Image; ?>" alt="Dice 1">
        <br>
        <label for="dice1check">Check to keep</label>
        <div>
            <input type="checkbox" name="dice1check" <?php echo $dice1check;?>>
        </div>
    </div>
    <!-- Repeat for dice 2 to 5 -->
</div>

    This will display the dice rolls as images instead of numbers. Make sure the image files (dice1.png, dice2.png, etc.) are in the same directory as your HTML file.

    As for styling the checkboxes, you can use CSS to customize their appearance. For example:

    input[type="checkbox"] {
    /* Your custom styles here */
    appearance: none; /* Hide default checkbox */
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 5px;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: #00ff00; /* Change color when checked */
}

    Adjust the styles according to your design preferences. This CSS should be placed within the tags in the section of your HTML file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search