PDA

View Full Version : Random name generator?



mevetts
11-14-2005, 12:37 PM
Hi,

New to the forums, so I hope this post is in the right place?

I was hoping someone might know of a script that selects a name at random with the push of a button, or if the page was refreshed.

The reason being is that I'm a teacher and would like to input my class list into the script, then in lessons be able to select names at random! I'm trying to move away from having to draw names out of a hat!

Any help or ideas would be fantastic.

Many thanks,

Mark.

Wedgy
11-14-2005, 02:03 PM
I think you'd have to pre-input your student names into an array of variable text strings,
then use a random number generator call to index one and print it on the press of a button.
I know there is a random number call, I have seen it used to generate random images in some javascript on this site somewhere. Go to the Javascripts image section and see if you can find anything with 'random' in the title, and look at that code.

Twey
11-14-2005, 04:13 PM
<script type="text/javascript">
function selectRandomMember(boxId) {
var box = document.getElementById(boxId),
rand = Math.floor(Math.random() * box.options.length);
box.selectedIndex = rand;
// alert(box.options[rand].text); // Remove the slashes from in front of this line to pop up an alert box with the name
}
</script>
<select id="pupils">
<option>John Smith</option>
<option>Nadia Behdad</option>
<!-- Add other pupils here... -->
</select>
<button onclick="selectRandomMember('pupils');">
Select Random
</button>

mevetts
11-17-2005, 09:51 AM
Thanks Twey, this looks just the job. I'll have a play over the weekend and let you know how it works out.

Cheers,

Mark.

mevetts
11-18-2005, 10:55 PM
It works a treat!

Have a look here (http://members.madasafish.com/~mevetts/school/lowersixtheconomics.htm)

If I was being really picky then I would like to have the list hidden, so it was just the button that when clicked produced the pop-up box. If this can be done then I would love to know how?!

Many thanks for your help, it really has been appreciated.

Cheers,

Mark.

jscheuer1
11-18-2005, 11:00 PM
<select style="display:none;" id="pupils">

mevetts
11-20-2005, 10:43 AM
Thanks jscheuer1, that looks really great now.

Just one more thing, if it's possible! When the pop-up box appears displaying the randomly selected name, is there any way of changing the title that's displayed along the top? It would be nice to have something more exciting than what is currently shown - 'http://members.madasafish.com' !!

Thanks,

Mark.

Twey
11-20-2005, 12:10 PM
Not really, no. To allow this would open browsers up to all kinds of phishing/scamming attacks.

jscheuer1
11-20-2005, 07:41 PM
If it is any consolation, that is not what most people will see. Most people use IE and the title there is 'Microsoft Internet Explorer'. You could make a custom DHTML pop-up but, the code is involved and, unlike an alert box, it will be a part of the page, subject to vagaries of the user's window size and position over which you can have no real control.

jscheuer1
11-20-2005, 10:02 PM
In an effort to prove myself wrong or right, as the case may be, I came up with this, it can be modified (things like the actual text used, background color, color - these items are found in the style and the code itself) to suit, but be careful, some values/code are required for proper functioning and even proper functioning cross browser, so it may not be readily apparent what changing them may do. If you find a value like that, leave it alone, especially widths, padding and margins:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

<title>L6 Economics - Random Name Generator</title>
<meta http-equiv="Content-Type" content="text/html;">
<link href="namegenerator.css" rel="stylesheet" type="text/css">
<style type="text/css">
#head { /* this style is required for script's pop-up's title bar, change at your own risk */
padding:3px 20px;
position:relative;
left:-20px;
text-align:left;
text-indent:-15px;
font-family:verdana,arial,sans-serif;
font-size:70%;
border-bottom:2px groove silver;
color:black;
background-color:lightblue;"
}

</style>
</head>

<body>

<!-- Start outer -->
<div id="outer">

<!-- Start header -->
<div class="header">
<!-- Header table -->
<!-- End header table -->
</div>
<!-- End header -->

<!-- BODY -->
<div class="content">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
<tr>
<td align="center" class="intro">Lower Sixth</td>
<tr>
<td align="center" class="intro">Economics</td>
<tr>
<td>&nbsp;</td>
<tr>
<td>&nbsp;</td>
<tr>
<td id="boxCell" align="center"><script type="text/javascript">

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

var storeit, pop, storeit2, ie=document.body.filters? iecompattest() : 0
function selectRandomMember(boxId, el) {
if(document.getElementById('head')){
storeit=boxId
storeit2=el
if (ie)
el.parentNode.removeChild(pop)
else
document.body.removeChild(pop)
setTimeout("selectRandomMember(storeit, storeit2)",500)
return;
}
var box = document.getElementById(boxId),
rand = Math.floor(Math.random() * box.options.length);
pop = document.createElement('div')
pop.innerHTML='<div id="head" style="width:100%;"><nobr>Lower 6th</nobr></div>'
box.selectedIndex = rand;
var lf=document.createElement('br')
var noB=document.createElement('nobr')
pop.appendChild(lf)
var poptext=document.createTextNode(box.options[rand].text)
var closer=document.createElement('input')
closer.type='button'
closer.value='OK'
closer.style.fontSize='60%'
closer.onclick=ie? function(){pop.parentNode.removeChild(pop)} : function(){document.body.removeChild(pop)}
noB.appendChild(poptext)
pop.appendChild(noB)
pop.appendChild(closer)
closer.style.position='absolute'
closer.style.bottom='10px'
closer.style.right='10px'
pop.style.backgroundColor='silver'
pop.style.visibility='hidden'
pop.style.position='absolute'
pop.style.border='3px outset black'
pop.style.padding='0 20px 40px 20px'
if (ie)
el.parentNode.appendChild(pop)
else
document.body.appendChild(pop)
if (document.documentElement.filters)
document.getElementById('head').style.width=''
var w=pop.offsetWidth
if (document.documentElement.filters){
pop.style.border='3px outset silver'
pop.style.width=w-40+'px'
document.getElementById('head').style.width=w-10+'px'
document.getElementById('head').style.marginRight='-21px'
document.getElementById('head').style.left='-21px'
document.getElementById('head').style.borderBottomColor='#dddddd'
pop.style.paddingRight=0
}
pop.style.left=ie? (ie.clientWidth-pop.offsetWidth)/2+3+'px' : (window.innerWidth-pop.offsetWidth)/2+'px'
if (!ie)
pop.style.top=el.parentNode.offsetTop+'px'
pop.style.textAlign='center'
pop.style.visibility='visible'

} </script>
<select style="display:none;" id="pupils">
<option>John Burton</option>
<option>Ashley Hall</option>
<option>Edward Kay</option>
<option>David Kitt</option>
<option>Tom Large</option>
<option>Anthony Lopez</option>
<option>Charlotte Partridge</option>
<option>Emily Phelps</option>
<option>Tom Roskilly</option>
<option>Jack Trueman</option>
<!-- Add other pupils here... -->
</select>
&nbsp;<input type="button" onclick="selectRandomMember('pupils', this);"
value="Select Random">
</td>
</table>
</div>
<!-- End BODY -->

<!-- Start footer -->
<div class="copyright"><span><br>
</span></div>
<!-- End footer -->

</div>
<!-- End Outer -->
</html>

Twey
11-21-2005, 03:58 PM
There y'go. And to think I was about to resort to Java :)

mevetts
11-21-2005, 09:20 PM
Thanks for your efforts, but I can't be fagged with changing it all again!

Your help has been fantastic, I really am grateful.

Cheers,

Mark.

jscheuer1
11-22-2005, 06:01 AM
Thanks for your efforts, but I can't be fagged with changing it all again!

Why the ingrate! :eek:

Actually, that is a drop in replacement for your demo page, no real changes required.

:D

menneally
12-15-2005, 12:17 PM
how do you get a pop up when you click on the "select random" button?

menneally
12-15-2005, 12:19 PM
dont worry no answer needed i found out how

skripter
06-24-2007, 07:50 AM
<script type="text/javascript">
function selectRandomMember(boxId) {
var box = document.getElementById(boxId),
rand = Math.floor(Math.random() * box.options.length);
box.selectedIndex = rand;
// alert(box.options[rand].text); // Remove the slashes from in front of this line to pop up an alert box with the name
}
</script>
<select id="pupils">
<option>John Smith</option>
<option>Nadia Behdad</option>
<!-- Add other pupils here... -->
</select>
<button onclick="selectRandomMember('pupils');">
Select Random
</button>


Your script works great.

My question is, why is it when I change text for value, it will still alert but with no name displayed?

alert(box.options[rand].value); shouldn't it still have displayed the value of the selected box, which would still be the name listed?

Thanks

Twey
06-24-2007, 10:52 AM
No, the options in that code have no values attached. If you wanted to use value, you'd have to manually add them:
<option value="John Smith">John Smith</option>
<option value="Nadia Behdad">Nadia Behdad</option>

skripter
06-24-2007, 07:20 PM
Thank you sir for the reply. As usual, it has been helpful.