Random number generator and Assign numbers to SVG Shapes

Dev Articles Community Forums Sponsor:

Get inside! Sample the range of functionality easily built with JMSL Library for Time Series Data Analysis, Heat Maps, Portfolio Optimization, Monte Carlo Simulation, Stock Price Charting and more. Download Now!

October 7th, 2005, 06:07 AM

imparator

Registered User

Join Date: Sep 2005

Posts: 13

Time spent in forums: 2 h 12 m 37 sec
Reputation Power: 0

Random number generator and Assign numbers to SVG Shapes - SOLVED

Hi, im in the process to making a guessing game using SVG, Javascript, XML-events and XHTML.

It will eventually work in the following way:

1.At the start, a user will press a button “randomise”. At this point a variable will be assigned a random number which will select one of five symbols: a square, a 5-pointed star, a circle, a triangle, and three wavy lines.

All five symbols are shown at this point, with a single word
underneath each, describing the symbol (ie “square”, “star”, “circle”, “triangle”, “waves”.)

2. The user will then be asked to guess the symbol that was selected

3. If the user guessed correctly, an alert box appears congratulating the user “Correct!”.
If not guessed correctly, alert box says "Incorrect"

4. In both cases (“correct”/”incorrect”),it goes back to step number 1 above and a new random symbol is chosen.

5. In addition, the web page will keep score of all correct and incorrect attempts and show these.

Now, the problems im having are as follows:

how do i assign a number to each of the shapes (i've heard you can use XML events, but i've got no idea where to start)

Also, how do i allow the user to select a shape by clicking on it (agian, its been suggested that i do this using XML-events - does anyone know if is somthing like onClick() in Javascript? )

i have the following code to generate the random numebr

Code:

var randomnumber=Math.floor(Math.random()*7)

and the following is the code to my XHTML documrnt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>

<form>
<table align="center">
<tr align="center"><td><h1>Guessing Game</h1></td></tr>
<tr><td>
<object data="star.svg" width="90" type="image/svg+xml"></object>
<object data="square.svg" width="100" type="image/svg+xml"></object>
<object data="cricle.svg" width="90" type="image/svg+xml"></object>
<object data="triangle.svg" width="90" type="image/svg+xml"></object>
<object data="waves.svg" width="90" type="image/svg+xml"></object>
</td></tr>
<tr><td><input type="submit" name="Randomise" value="Randomise"/></td></tr>
</table>
</form>
</body>
</html>

Note: i haven't put the JavaScript in a file yet as im considering putting it in an external .JS FIle.

Any help would be greatly appreciated,
Thankyou in advance.

October 7th, 2005, 06:36 AM

Itsacon

Command Line Warrior

Join Date: Aug 2004

Location: Sector ZZ9 Plural Z Alpha

Posts: 956

Folding Points: 682581 Folding Title: Super Ultimate Folder - Level 2

Time spent in forums: 6 Days 8 h 23 m 34 sec
Reputation Power: 4

you can define the onclick="" event for the object tag.

Code:

<object onclick="guess(1)" data="star.svg" width="90" type="image/svg+xml"></object>

...assuming your verify function is called guess(number), otherwise replace it with the real name

__________________
This is my code. Is it not nifty?

"The biggest problem encountered while trying to design a system that was completely foolproof, was, that people tended to underestimate the ingenuity of complete fools."
---Douglas Adams

Join the Itsacon fanclub!

Join the Itsacon fanclub

Current members:

Zero Tolerance: Spammers banned so far: 264

Last edited by Itsacon : October 7th, 2005 at 06:40 AM.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: