Problem With Making A Multiple Choice Quiz For JavaScript! Cookies? Please Help! - Page 2

bullant · 05-17-2011, 03:03 AM

no problem

There are several ways you can highlight correct and incorrect answers.

In the modified demo below I set the background colour of the <p> containing the question to green if the answer is correct or red if it is incorrect.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            fieldset {
                width: 30%;
                border: 1px solid green;
            }
            fieldset label {
                display: block;
            }
        </style>
        <script type="text/javascript">
            var questions = [
                ['What colour is the sun?','1','Yellow','Green','Blue'],
                ['What is 2 x 3?','2',5,6,7,8]
            ];
            function checkAnswers(){
                var numCorrectAnswers = 0;
                for(var i=0; i < questions.length; i++){
                    var radBtnsO = document.getElementsByName('q'+(i+1));
                    disableRadButtons(radBtnsO);
                    if(getAnswer(radBtnsO) == questions[i][1]){
                        ++numCorrectAnswers;
                        radBtnsO[0].parentNode.parentNode.firstChild.style.backgroundColor = 'green';
                    } else {
                        radBtnsO[0].parentNode.parentNode.firstChild.style.backgroundColor = 'red';
                    }
                }
                alert('Total correct answers = '+numCorrectAnswers);
            }
            function getAnswer(radBtnsO){
                for(var i=0; i < radBtnsO.length; i++){
                    if(radBtnsO[i].checked){return radBtnsO[i].value;}
                }
                return false;
            }
            function disableRadButtons(radBtnsO){
                for(var i=0; i < radBtnsO.length; i++){
                    radBtnsO[i].disabled = true;
                }
            }
            window.onload=function(){
                fldQuestionsO = document.getElementById('fldQuestions');
                for(i=0; i < questions.length; i++){
                    var newDiv = document.createElement('div');
                    var newPara = document.createElement('p');
                    newPara.appendChild(document.createTextNode('Q'+(i+1)+' '+questions[i][0]));
                    newDiv.appendChild(newPara);
                    //create the radio buttons for each question
                    var radValue = 1;
                    for(j=2; j < questions[i].length; j++) {
                        var newLabel = document.createElement('label');
                        var newRadBtn = document.createElement('input');
                        newRadBtn.setAttribute('type', 'radio');
                        newRadBtn.setAttribute('name', 'q'+(i+1));
                        newRadBtn.setAttribute('value', radValue++);
                        newLabel.appendChild(newRadBtn);
                        newLabel.appendChild(document.createTextNode(questions[i][j]));
                        newDiv.appendChild(newLabel);
                    }
                    fldQuestionsO.appendChild(newDiv);
                }
                document.getElementById('btnSubmit').onclick=checkAnswers;
            }
        </script>
    </head>
    <body>
        <div>
            <fieldset id="fldQuestions"></fieldset>
            <button id="btnSubmit">Submit</button>
        </div>
    </body>
</html>

oVTech · 05-17-2011, 07:18 AM

Quote:

Originally Posted by mllanapatriciac

Hi thanks for the help. Can you also please tell me how I can let the user know which number of question(s) they got wrong. For example, they got number #2 wrong. Pleas and thanks a lot.

Ps, I'm just thankful there's people in forums who are much help than my teacher is.

Here is a link to the completed quiz - it should be exactly what you were looking for: http://www.codingforums.com/showthread.php?t=227081

lm111 · 09-07-2011, 01:48 PM

Hello,

How would you implement a fill in the blank question in your code?

Thank you so much.

dakotaB · 11-12-2012, 03:54 AM

Your script was excellent but I am in need of further assistance.
I need to have the test results stored into a cookie and then the cookie called in order to display the results in a seperate browser windoe instead of the alert being used. I have been trying to figure it out for several days all to no avail. Please can someone help with this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Week 2 JavaScript Quiz</title>
        <style type="text/css">
            fieldset {
	text-align:center;
	width:30%;
	border:medium dashed blue;
            }
            fieldset label {
                display: block;
            }
        </style>
    <script type="text/javascript">
	
            var questions = [
                ['How many pints are in a gallon?','4',2,4,6,8],
                ['How many hours are in a week?','2',135,168,142,198],
				['How many feet are in a mile?','4',8250,4695,6350,5280],
				['How many days are in a year?','3',653,285,365,453],
				['How many pounds are in a ton?','1',2000,1800,1950,2100]
            ];
			function resetForm(){
				location.reload(true)
			}
           function checkAnswers()
		   { 
		   var corAns = 0;
		    
		   for(var i=0; i < questions.length; i++)
		   { 
		   var radBtns = document.getElementsByName('q'+(i+1)); 
		   if(getAnswer(radBtns) == questions[i][1])
		   { 
		   ++corAns;
		   var divide = 100/questions.length*corAns; 
		   radBtns[0].parentNode.parentNode.firstChild.style.backgroundColor = 'green'; 
		   } else {
			    radBtns[0].parentNode.parentNode.firstChild.style.backgroundColor = 'red'; 
				} 
				} 
				alert('                                     You got '+corAns +' answers correct.' +'                                              You may select the correct choice, and try those questions again.');
				
				alert('Your total score is '+divide+'%'); 
alert(document.cookie);	
			}

			
            function getAnswer(radBtns){
                for(var i=0; i < radBtns.length; i++){
                    if(radBtns[i].checked){return radBtns[i].value;}
                }
                return false;
            }
            window.onload=function(){
                Questions = document.getElementById('Questions');
                for(i=0; i < questions.length; i++){
                    var newDiv = document.createElement('div');
                    var newPara = document.createElement('p');
                    newPara.appendChild(document.createTextNode('Question '+(i+1)+ ' = '+questions[i][0]));
                    newDiv.appendChild(newPara);
                    //create the radio buttons for each question
                    var radValue = 1;
                    for(j=2; j < questions[i].length; j++) {
                        var newLabel = document.createElement('label');
                        var newRadBtn = document.createElement('input');
                        newRadBtn.setAttribute('type', 'radio');
                        newRadBtn.setAttribute('name', 'q'+(i+1));
                        newRadBtn.setAttribute('value', radValue++);
                        newLabel.appendChild(newRadBtn);
                        newLabel.appendChild(document.createTextNode(questions[i][j]));
                        newDiv.appendChild(newLabel);
                    }
                    Questions.appendChild(newDiv);
                }
                document.getElementById('btnSubmit').onclick=checkAnswers;
				document.getElementById('btnReset').onclick=resetForm;
            }
        </script>

</head>
    <body>
        <div align="center">
            <fieldset id="Questions"></fieldset>
            <button id="btnSubmit">Submit</button>
            <button id="btnReset">Reset Form</button>
        </div>
    </body>
</html>