I am trying to display 3 submit buttons on a page at random positions. I have managed to do this. I have now created three functions that generate the coordinates for these buttons and also check that they do not overlap too much with other buttons.
Somewhere in these functions I think I am creating an infinite loop - but I can't see why that would be the case...
Here is the code. The functions are defined and called in the header.
<?php session_start(); ?>
<html>
<head>
<style>
input[type='submit']{
position: absolute;
width: 300;
height: 50;
color: white;
background: red;
}
</style>
<?php
$first=array(2,4,8,10);
$second=array(2,4,8,10);
$b=rand(0,3);
$c=rand(0,3);
$f=$first[$b];
$s=$second[$c];
$d=$f*$s;
$score=$_SESSION["score"];
$name=$_SESSION["name"];
function firstxy(){
$x1=rand(0,500);
$y1=rand(0,500);
}
function secondxy(){
$x2=rand(0,500);
$y2=rand(0,500);
if ($x2-$x1<30 ||$x1-$x2<30){
secondxy();
}
if ($y2-$y1<30 ||$y1-$y2<30){
secondxy();
}}
function thirdxy(){
$x3=rand(0,500);
$y3=rand(0,500);
if ($x3-$x2<30 ||$x3-$x1<30||$x2-$x3<30||$x1-$x3<30){
thirdxy();
}
if ($y3-$y2<30 ||$y3-$y1<30||$y2-$y3<30||$y1-$y3<30){
thirdxy();
}}
firstxy();
secondxy();
thirdxy();
?>
</head>
<body>
<?php
echo $name." your score so far=".$score;
echo "<br>";
?>
<?php echo"Write the answer";?>
<br>
<?php echo $f."x".$s."=";?>
<form method= "post" action="submit.php">
<input type="number" name=a value="0">
<input type="hidden" name=b value=<?php echo $f;?>>
<input type="hidden" name=c value=<?php echo $s;?>>
<input type="submit" name=submit value=<?php echo $d;?>>
<input type="submit" id="btn" value=<?php echo $d;?>>
<input type="submit" id="btn2" value=<?php echo " Wrong answer";?>>
<input type="submit" id="btn3" value=<?php echo " Wrong answer";?>>
</form>
<script>
var btn = document.getElementById("btn");
//btn.style.top = Math.floor((Math.random() * 230) + 1) + "px";
//btn.style.left = Math.floor((Math.random() * 200) + 1) + "px";
btn.style.top = <?php echo $x1;?>+ "px";
btn.style.left = <?php echo $y1;?> + "px";
var btn2 = document.getElementById("btn2");
//btn2.style.top = Math.floor((Math.random() * 230) + 1) + "px";
//btn2.style.left = Math.floor((Math.random() * 200) + 1) + "px";
btn2.style.top = <?php echo $x2;?>+ "px";
btn2.style.left = <?php echo $y2;?> + "px";
var btn3 = document.getElementById("btn3");
//btn3.style.top = Math.floor((Math.random() * 230) + 1) + "px";
//btn3.style.left = Math.floor((Math.random() * 200) + 1) + "px";
btn3.style.top = <?php echo $x3;?>+ "px";
btn3.style.left = <?php echo $y3;?> + "px";
</script>
</body></html>
When you are checking for overlap, you should use abs(). The following condition will always pass, because one of $x2-$x1 or $x1-$x2 will be negative (therefore less than 30).
if ($x2-$x1<30 ||$x1-$x2<30)
Try doing something like
if (abs($x2-$x1) < 30){