...

View Full Version : Wheel of Fortune - a 'not so random' random



tpeck
09-02-2006, 07:26 AM
I have a script which almost does what I want - but not quite.

The idea is a Wheel of Fortune graphic that spins around and comes to a stop after a little while. It's neat because a wheelspin sound happens at the same time. I've cobbled most of this myself from various places.

What I need is some way to ensure that the thing spins at least for, say 3 seconds, and for, say, no longer than 10 seconds. At the moment it might stop after 100th second and often goes on far too long.

Needless to say, Firefox has a problem stopping the thing - anyone know how to stop a sound in FF? Ridiculous. But it's great in IE. OK. OK. I use FF all the time, but why on earth won't it obey the simplest of sound.stop() commands?

Anyway, here it is:

function InsertGameSound()
{
document.write('<embed src="media/spin.wav" width="0" height="0" name="spin" autostart="false" enablejavascript="true">');
document.write('</embed>');
document.write('<embed src="media/fadespin.wav" width="0" height="0" name="fadespin" autostart="false" enablejavascript="true">');
document.write('</embed>')
}
//***********************************************************************


var count=0
function dothis(){
setTimeout("document.wheel.wheel2.selectedIndex =1000",100)
setTimeout("document.wheel.wheel2.selectedIndex =count",200)
setTimeout("document.wheel.wheel2.selectedIndex =1000",300)
setTimeout("document.wheel.wheel2.selectedIndex =count",400)
setTimeout("document.wheel.wheel2.selectedIndex =1000",500)
setTimeout("document.wheel.wheel2.selectedIndex =count",600)
}

function animate(){
var countfinal=Math.round(Math.random()*(document.wheel.wheel2.length-1))
document.wheel.wheel2.selectedIndex=count
if (count==countfinal){
dothis()
document.images['spin1'].src='img/spinthewheeloff.gif';
self.document.spin.stop()
playSoundfade()
return
}
if (count<document.wheel.wheel2.length)
count++
else
count=0
setTimeout("animate()",100)
}

function playSound() {
var sound = eval('self.document.' + 'spin')
// make an effort to stop and rewind any playback
// already in progress so that the sound starts over.
// Otherwise this call has no effect when the sound
// is already in progress. You can remove these lines
// if you don't like this behavior.
try {
sound.Stop();
sound.Rewind();
} catch (e) {
// A player that doesn't support
// Stop and Rewind
}

try {
// For RealPlayer-enabled browsers.
// Some versions of RealPlayer do not
// offer a Play() function and will
// fail to play sound if we try to
// call Play().
sound.DoPlay();
} catch (e) {
// If DoPlay doesn't work, call Play.
// This works for all other audio
// plug-ins.
sound.Play();
}
}

function playSoundfade() {
var sound = eval("self.document." + 'fadespin');
try {
sound.Stop();
sound.Rewind();
} catch (e) {
}

try {
sound.DoPlay();
} catch (e) {
sound.Play();
}
}

Is there any way it can be improved upon to spin as I have suggested?

Thanks

Mr J
09-02-2006, 08:29 AM
Take a look at the source code of this page it may help you out

www.huntingground.freeserve.co.uk/style/s_wheel/s_wheel.htm

tpeck
09-02-2006, 02:31 PM
I couldn't find the code on that page to examine, but I have made it work - sort of - by trial and error. But something about it still has me stumped:

I call the two functions (getnum and animate) like this on the page:

<input type="button" class="spin1" value="Spin the Wheel" NAME="button1" onclick="document.images['spin1'].src='img/spinthewheelon.gif';getnum();animate();playSound();">

It works well. There are forty wheel items and "getnum" chooses a number between 41 and 80 thus ensuring that the wheel spins at least once full circle before stopping; "animate" spins the wheel.

But I cannot understand why the 'flag' in the code below is ALWAYS 1! The idea for the flag is tell that the wheel has been spun and stopped once before i.e. count==countfinal, which indicates it's time to stop the spinning wheel. That way, the next time the button is pressed on the page, the variable count can be set to 0 again, which otherwise would only happen if the page was reloaded.

****************************

var count = 0;
var flag = 0;

function getnum(){
limit = 80;
today = new Date();
countfinal = today.getTime();
countfinal = Math.round(Math.abs(Math.sin(countfinal) * 1000000)) % limit;
if (countfinal<40) {
countfinal=countfinal+40;} // I want the number of items to be between 41 and 80.
}

function animate(){
if (flag=1);{
alert(flag);
flag=0;
count=0;
}
document.wheel.wheel2.selectedIndex=count;
if (count>40){
document.wheel.wheel2.selectedIndex=count-40;
}
if (count==countfinal){ //i.e. stop the wheel - the count is 40 something at least...
flag=1;
document.images['spin1'].src='img/spinthewheeloff.gif';
self.document.spin.stop()
playSoundfade()
return
}
if (count<81){
count++;
setTimeout("animate()",100);
}
}

********************************

That alert(flag) is always 1, even first time around the animate routine. It's driving me crazy!

How does "flag" always get to be 1??

Please help!

Mr J
09-02-2006, 06:24 PM
Have a play with this example see if it helps



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

running=0

function spinWheel(){
if(running==1){
return
}
running=1
count=1
isStopped=0
stopTimeSet=0
animate()
}


timer=null
function animate(){

if(isStopped==0){
timer=setTimeout("animate()",100)
}
else{
running=0
}

document.getElementById("display").innerHTML=count

if(count==40&&stopTimeSet==0){
stopTime = (3+Math.floor(Math.random()*7))*1000
setTimeout("isStopped=1",stopTime)
stopTimeSet=1

document.getElementById("stoptime").innerHTML="Stopping in "+stopTime/1000+" seconds"
}

count=(count>40?1:count+1)

}

</script>
</HEAD>
<BODY>
<input type="button" class="spin1" value="Spin the Wheel" NAME="button1" onclick="spinWheel()">

<div id="display" style="font-size:40px"> </div>
<div id="stoptime" style="font-size:40px"> </div>

</BODY>
</HTML>

tpeck
09-03-2006, 06:27 AM
Thanks very much...

I'm sure I've done your code a disservice, but it's almost there.

Here is a demo:

http://aapress.com.au/demo/wheelspin/spin.html

The problem is that when I adapt it for my purposes, I can't get it to work the way I want. Here is my adaption of your code:

(What I am trying to do is have the wheel spin at least once through all forty words that display and then come to rest on one of the forty words. Then, if the button is pressed again without reloading the page, it still happens without any problems!)

*********************************

running=0

function spinWheel(){
limit=40
today = new Date();
countfinal = today.getTime();
countfinal = Math.round(Math.abs(Math.sin(countfinal) * 1000000)) % limit; // random no. between 1 and 40
if(running==1){
return
}
running=1
count=1
isStopped=0
stopTimeSet=0
animate()
}

timer=null
function animate(){

if(isStopped==0){
timer=setTimeout("animate()",100)
}
else{
running=0
}

if (count>40)
document.wheel.wheel2.selectedIndex=countfinal-40;
else
document.wheel.wheel2.selectedIndex=count;

if(count==(40+countfinal)&&stopTimeSet==0){ // bit suspect here...
stopTimeSet=1
document.images['spin1'].src='spinthewheeloff.gif';
self.document.spin.stop()
playSoundfade() // these last three lines stop the wheel and play a sound.
}

count=(count>80?1:count+1) // something wrong here...
}

*********************************

Philip M
09-03-2006, 07:42 AM
if (flag=1);{

flag=1 assigns 1 to the variable flag

Comparison requires ==

if (flag==1);{

Mr J
09-03-2006, 08:30 AM
In the following example on the first press the wheel spins through all the words in the select box then a random timer is set to stop the spin.

On subsequent presses the wheel spins through all words from where it last stopped then sets a random stop time.

I have left in my testing lines of code which you can remove at your leissure



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

maxSpinTime=6
minSpinTime=3

running=0
count=0
firstRun=1

function spinWheel(){
document.images['spin1'].src='spinthewheelon.gif';
mySelect=document.forms["wheel"]["wheel2"]

maxNum=mySelect.length

if(firstRun==1){
lastNum=maxNum-1
firstRun=0
}

if(running==1){
return
}
running=1

isStopped=0
stopTimeSet=0
animate()

document.getElementById("stoptime").innerHTML=" " // for showing stop time delete when done testing
}

function animate(){

if(isStopped==0){
timer=setTimeout("animate()",50)
}
else{
running=0
lastNum=count
}

document.getElementById("display").innerHTML=count // for showing number delete when done testing

mySelect.selectedIndex=count

if(count==lastNum&&stopTimeSet==0){
stopTime =(minSpinTime+Math.floor(Math.random()*(maxSpinTime-minSpinTime)))*1000
setTimeout("isDone()",stopTime)
stopTimeSet=1

document.getElementById("stoptime").innerHTML="Stopping in "+stopTime/1000+" seconds" // for showing stop time delete when done testing
}

count=(count==maxNum-1?0:count+1)

}

function isDone(){
isStopped=1
document.images['spin1'].src='spinthewheeloff.gif'
}

</script>
</HEAD>
<BODY>
<center>

<IMG height=266 src="spinthewheeloff.gif" width=266 border=0 name=spin1><BR>

<FORM name=wheel>
<SELECT class=TextArea size=1 name=wheel2>
<OPTION selected>WITH THE EXCEPTION OF</OPTION>
<OPTION>PREDICT</OPTION>
<OPTION>AN INNOVATION</OPTION>
<OPTION>MINIMAL</OPTION>
<OPTION>COMPETENT AT</OPTION>
<OPTION>DISTINGUISH</OPTION>
<OPTION>EVENTUALLY</OPTION>
<OPTION>INTERCHANGEABLE</OPTION>
<OPTION>EXCEED</OPTION>
<OPTION>RESERVE</OPTION>
<OPTION>THE ABSENCE</OPTION>
<OPTION>PLAUSIBLE</OPTION>
<OPTION>ATTACH TO</OPTION>
<OPTION>SIMULTANEOUSLY</OPTION>
<OPTION>STIMULATE</OPTION>
<OPTION>CONSIST OF</OPTION>
<OPTION>WORTHWHILE</OPTION>
<OPTION>CONSISTENT</OPTION>
<OPTION>PERISH</OPTION>
<OPTION>INNATE</OPTION>
<OPTION>CONFIRM</OPTION>
<OPTION>IMMENSELY</OPTION>
<OPTION>A REALISATION</OPTION>
<OPTION>FAMILIAR</OPTION>
<OPTION>REJECT</OPTION>
<OPTION>DETECT</OPTION>
<OPTION>OCCUR</OPTION>
<OPTION>TREMENDOUS</OPTION>
<OPTION>AS OPPOSED TO</OPTION>
<OPTION>NEVERTHELESS</OPTION>
<OPTION>UNDOUBTEDLY</OPTION>
<OPTION>OBSERVE</OPTION>
<OPTION>INVOLVE</OPTION>
<OPTION>PERSIST</OPTION>
<OPTION>ADOPT</OPTION>
<OPTION>PERMANENT</OPTION>
<OPTION>THE OBJECTIVE</OPTION>
<OPTION>ELIMINATE</OPTION>
<OPTION>RETURN</OPTION>
<OPTION>OVERLY</OPTION>
</SELECT>

<INPUT class=spin1 onclick="spinWheel()" type=button value="Spin the Wheel" name=button1>
</FORM>

<!-- // the following 2 div are for showing stop time and number delete when done testing -->
<div id="display" style="font-size:40px"> </div>
<div id="stoptime" style="font-size:40px"> </div>

</center>
</BODY>
</HTML>

Kor
09-03-2006, 09:28 AM
and tpeck, another problem is that you keep using

Math.round(Math.random()*array.length-1)
while Mr J keeps showing you
Math.floor(Math.random()*array.length)

Math.round() will not give you a full random execution, as it will round sometimes to ceil, sometimes to floor. so that 0 and array.length-1 values have less chances to be found

tpeck
09-03-2006, 01:12 PM
Well, that's handy to know - thanks Kor.

I have updated the page with Mr J's fixes - and it's a lot better; thanks so much - and I feel very happy that I have come this far, only I must point out that it repeats the spins in a fairly regular pattern.

http://aapress.com.au/demo/wheelspin/spin.html

I think it has something to do with the limited number of random "seconds" options being used.

Anyway, it's far and away better than what I had previously - and there is plenty for me to play around with.

Thanks once again.

tpeck
09-03-2006, 01:25 PM
I've noticed something odd with my (new) demo page.

In Firefox, I get a larger range of wheelspin stopwords, but it still does seem to repeat after a while.

But in IE, I get a very small range of repeating stopwords.

So this code is more FF friendly.

Mr J
09-03-2006, 04:34 PM
I have spotted a little quirk in my code

put firstRun=1 with the global variables and swap this line

lastNum=maxNum-1

for these lines

if(firstRun==1){
lastNum=maxNum-1
firstRun=0
}

You are also showing errors in Firefox relating to the sound functions

Mr J
09-03-2006, 06:03 PM
Had a play around with the sound aspect of your code in Firefox and IE
Here's the results


<HTML>
<HEAD>
<TITLE>Revision Exercises</TITLE>
<SCRIPT type=text/javascript src="wheelspin2.js"></SCRIPT>
<SCRIPT type=text/javascript src="backexitforward.js"></SCRIPT>

<LINK href="style[4](revexs).css" type=text/css rel=stylesheet>
<SCRIPT>
<!--
myImg = new Array("dollboy.gif","dollgirl.gif")
imgNum=0;
imgCt=myImg.length;
function swapImg(){
if(document.images){
if(document.swap.complete){
imgNum++;
if(imgNum==imgCt){
imgNum=0;
}
}
}
document.swap.src=myImg[imgNum];
}
//-->
</SCRIPT>
<embed src="spin.wav" hidden="true" autostart="false" name="mysound1" id="mysound1">
<embed src="fadespin.wav" hidden="true" autostart="false" name="mysound2" id="mysound2">
</HEAD>
<BODY bgColor=#fffff0>

<DIV align=center>
<TABLE id=table1 style="BORDER-COLLAPSE: collapse" cellPadding=10 width="100%" border=0>
<TBODY>
<TR>
<TD><B>Spin The Wheel</B><BR><BR>
<DIV align=center>

<TABLE id=table2938 style="BORDER-COLLAPSE: collapse" cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=top align=right width=175><I><FONT color=#666666>Now spin the wheel...</FONT></I>

<TABLE id=table2939 style="BORDER-COLLAPSE: collapse" width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=bottom align=right>
<I><FONT color=#666666>click image<BR>to change </FONT></I><IMG height=12 src="gsg_arrow.gif" width=6 border=0></TD>
<TD>
<A onfocus=javascript:this.blur(); href="javascript:swapImg();"><IMG height=217 src="dollboy.gif" width=70 border=0 name=swap></A></TD>
</TR></TBODY></TABLE>

<P>&nbsp;</P></TD>
<TD><IMG height=266 src="spinthewheeloff.gif" width=266 border=0 name=spin1><BR></TD>
<TD width=175></TD></TR></TBODY></TABLE>

</DIV>
<FORM name=wheel>
<P align=center>
<SELECT class=TextArea size=1 name=wheel2>
<OPTION selected>WITH THE EXCEPTION OF</OPTION>
<OPTION>PREDICT</OPTION>
<OPTION>AN INNOVATION</OPTION>
<OPTION>MINIMAL</OPTION>
<OPTION>COMPETENT AT</OPTION>
<OPTION>DISTINGUISH</OPTION>
<OPTION>EVENTUALLY</OPTION>
<OPTION>INTERCHANGEABLE</OPTION>
<OPTION>EXCEED</OPTION>
<OPTION>RESERVE</OPTION>
<OPTION>THE ABSENCE</OPTION>
<OPTION>PLAUSIBLE</OPTION>
<OPTION>ATTACH TO</OPTION>
<OPTION>SIMULTANEOUSLY</OPTION>
<OPTION>STIMULATE</OPTION>
<OPTION>CONSIST OF</OPTION>
<OPTION>WORTHWHILE</OPTION>
<OPTION>CONSISTENT</OPTION>
<OPTION>PERISH</OPTION>
<OPTION>INNATE</OPTION>
<OPTION>CONFIRM</OPTION>
<OPTION>IMMENSELY</OPTION>
<OPTION>A REALISATION</OPTION>
<OPTION>FAMILIAR</OPTION>
<OPTION>REJECT</OPTION>
<OPTION>DETECT</OPTION>
<OPTION>OCCUR</OPTION>
<OPTION>TREMENDOUS</OPTION>
<OPTION>AS OPPOSED TO</OPTION>
<OPTION>NEVERTHELESS</OPTION>
<OPTION>UNDOUBTEDLY</OPTION>
<OPTION>OBSERVE</OPTION>
<OPTION>INVOLVE</OPTION>
<OPTION>PERSIST</OPTION>
<OPTION>ADOPT</OPTION>
<OPTION>PERMANENT</OPTION>
<OPTION>THE OBJECTIVE</OPTION>
<OPTION>ELIMINATE</OPTION>
<OPTION>RETURN</OPTION>
<OPTION>OVERLY</OPTION>
</SELECT>
</P>
<DIV align=center>

<TABLE id=table2936 style="BORDER-COLLAPSE: collapse" cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<P align=center><IMG height=24 src="handr.gif" width=64 border=0></P></TD>
<TD>
<P align=center><INPUT class=spin1 onclick=spinWheel() type=button value="Spin the Wheel" name=button1></P></TD>
</TR></TBODY></TABLE>
</FORM>
</DIV>

</TD>
</TR></TBODY></TABLE>
</DIV>

</BODY>
</HTML>



wheelspin2.js




maxSpinTime=7
minSpinTime=3
running=0
count=0

firstRun=1

hm=document.getElementById&&!document.all

function spinWheel(){
document.images['spin1'].src='spinthewheelon.gif';
mySelect=document.forms["wheel"]["wheel2"]

maxNum=mySelect.length

if(firstRun==1){
lastNum=maxNum-1
firstRun=0
}

if(running==1){
return
}
running=1

isStopped=0
stopTimeSet=0

startSpinSound()
animate()
}

function animate(){

if(isStopped==0){
timer=setTimeout("animate()",50)
}
else{
running=0
lastNum=count
}

mySelect.selectedIndex=count

if(count==lastNum&&stopTimeSet==0){
stopTime =(minSpinTime+Math.floor(Math.random()*(maxSpinTime-minSpinTime)))*1000
setTimeout("isDone()",stopTime)

setTimeout("stopSpinSound()",stopTime-1000)

stopTimeSet=1
}

count=(count==maxNum-1?0:count+1)

}

function isDone(){
isStopped=1
document.images['spin1'].src='spinthewheeloff.gif';
}

function startSpinSound(){
document.mysound1.Play()
}

function stopSpinSound(){
document.mysound1.Stop()
if(hm){
document.mysound1.Rewind()
}
document.mysound2.Play()
}

tpeck
09-04-2006, 12:27 AM
Once again - thanks so much. That seems to have solved the pattern repeating in both FF and IE which is the main thing.

http://aapress.com.au/demo/wheelspin/spin.html (http://http://aapress.com.au/demo/wheelspin/spin.html)

I'll keep the demo up there for others.

The sound: I think I should make the embeds document write( because of that lost court case of MSoft).

I don't get any sound with HIDDEN="TRUE". But the sound works if I alter this to WIDTH="0" HEIGHT="0". It's there but dots only.

The sound now works perfectly in FF. In fact, in FF it's finished.

In IE, the sound spin.wav - which doesn't get to finish completely on the first button press - gets to finish on the second press, which kind of spoils the effect. If I can just get IE to start the sound afresh, it's all done.

I really appreciate your help.

Mr J
09-04-2006, 01:52 PM
When I try it in my IE6 the spin.wave sound always starts from the beginning.

The random spin time that I set takes into account the time it takes to play the wave files, 6 seconds for the spin.wave and 1 second for fadespin.wave

tpeck
09-04-2006, 03:28 PM
I'm a bit confused.

The sound works as I expect in both FF AND IE7 - I don't have IE6 at the moment - if I embed the files in the document itself and not the js file, and if I use exactly the following:

function startSpinSound(){
document.mysound1.Play()
}

function stopSpinSound(){
document.mysound1.Stop()
document.mysound1.Rewind()
document.mysound2.Play()
}

(Actually it still works fine if I omit the "document" word from the above.)

But I thought we all have to now embed from external files to avoid the "PRESS SPACEBAR..." alert???
The moment I embed from the js file, it acts differently.

How can I avoid that "PRESS SPACEBAR to enter or activate this control" alert and still expect the sound to function correctly?

Mr J
09-04-2006, 05:29 PM
I'd forgot about that problem with IE.

I wrote them from the js file and they played ok

tpeck
09-05-2006, 12:10 AM
I think I can wrap it up now:


http://aapress.com.au/demo/wheelspin/spin.html (http://aapress.com.au/demo/wheelspin/spin.html)

The action and sound now work fine in the demo in IE6, IE7 and FF and the "PRESS SPACEBAR..." alert is gone when I embed externally.

When I wrote "the moment I embed from the js file, it acts differently" I was mistaken: it must have been IE not using an update and caching instead.

I did have to remove the "hm" references in your script though Mr.J., so I suppose FF(1.5) doesn't choke (any longer??) on the Rewind().

Sound functions in javascript are a right royal pain to get right for browsers.

If I could do the whole thing in Flashsound, I'd do it in a flash (sorry). But I can't get those "mySoundObj1.TGotoAndPlay('/spin','start'); return true;" commands to work from a js file.

Never mind, I'm happy with the result now.

Thanks again.

nantais44
01-15-2007, 03:11 PM
Hello all,

i found your script and would modify it to select random html pages without the wheel and dont succeed, i mean with internet explorer the result is always 16.htm , with firefox there is a random, i hope someone could help me
thanks a lot
i made this

<head>
<script language="JavaScript" type="text/javascript">
function InsertSound()
{
document.write('<embed src="spin.wav" width="0" height="0" autostart="false" name="mysound1" id="mysound1">');
document.write('</embed>');
document.write('<embed src="fadespin.wav" width="0" height="0" autostart="false" name="mysound2" id="mysound2">');
document.write('</embed>');
}

maxSpinTime=7
minSpinTime=3
running=0
count=0

firstRun=1
// hm=document.getElementById&&!document.all
function spinWheel(){
mySelect=document.forms["wheel"]["wheel2"]
maxNum=mySelect.length

if(firstRun==1){
lastNum=maxNum-1
firstRun=0
}

if(running==1){
return
}
running=1

isStopped=0
stopTimeSet=0

startSpinSound()
animate()
}

function animate(){

if(isStopped==0){
timer=setTimeout("animate()",50)
}
else{
running=0
lastNum=count
}

mySelect.selectedIndex=count

if(count==lastNum&&stopTimeSet==0){
stopTime =(minSpinTime+Math.floor(Math.random()*(maxSpinTime-minSpinTime)))*1000
setTimeout("isDone()",stopTime)

setTimeout("stopSpinSound()",stopTime-100)

stopTimeSet=1
}

count=(count==maxNum-1?0:count+1)

}

function isDone(){
isStopped=1
window.location = document.wheel.wheel2.options[document.wheel.wheel2.selectedIndex].value,800;
}

function startSpinSound(){
document.mysound1.Play()
}

function stopSpinSound(){
document.mysound1.Stop()
// if(hm){
// document.mysound1.Rewind()
// }
document.mysound1.Rewind()
document.mysound2.Play()
}
</script>
</head>
<body>
<div align="center">
<form method="POST" name="wheel">
<select name="wheel2" size="16">
<option value="1.htm">1</option>
<option value="2.htm">2</option>
<option value="3.htm">3</option>
<option value="4.htm">4</option>
<option value="5.htm">5</option>
<option value="6.htm">6</option>
<option value="7.htm">7</option>
<option value="8.htm">8</option>
<option value="9.htm">9</option>
<option value="10.htm">10</option>
<option value="11.htm">11</option>
<option value="12.htm">12</option>
<option value="13.htm">13</option>
<option value="14.htm">14</option>
<option value="15.htm">15</option>
<option value="16.htm">16</option>
</select>
<P align="center"><INPUT onClick="spinWheel();" type="button" value="hasard" name="button1"></P>
</FORM></div>
<script language="JavaScript" type="text/javascript">InsertSound();</script>
</body>

nantais44
01-15-2007, 04:40 PM
i think i have a begining of answer but i dont know why

without math.floor

i put this

stopTime = Math.random()*(maxSpinTime-minSpinTime)*3000

tpeck
01-16-2007, 03:13 PM
I tried your original code and, yes, IE always chooses the last item. FF doesn't. But I have absolutely no idea why I'm afraid. Let me know if you solve it with your "math" changes!

nantais44
01-19-2007, 04:46 PM
hello tpeck
i do this

function InsertSound()
{
document.write('<embed src="spin.wav" width="0" height="0" autostart="false" name="mysound1" id="mysound1">');
document.write('</embed>');
document.write('<embed src="fadespin.wav" width="0" height="0" autostart="false" name="mysound2" id="mysound2">');
document.write('</embed>');
}
maxSpinTime=7
minSpinTime=3
running=0
count=0
firstRun=1
// hm=document.getElementById&&!document.all
function spinWheel(){
mySelect=document.forms["wheel"]["wheel2"]
maxNum=mySelect.length
if(firstRun==1){
lastNum=maxNum-1
firstRun=0
}
if(running==1){
return
}
running=1
isStopped=0
stopTimeSet=0
startSpinSound()
animate()
}
function animate(){
if(isStopped==0){
timer=setTimeout("animate()",50)
}
else{
running=0
lastNum=count
}
mySelect.selectedIndex=count
if(count==lastNum&&stopTimeSet==0){
stopTime = minSpinTime+(Math.random()*(maxSpinTime-minSpinTime))*3000
setTimeout("isDone()",stopTime-1000)
setTimeout("stopSpinSound()",stopTime-1000)
stopTimeSet=1
}
count=(count==maxNum-1?0:count+1)
}
function isDone(){
isStopped=1
window.location = document.wheel.wheel2.options[document.wheel.wheel2.selectedIndex].value,800;
}
function startSpinSound(){
document.mysound1.Play()
}
function stopSpinSound(){
document.mysound1.Stop()
// if(hm){
// document.mysound1.Rewind()
// }
document.mysound1.Rewind()
document.mysound2.Play()
}

it work with ie7 and firefox 2 you can try her for example http://pouemes.free.fr/poesie/recueil_le_parfum.htm
but not so good to stop... it stop hardly for both browsers
i would also use mp3 files instead wav but i tried with firefox, it stop the script and ask to get plugin but is unable to found it

thanks for your first work, i think with mine we are not far to a good solution to get an url by spin

tpeck
01-29-2007, 01:09 PM
I'm sorry nantais44, I cannot claim this as my work - I got an enormous amount of help. In fact, it is way beyond my ability.

I wish I could assist because a routine of this kind can come in very useful for people like us.

If you do manage it in IE, please post for us all.

Thanks.

Mr J
01-29-2007, 02:03 PM
Give this a try


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

maxSpinTime=6000
minSpinTime=1000
running=0
count=0
timer=null

function spinWheel(){
mySelect=document.forms["wheel"]["wheel2"]
maxNum=mySelect.length
if(running==1){return}
running=1

clearTimeout(timer)
isStopped=0

stopTime = minSpinTime+(Math.floor(Math.random()*maxSpinTime))

setTimeout("isStopped=1;isDone()",stopTime)
animate()
}

function animate(){
if(isStopped==0){
timer=setTimeout("animate()",60)
}

mySelect.selectedIndex=count
count=(count==maxNum-1?0:count+1)
}

function isDone(){
running=0
//window.location =mySelect.options[mySelect.selectedIndex].value,800;
}

</script>

</HEAD>
<BODY>

<div align="center">
<form method="POST" name="wheel">
<select name="wheel2" size="16">
<option value="1.htm">1</option>
<option value="2.htm">2</option>
<option value="3.htm">3</option>
<option value="4.htm">4</option>
<option value="5.htm">5</option>
<option value="6.htm">6</option>
<option value="7.htm">7</option>
<option value="8.htm">8</option>
<option value="9.htm">9</option>
<option value="10.htm">10</option>
<option value="11.htm">11</option>
<option value="12.htm">12</option>
<option value="13.htm">13</option>
<option value="14.htm">14</option>
<option value="15.htm">15</option>
<option value="16.htm">16</option>
</select>
<BR><BR>
<INPUT onClick="spinWheel();" type="button" value="hasard" name="button1">
</FORM>
</div>
</body>
</BODY>
</HTML>

tpeck
01-29-2007, 02:15 PM
Too beautiful! Thanks Mr J.

I'll add it to my routines for a rainy day - I can already think of a use for it.

I hope nantais44 picks it up.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum