I want to make a system that generate numbers on click,
I have numbers from 1 to 100 like
M-3134
A-3133
U-3132 and so on.
and I want to put all my these numbers in array and want to show using button randomally, upto 8 numbers or 10.
and when 1 number is showed in first result for example M-3134 if showed, it should colored red on next generate.
and so on.
any idea how to do this?
This doesn't make much sense. Is there a connection between 100 numbers and the ids you show. For example, are these ids already generated and you just want to pick one at random from the array?
Shuffle the numbers 0-99 in an array and loop over them - display the item of the array, e.g. alert (items[cnt]) or however you're displaying it. Increment the counter (cnt) every time the button is clicked to display the next item. This will not give you duplicates.
If you want duplicates (reds), then you could generate a random number (within 0-99) every time you click a button and then display that array item. In order to see if that item has already been displayed, you could keep an "used" array and dump the random numbers, as they come up, into it. It's just a matter of checking the "used" array for a number to decide whether the value should be red or not.
well this numbers is not randomed , want to show radnomally,
I have these pre-defined numbers.
If I can put all these numbers in array using submit that would be more good.
I don't think you understood me and I'm still having trouble understanding you. I have an example somewhere - I'll see if I can find it and post it back - if not, perhaps I'll knock up a quick one.
BTW - this will be basic javascript, not jQuery or anything else?
Here's a simple quick script. MOdify as required if it's any use...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onClick="displayValue();" id="surprise">SURPRISE!</button>
<button onClick="resetAll();">RESET!</button>
<div id="answers"></div>
<script>
var data = ["M-3100","M-7333","M-0123","M-9087","M-2758","M-1267","M-3234","M-3198","M-3188","M-3170","M-3106"];
var div = document.getElementById('answers');
var current = 0;
//http://jsfromhell.com/array/shuffle
function shuffle(o){
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
shuffle(data);
function displayValue()
{
if(current == data.length)
{
document.getElementById('surprise').disabled = true;
return;
}
div.innerHTML = div.innerHTML + data[current] + "<br>";
current++;
}
function resetAll()
{
current = 0;
shuffle(data);
div.innerHTML = '';
document.getElementById('surprise').disabled = false;
}
</script>
</body>
</html>
Change the option for JS.
but its showing values 1 by 1, I want to show 8 or 10 values at a time randomally from 100, suppose I have 100 numbers like this M-1131 and just show only 8 or 10 at a time on click, and when suffle again the numbered that shows earlier don't show or display in red colored. thanks
OK, that's the bit I didn't understand from your original post.
Try this...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#answers span{
color: red;
}
</style>
</head>
<body>
<button onClick="displayValue();" id="surprise">SURPRISE!</button>
<div id="answers"></div>
<script>
var displayAmount = 3;
var data = ["M-3100","M-7333","M-0123","M-9087","M-2758","M-1267","M-3234","M-3198","M-3188","M-3170","M-3106"];
var div = document.getElementById('answers');
var current = 0;
var trash = [];
//http://jsfromhell.com/array/shuffle
function shuffle(o){
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
function displayValue()
{
shuffle(data);
var temp = data.slice(0, displayAmount);
var display = '';
for (index = 0; index < temp.length; ++index) {
if(trash.indexOf(temp[index]) != -1)
{
display = display + "<span>" + temp[index] + "</span><br>";
}else{
display = display + temp[index] + "<br>";
trash.push(temp[index]);
}
}
div.innerHTML = div.innerHTML + display + "<hr>";
current++;
}
</script>
</body>
</html>
OK its somehow correct, but its showing again the previus number again that has been suffled, and it has no limit like in your first code was, its not end when all the numbers suffled. I want to stop suffling when all data is suffled, and that number should not suffled again that has been suffled before or showed before or should in different color.
thanks.
can you add more option to add this "M-3100","M-7333","M-0123","M-9087","M-2758","M-1267","M-3234","M-3198","M-3188","M-3170","M-3106" data into array [] from file using input upload file.
I would think that you would do the data shuffling or randomly select values from an array (in your case). Do both does not really increase the randomization but rather overkill...
OK its somehow correct, but its showing again the previus number again that has been suffled, and it has no limit like in your first code was, its not end when all the numbers suffled. I want to stop suffling when all data is suffled, and that number should not suffled again that has been suffled before or showed before or should in different color.
I have no idea what you're talking about. If you want the process to stop once all numbers have been shown once, then that's easy. I assumed that you wanted numbers that had been drawn once to be able to be drawn again, but shown in red. That's what I did. The data array can be filled with an input file of course, but then you're into server-side code. Which technology are you using? PHP, .NET, Java, Node ?
yes my server side technology is PHP,
and I just want that the number which is already drawn will appear in differenct color or should not drawn again.
thanks
Here is an idea...
1)start with an array full of data you want.
---- function part ---
2)if the array is empty, return
3)shuffle the array.
4)random a number for display size (between 8-10)
5)if the current array size is less than the random number, assign the random number equal to the array size
6)iterate a loop up to the random number time.
7)inside the loop, pop/shift the array, display the number, augment the number in a span tag with color, and push it in another array (trash?).
If you want to save the original array, duplicate the array first because this way will destruct your array. Should that be good enough?
may be it works, but don't have any idea how to do all this in php. :(
<?php
if(isset($_FILES['datafile']['tmp_name']))
{
$lines = file($_FILES['datafile']['tmp_name'],FILE_IGNORE_NEW_LINES);
$data = json_encode($lines);
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#answers span{
color: red;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" name="datafile" />
<input type="submit" name="submit" value="Load Form" />
</form>
<br />
<label for="retrieveNum">Number to be drawn:</label>
<input id="retrieveNum" type="number" value="8" onChange="changeAmount(this.value);" />
<br />
<button onClick="displayValue();" id="surprise">SURPRISE!</button>
<button onClick="resetAll();" id="reset">RESET</button>
<div id="answers"></div>
<script>
var displayAmount;
var data = <?php echo $data;?>;
var div = document.getElementById('answers');
var current;
var trash;
//http://jsfromhell.com/array/shuffle
function shuffle(o){
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
function changeAmount(amt)
{
displayAmount = amt;
}
function displayValue()
{
if(trash.length == data.length)
{
alert("All values drawn\nOriginal Data: " + data + "\nUsed Data: " + trash);
document.getElementById("surprise").disabled = true;
return;
}
shuffle(data);
var temp = data.slice(0, displayAmount);
var display = '';
for (index = 0; index < temp.length; ++index) {
if(trash.indexOf(temp[index]) != -1)
{
display = display + "<span>" + temp[index] + "</span><br>";
}else{
display = display + temp[index] + "<br>";
trash.push(temp[index]);
}
}
div.innerHTML = div.innerHTML + display + "<hr>";
current++;
}
function resetAll()
{
trash = [];
current = 0;
div.innerHTML = '';
document.getElementById("surprise").disabled = false;
if(displayAmount == undefined) displayAmount = document.getElementById("retrieveNum").value;
}
resetAll();
</script>
</body>
</html>
Works for this type of data in say, data.txt file, which you can upload...
M-3100
M-7333
M-0123
M-9087
M-2758
M-1267
M-3234
M-3198
M-3188
M-3170
M-3106
THIS IS NOT PRODUCTION CODE! This is a quick demo. Up to you to make it safe, to validate data and to perhaps send form to a different file and then redirect back. I feel like I've done all the work here :( That's not right. My fault. That's my last post here.
well this is the perfect think :), am very thanx to you.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.