Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving the Curser from Text Box to Text Box Automatically When a Condition is Met

    Hello there, this is my first post on this forum.

    I have learned a good bit of PHP and have implemented it for use in my work as a math tutor.

    My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper.

    I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met.

    For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct.

    The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically.

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function nextbox(fldobj,nbox)
    {
    if(fldobj.value.length>3)
    {document.forms[0].elements[nbox].focus()}
    }
    </SCRIPT>
    </head>
    <body onLoad="document.myform.txt1.focus()">
    <CENTER>
    <FORM NAME="myform">
    <INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">
    Thank you for the help.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Something like this?

    BTW, it is a cursor, not a curser!

    Code:
    What is 6+7? <input type = "text" id = "Q1" maxlength = "2" onkeyup = "goNext(this,2,13)">
    What is 2+9? <input type = "text" id = "Q2" maxlength = "2" onkeyup = "goNext(this,3,11)">
    What is 8+9? <input type = "text" id = "Q3" maxlength = "2" onkeyup = "goNext(this,4,17)">
    
    <script type = "text/javascript">
    function goNext(qu, nxt, ans) {
    nxt = "Q" + nxt;
    if (qu.value == ans) {
    document.getElementById(nxt).focus();
    }
    }
    </script>
    Of course, as with all Javascript quizzes, the user can see the answer by using "View Source".

    My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box
    Wow! How idle can you get???


    Quizmaster: A biped is a creature that walks on how many feet?
    Contestant: Five.
    Last edited by Philip M; 07-27-2010 at 07:18 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Phillip.

    If you could, would you mind critizing my analysis of the script, as I have to implement it into a PHP page that randomizes questions:

    ....onkeyup = "goNext(this,4,17)">
    //What does this do?

    <script type = "text/javascript">
    function goNext(qu, nxt, ans) {
    // names the function with three arguements: qu, nxt, ans
    nxt = "Q" + nxt;
    //Where is Q comming from? Not the Q3/Q2/Q1 in the input box?
    if (qu.value == ans) {
    //Does the arguement "this" in the text book grab the value?
    //and does qu.value find the value and comapre it to ans?
    document.getElementById(nxt).focus();
    }
    }
    </script>



    No no, haha, the kids are hard workers but their fingers/hands are too small, plus having to go back and forth between the numbers and tab while simutanelously doing math isn't going to work.


    Thanks again.

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are AWSOME Phillip my script is working flawlessly...

    Thank you!

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    If you could, would you mind critizing my analysis of the script, as I have to implement it into a PHP page that randomizes questions:

    ....onkeyup = "goNext(this,4,17)">
    //What does this do? Each time a key is released (up) the function is called, and three parameters are passed to it, namely this (meaning the object which is the input box), the next question number to go to if the answer is correct, and the answer to the current question.

    <script type = "text/javascript">
    function goNext(qu, nxt, ans) {
    // names the function with three arguments: qu, nxt, ans
    nxt = "Q" + nxt;
    //Where is Q coming from? Not the Q3/Q2/Q1 in the input box? Yes. That is the id of the next question box, Q plus (concatenatated) with the number nxt. Example: Q4
    if (qu.value == ans) {
    //Does the arguement "this" in the text book grab the value? Yes. "this" is the object passed to the function as qu, and qu.value is the value of that object.
    //and does qu.value find the value and compare it to ans? Yes.
    document.getElementById(nxt).focus();
    }
    }
    </script>



    OK?

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yep, got it.

    It was *a lot* easier to implement into my PHP then I would have expected.

    While I got you here if you come back to this, my kids also tell me that the process of taking their eyes off the computer and going to the number bar on top of the keyboard is distracting (especially with labtops that don't have the side number pad).

    If I wanted to put a number pad on the screen that would insert the numbers into the selected textbox by having the user click on the number, how would I want to do this?

    I'm hoping that PHP would be able to but doubt that, it looks to me like Java/flash would be better for that. Am I right, or could PHP (or even Javascript) be able to do that?
    Last edited by mkmoisen; 07-27-2010 at 10:20 PM.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Like this:-

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    document.onkeydown = function(ev) {	
    var key;
    ev = ev || event;
    key = ev.keyCode;
    if (key >8 && key <=255) {
    alert ("Keyboard keys are disabled");
    return false;
    }
    }
    
    var answers = [0, 13, 11, 17, 4, 6];  // the answers to the questions (Question 0 does not exist)
    // to stop the user seeing the answers with View Source, place this in an external .js.file.
    var counter = 1;
    var correct = 0;
    
    function num(x) {
    var cellID = "Q" + counter;
    var y = document.getElementById(cellID).value += x;
    if (y.length > 2) {
    y = y.substring(0,2);  // 2 digits max
    }
    document.getElementById(cellID).value = y;
    if (y == answers[counter]) {
    alert ("Correct Answer!");
    correct ++;
    var message = "So far you have answered " + correct + " questions correctly";
    document.getElementById("score").innerHTML = message;
    document.getElementById(cellID).readOnly=true;
    counter ++;
    if (counter <answers.length) {
    var nxt = "Q" + counter;
    document.getElementById(nxt).focus();
    }
    }
    }
    
    function init() {
    document.getElementById("Q1").focus();  // set initial focus
    }
    </script>
    
    </head>
    
    <body onload = "init()">
    <p align="center"><center>
    
    What is 6+7? <input type = "text" id = "Q1" size = "2" maxlength = "2">
    What is 2+9? <input type = "text" id = "Q2" size = "2" maxlength = "2">
    What is 8+9? <input type = "text" id = "Q3" size = "2" maxlength = "2">
    What is 8-4? <input type = "text" id = "Q4" size = "2" maxlength = "2">
    What is 2*3? <input type = "text" id = "Q5" size = "2" maxlength = "2">
    <table>
    
    <br><table width="45" height="65" cellspacing="2" cellpadding="5" border="2" bordercolor="#000000">
    
    <tr>
    <td><input type="button" Value="  7  "  onclick="num(7)"></td>  
    <td><input type="button" Value="  8  "  onclick="num(8)"></td>  
    <td><input type="button" Value="  9  "  onclick="num(9)"></td>  
    </tr>
    <tr>
    <td><input type="button" value="  1  "  onclick="num(1)"></td>  
    <td><input type="button" value="  2  "  onclick="num(2)"></td> 
    <td><input type="button" value="  3  "  onclick="num(3)"></td> 
    </tr>
    <tr>
    <td><input type="button" Value="  4  "  onclick="num(4)"></td>  
    <td><input type="button" Value="  5  "  onclick="num(5)"></td> 
    <td><input type="button" Value="  6  "  onclick="num(6)"></td> 
    </tr>
    <tr>
    <td><input type="button" Value="  7  "  onclick="num(7)"></td>  
    <td><input type="button" Value="  8  "  onclick="num(8)"></td>  
    <td><input type="button" Value="  9  "  onclick="num(9)"></td>  
    </tr>
    <tr>
    <td></td>
    <td><input type="button" Value="  0  "  onclick="num(0)"></td>  
    </tr>
    </table>
    <br><br>
    <div id = "score"></div>
    
    </body>
    </html>
    The student cannot proceed to the next question (using the screen keypad) until he has answered the current question correctly. As a bonus I have disabled the keyboard keys, but in any case only answers entered via the screen keypad score.
    Last edited by Philip M; 07-28-2010 at 09:38 AM.


  •  

    Tags for this Thread

    Posting Permissions

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