Jump to content

Interactive Map

e4games

By e4games
in HTML/XHTML

Recommended Posts

Ingolme w3schools Guru

Ingolme

Posted
Posted
oh...well if thats you question then i did that becuase I wanted it when it was equal to that number to diplay that code
That if() statement is missing an arguent on the left of the == operator.All operators except "not" require arguments on both the left and the right.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

here's something to get you started withhtm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript" src="pokemon.js"></script></head><body><a onclick="searchmap()" href="java script:void(null)"><img src="img1.gif"  alt=" " /></a><a onclick="searchmap()" href="java script:void(null)"><img src="img2.gif" alt=" " /></a><a onclick="searchmap()" href="java script:void(null)"><img src="img3.gif" alt=" " /></a><a onclick="searchmap()" href="java script:void(null)"><img src="img4" alt=" " /></a><div id="searchresult">Click image/map to find Pokemon</div></body></html>

pokemon.js

// JavaScript Documentvar countthis=0;var xmlhttp;function searchmap(){xmlhttp=GetXmlHttpObject();if (xmlhttp==null)  {  alert ("Browser does not support HTTP Request");  return;  }var url="responsexml.php";url=url+"?q="+countthis;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);}function stateChanged(){if (xmlhttp.readyState==4)  {    var xmlDoc=xmlhttp.responseXML;        if(xmlDoc.getElementsByTagName("count")[0].childNodes[0].nodeValue != -1)        {        showthis = xmlDoc.getElementsByTagName("count")[0].childNodes[0].nodeValue;        countthis=showthis;        }    else        {        showthis="";        }        document.getElementById("searchresult").innerHTML = xmlDoc.getElementsByTagName("searchtext")[0].childNodes[0].nodeValue+showthis;    }}function GetXmlHttpObject(){if (window.XMLHttpRequest)  {  // code for IE7+, Firefox, Chrome, Opera, Safari  return new XMLHttpRequest();  }if (window.ActiveXObject)  {  // code for IE6, IE5  return new ActiveXObject("Microsoft.XMLHTTP");  }return null;}

responsexml.php

<?phpheader("Content-type: text/xml");$q=$_REQUEST["q"];srand(time());$random = (rand()%9)+1;if ($random < 5){$response='You found an Pokemon';$q++;$store=$q;}else{$response='Bad Luck no Pokemon here';$store=-1;}echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";echo"<pokemonsearch>";echo "<searchtext>" . $response . "</searchtext>";echo "<count>" . $store . "</count>";echo "</pokemonsearch>";?>

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted
here's something to get you started withhtm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript" src="pokemon.js"></script></head><body><a onclick="searchmap()" href="java script:void(null)"><img src="img1.gif"  alt=" " /></a><a onclick="searchmap()" href="java script:void(null)"><img src="img2.gif" alt=" " /></a><a onclick="searchmap()" href="java script:void(null)"><img src="img3.gif" alt=" " /></a><a onclick="searchmap()" href="java script:void(null)"><img src="img4" alt=" " /></a><div id="searchresult">Click image/map to find Pokemon</div></body></html>

pokemon.js

// JavaScript Documentvar countthis=0;var xmlhttp;function searchmap(){xmlhttp=GetXmlHttpObject();if (xmlhttp==null)  {  alert ("Browser does not support HTTP Request");  return;  }var url="responsexml.php";url=url+"?q="+countthis;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);}function stateChanged(){if (xmlhttp.readyState==4)  {    var xmlDoc=xmlhttp.responseXML;        if(xmlDoc.getElementsByTagName("count")[0].childNodes[0].nodeValue != -1)        {        showthis = xmlDoc.getElementsByTagName("count")[0].childNodes[0].nodeValue;        countthis=showthis;        }    else        {        showthis="";        }        document.getElementById("searchresult").innerHTML = xmlDoc.getElementsByTagName("searchtext")[0].childNodes[0].nodeValue+showthis;    }}function GetXmlHttpObject(){if (window.XMLHttpRequest)  {  // code for IE7+, Firefox, Chrome, Opera, Safari  return new XMLHttpRequest();  }if (window.ActiveXObject)  {  // code for IE6, IE5  return new ActiveXObject("Microsoft.XMLHTTP");  }return null;}

responsexml.php

<?phpheader("Content-type: text/xml");$q=$_REQUEST["q"];srand(time());$random = (rand()%9)+1;if ($random < 5){$response='You found an Pokemon';$q++;$store=$q;}else{$response='Bad Luck no Pokemon here';$store=-1;}echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";echo"<pokemonsearch>";echo "<searchtext>" . $response . "</searchtext>";echo "<count>" . $store . "</count>";echo "</pokemonsearch>";?>

It's nice of you to do it for him, but he's not going to learn anything like that, and further on he will be requiring the programming knowledge to continue with this project he's doing. He will continue coming back asking questions if he does not learn.To make things simpler, faster, and not have to rely on HTTP requests, you can perform the random detection with java script:
var X = Math.random();if(X <= 0.1) {  alert("You found something");} else {  alert("Better luck next time");}

If you do use PHP, mt_rand() is much better than rand(), and it is recommended by the developers of the PHP language: http://php.net/mt_rand

Many random number generators of older libcs have dubious or unknown characteristics and are slow. By default, PHP uses the libc random number generator with the rand() function. The mt_rand() function is a drop-in replacement for this. It uses a random number generator with known characteristics using the » Mersenne Twister, which will produce random numbers four times faster than what the average libc rand() provides.
$x = mt_rand(1,10);if($x == 10) {  echo "You found something";} else {  echo "Better luck next time";}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

the reason i used php in this example, was in the furture e4 may want to store information of what was selected, and number assigned to it, the email sent about this selection, different map details maybe within a database, so this would be the perfect way to gather this information, and process it. sorry again, but i do like to think ahead, and again, cover all options. this is just simple example i put together to give e4 an idea, on how to achieve the effect he requires. I don't consider i have 'done it for him' as i think it will still require a lot of work to produce the final working map that e4 requires, and to do so, he will have to break it down to understand how it works.thanks for mt_rand generator note, good to have something useful from you for a change.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I am a provider of a considerable amount of useful information. However, my priorities lie in having people learn to be able to do things on their own, rather than getting them to finish their projects.If he is not able to perform the task with the provided information in Javascript, it would not be helpful to give him a more complex PHP script. As he would not understand how it works (and you did not explain how it worked either) and he would just copy the code and use it as it is.The only way for somebody to learn is to take one step at a time: the first step in this case is to learn how to apply random numbers to a program to make it give some random information.

Link to comment
Share on other sites
  • 2 weeks later...
e4games Member

e4games

Posted
  • Author
Posted

thanks for the help...going by the code ingolme put my only question is how to you get it so when you click on the submit button it then displays the code about finding a pokemon or not?This is the code I got so far...am I at least close to the answer?

<img border="0" src="http://i678.photobucket.com/albums/vv150/pokemon_legacy/MoonMountain.jpg" width="304" height="228" /></br><input type="submit" name="search" value="search"><php$x = mt_rand(1,10);if($x == 10) {  echo "You found something";} else {  echo "Better luck next time";}?>

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted
thanks for the help...going by the code ingolme put my only question is how to you get it so when you click on the submit button it then displays the code about finding a pokemon or not?This is the code I got so far...am I at least close to the answer?
<img border="0" src="http://i678.photobucket.com/albums/vv150/pokemon_legacy/MoonMountain.jpg" width="304" height="228" /></br><input type="submit" name="search" value="search"><php$x = mt_rand(1,10);if($x == 10) {  echo "You found something";} else {  echo "Better luck next time";}?>

PHP runs as soon as the page loads, it does not handle events or anything of the sort. When a page loads, all the PHP is executed, independently of where in the page it is. Have you read the PHP tutorial?If you put the input element in a <form>, set the action attribute to an empty string, and set the method to "post", then the form will send data to the page and you can tell if the page was opened normally or if the was activated by the submit button.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

So clicking the image, is no longer needed now? instead a submit buttonremove the onclick="searchmap()" from all anchor link images from original code<a onclick="searchmap()" href="java script:void(null)"><img src="img4" alt=" " /></a>and insert it in a button input<input type="button" name="search" value="search" onclick="searchmap()" />

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...