javascript quiz on the same page

klaibert26 · 08-09-2008, 04:05 AM

Hi

i am trying to develop javascript quiz like in w3schools.com
i want do do it in the same page.
how can i loop over the arrays to go to next question?
can anyone help?

this is my code

HTML Code:

<!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" >

<head>
<title></title>
<!--<link rel="stylesheet" type="text/css" href="style.css" />-->

<script type="text/javascript">

//define an Array object of questions.
var questionsArray = new Array(10); 
questionsArray[0]="1. 	Inside which HTML element do we put the JavaScript?";
questionsArray[1]="2. 	What is the correct JavaScript syntax to write \"Hello World\"?";
questionsArray[2]="3. 	Where is the correct place to insert a JavaScript?";
questionsArray[3]="4. 	What is the correct syntax for referring to an external script called \"xxx.js\"?";
questionsArray[4]="5. 	How does a \"for\" loop start?";
questionsArray[5]="6. 	How do you write \"Hello World\" in an alert box?";
questionsArray[6]="7. 	How do you create a function?";
questionsArray[7]="8. 	How do you call a function named \"myFunction\"?";
questionsArray[8]="9. 	How do you write a conditional statement for executing some statements only if \"i\" is equal to 5?";
questionsArray[9]="10. 	How do you write a conditional statement for executing some statements only if \"i\" is NOT equal to 5?";

//define an Array object of answers.
var answersArray=new Array( 
							
							//answers group 1
							"<scripting>","<script>",
							"<javascript>","<js>",
						    
							//answers group 2
							"response.write(\"Hello World\")","\"Hello World\"",
							"(\"Hello World\")","document.write(\"Hello World\")",
							
							//answers group 3
							"The <body> section","The <head> section",
							"Both the <head> section and the <body> section are correct","The <title> section",
							
							//answers group 4
							"<script name=\"xxx.js\">","<script src=\"xxx.js\">",
							"<script href=\"xxx.js\">","<script link=\"xxx.js\">",
							
							//answers group 5
							"for (i = 0; i <= 5; i++)","for (i <= 5; i++)",
							"for i = 1 to 5","for (i = 0; i <= 5)",
							
							//answers group 6
							"msgBox(\"Hello World\")","alertBox=\"Hello World\"",
							"alert(\"Hello World\")","alertBox(\"Hello World\")",
							
							//answers group 7
							"function=myFunction()","function myFunction()",
							"function:myFunction()","function( myFunction() )",
							
							//answers group 8
							"call myFunction()","myFunction()",
							"call function myFunction","call myFunction",
							
							//answers group 9
							"if i==5 then","if (i==5)",
							"if i=5 then","if i=5",
							
							//answers group 10
							"if <> 5","if (i != 5)",
							"if (i <> 5)","if =! 5 then"
				
						   ); 


//define an Array object of solutions.
var solutionsArray=new Array("2","3","2","3","2","3","2","3","2","1"); 
</script>
</head>

<body onload="putAns()">


<div class="wrapper">
	<div class="question">
	<p>
    
 	<script type="text/javascript">

		document.write(questionsArray[0]);
	
	</script>
    
    <script type="text/javascript">
	function putAns(){
	



	for (i=1;i<=4;i++)
		{
			document.getElementById("option"+i).value = answersArray[i-1];
			
		}

	}
	function checkAnswer()
	{
		var radioOption = document.getElementById("radOption").value;
		putAns();
	}
	</script>
    
    

	</p>
	</div>
    <form name="frm" action="task1.html" method="get" target="_top">
	<div class="answer1"><input name="radOption" type="radio" value="1" id="radOption" />
    				<input id="option1" name="option1" class="option"  value="" readonly="readonly" type="text" />
                  
                    
    					
                        
  </div>
    <br />

  <div class="answer2"><input name="radOption" type="radio" value="2" id="radOption" />
    					<input id="option2" name="option2" class="option" value="" readonly="readonly" type="text" /> 
  </div>
    <br />

  <div class="answer3"><input name="radOption" type="radio" value="3" id="radOption" />
    					<input id="option3" name="option3" class="option" value="" readonly="readonly" type="text" />  
  </div>
    <br />

  <div class="answer4"><input name="radOption" type="radio" value="4" id="radOption" />
  						<input id="option4" name="option4" class="option" value="" readonly="readonly" type="text" /> 
    					 
  </div>
    <br />
    
    <div class="next">
    <input type="image" onclick="checkAnswer()" 
    src="http://gin.univ-mrs.fr/GINsim/doc/2.2/html/images/next.png" alt="Next" />
 	</div>
    </form>

</div>
<div class="footer">
<p>
    <a  title="Check the validity of this site’s XHTML" href="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a></p>
</div>
</body>
</html>