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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript Math tables help

    Dear Forum.

    My name is Draakeragon from the Netherlands.

    I'm trying to make a website that shows the tables i'm making the test.

    I need to track the score. i've made a few lines of code but it won't show me how many points Someone has made. The last function won't work.

    The code is in Dutch. the only problem is with the last function so it won't maater much. if you try the first question the prompt will count your good awnsers, but the last function won't show it to me.

    Could anyone help me with this problem?

    (The code)

    Code:
     <html>
    <head>
    <script language="JavaScript">
    
    var score=1;
    
    function test1(form) {
      if (form.text1.value == "1")
        alert("Je antwoord is goed!" + score++);
    	
    	
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test2(form) {
      if (form.text2.value == "2")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test3(form) {
      if (form.text3.value == "3")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test4(form) {
      if (form.text4.value == "4")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test5(form) {
      if (form.text5.value == "5")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test6(form) {
      if (form.text6.value == "6")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test7(form) {
      if (form.text7.value == "7")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test8(form) {
      if (form.text8.value == "8")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test9(form) {
      if (form.text9.value == "9")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function test10(form) {
      if (form.text10.value == "10")
        alert("Je antwoord is goed!");
      else { 
       alert("Je antwoord is fout!");
      }
    }
    
    function cijfer(form)
    {
    return score;
    }
    
    // -->
    </script>
    </head>
    
    <body>
    <form name="tafel van 1">
    1 X 1 = ?:<br>
    <input type="text" name="text1">
    <input type="button" name="button1" value="Antwoord"
    onClick="test1(this.form)">
    <P>
    1 X 2 = ?:<br>
    <input type="text" name="text2">
    <input type="button" name="button1" value="Antwoord"
    onClick="test2(this.form)">
    <P>
    1 X 3 = ?:<br>
    <input type="text" name="text3">
    <input type="button" name="button3" value="Antwoord"
    onClick="test3(this.form)">
    <P>
    1 X 4 = ?:<br>
    <input type="text" name="text4">
    <input type="button" name="button4" value="Antwoord"
    onClick="test4(this.form)">
    <P>
    1 X 5 = ?:<br>
    <input type="text" name="text5">
    <input type="button" name="button5" value="Antwoord"
    onClick="test5(this.form)">
    <P>
    1 X 6 = ?:<br>
    <input type="text" name="text6">
    <input type="button" name="button6" value="Antwoord"
    onClick="test6(this.form)">
    <P>
    1 X 7 = ?:<br>
    <input type="text" name="text7">
    <input type="button" name="button7" value="Antwoord"
    onClick="test7(this.form)">
    <P>
    1 X 8 = ?:<br>
    <input type="text" name="text8">
    <input type="button" name="button8" value="Antwoord"
    onClick="test8(this.form)">
    <P>
    1 X 9 = ?:<br>
    <input type="text" name="text9">
    <input type="button" name="button9" value="Antwoord"
    onClick="test9(this.form)">
    <P>
    1 X 10 = ?:<br>
     <input type="text" name="text10">
    <input type="button" name="button10" value="Antwoord"
    onClick="test10(this.form)">
    <p>
    <input type="button" name="cijfer" value="Klik hier voor je score!"
    onClick="cijfer">
    
    
    </body>
    </html>
    (If anyone finds a solution please post it on this thread.)

    Thanks in advance. Draakeragon

  • #2
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    An unique test function would probably better ?
    Code:
    function test(form, number) {
      if (form["text"+number].value == number){
    	 score[number]=1;
        alert("Je antwoord is goed!");}
      else {
    	score[number]=0;
    	alert("Je antwoord is fout!");
      }
    }
    // With something like this to call the test
    <input type="button" name="button10" value="Antwoord"
    onclick="test(this.form,this.name.substr(6))">
    We remove 6 characters to the name of input type button to get the number...

    To show a score. You have only to define a global object and to update its value with each test
    Code:
    var score={};
    
    function test(form, number) {
      if (form["text"+number].value == number){
    	 score[number]=1;
        alert("Je antwoord is goed!");}
      else {
    	score[number]=0;
    	alert("Je antwoord is fout!");
      }
    }
    
    function cijfer(){var i,antWrdNmb=0,goedAnt=0;
    	for (i in score) {antWrdNmb++;
    		if (score[i]) goedAnt++
    	}
    	alert("Number of antwoord : "+antWrdNmb+"\nNumber of goed antwoord : "+goedAnt)
    }
    The name cijfer of the last input is to remove (or to update). Its the same of the function !

    Its a little boring to answer to this test...

    Something more interesting is, for example, to find n numbers taken from E={1,2,3,4... m} (obviously n<m).
    You know n and m, the computer choose randomly n numbers S (a subset of E) and give you the numbers of good elements (elements of S) which each proposal on form of subsets of E...

    14 questions are enough to find 6 numbers from 49 !
    Last edited by 007julien; 01-07-2014 at 06:13 PM.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    I would imagine that the questions and answers are a little more sophisticated than those shown, and may require text answers rather than numbers.

    To show a score. You have only to define a global variable and update its value with each test. You seem to have done this for the first question.

    alerts are considered obsolete and should be used only for testing. Use DOM methods to display a message to your users.

    <span id = "goed" style="display:none">Je antwoord is goed!"</span>
    <span id = "fout" style="display:none">Je antwoord is fout!"</span>

    and change the style.display to inline as appropriate.
    document.getElementById("goed").style.display="inline";
    or
    document.getElementById("fout").style.display="inline";

    Erase the message with document.getElementById("goed").style.display="none"; before each answer is evaluated.


    You can show the score continuously, not just at the end of the quiz.

    Your score is <span id = "score">0</span>

    then after each question

    document.getElementById("score").innerHTML = totalScore;


    Be aware that Javascript quizzes have the insuperable problem that anyone can see the correct answers simply with View Source.
    Last edited by Philip M; 01-07-2014 at 05:54 PM.

    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.

  • #4
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    Be aware that Javascript quizzes have the insuperable problem that anyone can see the correct answers simply with View Source.
    No ! You can write a javascript which calculate the hundredth prime number ! Reading the script does not necessarily give you the answer...

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by 007julien View Post
    No ! You can write a javascript which calculate the hundredth prime number ! Reading the script does not necessarily give you the answer...

    Of course reading the script will reveal the answer if that answer is spelled out in the script. And if the correct answer to the question "What is the 100th prime number?" is 541, all the user has to do is to run the script which made that calculation.

    Nothing in Javascript is secure.

    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.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Alternative solution...

    Code:
    <html>
    <head>
    </head>
    
    <body>
    <form name="tafel van 1">
    <pre id="mathQuiz"></pre>
    
    <script type="text/javascript">
    var score=0;
    var answers = [];
    
    function checkAns(info) {
      var X = info.id.replace(/\D+/g,'');
      var ids = 'txt'+X;
      var msg;
      if (answers[X] == document.getElementById(ids).value) { msg = "Je antwoord is goed!"; score++; }
                                                       else { msg = "Je antwoord is fout!"; }
      alert(msg+'\n\nScore: '+cijfer());
    }
    
    function cijfer() { return score; }
    
    function createQuiz(N) {
      var str = '';
      var n2;
      score = 0;
    
      for (var i=0; i<10; i++) {
        n2 = i+1;
        str += N + ' X ' + n2 + ' = ? ';  answers.push(N*n2);
    /*
    // could also change quiz with something like this...
        str += N+' + '+n2+ ' = ? ';  answers.push(N+n2);
        str += N+' - '+n2+ ' = ? ';  answers.push(N-n2);
        str += N+' / '+n2+ ' = ? ';  answers.push((N/n2).toFixed(2));  // precision to 2 decimals
    */
    
        str += '<input type="text" id="txt'+i+'" size="6" value="">';
        str += '<input type="button" id="btn'+i+'" value="Antwoord" onClick="checkAns(this)">';
        str += '<p>';
      }
      document.getElementById('mathQuiz').innerHTML = str;
    }
    
    window.onload = function() {
      var n1 = 1;    // alter this for different multipliers
      createQuiz(n1);  
    }
    </script>
    <p>
    <input type="button" value="Klik hier voor je score!" onClick="alert('Score: '+cijfer())">
    </form>
    
    </body>
    </html>
    I don't like the way you determine the final score, but I'll leave that part alone until you ask.

    Some advantages to above script:
    1. Answers are not directly saved, they are calculated dynamically.
    Therefore user will need to understand the operation.
    2. You could change initial multiplier very easily (see onload function)
    3. You could easily change the operator from multiply to +, - or even / (with fixed accuracy)

    Post back if you have questions about the design.
    Keep in mind that I don't speak the language of the quiz.
    Last edited by jmrker; 01-07-2014 at 06:54 PM.


  •  

    Posting Permissions

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