# Calculating a score based on images showing

Page 1 of 1

## 3 Replies - 1185 Views - Last Post: 19 November 2013 - 09:09 PM

### #1 taylor1992

Reputation: 0
• Posts: 12
• Joined: 13-April 13

# Calculating a score based on images showing

Posted 19 November 2013 - 07:43 PM

I am creating a matching game based on choosing 3 squares, and I am having trouble getting the program to calculate the score. If you view this HTML code in a browser it shows all instructions for the game. Any help would be appreciated! Thanks!

```<!DOCTYPE html>
<html>

<meta charset="utf-8">

<title>Project 3</title>

<style type="text/css">
input { text-align:center; background:navy; color:white }
</style>

<script language="Javascript">

var score = 5;
var multiplier = 0;
var total = score*multiplier;

function pickimg(ref){
var imagenumber = 3 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array
images[1] = "football.jpg";
images[2] = "baseball.jpg";
var image = images[rand1];
document.randimg.src = image;
}
function pickimg2(ref){
var imagenumber2 = 3 ;
var randomnumber2 = Math.random() ;
var rand2 = Math.round( (imagenumber2-1) * randomnumber2) + 1;
images2 = new Array
images2[1] = "football.jpg";
images2[2] = "baseball.jpg";
var image2 = images2[rand2];
document.randimg2.src = image2;
}
function pickimg3(ref){
var imagenumber3 = 3 ;
var randomnumber3 = Math.random() ;
var rand3 = Math.round( (imagenumber3-1) * randomnumber3) + 1;
images3 = new Array
images3[1] = "football.jpg";
images3[2] = "baseball.jpg";
var image3 = images3[rand3];
document.randimg3.src = image3;
}
function pickimg4(ref){
var imagenumber4 = 3 ;
var randomnumber4 = Math.random() ;
var rand4 = Math.round( (imagenumber4-1) * randomnumber4) + 1;
images4 = new Array
images4[1] = "football.jpg";
images4[2] = "baseball.jpg";
var image4 = images4[rand4];
document.randimg4.src = image4;
}
function pickimg5(ref){
var imagenumber5 = 3 ;
var randomnumber5 = Math.random() ;
var rand5 = Math.round( (imagenumber5-1) * randomnumber5) + 1;
images5 = new Array
images5[1] = "football.jpg";
images5[2] = "baseball.jpg";
var image5 = images5[rand5];
document.randimg5.src = image5;
}
function pickimg6(ref){
var imagenumber6 = 3 ;
var randomnumber6 = Math.random() ;
var rand6 = Math.round( (imagenumber6-1) * randomnumber6) + 1;
images6 = new Array
images6[1] = "football.jpg";
images6[2] = "baseball.jpg";
var image6 = images6[rand6];
document.randimg6.src = image6;
}
function pickimg7(ref){
var imagenumber7 = 3 ;
var randomnumber7 = Math.random() ;
var rand7 = Math.round( (imagenumber7-1) * randomnumber7) + 1;
images7 = new Array
images7[1] = "football.jpg";
images7[2] = "baseball.jpg";
var image7 = images7[rand7];
document.randimg7.src = image7;
}
function pickimg8(ref){
var imagenumber8 = 3 ;
var randomnumber8 = Math.random() ;
var rand8 = Math.round( (imagenumber8-1) * randomnumber8) + 1;
images8 = new Array
images8[1] = "football.jpg";
images8[2] = "baseball.jpg";
var image8 = images8[rand8];
document.randimg8.src = image8
}
function pickimg9(ref){
var imagenumber9 = 3 ;
var randomnumber9 = Math.random() ;
var rand9 = Math.round( (imagenumber9-1) * randomnumber9) + 1;
images9 = new Array
images9[1] = "football.jpg";
images9[2] = "baseball.jpg";
var image9 = images9[rand9];
document.randimg9.src = image9;
}

</script>
<body>
<center>

<h1><center>Sports Squares Game</center></h1>

<center>Baseball = 1 point</center>
<center>Football = 2 points</center>
<center>If 2 of the same image are chosen = Double points!</center>
<center>If 3 of the same image are chosen = Triple points!</center>
<table border="1">
<tr>
<td><a href="" onclick="pickimg(this); return false;"><IMG SRC="square.jpg" name="randimg" border=0></a></td>
<td><a href="" onclick="pickimg2(this); return false;"><IMG SRC="square.jpg" name="randimg2" border=0></a></td>
<td><a href="" onclick="pickimg3(this); return false;"><IMG SRC="square.jpg" name="randimg3" border=0></a></td>
</tr>
<tr>
<td><a href="" onclick="pickimg4(this); return false;"><IMG SRC="square.jpg" name="randimg4" border=0></a></td>
<td><a href="" onclick="pickimg5(this); return false;"><IMG SRC="square.jpg" name="randimg5" border=0></a></td>
<td><a href="" onclick="pickimg6(this); return false;"><IMG SRC="square.jpg" name="randimg6" border=0></a></td>
</tr>
<tr>
<td><a href="" onclick="pickimg7(this); return false;"><IMG SRC="square.jpg" name="randimg7" border=0></a></td>
<td><a href="" onclick="pickimg8(this); return false;"><IMG SRC="square.jpg" name="randimg8" border=0></a></td>
<td><a href="" onclick="pickimg9(this); return false;"><IMG SRC="square.jpg" name="randimg9" border=0></a></td>
</tr>
</table>
</p>

<table>
<tr><td>Score: <input type="text" readonly name="score" value="0";></td></tr>
<tr><td>Multiplier: <input type="text" readonly name="multiplier" value="0";></td></tr>
<tr><td>Total: <input type="text" readonly name="total" value ="0";></td></tr>

</center>
</body>
</html>

```

Is This A Good Question/Topic? 0

## Replies To: Calculating a score based on images showing

### #2 JMRKER

Reputation: 134
• Posts: 868
• Joined: 25-October 08

## Re: Calculating a score based on images showing

Posted 19 November 2013 - 08:08 PM

Where is the URL for the images?

### #3 taylor1992

Reputation: 0
• Posts: 12
• Joined: 13-April 13

## Re: Calculating a score based on images showing

Posted 19 November 2013 - 08:19 PM

JMRKER, on 19 November 2013 - 08:08 PM, said:

Where is the URL for the images?

Sorry, try this revised code with urls

```<!DOCTYPE html>
<html>

<meta charset="utf-8">

<title>Project 3</title>

<style type="text/css">
input { text-align:center; background:navy; color:white }
</style>

<script language="Javascript">
// Your Javascript code goes here.

var score = 5;
var multiplier = 0;
var total = score*multiplier;

function pickimg(ref){
var imagenumber = 3 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array
images[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image = images[rand1];
document.randimg.src = image;
}
function pickimg2(ref){
var imagenumber2 = 3 ;
var randomnumber2 = Math.random() ;
var rand2 = Math.round( (imagenumber2-1) * randomnumber2) + 1;
images2 = new Array
images2[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images2[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image2 = images2[rand2];
document.randimg2.src = image2;
}
function pickimg3(ref){
var imagenumber3 = 3 ;
var randomnumber3 = Math.random() ;
var rand3 = Math.round( (imagenumber3-1) * randomnumber3) + 1;
images3 = new Array
images3[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images3[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image3 = images3[rand3];
document.randimg3.src = image3;
}
function pickimg4(ref){
var imagenumber4 = 3 ;
var randomnumber4 = Math.random() ;
var rand4 = Math.round( (imagenumber4-1) * randomnumber4) + 1;
images4 = new Array
images4[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images4[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image4 = images4[rand4];
document.randimg4.src = image4;
}
function pickimg5(ref){
var imagenumber5 = 3 ;
var randomnumber5 = Math.random() ;
var rand5 = Math.round( (imagenumber5-1) * randomnumber5) + 1;
images5 = new Array
images5[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images5[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image5 = images5[rand5];
document.randimg5.src = image5;
}
function pickimg6(ref){
var imagenumber6 = 3 ;
var randomnumber6 = Math.random() ;
var rand6 = Math.round( (imagenumber6-1) * randomnumber6) + 1;
images6 = new Array
images6[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images6[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image6 = images6[rand6];
document.randimg6.src = image6;
}
function pickimg7(ref){
var imagenumber7 = 3 ;
var randomnumber7 = Math.random() ;
var rand7 = Math.round( (imagenumber7-1) * randomnumber7) + 1;
images7 = new Array
images7[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images7[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image7 = images7[rand7];
document.randimg7.src = image7;
}
function pickimg8(ref){
var imagenumber8 = 3 ;
var randomnumber8 = Math.random() ;
var rand8 = Math.round( (imagenumber8-1) * randomnumber8) + 1;
images8 = new Array
images8[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images8[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image8 = images8[rand8];
document.randimg8.src = image8
}
function pickimg9(ref){
var imagenumber9 = 3 ;
var randomnumber9 = Math.random() ;
var rand9 = Math.round( (imagenumber9-1) * randomnumber9) + 1;
images9 = new Array
images9[1] = "http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png";
images9[2] = "http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png";
var image9 = images9[rand9];
document.randimg9.src = image9;
}

if ( image == images[1]){
score++;
}

</script>
<body>
<center>

<h1><center>Sports Squares Game</center></h1>

<center>Baseball = 1 point</center>
<center>Football = 2 points</center>
<center>If 2 of the same image are chosen = Double points!</center>
<center>If 3 of the same image are chosen = Triple points!</center>
<table border="1">
<tr>
<td><a href="" onclick="pickimg(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg" border=0></a></td>
<td><a href="" onclick="pickimg2(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg2" border=0></a></td>
<td><a href="" onclick="pickimg3(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg3" border=0></a></td>
</tr>
<tr>
<td><a href="" onclick="pickimg4(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg4" border=0></a></td>
<td><a href="" onclick="pickimg5(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg5" border=0></a></td>
<td><a href="" onclick="pickimg6(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg6" border=0></a></td>
</tr>
<tr>
<td><a href="" onclick="pickimg7(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg7" border=0></a></td>
<td><a href="" onclick="pickimg8(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg8" border=0></a></td>
<td><a href="" onclick="pickimg9(this); return false;"><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" name="randimg9" border=0></a></td>
</tr>
</table>
</p>

<table>
<tr><td>Score: <input type="text" readonly name="score" value="0";></td></tr>
<tr><td>Multiplier: <input type="text" readonly name="multiplier" value="0";></td></tr>
<tr><td>Total: <input type="text" readonly name="total" value ="0";></td></tr>

</center>
</body>
</html>

```

### #4 JMRKER

Reputation: 134
• Posts: 868
• Joined: 25-October 08

## Re: Calculating a score based on images showing

Posted 19 November 2013 - 09:09 PM

It is a lot easier to code if you don't use so many redundant functions.
Consider this version...

Currently it does not score the selections,
but you should be able to easily add that based upon the "rndPick" values.

I would also suggest limiting the number of selections to 3,

Another note: Your logic may allow for an un-equal display of the 3 different images.
You might get all footballs if you are extremely unlucky during the setup.
There is a way to avoid this, but you don't specify enough to decide what your intent is.

```<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Project 3</title>

<style type="text/css">
input { text-align:center; background:navy; color:white }
img { height:125px;  width:125px; }
</style>

<script type="text/javascript">

var score = 5;
var multiplier = 0;
var total = score*multiplier;
var imgList = [     // 'http://imgew.files.wordpress.com/2010/06/red1.png',
'http://www.clker.com/cliparts/U/N/4/5/J/L/football-md.png',
'http://www.clker.com/cliparts/v/u/B/i/u/F/baseball-md.png',
];

function pickimg(ref){
var rndPick = Math.floor(Math.random()*imgList.length);
document.getElementById('randimg'+ref).src = imgList[rndPick];
document.getElementById('randimg'+ref).title = imgList[rndPick];
}
</script>
<body>
<center>

<h1><center>Sports Squares Game</center></h1>

<center>Baseball = 1 point</center>
<center>Football = 2 points</center>
<center>If 2 of the same image are chosen = Double points!</center>
<center>If 3 of the same image are chosen = Triple points!</center>
<p>
<table border="1" width="25%">
<tr>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg0" onclick="pickimg(0)" title="sqr"></td>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg1" onclick="pickimg(1)" title="sqr"></td>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg2" onclick="pickimg(2)" title="sqr"></td>
</tr>
<tr>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg3" onclick="pickimg(3)" title="sqr"></td>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg4" onclick="pickimg(4)" title="sqr"></td>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg5" onclick="pickimg(5)" title="sqr"></td>
</tr>
<tr>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg6" onclick="pickimg(6)" title="sqr"></td>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg7" onclick="pickimg(7)" title="sqr"></td>
<td><IMG SRC="http://imgew.files.wordpress.com/2010/06/red1.png" id="randimg8" onclick="pickimg(8)" title="sqr"></td>
</tr>
</table>
</p>

<table>
<tr><td>Score: <input type="text" readonly name="score" value="0";></td></tr>
<tr><td>Multiplier: <input type="text" readonly name="multiplier" value="0";></td></tr>
<tr><td>Total: <input type="text" readonly name="total" value ="0";></td></tr>

</center>
</body>
</html>

```

You can compress it further, but see if gives you any additional ideas.

Good Luck! />

This post has been edited by JMRKER: 19 November 2013 - 09:15 PM