multiple random images with text but no duplications

[HippieChickie]

good afternoon.

i have 3 sets of 40 identical random images with matching texts. when the button is pressed an image with the correct text appears. this is working perfectly. however, i cant seem to apply any sort of code that will prevent duplicates without messing up the current code. i need each of the 3 images to not match any of the others shown. any help would be appreciated.

working code:

<script type="text/javascript"> 
function randomA() { 
     var cardImg = document.getElementById("cardA"); 
     var text = document.getElementById("nameofA"); 
     var list = [
    "http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard1.gif",
    "http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard2.gif",
    "http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard3.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard4.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard5.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard6.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard7.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard8.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard9.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard10.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard11.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard12.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard13.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard14.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard15.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard16.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard17.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard18.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard19.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard20.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard21.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard22.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard23.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard24.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard25.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard26.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard27.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard28.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard29.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard30.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard31.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard32.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard33.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard34.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard35.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard36.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard37.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard38.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard39.gif",
"http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard40.gif"];
     var list2 = ["Card 1", "Card 2", "Card 3", "Card 4", "Card 5", "Card 6", "Card 7", "Card 8", "Card 9", "Card 10",
      "Card 11", "Card 12", "Card 13", "Card 14", "Card 15", "Card 16", "Card 17", "Card 18", "Card 19", "Card 20",
       "Card 21", "Card 22", "Card 23", "Card 24", "Card 25", "Card 26", "Card 27", "Card 28", "Card 29", "Card 30",
        "Card 31", "Card 32", "Card 33", "Card 34", "Card 35", "Card 36", "Card 37", "Card 38", "Card 39", "Card 40"]; 
     var number = Math.floor(Math.random() * 40); 

     cardImg.src = list[number]; 
     text.value = list2[number]; 
 } 

 </script>

<script type="text/javascript"> 
function randomB() { 
     var cardImg = document.getElementById("cardB"); 
     var text = document.getElementById("nameofB"); 
     var list = [
    "http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard1.gif",

etc... i dont want to waste space by posting all the same cards here.  its an exact repeat but changing the function name.   of course there is another script with cardC

im sure there is another way to do the above with less space but since im not that experienced in java its easier for me.

thanks in advance for any help.

[jscheuer1]

It's unclear if you want there to be any card placed at any position at any time as long as it's not a duplicate of a card currently showing, even in it's new slot (this is what I worked out), or if you want each card to get 'used up' so that there will never be any card seen for a second time unless the page is refreshed - this would result in running out of cards if the buttons that show new cards are hit enough times.

Anyways, think about that while you try out this example (it's a stand alone page - copy and paste it to its own page and play with it to see how it works):

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<table>
<tr>
<td><img id="cardA" alt="original image" title=""></td><td><img id="cardB" alt="original image" title=""></td><td><img id="cardC" alt="original image" title=""></td>
</tr>
<tr>
<td id="nameofA"></td><td id="nameofB"></td><td id="nameofC"></td>
</tr>
<tr id="buttons">
<td><input type="button" value="A"></td><td><input type="button" value="B"></td><td><input type="button" value="C"></td>
</tr>
</table>

</head>
<body>
<script type="text/javascript">
var nums = [], num = 0, rnums = [], lnums = {A: 0, B: 0, C: 0}, rnum = -1, anum;
while (++num < 41){
	nums.push({pic: "http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard" + num + ".gif", txt: "Card " + num});
	rnums.push(num - 1);
}
rnums.sort(function(){return 0.5 - Math.random();});
while (++rnum < 3){
	lnums[['A','B','C'][rnum]] = rnums[rnum];
}
for (var p in lnums){
	document.getElementById('card' + p).src = nums[lnums[p]].pic;
	document.getElementById('nameof' + p).innerHTML = nums[lnums[p]].txt;
}
function poplnums(which){
	while(lnums.A == rnums[0] || lnums.B == rnums[0] || lnums.C == rnums[0]){
		rnums.sort(function(){return 0.5 - Math.random();});
	}
	lnums[which] = rnums[0];
	document.getElementById('card' + which).src = nums[rnums[0]].pic;
	document.getElementById('nameof' + which).innerHTML = nums[rnums[0]].txt;
}
var buts = document.getElementById('buttons').getElementsByTagName('input'), bnum = -1;
while(++bnum < 3){
	buts[bnum].onclick = function(){poplnums(this.value);}
}
</script>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/s...ts/bingo-h.htm

[HippieChickie]

thanks for your quick reply.

yes, the cards can repeat just as long as whats showing are 3 diff images. this is what im looking for but you have gone above my understanding lol which is probally why i could never get it to work.

i left off a part of what i was doing because i thought i would be able to call the function with onClick as i have it set up. i tried to adjust the code to add the 4th button which is to randomize all the pics at once. i called it "D" to match all the others but as i said your code is advanced for me.

if i could pls impose on you to help me have another button. using my old code it worked as below:
<input type="button" value="Randomly Choose All 3 Cards!" onClick="randomA(); randomB(); randomC()" />

thanks agian for your time

[jscheuer1]

I had a a 'solution' posted. I just got rid of it because it's not quite right - when shuffling all a card can sometimes shift position from a to c, etc. unless that's OK.

[jscheuer1]

Alright, this seems to do it:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<table>
<tr>
<td><img id="cardA" alt="original image" title=""></td><td><img id="cardB" alt="original image" title=""></td><td><img id="cardC" alt="original image" title=""></td>
</tr>
<tr>
<td id="nameofA"></td><td id="nameofB"></td><td id="nameofC"></td>
</tr>
<tr id="buttons">
<td><label for="butA">Shuffle Card </label><input id="butA" type="button" value="A"></td><td><label for="butB">Shuffle Card </label><input id="butB" type="button" value="B"></td><td><label for="butC">Shuffle Card </label><input id="butC" type="button" value="C"></td>
</tr>
<tr>
<td><input onclick="randomall()" type="button" value="Shuffle All"></td><td>&nbsp;<td></td>&nbsp;</td>
</tr>
</table>
<body>
<script type="text/javascript">
var nums = [], num = 0, rnums = [], lnums = {A: 0, B: 0, C: 0}, rnum = -1, anum;
while (++num < 41){
	nums.push({pic: "http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard" + num + ".gif", txt: "Card " + num});
	rnums.push(num - 1);
}
rnums.sort(function(){return 0.5 - Math.random();});
while (++rnum < 3){
	lnums[['A','B','C'][rnum]] = rnums[rnum];
}
for (var p in lnums){
	document.getElementById('card' + p).src = nums[lnums[p]].pic;
	document.getElementById('nameof' + p).innerHTML = nums[lnums[p]].txt;
}
function poplnums(which){
	while(lnums.A == rnums[0] || lnums.B == rnums[0] || lnums.C == rnums[0]){
		rnums.sort(function(){return 0.5 - Math.random();});
	}
	lnums[which] = rnums[0];
	document.getElementById('card' + which).src = nums[rnums[0]].pic;
	document.getElementById('nameof' + which).innerHTML = nums[rnums[0]].txt;
}
var buts = document.getElementById('buttons').getElementsByTagName('input'), bnum = -1;
while(++bnum < 3){
	buts[bnum].onclick = function(){poplnums(this.value);}
}
function randomall(){
	var trnums = [], tl = rnums.length;
	while(--tl > -1){
		if(rnums[tl] != lnums.A && rnums[tl] != lnums.B && rnums[tl] != lnums.C)
		trnums.push(rnums[tl])
	}
	trnums.sort(function(){return 0.5 - Math.random();});
	rnum = -1;
	while (++rnum < 3){
		lnums[['A','B','C'][rnum]] = trnums[rnum];
	}
	for (var p in lnums){
		document.getElementById('card' + p).src = nums[lnums[p]].pic;
		document.getElementById('nameof' + p).innerHTML = nums[lnums[p]].txt;
	}
}
</script>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/s.../bingo-2-h.htm

If you have questions, just ask. I should probably tell you that here:

var buts = document.getElementById('buttons').getElementsByTagName('input'), bnum = -1;
while(++bnum < 3){
	buts[bnum].onclick = function(){poplnums(this.value);}
}

I'm assigning the click functions to the A, B, and C buttons:

<tr id="buttons">
<td><input type="button" value="A"></td><td><input type="button" value="B"></td><td><input type="button" value="C"></td>
</tr>

But I could have hard coded, for example (button 'A'):

<input type="button" value="A" onclick="poplnums('A');">

[HippieChickie]

hello again

thanks for the help again. i was able to get it to work on my page with few problems. thanks for your explaination, it helps to break down the code to know what goes where.

i am still having a couple of issues thou.

this is a form so i need the card numbers to be text boxes. i like how you have it done & i tried to apply it with my current text boxes but i cant get it to work. here is the page where it does work before i applied all the changes with your code. http://www.justtheway.com/wb/events/...ndomcards.html i have it hidden as you do but when it shows it can be submitted to the form.

also, i cant change the buttons named A B C but i was able to change the name of the random all button. again, i tried to go back in the script & make the changes but because of your expertly written code i just mess it up. here is the addy of the page with your code applied http://www.justtheway.com/wb/events/...y/random2.html

lastly im getting an error in my editor about src on line 33 char 2 but there is no error on the site itself & all images show.

thanks again.

[jscheuer1]

The error was because I was using script to set the initial images, but you put my code before the images were parsed. That didn't have any effect upon what happened later though, so it didn't really matter all that much. I see you don't seem to want the script to set the initial images, so I've dropped that for now.

Seeing your work helped. Try this out:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var nums = [], num = 0, rnums = [], lnums = {A: 0, B: 0, C: 0}, rnum = -1;
while (++num < 41){ // sets up an array of the images and texts with each entry as an object
	nums.push({pic: "http://www.justtheway.com/wb/events/bingo/holiday/images/cards/hhcard" + num + ".gif", txt: "Card " + num});
	rnums.push(num - 1); // an array of the raw numbers is also recorded to be shuffled
}
function poplnums(which){ // shuffles an individual card - expects 'A', 'B', or 'C' - as to which card to randomly pick for
	while(lnums.A == rnums[0] || lnums.B == rnums[0] || lnums.C == rnums[0]){ // as long as there's a dupe, we keep shuffling
		rnums.sort(function(){return 0.5 - Math.random();});
	}
	lnums[which] = rnums[0]; // once a unique number is selected, it's saved for later comparison
	document.getElementById('card' + which).src = nums[rnums[0]].pic; // set the pic
	document.getElementById('nameof' + which).value = nums[rnums[0]].txt; // set the card text for this pic
}
function randomall(){ // shuffles all
	var trnums = [], tl = rnums.length;
	while(--tl > -1){ //collect all numbers not currently in use
		if(rnums[tl] != lnums.A && rnums[tl] != lnums.B && rnums[tl] != lnums.C)
		trnums.push(rnums[tl])
	}
	trnums.sort(function(){return 0.5 - Math.random();}); // shuffle the collected numbers
	rnum = -1;
	while (++rnum < 3){ // pick the 1st three of the shuffled numbers
		var let = ['A','B','C'][rnum];
		lnums[let] = trnums[rnum]; // save the new current number to its letter for future reference
		document.getElementById('card' + let).src = nums[lnums[let]].pic; // set the new current number for each letter card image (pic)
		document.getElementById('nameof' + let).value = nums[lnums[let]].txt; // and text (txt)
	}
}
</script>
</head>
<table>
<tr>
<td><img id="cardA" src="http://www.justtheway.com/wb/events/bingo/holiday/images/cards/templateblank.gif" alt="Bingo Card" title=""></td><td><img id="cardB" src="http://www.justtheway.com/wb/events/bingo/holiday/images/cards/templateblank.gif" alt="Bingo Card" title=""></td><td><img id="cardC" src="http://www.justtheway.com/wb/events/bingo/holiday/images/cards/templateblank.gif" alt="Bingo Card" title=""></td>
</tr>
<tr>
<td><input id="nameofA" type="text" readonly name="randomcard"></td><td><input id="nameofB" type="text" readonly name="randomcard"></td><td><input id="nameofC" type="text" readonly name="randomcard"></td>
</tr>
<tr>
<td><input type="button" value="Randomly Choose CARD 1" onclick="poplnums('A');"></td><td><input type="button" value="Randomly Choose CARD 2" onclick="poplnums('B');"></td><td><input type="button" value="Randomly Choose CARD 3" onclick="poplnums('C');"></td>
</tr>
<tr>
<td><input onclick="randomall()" type="button" value="Shuffle All"></td><td>&nbsp;<td></td>&nbsp;</td>
</tr>
</table>
<body>
</body>
</html>

I adapted it to use inputs for the texts and to otherwise follow more closely what you're doing, and annotated it - hopefully all that will help you understand how it can work for you. If there are still questions, let me know.

Demo:

http://home.comcast.net/~jscheuer1/s.../bingo-4-h.htm

[HippieChickie]

hello again.

busy weekend - just now getting to work on it.

the code is wonderful. its exactly what i needed. it also seems to work quicker with no delay which is a big plus. i cant thank you enough.

im still having one problem which i didnt realize till now. The clear button only clears the text fields. i need the images to revert back to the template shown when page was loaded. i have tried using onclick with the clear button directly with swap but it wouldnt work. so i wrote a function & its doing something as the current image will go away but a redx will show so i know its the path to the image. i tried putting it in quotes out of quotes... using www or just the directory. no matter what i try i cant get it.

http://www.justtheway.com/wb/events/...ndomcards.html this is the direct link to the page. i dont want to post the code as im going back in there to try to figure it out on my own & it may change. best way to learn

hope your having a great day.

[HippieChickie]

i got it working. im such an idiot. i had named it wrong so of course it woudnt show up.

now i hope you really have a GREAT day. lol

thanks again for your help.