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

    Language Flash Cards

    Hello!

    I am making some language flash cards to practice javascript. The program is supposed to display a random word from an array. Then you type in the answer and hit "Answer". The program SHOULD evaluate if it's right or wrong and stop until you hit the "Next" button. The answer button turns into the next button.

    I have not yet written any code to tell it to move to the next question yet.

    Issue 1: When the code runs it doesn't evaluate, it just says Wrong. When it evaluates the answer, is the variable getarray making a new random array? Why does the right answer not evaluate true here?

    Issue 2: The code needs to stop after the answer is submitted. When it runs it immediately goes to the next question. What's the standard way of making the program wait until the Next button is hit?

    Do you know what the solution is?



    Code:
    <html>
    <body onload="start()">
    <script>
    <!--
    
    //array of chinese,pinyin,english
    
    var words = [["ping guo","apple"],["hong","red"],["liu","green"]];
    
    //get the first element in the array [0]
    var getarray = Math.floor(Math.random() * words.length);
    var zhongwen = words[getarray][0];
    function start()
    {
    document.getElementById("p1").innerHTML= zhongwen;
    
    //check answer 
    document.getElementById("sub").onclick = function(){checkAnswer()};
    
    function checkAnswer()
    {
    //need to wait until next is clicked....
    var userAnswer = document.getElementById("answer");
    if ((words[getarray][1])== userAnswer)
    {
    document.getElementById("p1").innerHTML="Correct!";
    document.getElementById("sub").value = "Next";
    }
    else
    {
    document.getElementById("p1").innerHTML="Wrong!";
    document.getElementById("sub").value = "Next";
    }
    
    }
    
    }
    
    -->
    </script>
    
    
    <p id="p1">blank</p>
    <form>
    <input type="text" id="answer">
    <input type="submit" id="sub" value="Answer">
    </form>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,712
    Thanks
    25
    Thanked 660 Times in 659 Posts
    You seem to be trying to use listeners on things. I use onclick in a button so you might not like this. But give it a try and if you have questions about what I did ask here.
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body onload="start()">
    <p id="p1">blank</p>
    <input type="text" id="answer">
    <input type="button" id="sub" value="Answer" onclick="checkAnswer();">
    
    <script>
    //array of chinese,pinyin,english
    var words = [["ping guo","apple"],["hong","red"],["liu","green"]];
    
    function start(){
    	getarray = Math.floor(Math.random() * words.length);
    	document.getElementById("p1").innerHTML= words[getarray][0];
    	document.getElementById("answer").value= "";
    	document.getElementById("sub").value = "Answer";
    	document.getElementById("sub").setAttribute("onclick","checkAnswer(getarray);");
    }
    
    function checkAnswer(getarray){
    	var userAnswer = document.getElementById("answer").value;
    	if ((words[getarray][1])== userAnswer){
    		document.getElementById("p1").innerHTML="Correct!";
    	}else{
    		document.getElementById("p1").innerHTML="Wrong!";
    	}
    	document.getElementById("sub").value = "Next";
    	document.getElementById("sub").setAttribute("onclick","start();");
    }
    
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked perfectly! Thank you.

    I am going to add some card graphics to this and a database of words and post it back up!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Rather than selecting a word at random from an array which can result in the same word being presented twice (or more) in succession, it would be better to shuffle the array at the outset and then present the words in sequential order.

    Be aware that a submit button does what it says on the tin - it submits a form and refreshes the page (thus wiping out your answers).

    I would make the user's answers case-insensitive with

    var userAnswer = document.getElementById("answer").value.toLowerCase();

    As it stands sunfighter's code does not work in IE. I suggest change

    document.getElementById("sub").setAttribute("onclick","checkAnswer(getarray);");
    to
    document.getElementById("sub").onclick= function() {checkAnswer(getarray)};

    and

    document.getElementById("sub").setAttribute("onclick","start();");
    to
    document.getElementById("sub").onclick = function() { start() }

    This works in every current browser, so setAttribute() is not required.
    Last edited by Philip M; 03-14-2014 at 10:29 AM.

    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.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Here is my (improved) version:-


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body onload="start()">
    <p id="p1">blank</p>
    <input type="text" id="answer">
    <input type="button" id="sub" value="Answer" onclick="checkAnswer();">
    
    <script type = "text/javascript">
    
    //array of chinese,pinyin,english
    var words = [["ping guo","apple"],["hong","red"],["liu","green"],["pengyou","friend"],["renren","everybody"],["yu","rain"]];
    
    var shuffle = function(v) {
    for (var j, x, i = n = v.length; i; j = parseInt(Math.random() * n), x = v[--i], v[i] = v[j], v[j] = x);  
    return v;
    }
    
    shuffle(words);
    //alert (words);  // see the shuffled array - for testing
    var len = words.length;
    var count = 0;
    
    function start() {
    	document.getElementById("p1").innerHTML= "What does this word mean?  " + words[count][0];
                  document.getElementById("p1").style.color = "black";
    	document.getElementById("answer").value = "";
    	document.getElementById("sub").value = "Answer";
                document.getElementById("sub").onclick = function() {checkAnswer(words)};
    }
    
    function checkAnswer(words){
    	var userAnswer = document.getElementById("answer").value.toLowerCase();
    	if ((words[count][1]) == userAnswer) {
    		document.getElementById("p1").innerHTML = "Correct!";
                                document.getElementById("p1").style.color = "green";
    
    	}
    	else {
    
    		document.getElementById("p1").innerHTML = "Wrong!";
                                document.getElementById("p1").style.color = "red";
    	}
    	document.getElementById("sub").value = "Next";
             	document.getElementById("sub").onclick = function() { start() }
    count ++;
    if (count>=len) {
    shuffle(words);  // reshuffle the array
    //alert (words);  // see the shuffled array - for testing
    count  = 0;
    }  // start again at first element
    }
    
    </script>
    </body>
    </html>
    You should be aware that as with any other Javascript quiz the user can see the answers simply by using View Source. Quizzes/tests are best carried out server-side.
    Last edited by Philip M; 03-15-2014 at 06:10 PM. Reason: Improved

    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.


  •  

    LinkBacks (?)

    1. 03-08-2014, 11:44 AM

    Posting Permissions

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