Jump to content

Help with expanding my script


theflash51

Recommended Posts

Hi There,

I know next to nothing about PHP and Javascript but I have been plugging away at this bit of code for a while now and I have it working, but I want to change the functionality a bit I was hoping someone here could help be figure that out.

 

let me post the code first then I'll explain it and tell you what I'd like to change:

 

    <HTML>
      <HEAD>
        <title>200,000 to 1</title>
             
        <script language=javascript>
          <!--
          function get_mouse_coord(ev)
          {
              var e = ev ? ev:window.event;             
              var s = e.clientX + ',' + e.clientY;
              document.forms.myForm.guess_x.value = e.clientX
              document.forms.myForm.guess_y.value = e.clientY
           }
          //-->
        </script>

      </HEAD>
      <body>
      <?php 
      if (!$_POST['submit'])
      {
  ?>
        <img STYLE="position:absolute; TOP:0px; LEFT:0px; CLEAR:left; FLOAT:left;" src="picture.gif" onclick="get_mouse_coord(event)"; name="picture">          
             
<form STYLE="position:absolute; TOP:410px; LEFT:25px;" name="myForm" action="compare2.php" method="post">
    	<input type="text" name="guess_x">
    	<input type="text" name="guess_y">
    	<input type="submit" value="submit" name="submit" >
</form>
<?php
}
else
{
$inputx = $_POST['guess_x'];
$inputy = $_POST['guess_y'];


if (($inputx == null) || ($inputy == null))
{
$message = 'You must pick your co-ordniates first, go to <a href="compare2.php">this page</a> to start';	
}
elseif (($inputx == '123') && ($inputy == '123'))
{
$message = 'Congratulations, you have found the right pixel';
}
else
{
$message = 'Sorry, your guess wasn\'t correct.  <a href="compare2.php">Try Again!</a>';
}

echo "$message";
}
?>
      </body>
    </HTML>

 

The code is simple enough, I have a 400 x 400 pixel picture, click anywhere on the picture and the co-ords of your mouse click are sent to two text boxes.  Click the submit button and the co-ords are compared to the "correct" co-ords.  If it's a match you get a congrats message, if it's not a match you get the try again message.  it all works but it's not very user friendly.

 

I'd like for the user to be able to have more than one guess before they have to click the submit button, I was thinking of having 10 sets of text boxes and each click the user makes fills the next set of co-ord boxes with their guess.  Then clicking the submit button would compare them all at once. I can't seem to get my head around how to do that.

 

Also, ideally I'd like to have a real-time depiction of the mouse co-ords in another box, I tried using onmousemotion but I couldn't get that to work either.

 

It would be a great help to me if someone could guide me through this,

 

Thanks in advance.

Link to comment
Share on other sites

Just have a variable set to 0..

 

<script type='text/javascript'>
var num_clicks;

num_clicks = 0;//global, only goes back to zero when page is refreshed

  function get_mouse_coord(ev)
          {
              var e = ev ? ev:window.event;             
              var s = e.clientX + ',' + e.clientY;
              var x = document.getElementsByTag('text_x');
              var y = document.getElementsByTag('text_y');
              document.forms.myForm.x[num_click].value = e.clientX
              document.forms.myForm.y[num_click].value = e.clientY
              num_clicks++;
           }
</script>

 

What I did was two things, first I created an array of all textboxes on the page (one for "x" and one for "y") that have this format:

 

<input type="text_x">
<input type="text_y">

 

Because HTML sets an input type as "text" to default, these will show up as text-boxes. Then, I will go down the list in each array with num_clicks and change that corresponding text-box as we go (and increment the num_clicks variable by 1). See if this makes sense for you.

Link to comment
Share on other sites

This part I do not understand how to do...

 

What I did was two things, first I created an array of all textboxes on the page (one for "x" and one for "y") that have this format:

 

Code:

 

<input type="text_x">
<input type="text_y">

 

 

Because HTML sets an input type as "text" to default, these will show up as text-boxes. Then, I will go down the list in each array with num_clicks and change that corresponding text-box as we go (and increment the num_clicks variable by 1). See if this makes sense for you.

Even with your additional explanation here..

 

Well, you basically take all those textboxes and define it as an array..

 

So the '0th' textbox text_x[0] will be the first "type="text_x" on the page. And so on.

 

I have tried to lay it out the way you explained but I really have no clue what to do.

Link to comment
Share on other sites

If you do something like this for your html...

 

#1: <input type="text_x">
<input type="text_y">
<br><br>
#2: <input type="text_x">
<input type="text_y">

 

Then for the array:

              var x = document.getElementsByTag('text_x');
              var y = document.getElementsByTag('text_y');

 

Then the array elements of the 0th index, 1st index, to the nth index contains all the textboxes on the page.

 

x[0] and y[0] are the first two textboxes for text_x and text_y

x[1] and y[1] are the next two textboxes for text_x and text_y

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.