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
    Jun 2011
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Knowledge Check using Javascript and HTML Form

    I am just starting out using Javascript and created a simple knowledge check to give a learner feedback on a question. It will allow the learner to quickly check if they have mastered a topic. The problem that I am having is that if I put two of these knowledge checks on the same webpage than it just posts the same answer when the submit button is clicked. What I have been doing is just pasting the code below twice on the page and changing the question and answer out. When I click "Check Answer" it is the same answer for both questions. Here is my code:
    Code:
    <fieldset>
    <legend><strong>Question 1</strong></legend>
    <SCRIPT LANGUAGE="JavaScript">
    function readText (form) {
        TestVar =form.inputbox.value;
        alert ("You typed: " + TestVar);
    }
    function writeText (form) {
        form.inputbox.value = "The wavelength of the blue light scatters better than the rest, predominates over the other colors in the light spectrum, and makes the sky appear blue to us."
    }
    </SCRIPT>
    <form name="myform" action="" method="GET">
        <label for="question">Why is the Sky Blue?</label><br><br>
        <input name="inputbox" value="" type="text" style="width: 287px; height: 112px">
        <p>
        <input id="question" value="Check Answer" onclick="writeText(this.form)" type="button">
        </p>
    </form>
    </fieldset>
    Any help would be much appreciated in terms of direction.

    Thank you.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    If you simply copy/paste that same code twice, then you will have *TWO* functions named readText and *TWO* named writeText.

    JavaScript will *ignore* all functions of the same name on a given page except the last one.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You cannot have duplicate function or variable names in scripts on the same page as the second will over-write the first. The solution is to rename all the functions and variables in the second script, to (say) readText2 and so on.

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.


    Quizmaster: In which English county is the Cornish language spoken?
    Contestant: Devon.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    john8510 (06-24-2011)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Also, id's should be UNIQUE on a page.

    Your <label for="question"> almost surely won't work right, as it won't know which id="question" it is supposed to refer to.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    It would probably make more sense to scrap that code and start over.

    Unless you have a good reason, you should stick to one <form> per page.

    So, for example:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var answers = [
        "--not used--",
        "Because it isn't green",
        "Because it's not dry",
        "Because I said so"
        ];
    function showAnswer(which)
    {
         document.forms[0]["question"+which].value = answers[which];
    }
    </script>
    </head>
    <body>
    <form>
    1) Why is the sky blue? <input name="question1" size="100"/><br/>
        <input type="button" value="get answer" onclick="showAnswer(1);"/>
    <hr/>
    2) Why is water wet? <input name="question2" size="100"/><br/>
        <input type="button" value="get answer" onclick="showAnswer(2);"/>
    <hr/>
    3) Why do I have to eat spinach? <input name="question3" size="100"/><br/>
        <input type="button" value="get answer" onclick="showAnswer(3);"/>
    </form>
    </body>
    </html>

  • Users who have thanked Old Pedant for this post:

    john8510 (07-08-2011)

  • #6
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Old Pedant,

    This is very helpful and an elegant coding solution using an array.

    One of the reasons I was using multiple forms on a page is that I will have a body of text, maybe some graphics and than a question to check to see if the user is understanding the content for that page. So multiple questions would be embedded in a mixture of text and media.

    What is the downside of having multiple forms on a page?

    Also I was using the nice code you provided and if my answer is longer than the textbox is cut off and you have to scroll over. I tried using \n + or \r + to create a break or carriage return in the answer but it still cuts off in the box. I don't really want set the textbox to a really large width.

    Any ideas on how to create a break in the text?

    Thanks
    Last edited by john8510; 07-08-2011 at 09:35 PM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    The best way is to not try to write the answer back into the <input> field.

    Instead, write it into a separate <span> or <div>.

    Maybe this:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var answers = [
        "--not used--",
        "Because it isn't green",
        "Because it's not dry",
        "Because I said so"
        ];
    function showAnswer(which)
    {
         document.getElementById("answer"+which).innerHTML = answers[which];
    }
    </script>
    </head>
    <body>
    <form>
    1) Why is the sky blue? <input name="question1" size="100"/><br/>
        <input type="button" value="get answer" onclick="showAnswer(1);"/>
        <span id="answer1"></span>
    <hr/>
    2) Why is water wet? <input name="question2" size="100"/><br/>
        <input type="button" value="get answer" onclick="showAnswer(2);"/>
        <span id="answer2"></span>
    <hr/>
    3) Why do I have to eat spinach? <input name="question3" size="100"/><br/>
        <input type="button" value="get answer" onclick="showAnswer(3);"/>
        <span id="answer3"></span>
    </form>
    </body>
    </html>
    You could then use CSS to style those <span>s so that they won't go over a certain size. And the text could wrap in them automatically, etc., etc., etc.

    ***********

    One big reason not to use multiple forms: The day will come when you realize that a quiz written in JavaScript is useless. The user simply needs to do VIEW==>>SOURCE to see the code for the page and presto, he/she knows all the answers. And of course quizzes are not particularly important in the internet world, in any case. Much more important are such things as shopping carts and other apps that interact with a server-side database. And then you need to understand that you can only send the results of *ONE* <form> from the browser to the server. All other <form>s on the page will get ignored. So you can't send multiple answers in multiple forms to the server. So, in short, multiple forms can be used in JavaScript, but not in much of anything else.

    Anyway, nothing you stated as part of your desired app seems to me to have any relelvance to whether you use one <form> or many, so why not just use one and keep it simple? And incidentally pave the way for moving on to better things than JavaScript.

  • Users who have thanked Old Pedant for this post:

    john8510 (07-11-2011)


  •  

    Posting Permissions

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