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

HTML Code:

<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

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

Code:

<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:

Code:

<!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>

Thread: Random name generator?

Thread Tools

Search Thread

Random name generator?

Bookmarks

Bookmarks

Posting Permissions