For example I have this sentence, 'I like to play the piano.' It it separated into 4 elements, which will be taken out from the database(myphpadmin). How can make it as in only when I press the shuffle button, then it will shuffle.
<body>
<?php
// Connect to database server
mysql_connect("localhost", "root", "password") or die (mysql_error ());
// Select database
mysql_select_db("login") or die(mysql_error());
// Get data from the database depending on the value of the id in the URL
$strSQL = "SELECT * FROM sentences WHERE id
ORDER BY RAND() LIMIT 1;";
//create an array with numbers 1-4
$order = array(1,2,3,4);
//shuffle them in random order
shuffle($order);
$rs = mysql_query($strSQL);
// Loop the recordset $rs
while($row = mysql_fetch_array($rs)) {
// Write the data of the person
//Display all the array values from 0-3 (array index starts from 0)
echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .
$row[$order[2]] . " " . $row[$order[3]] ."</dd>";
}
// Close the database connection
mysql_close();
?>
<button onClick="Shuffle()">Scramble</button>
</body>
You'd basically need to do this with jQuery.
Harnessing jQuery.get() to run an ajax request to your seperate php script. Basically you'd have a php script with your code set up like this:
Lets call it sentence.php.
<?php
// Connect to database server
mysql_connect("localhost", "root", "password") or die (mysql_error ());
// Select database
mysql_select_db("login") or die(mysql_error());
// Get data from the database depending on the value of the id in the URL
$strSQL = "SELECT * FROM sentences WHERE id
ORDER BY RAND() LIMIT 1;";
//create an array with numbers 1-4
$order = array(1,2,3,4);
//shuffle them in random order
shuffle($order);
$rs = mysql_query($strSQL);
// Loop the recordset $rs
while($row = mysql_fetch_array($rs)) {
// Write the data of the person
//Display all the array values from 0-3 (array index starts from 0)
echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .
$row[$order[2]] . " " . $row[$order[3]] ."</dd>";
}
// Close the database connection
mysql_close();
?>
Now you'd have your html file, lets call that index.html
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<button id="showcontent">Scramble</button>
<div id="content"></div>
</body>
</html>
In your script.js you'd be running your jQuery.
$(document).ready(function() {
$(document).on('click', '#showcontent', function(event) {
event.preventDefault();
$.get("sentence.php", function(data) {
$("div#content").html(data);
});
});
});