How to make this code more flexible

Discussion in 'JavaScript' started by Luke Watson, Nov 12, 2010.

0
  1. #1
    Hey i've been developing a javascript test and am stuck on one little thing. There is a question that asks for "What does php stand for?" and the answer is "PHP:Hypertext Preprocessor" but it also stands for "Parsing Hypertext Preprocessor".

    My question is how would i code it so that it allows both those answers and the user can type the answer in both lower and uppercase. Heres the code,

    HTML Code:

    
<div id="divqu3"> 
  3. What does PHP stand for?
  <br /> 
  <input type="text" name="txtQu3"> 
  </div>
    Code (markup):
    Javascript:

    
//mark question 3
    if (document.frmTest.txtQu3.value == "PHP: Hypertext Preprocessor")
    {
    yourmark += 1;
    }
    Code (markup):
    Thanks for any help.
     
    Luke Watson, Nov 12, 2010 IP
  2. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #2 
    
//mark question 3
    if (document.frmTest.txtQu3.value.toLowerCase() == "php: hypertext preprocessor" || document.frmTest.txtQu3.value.toLowerCase() ==  "parsing hypertext preprocessor")
    {
    yourmark += 1;
    }
    Code (markup):
     
    camjohnson95, Nov 12, 2010 IP
  3. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #3
    you are much better off placing the questions and answers in an array and running a loop to print the questions and calculate scores..
     
    camjohnson95, Nov 12, 2010 IP
  4. tvoodoo

    tvoodoo Active Member

    Messages:
    239
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    53
    #4
    Here you go...
    Just a small explaination :
    qaa.push(new Array('Question ?' , 'Answer'));
    Keep on doing so for all your question + answer combinations.

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Tanatos" />

	<title>Untitled 1</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    var qaa = new Array();
    qaa.push(new Array('Question ?' , 'Answer'));
    qaa.push(new Array('Question2 ?' , 'Answer 2'));
    
    function check()
    {
        for(var i=0; i < qaa.length ; i++)
        {
            if($('#'+i.toString()).val().toLowerCase() != qaa[i][1].toLowerCase())
            {
                $('#'+i).css({'background' : '#ea9898','border' : '1px solid #ff0303'});    
            } else {
                $('#'+i).css({'background' : '#c4ffb0','border' : '1px solid #7bcb60'});
            }
        }
        return false;    
    }
    
    $(document).ready(function()
	{
	   $('#form').append('<table>');
	   for(var i = 0; i < qaa.length; i++)
       {
        $('#form').append('<tr><th align="left">'+qaa[i][0]+'</th><td align="left"><input type="input" id="'+i+'" value="" /></td></tr>'); 
       }
       $('#form').append('<tr><td colspan="2" align="right"><input type="submit" value="Check" /></td></tr>');
       $('#form').append('</table>');   
    });
    </script>
</head>

<body>

<form action="#" method="POST" onsubmit="return check();" id="form"></form>

</body>
</html>
    HTML:
     
    tvoodoo, Nov 29, 2010 IP