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.
Page 2 of 2 FirstFirst 12
Results 16 to 19 of 19
  1. #16
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>

  2. #17
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by mllanapatriciac View Post
    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




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  3. #18
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hello,

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

    Thank you so much.

  4. #19
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need cookie help.

    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>


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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