1. Registered User
Join Date
Oct 2013
Posts
5

## Generate random

I can't seem to get my code to work, I'm pretty sure I'm missing something, but I cannot figure it out. My skills are not up to par yet. I would really appreciate any feedback.

Instructions:

Modify the random number generator to simulate a die roll.

Then declare a variable for a second die, and roll that one.

Calculate the total number of the two die.

Any other result should say: Point followed by the number rolled.

For example, if the first die shows a 4, and the second die shows a 5, then the total is 9. You would output: Point 9

Every time the user hits this button, a roll of two die should be generated,

Code:
```<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Power Ball</title>

<script type="text/javascript">
function rollTheDie()
{
var dieOneRoll, dieTwoRoll, totalNumber;

dieOneRoll=document.genNumbers.txtRollDie.value;
dieOneRoll=parseInt(dieOneRoll);

dieTwoRoll=document.genNumbers.txtRollDie.value;
dieTwoRoll=parseInt(dieTwoRoll);

dieOneRoll = (Math.random()*6) +1;
dieTwoRoll = (Math.random()+6) +1;

totalNumber=document.genNumbers.txtRollDie.value;
totalnumber=(dieOneRoll + dieTwoRoll);

if ( powerBallnumber == "2" || powerBallnumber == "3" || powerBallnumber == "12")
{
}
else if ( powerBallnumber == "7" || powerBallnumber == "11" )
{
}
else
{
}
}
</script>

<body>

<form name="genNumbers">
Click to roll die: <input type="text" name="txtRollDie">
<input type="button" value="Roll the die" onclick="rollTheDie()">
</form>

</body>
</html>```

2. Not that it's a direct solution to the problem, but I had fun making this:

index.html
HTML Code:
```<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Power Ball</title>

<style type="text/css">

#Dice1,
#Dice2 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 5px 10px;
display: inline-block;
vertical-align: top;
}
.DiceDot {
position: absolute;
width: 20px;
height: 20px;
background-color: #000;
margin-left: -10px;
margin-top: -10px;
left: 50%;
top: 50%;
transition: all 1s;
}
.DiceFace2 .DiceDotOdd,  .DiceFace3 .DiceDotOdd  {left: 25%; top: 25%;}
.DiceFace2 .DiceDotEven, .DiceFace3 .DiceDotEven {left: 75%; top: 75%;}
.DiceFace4 .DiceDotOdd,  .DiceFace5 .DiceDotOdd  {left: 25%; top: 25%;}
.DiceFace4 .DiceDotEven, .DiceFace5 .DiceDotEven {left: 75%; top: 75%;}
.DiceFace6 .DiceDotOdd                           {left: 25%;}
.DiceFace6 .DiceDotEven                          {left: 75%;}
.DiceFace4 .DiceDot1,    .DiceFace5 .DiceDot1    {left: 75%;}
.DiceFace4 .DiceDot2,    .DiceFace5 .DiceDot2    {left: 25%;}
.DiceFace3 .DiceDot3,    .DiceFace5 .DiceDot3    {left: 50%; top: 50%;}
.DiceFace6 .DiceDot1,    .DiceFace6 .DiceDot2    {top: 25%;}
.DiceFace6 .DiceDot5,    .DiceFace6 .DiceDot6    {top: 75%;}

</style>

<script type="text/javascript">

function rollDice()
{
var
face1 = Math.floor(Math.random() * 6) + 1,
face2 = Math.floor(Math.random() * 6) + 1;

document.getElementById('Dice1').className = 'DiceFace' + face1;
document.getElementById('Dice2').className = 'DiceFace' + face2;
document.getElementById('Total').innerHTML = face1 + face2;
}

</script>

<body>

<div style="text-align: center;">
<span id="Dice1">
<div class="DiceDot DiceDot1 DiceDotOdd"></div>
<div class="DiceDot DiceDot2 DiceDotEven"></div>
<div class="DiceDot DiceDot3 DiceDotOdd"></div>
<div class="DiceDot DiceDot4 DiceDotEven"></div>
<div class="DiceDot DiceDot5 DiceDotOdd"></div>
<div class="DiceDot DiceDot6 DiceDotEven"></div>
</span>
<span id="Total" style="width: 80px; height: 100px; line-height: 100px; font-size: 3em; font-weight: bold; display: inline-block;">2</span>
<span id="Dice2">
<div class="DiceDot DiceDot1 DiceDotOdd"></div>
<div class="DiceDot DiceDot2 DiceDotEven"></div>
<div class="DiceDot DiceDot3 DiceDotOdd"></div>
<div class="DiceDot DiceDot4 DiceDotEven"></div>
<div class="DiceDot DiceDot5 DiceDotOdd"></div>
<div class="DiceDot DiceDot6 DiceDotEven"></div>
</span>
</div>
<div style="text-align: center;">
<button onclick="rollDice();">Roll Dice</button>
</div>

</body>
</html>```

3. Here is an alternative
Code:
```<script type="text/javascript">
function diceRoll(){
var rnd=0;
do{
rnd = Math.ceil( Math.random( new Date().getTime() ) * 10);
console.log(">>> "+rnd);
}while( rnd >6 || rnd==0 );
return rnd;
}

function rollDice(){
var face1 = diceRoll();
var face2 = diceRoll();
with( document ){
getElementById('Dice1').className = 'DiceFace' + face1;
getElementById('Dice2').className = 'DiceFace' + face2;
getElementById('Total').innerHTML = face1 + face2;
}
}
</script>```
Personally I don't like "Adjustments" to randomness, if you are going to use random then use it, don't adjust it and use a seed value too.

I do a check to see if the number is > than 6 or if it is zero for those occasions where numbers returned are 0 or > 6

Also when the window loads, instead of starting at a total of 2, the dice are rolled.

Like the transition element...

4. It was code that took 30 minutes to write, and will probably never be seen again. My concerns for adjustment are low.

5. The point is not adjustments Bionoid, the point is randomness and limitation on return values.

6. Registered User
Join Date
Oct 2013
Posts
5
So now how can I incorperate my alert statements with that? I am unframiliar with the way your JS is layed out at this point.

7. If you mean this bit of your code
Code:
```if ( powerBallnumber == "2" || powerBallnumber == "3" || powerBallnumber == "12")
{
}
else if ( powerBallnumber == "7" || powerBallnumber == "11" )
{
}
else
{
}```
All those alerts are going to get pretty annoying.

You want to have a textarea that you can then update automatically.

HTML Code:
```<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8" />
<title>Power Ball</title>

<style type="text/css">

#Dice1,
#Dice2 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 5px 10px;
display: inline-block;
vertical-align: top;
}
.DiceDot {
position: absolute;
width: 20px;
height: 20px;
background-color: #000;
margin-left: -10px;
margin-top: -10px;
left: 50%;
top: 50%;
transition: all 1s;
}
.DiceFace2 .DiceDotOdd,  .DiceFace3 .DiceDotOdd  {left: 25%; top: 25%;}
.DiceFace2 .DiceDotEven, .DiceFace3 .DiceDotEven {left: 75%; top: 75%;}
.DiceFace4 .DiceDotOdd,  .DiceFace5 .DiceDotOdd  {left: 25%; top: 25%;}
.DiceFace4 .DiceDotEven, .DiceFace5 .DiceDotEven {left: 75%; top: 75%;}
.DiceFace6 .DiceDotOdd                           {left: 25%;}
.DiceFace6 .DiceDotEven                          {left: 75%;}
.DiceFace4 .DiceDot1,    .DiceFace5 .DiceDot1    {left: 75%;}
.DiceFace4 .DiceDot2,    .DiceFace5 .DiceDot2    {left: 25%;}
.DiceFace3 .DiceDot3,    .DiceFace5 .DiceDot3    {left: 50%; top: 50%;}
.DiceFace6 .DiceDot1,    .DiceFace6 .DiceDot2    {top: 25%;}
.DiceFace6 .DiceDot5,    .DiceFace6 .DiceDot6    {top: 75%;}
div#displayOutput { text-align:center; }
</style>

<script type="text/javascript">

function diceRoll(){
var rnd=0;
do{
rnd = Math.ceil( Math.random( new Date().getTime() ) * 10);
console.log(">>> "+rnd);
}while( rnd >6 || rnd==0 );
return rnd;
}
function rollDice()
{
var	face1 = diceRoll();
var face2 = diceRoll();
with( document ){
getElementById('Dice1').className = 'DiceFace' + face1;
getElementById('Dice2').className = 'DiceFace' + face2;
points = getElementById('Total').innerHTML = face1 + face2;
}
updateDisplay(points-0);
}

function randomNumber(p){

var maxValue = questions.length;
var rnd = 0;
rnd = Math.random( new Date().getTime()) * Math.pow(10,p);
rnd=Math.floor(rnd);
console.log("rnd >>> "+randomNumber());
return rnd;
}

function updateDisplay(p){
dd = document.getElementById("displayOutput");
if ( p == 2 || p == 3 || p == 12){
dd.innerHTML = "<b>Craps</b>";
}
else if ( p == 7 || p == 11 )
{
dd.innerHTML = "<b>Natural</b>";
}
else
{
dd.innerHTML = "<b>Point</b>";
}
}
</script>

<body>

<div style="text-align: center;">
<span id="Dice1">
<div class="DiceDot DiceDot1 DiceDotOdd"></div>
<div class="DiceDot DiceDot2 DiceDotEven"></div>
<div class="DiceDot DiceDot3 DiceDotOdd"></div>
<div class="DiceDot DiceDot4 DiceDotEven"></div>
<div class="DiceDot DiceDot5 DiceDotOdd"></div>
<div class="DiceDot DiceDot6 DiceDotEven"></div>
</span>
<span id="Total" style="width: 80px; height: 100px; line-height: 100px; font-size: 3em; font-weight: bold; display: inline-block;">2</span>
<span id="Dice2">
<div class="DiceDot DiceDot1 DiceDotOdd"></div>
<div class="DiceDot DiceDot2 DiceDotEven"></div>
<div class="DiceDot DiceDot3 DiceDotOdd"></div>
<div class="DiceDot DiceDot4 DiceDotEven"></div>
<div class="DiceDot DiceDot5 DiceDotOdd"></div>
<div class="DiceDot DiceDot6 DiceDotEven"></div>
</span>
</div>
<div style="text-align: center;">
<button onClick="rollDice();">Roll Dice</button>
</div>
<div id="displayOutput"></div>
</body>
</html>```

8. Registered User
Join Date
Oct 2013
Posts
5
Originally Posted by \\.\
If you mean this bit of your code
Code:
```if ( powerBallnumber == "2" || powerBallnumber == "3" || powerBallnumber == "12")
{
}
else if ( powerBallnumber == "7" || powerBallnumber == "11" )
{
}
else
{
}```
All those alerts are going to get pretty annoying.

You want to have a textarea that you can then update automatically.

HTML Code:
```<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8" />
<title>Power Ball</title>

<style type="text/css">

#Dice1,
#Dice2 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 5px 10px;
display: inline-block;
vertical-align: top;
}
.DiceDot {
position: absolute;
width: 20px;
height: 20px;
background-color: #000;
margin-left: -10px;
margin-top: -10px;
left: 50%;
top: 50%;
transition: all 1s;
}
.DiceFace2 .DiceDotOdd,  .DiceFace3 .DiceDotOdd  {left: 25%; top: 25%;}
.DiceFace2 .DiceDotEven, .DiceFace3 .DiceDotEven {left: 75%; top: 75%;}
.DiceFace4 .DiceDotOdd,  .DiceFace5 .DiceDotOdd  {left: 25%; top: 25%;}
.DiceFace4 .DiceDotEven, .DiceFace5 .DiceDotEven {left: 75%; top: 75%;}
.DiceFace6 .DiceDotOdd                           {left: 25%;}
.DiceFace6 .DiceDotEven                          {left: 75%;}
.DiceFace4 .DiceDot1,    .DiceFace5 .DiceDot1    {left: 75%;}
.DiceFace4 .DiceDot2,    .DiceFace5 .DiceDot2    {left: 25%;}
.DiceFace3 .DiceDot3,    .DiceFace5 .DiceDot3    {left: 50%; top: 50%;}
.DiceFace6 .DiceDot1,    .DiceFace6 .DiceDot2    {top: 25%;}
.DiceFace6 .DiceDot5,    .DiceFace6 .DiceDot6    {top: 75%;}
div#displayOutput { text-align:center; }
</style>

<script type="text/javascript">

function diceRoll(){
var rnd=0;
do{
rnd = Math.ceil( Math.random( new Date().getTime() ) * 10);
console.log(">>> "+rnd);
}while( rnd >6 || rnd==0 );
return rnd;
}
function rollDice()
{
var	face1 = diceRoll();
var face2 = diceRoll();
with( document ){
getElementById('Dice1').className = 'DiceFace' + face1;
getElementById('Dice2').className = 'DiceFace' + face2;
points = getElementById('Total').innerHTML = face1 + face2;
}
updateDisplay(points-0);
}

function randomNumber(p){

var maxValue = questions.length;
var rnd = 0;
rnd = Math.random( new Date().getTime()) * Math.pow(10,p);
rnd=Math.floor(rnd);
console.log("rnd >>> "+randomNumber());
return rnd;
}

function updateDisplay(p){
dd = document.getElementById("displayOutput");
if ( p == 2 || p == 3 || p == 12){
dd.innerHTML = "<b>Craps</b>";
}
else if ( p == 7 || p == 11 )
{
dd.innerHTML = "<b>Natural</b>";
}
else
{
dd.innerHTML = "<b>Point</b>";
}
}
</script>

<body>

<div style="text-align: center;">
<span id="Dice1">
<div class="DiceDot DiceDot1 DiceDotOdd"></div>
<div class="DiceDot DiceDot2 DiceDotEven"></div>
<div class="DiceDot DiceDot3 DiceDotOdd"></div>
<div class="DiceDot DiceDot4 DiceDotEven"></div>
<div class="DiceDot DiceDot5 DiceDotOdd"></div>
<div class="DiceDot DiceDot6 DiceDotEven"></div>
</span>
<span id="Total" style="width: 80px; height: 100px; line-height: 100px; font-size: 3em; font-weight: bold; display: inline-block;">2</span>
<span id="Dice2">
<div class="DiceDot DiceDot1 DiceDotOdd"></div>
<div class="DiceDot DiceDot2 DiceDotEven"></div>
<div class="DiceDot DiceDot3 DiceDotOdd"></div>
<div class="DiceDot DiceDot4 DiceDotEven"></div>
<div class="DiceDot DiceDot5 DiceDotOdd"></div>
<div class="DiceDot DiceDot6 DiceDotEven"></div>
</span>
</div>
<div style="text-align: center;">
<button onClick="rollDice();">Roll Dice</button>
</div>
<div id="displayOutput"></div>
</body>
</html>```

We have never worked with a text pad in class. I'm at at a really basic point at this moment in time so I am trying to make sense of everything. If I were to use that code i'm sure my instructor would be pretty shocked hah! Also, I tried that code and its generating an error for me. It could just be on my end though, I only have access to IE untill I get off work so it may be the browser that is having the issue.

9. Registered User
Join Date
Oct 2010
Location
Versailles, France
Posts
1,290
A variant with 10000 dice rolls to evaluate probability...

Theoretically, Craps probability is 4/36 (11,111%), Natural 8/36 (22,222%) and Point 24/36 (66,666%).
Last edited by 007Julien; 11-05-2013 at 01:20 PM.

10. Sorry forcedindukion6, here are changes to the code showing a comment about the total number (before \\ guy made a complete mess of it):
I have tested it in FireFox and IE7-10.

index.html
HTML Code:
```<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Power Ball</title>

<style type="text/css">

#Dice1,
#Dice2 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 5px 10px;
display: inline-block;
vertical-align: top;
}
.DiceDot {
position: absolute;
width: 20px;
height: 20px;
background-color: #000;
margin-left: -10px;
margin-top: -10px;
left: 50%;
top: 50%;
transition: all 1s;
}
.DiceFace2 .DiceDotOdd,  .DiceFace3 .DiceDotOdd  {left: 25%; top: 25%;}
.DiceFace2 .DiceDotEven, .DiceFace3 .DiceDotEven {left: 75%; top: 75%;}
.DiceFace4 .DiceDotOdd,  .DiceFace5 .DiceDotOdd  {left: 25%; top: 25%;}
.DiceFace4 .DiceDotEven, .DiceFace5 .DiceDotEven {left: 75%; top: 75%;}
.DiceFace6 .DiceDotOdd                           {left: 25%;}
.DiceFace6 .DiceDotEven                          {left: 75%;}
.DiceFace4 .DiceDot1,    .DiceFace5 .DiceDot1    {left: 75%;}
.DiceFace4 .DiceDot2,    .DiceFace5 .DiceDot2    {left: 25%;}
.DiceFace3 .DiceDot3,    .DiceFace5 .DiceDot3    {left: 50%; top: 50%;}
.DiceFace6 .DiceDot1,    .DiceFace6 .DiceDot2    {top: 25%;}
.DiceFace6 .DiceDot5,    .DiceFace6 .DiceDot6    {top: 75%;}

</style>

<script type="text/javascript">

function rollDice()
{
var
face1 = Math.floor(Math.random() * 6) + 1,
face2 = Math.floor(Math.random() * 6) + 1,
total, display;

total = face1 + face2;
document.getElementById('Dice1').className = 'DiceFace' + face1;
document.getElementById('Dice2').className = 'DiceFace' + face2;
document.getElementById('Total').innerHTML = total;
display = document.getElementById('Display');

if (total === 2 || total === 3 || total === 12) {display.innerHTML = 'Craps';} else
if (total === 7 || total === 11)                {display.innerHTML = 'Natural';} else
{display.innerHTML = 'Point';}
}

</script>

<body>

<div style="text-align: center;">
<span id="Dice1">
<div class="DiceDot DiceDot1 DiceDotOdd"></div>
<div class="DiceDot DiceDot2 DiceDotEven"></div>
<div class="DiceDot DiceDot3 DiceDotOdd"></div>
<div class="DiceDot DiceDot4 DiceDotEven"></div>
<div class="DiceDot DiceDot5 DiceDotOdd"></div>
<div class="DiceDot DiceDot6 DiceDotEven"></div>
</span>
<span id="Total" style="width: 80px; height: 100px; line-height: 100px; font-size: 3em; font-weight: bold; display: inline-block;">-</span>
<span id="Dice2">
<div class="DiceDot DiceDot1 DiceDotOdd"></div>
<div class="DiceDot DiceDot2 DiceDotEven"></div>
<div class="DiceDot DiceDot3 DiceDotOdd"></div>
<div class="DiceDot DiceDot4 DiceDotEven"></div>
<div class="DiceDot DiceDot5 DiceDotOdd"></div>
<div class="DiceDot DiceDot6 DiceDotEven"></div>
</span>
</div>
<div style="text-align: center;">
<button onclick="rollDice();">Roll Dice</button>
</div>
<div id="Display" style="text-align: center; font-weight: bold; margin-top: 15px; font-size: 1.5em;"></div>

</body>
</html>```
Last edited by bionoid; 11-06-2013 at 01:29 AM.

11. Pardon me Bionoid, I didn't make a mess of anything, I tested the code I posted and it worked perfectly fine in Chrome, Opera And Firefox. As for the person commenting that they got an erro, that is a pretty generic complaint and would help to know what that error was.

Another thing, your randomness function is not as random as you think, to get a true random number you need a seed and the best seed to use is time in milliseconds.

12. The less than critical determination of six possible numbers did not warrant the extra complexity to the code. As much as I appreciate your input I felt it a little out of place to repost with such modifications. I did do testing on both methods and yours does indeed produce a marginal random gain, but halting the browser until it decides to return a value, regardless of the unnoticeable delay, feels messy to me.

IE is still a major player for now, it should be tested in even if it's not your browser of choice.

I will of course keep the seeding recommendation in mind, thank you.

13. The method does not "Halt" the browser and the problem with the method of generating a random number without a seed is that you get repetitions occurring far more frequently which makes them more non-random. What you may feel is messy is actually correct, if you were to implement a truly random number generation sequencer, that would look even messier.

In your example, the removal of the transition process in the display would speed up the selection process which is the bottle neck in the demo, it may be nice but completely unnecessary.

MSIE maybe a major player and it is only a major player because it is the default install on windows machines and people do not know any better until they are educated. Many are too scared to try another browser because it is an unknown quantity and they do think that other browsers are for other people in a survey that was conducted several years ago about browser choice.

Many reasons exist for choice of browser like when people buy a computer, they will go with what they know, people who use Macs at work will go out and buy a Mac and the educated go and buy a PC.

There are currently 1 users browsing this thread. (0 members and 1 guests)

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.12423 seconds
• Memory Usage 3,058KB
• Queries Executed 15 (?)
Template Usage (35):
• (4)bbcode_code
• (4)bbcode_html
• (1)bbcode_quote
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (13)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (13)postbit
• (13)postbit_onlinestatus
• (13)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (72):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_postinfo_query
• fetch_postinfo
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete