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 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Location
    The Beautiful World
    Posts
    9
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Smile How not to calculate result by percent ? multiple-choice-code

    Hello programmers !!
    I need your help in the following code.
    The code is ready and it is famous in the internet.
    _______________________________
    My problem is:
    This java code shows the score by (percent) but
    ________________________________
    * I prefer it to calculate the result simple by 10 degree for each correct answer.
    * Notice that in the flowing code there is only two questions while I don't keep making only to questions. I make different numbers of question to my student each week.
    ________________________________
    which means, I use the code repeatedly but how to follow only one java code for different number of questions weekly.
    ________________________________
    Just (HOW to make java code calculating the results out of (whatever the number of questions are).
    For example , how to show the students who answer all questions correctly the result as 20/ 20 if I make only 2 question
    40 out of 40 if the question are four …and so on.
    ______________________________
    The code:

    Code:
    <html><head><title></title>
    <script language="JavaScript">
    <!--
    
    var numQues = 2;
    var numChoi = 4;
    
    var answers = new Array(2);
    answers[0] = ""
    answers[1] = ""
    
    function getScore(form) {
      var score = 0;
      var currElt;
      var currSelection;
    
      for (i=0; i<numQues; i++) {
        currElt = i*numChoi;
        for (j=0; j<numChoi; j++) {
          currSelection = form.elements[currElt + j];
          if (currSelection.checked) {
            if (currSelection.value == answers[i]) {
              score++;
              break;
            }
          }
        }
      }
    
      score = Math.round(score/numQues*100);
      form.percentage.value = score + "%";
    
      var correctAnswers = "";
      for (i=1; i<=numQues; i++) {
        correctAnswers += i + ". " + answers[i-1] + "\r\n";
      }
      form.solutions.value = correctAnswers;
    
    }
    
    // -->
    </script>
    </head>
    
    <body>
    
    <form name="quiz">
    1. Kind of fruit:<br>
    <input type="radio" name="q1" value="disk">disk<br>
    <input type="radio" name="q1" value="sofa">sofa<br>
    <input type="radio" name="q1" value="orange">orange<br>
    <input type="radio" name="q1" value="book">book<br>
    <p>
    
    2. Kind of furniture:<br>
    <input type="radio" name="q2" value="banan">banan<br>
    <input type="radio" name="q2" value="chair">chair<br>
    <input type="radio" name="q2" value="pencil">pencil<br>
    <input type="radio" name="q2" value="eraser ">eraser <br>
    <p>
    
    <input type="button" value="Get score" onClick="getScore(this.form)">
    <input type="reset" value="Clear"><p>
    Score = <input type=text size=15 name="percentage"><br>
    Correct answers:<br>
    <textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea>
    </form>
    
    </body></html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Man, is that OLD code.

    While this is not the way I would approach this problem,
    the following incorporated several changes to at least make it work!

    Code:
    <html>
    <head>
    <title> Quiz </title>
    <script type="text/javascript"> <!-- archaic form: language="JavaScript" -->
    // Modified for: http://www.codingforums.com/showthread.php?t=317362
    
    var answers = [2,1];
    
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score/answers.length*100).toFixed(0);
      document.getElementById('percentage').value = score + "%";
      document.getElementById('solutions').value = correctAnswers;
    }
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
    //  return str;
      return [fnd,str];  // return both index and value
    } 
    </script>
    </head>
    <body>
    
    <form name="quiz" action="" method="post" onsubmit="return false">
    1. Kind of fruit:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q1" value="disk">disk</label></li>
     <li><label><input type="radio" name="q1" value="sofa">sofa</label></li>
     <li><label><input type="radio" name="q1" value="orange">orange</li>
     <li><label><input type="radio" name="q1" value="book">book</label></li>
    </ol>
    <p>
    
    2. Kind of furniture:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q2" value="banana">banana</label></li>
     <li><label><input type="radio" name="q2" value="chair">chair</label></li>
     <li><label><input type="radio" name="q2" value="pencil">pencil</label></li>
     <li><label><input type="radio" name="q2" value="eraser">eraser</label></li>
    </ol>
    <p>
    
    <input type="button" value="Get score" onClick="getScore()">
    <input type="reset" value="Clear"><p>
    Score = <input type=text size=15 id="percentage"><br>
    Correct answers:<br>
    <textarea id="solutions" wrap="virtual" rows="4" cols="40"></textarea>
    </form>
    
    </body>
    </html>
    Keep in mind that the correct answers are not well hidden from the user
    even before he/she starts the quiz. Even worse if you give the answers
    even before the user has started to answer ANY of the questions.

    OK if you want to assure everyone gets an A+ on the quiz.

  • Users who have thanked jmrker for this post:

    ranaran (02-12-2014)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ranaran View Post
    For example , how to show the students who answer all questions correctly the result as 20/ 20 if I make only 2 question
    40 out of 40 if the question are four …and so on.
    Here's a rewrite that uses proper HTML and JavaScript:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			section { padding-left: 1rem; }
    			h1 { margin: 1rem 0 0.25rem; font: inherit; font-weight: bolder; }
    			#quiz { counter-reset: questions; }
    			#quiz dt { counter-increment: questions; margin: 0.25rem 0; }
    			#quiz dt::before { content: counter(questions) ". "; }
    			#quiz dd { margin-left: 1rem; }
    			#quiz button { margin: 0.25rem 0; }
    			#correct\.answers ol { list-style-position: inside; margin-left: 1rem; }
    		</style>
    	</head>
    	<body>
    		<section id="quiz">
    			<h1>Quiz</h1>
    			<form>
    				<dl>
    					<dt>Kind of fruit:</dt>
    					<dd><label><input type="radio" name="fruit" value="disk"> disk</label></dd>
    					<dd><label><input type="radio" name="fruit" value="sofa"> sofa</label></dd>
    					<dd><label><input type="radio" name="fruit" value="orange" class="correct.answer"> orange</label></dd>
    					<dd><label><input type="radio" name="fruit" value="book"> book</label></dd>
    					<dt>Kind of furniture:</dt>
    					<dd><label><input type="radio" name="furniture" value="banana"> banana</label></dd>
    					<dd><label><input type="radio" name="furniture" value="chair" class="correct.answer"> chair</label></dd>
    					<dd><label><input type="radio" name="furniture" value="pencil"> pencil</label></dd>
    					<dd><label><input type="radio" name="furniture" value="eraser"> eraser</label></dd>
    				</dl>
    				<button>Get Score</button>
    				<button type="reset">Reset Quiz</button>
    			</form>
    		</section>
    		<section id="score" hidden>
    			<h1>Score</h1>
    			<p>The score is <output id="score.text">0/0</output>.</p>
    		</section>
    		<section id="correct.answers" hidden>
    			<h1>Correct Answers</h1>
    			<ol id="correct.answers.list"></ol>
    		</section>
    		<script>
    			(function () {
    				"use strict";
    				var quiz = document.getElementById("quiz");
    				var totalQuestions = quiz.getElementsByTagName("dt").length;
    				var correctAnswerRadioButtons = document.getElementsByClassName("correct.answer");
    				var scoreDenominator = (totalQuestions * 10).toString();
    				var scoreSection = document.getElementById("score");
    				var scoreText = document.getElementById("score.text");
    				var correctAnswersSection = document.getElementById("correct.answers");
    				function fillCorrectAnswersList() {
    					var correctAnswerRadioButtonIndex = 0;
    					var correctAnswersList = document.getElementById("correct.answers.list");
    					var correctAnswerListItem = null;
    					while (correctAnswerRadioButtonIndex < correctAnswerRadioButtons.length) {
    						correctAnswerListItem = document.createElement("li");
    						correctAnswerListItem.textContent = correctAnswerRadioButtons.item(correctAnswerRadioButtonIndex).value;
    						correctAnswersList.appendChild(correctAnswerListItem);
    						correctAnswerRadioButtonIndex += 1;
    					}
    				}
    				function getScore(formSubmissionEvent) {
    					formSubmissionEvent.preventDefault();
    					var correctAnswerRadioButtonIndex = 0;
    					var scoreNumerator = 0;
    					while (correctAnswerRadioButtonIndex < correctAnswerRadioButtons.length) {
    						if (correctAnswerRadioButtons.item(correctAnswerRadioButtonIndex).checked === true) {
    							scoreNumerator += 10;
    						}
    						correctAnswerRadioButtonIndex += 1;
    					}
    					scoreText.textContent = scoreNumerator + "/" + scoreDenominator;
    					scoreSection.removeAttribute("hidden");
    					correctAnswersSection.removeAttribute("hidden");
    				}
    				function resetScore() {
    					scoreSection.setAttribute("hidden", "");
    					scoreText.textContent = "0/0";
    					correctAnswersSection.setAttribute("hidden", "");
    				}
    				fillCorrectAnswersList()
    				quiz.addEventListener("submit", getScore);
    				quiz.addEventListener("reset", resetScore);
    			})();
    		</script>
    	</body>
    </html>
    Last edited by Arbitrator; 02-08-2014 at 01:27 AM. Reason: Removed extraneous CSS declarations and rules.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    ranaran (02-12-2014)

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Location
    The Beautiful World
    Posts
    9
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Hello
    jmrker & Arbitrator

    Thanks for trying but neither of your codes worked as I need.
    because the both codes designed by (percent) way= (%) which I don't prefer.
    _______________________________

    If I specify 10 degrees for each correct question, how to make JS code calculating (+) only correct answers by 10 degree according to whatever numbers of the questions are!!
    ______________________________

    What I need simply making ten degrees for each correct question or even five degrees for each correct question. I don't know how to make JavaScript count it in this way.
    _____________________________

    Let me give you examples: (Notice that I make different number of question each time).

    - If I make 2 questions, I want the score appears as 20 out of 20 if the student did all correct.
    - If I make 5 questions, I want the score appears as 50 out of 50,
    and if that student makes one mistake, it appears as 40 out of 50. or (40/50) simply in this way.


    I don't like the (percent way).
    _________________

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ranaran View Post
    Hello
    jmrker & Arbitrator

    Thanks for trying but neither of your codes worked as I need.
    because the both codes designed by (percent) way= (%) which I don't prefer.
    _______________________________

    If I specify 10 degrees for each correct question, how to make JS code calculating (+) only correct answers by 10 degree according to whatever numbers of the questions are!!
    ______________________________

    What I need simply making ten degrees for each correct question or even five degrees for each correct question. I don't know how to make JavaScript count it in this way.
    _____________________________

    Let me give you examples: (Notice that I make different number of question each time).

    - If I make 2 questions, I want the score appears as 20 out of 20 if the student did all correct.
    - If I make 5 questions, I want the score appears as 50 out of 50,
    and if that student makes one mistake, it appears as 40 out of 50. or (40/50) simply in this way.


    I don't like the (percent way).
    _________________
    Uhh... The code I wrote does exactly what you describe and doesn't involve any percentages. Scores for two questions are presented as 0/0, 0/10, 0/20, 10/10, 10/20, or 20/20.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    ranaran (02-12-2014)

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts
    And my version can be easily converted to your unorthodox method of scoring.

    Code:
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score*10)+' / '+(answers.length*10);
      document.getElementById('percentage').value = score;
      document.getElementById('solutions').value = correctAnswers;
    }
    Last edited by jmrker; 02-09-2014 at 02:51 AM.

  • Users who have thanked jmrker for this post:

    ranaran (02-12-2014)

  • #7
    New to the CF scene
    Join Date
    Feb 2014
    Location
    The Beautiful World
    Posts
    9
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Uhh... The code I wrote does exactly what you describe and doesn't involve any percentages. Scores for two questions are presented as 0/0, 0/10, 0/20, 10/10, 10/20, or 20/20.
    Yes, sorry Arbitrator, your code worked without percentage.
    But when I added a third question, it didn't work. One of the radio buttons doesn't work when I answer the second question.

    Am wondering is there any line in the code I should change when adding more questions?

    __________________________________________

    Quote Originally Posted by jmrker View Post
    And my version can be easily converted to your unorthodox method of scoring.

    Code:
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score*10)+' / '+(answers.length*10);
      document.getElementById('percentage').value = score;
      document.getElementById('solutions').value = correctAnswers;
    }
    Hi jmrker, I exchanged the last java code you coded with the recent one, but it doesn't work at all.

    I think I liked it because with it, I use the same HTML code of making the questions which am familiar with . It seems that we are about the reach. BUT please check it again! is there any thing missing? because I tried it but it doesn't work.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by ranaran View Post
    Yes, sorry Arbitrator, your code worked without percentage.
    But when I added a third question, it didn't work. One of the radio buttons doesn't work when I answer the second question.

    Am wondering is there any line in the code I should change when adding more questions?

    __________________________________________



    Hi jmrker, I exchanged the last java code you coded with the recent one, but it doesn't work at all.

    I think I liked it because with it, I use the same HTML code of making the questions which am familiar with . It seems that we are about the reach. BUT please check it again! is there any thing missing? because I tried it but it doesn't work.
    Looks like I accidently sent a version the code just before I had solved it.
    If you use the error console in JS or Chrome, it would have shown you almost
    immediately that I had neglected to enclose the 'getRBtnName()' function.
    Code:
    <html>
    <head>
    <title> Quiz </title>
    <script type="text/javascript"> <!-- archaic form: language="JavaScript" -->
    // Modified for: http://www.codingforums.com/showthread.php?t=317362
    
    var answers = [2,1];
    
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score/answers.length*100).toFixed(0);
      document.getElementById('percentage').value = score + "%";
      document.getElementById('solutions').value = correctAnswers;
    }
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score*10)+' / '+(answers.length*10);
      document.getElementById('percentage').value = score;
      document.getElementById('solutions').value = correctAnswers;
    }
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
    //  return str;
      return [fnd,str];
    } 
    
    </script>
    </head>
    <body>
    
    <form name="quiz" action="" method="post" onsubmit="return false">
    1. Kind of fruit:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q1" value="disk">disk</label></li>
     <li><label><input type="radio" name="q1" value="sofa">sofa</label></li>
     <li><label><input type="radio" name="q1" value="orange">orange</li>
     <li><label><input type="radio" name="q1" value="book">book</label></li>
    </ol>
    <p>
    
    2. Kind of furniture:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q2" value="banana">banana</label></li>
     <li><label><input type="radio" name="q2" value="chair">chair</label></li>
     <li><label><input type="radio" name="q2" value="pencil">pencil</label></li>
     <li><label><input type="radio" name="q2" value="eraser">eraser</label></li>
    </ol>
    <p>
    
    <input type="button" value="Get score" onClick="getScore()">
    <input type="reset" value="Clear"><p>
    Score = <input type=text size=15 id="percentage"><br>
    Correct answers:<br>
    <textarea id="solutions" wrap="virtual" rows="4" cols="40"></textarea>
    </form>
    
    </body>
    </html>
    As for your code, you should post it.
    It does us no good to respond to a problem we cannot see if the code is not included.
    Last edited by jmrker; 02-09-2014 at 02:26 PM.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ranaran View Post
    Yes, sorry Arbitrator, your code worked without percentage.
    But when I added a third question, it didn't work. One of the radio buttons doesn't work when I answer the second question.

    Am wondering is there any line in the code I should change when adding more questions?
    You must be changing the code in a way that breaks it because I tested it again and it works fine. I added a third question and, again, it works fine. Every time you post an "it doesn't work response", you should take jmrker's advice and post the code you're using so that we aren't guessing at what you or we did wrong. I'd also recommend posting the browser name and browser version since code works differently in different browsers.

    Here is revised code that, hopefully, makes it more clear how to add a new question. Substantial changes are highlighted:
    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			section { padding-left: 1rem; }
    			h1 { margin: 1rem 0 0.25rem; font: inherit; font-weight: bolder; }
    			template { display: none; }
    			#quiz { counter-reset: questions; }
    			#quiz dt { counter-increment: questions; margin: 0.25rem 0; }
    			#quiz dt::before { content: counter(questions) ". "; }
    			#quiz dd { margin-left: 1rem; }
    			#quiz button { margin: 0.25rem 0; }
    			#correct\.answers ol { list-style-position: inside; margin-left: 1rem; }
    		</style>
    	</head>
    	<body>
    		<section id="quiz">
    			<h1>Quiz</h1>
    			<form>
    				<dl>
    					<dt>Kind of fruit:</dt>
    					<dd><label><input type="radio" name="fruit" value="disk" required> disk</label></dd>
    					<dd><label><input type="radio" name="fruit" value="sofa"> sofa</label></dd>
    					<dd><label><input type="radio" name="fruit" value="orange" class="correct.answer"> orange</label></dd>
    					<dd><label><input type="radio" name="fruit" value="book"> book</label></dd>
    					<dt>Kind of furniture:</dt>
    					<dd><label><input type="radio" name="furniture" value="banana" required> banana</label></dd>
    					<dd><label><input type="radio" name="furniture" value="chair" class="correct.answer"> chair</label></dd>
    					<dd><label><input type="radio" name="furniture" value="pencil"> pencil</label></dd>
    					<dd><label><input type="radio" name="furniture" value="eraser"> eraser</label></dd>
    					<dt>Kind of mammal:</dt>
    					<dd><label><input type="radio" name="mammal" value="albatross" required> albatross</label></dd>
    					<dd><label><input type="radio" name="mammal" value="starfish"> starfish</label></dd>
    					<dd><label><input type="radio" name="mammal" value="butterfly"> butterfly</label></dd>
    					<dd><label><input type="radio" name="mammal" value="platypus" class="correct.answer"> platypus</label></dd>
    					<template>
    						<!-- To add a new question, duplicate this code (outside of the template element) and customize the “Question:”, “question.name”, and “answer” text. Then, move the “class="correct.answer"” attribute to the input element representing the correct answer. -->
    						<dt>Question:</dt>
    						<dd><label><input type="radio" name="question.name" value="answer" required class="correct.answer"> answer</label></dd>
    						<dd><label><input type="radio" name="question.name" value="answer"> answer</label></dd>
    						<dd><label><input type="radio" name="question.name" value="answer"> answer</label></dd>
    						<dd><label><input type="radio" name="question.name" value="answer"> answer</label></dd>
    					</template>
    				</dl>
    				<button>Get Score</button>
    				<button type="reset">Reset Quiz</button>
    			</form>
    		</section>
    		<section id="score" hidden>
    			<h1>Score</h1>
    			<p>The score is <output id="score.text">0/0</output>.</p>
    		</section>
    		<section id="correct.answers" hidden>
    			<h1>Correct Answers</h1>
    			<ol id="correct.answers.list"></ol>
    		</section>
    		<script>
    			(function () {
    				"use strict";
    				var quiz = document.getElementById("quiz");
    				var totalQuestions = quiz.querySelectorAll("dl > dt").length;
    				var correctAnswerRadioButtons = document.getElementsByClassName("correct.answer");
    				var scoreDenominator = (totalQuestions * 10).toString();
    				var scoreSection = document.getElementById("score");
    				var scoreText = document.getElementById("score.text");
    				var correctAnswersSection = document.getElementById("correct.answers");
    				function fillCorrectAnswersList() {
    					var correctAnswerRadioButtonIndex = 0;
    					var correctAnswersList = document.getElementById("correct.answers.list");
    					var correctAnswerListItem = null;
    					while (correctAnswerRadioButtonIndex < correctAnswerRadioButtons.length) {
    						correctAnswerListItem = document.createElement("li");
    						correctAnswerListItem.textContent = correctAnswerRadioButtons.item(correctAnswerRadioButtonIndex).value;
    						correctAnswersList.appendChild(correctAnswerListItem);
    						correctAnswerRadioButtonIndex += 1;
    					}
    				}
    				function getScore(formSubmissionEvent) {
    					formSubmissionEvent.preventDefault();
    					var correctAnswerRadioButtonIndex = 0;
    					var scoreNumerator = 0;
    					while (correctAnswerRadioButtonIndex < correctAnswerRadioButtons.length) {
    						if (correctAnswerRadioButtons.item(correctAnswerRadioButtonIndex).checked === true) {
    							scoreNumerator += 10;
    						}
    						correctAnswerRadioButtonIndex += 1;
    					}
    					scoreText.textContent = scoreNumerator + "/" + scoreDenominator;
    					scoreSection.removeAttribute("hidden");
    					correctAnswersSection.removeAttribute("hidden");
    				}
    				function resetScore() {
    					scoreSection.setAttribute("hidden", "");
    					scoreText.textContent = "0/0";
    					correctAnswersSection.setAttribute("hidden", "");
    				}
    				fillCorrectAnswersList()
    				quiz.addEventListener("submit", getScore);
    				quiz.addEventListener("reset", resetScore);
    			})();
    		</script>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    ranaran (02-12-2014)

  • #10
    New to the CF scene
    Join Date
    Feb 2014
    Location
    The Beautiful World
    Posts
    9
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Looks like I accidently sent a version the code just before I had solved it.
    If you use the error console in JS or Chrome, it would have shown you almost
    immediately that I had neglected to enclose the 'getRBtnName()' function.
    Code:
    <html>
    <head>
    <title> Quiz </title>
    <script type="text/javascript"> <!-- archaic form: language="JavaScript" -->
    // Modified for: http://www.codingforums.com/showthread.php?t=317362
    
    var answers = [2,1];
    
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score/answers.length*100).toFixed(0);
      document.getElementById('percentage').value = score + "%";
      document.getElementById('solutions').value = correctAnswers;
    }
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score*10)+' / '+(answers.length*10);
      document.getElementById('percentage').value = score;
      document.getElementById('solutions').value = correctAnswers;
    }
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
    //  return str;
      return [fnd,str];
    } 
    
    </script>
    </head>
    <body>
    
    <form name="quiz" action="" method="post" onsubmit="return false">
    1. Kind of fruit:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q1" value="disk">disk</label></li>
     <li><label><input type="radio" name="q1" value="sofa">sofa</label></li>
     <li><label><input type="radio" name="q1" value="orange">orange</li>
     <li><label><input type="radio" name="q1" value="book">book</label></li>
    </ol>
    <p>
    
    2. Kind of furniture:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q2" value="banana">banana</label></li>
     <li><label><input type="radio" name="q2" value="chair">chair</label></li>
     <li><label><input type="radio" name="q2" value="pencil">pencil</label></li>
     <li><label><input type="radio" name="q2" value="eraser">eraser</label></li>
    </ol>
    <p>
    
    <input type="button" value="Get score" onClick="getScore()">
    <input type="reset" value="Clear"><p>
    Score = <input type=text size=15 id="percentage"><br>
    Correct answers:<br>
    <textarea id="solutions" wrap="virtual" rows="4" cols="40"></textarea>
    </form>
    
    </body>
    </html>
    As for your code, you should post it.
    It does us no good to respond to a problem we cannot see if the code is not included.
    [SIZE="3"]
    Jmrker, what should I change to add more than two questions?

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by ranaran View Post
    [SIZE="3"]
    Jmrker, what should I change to add more than two questions?
    See changes in RED below.
    Very minimal: Add question and item responses and change correct answer array.

    Code:
    <html>
    <head>
    <title> Quiz </title>
    <script type="text/javascript"> <!-- archaic form: language="JavaScript" -->
    // Modified for: http://www.codingforums.com/showthread.php?t=317362
    
    var answers = [2,1,0];
    
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score/answers.length*100).toFixed(0);
      document.getElementById('percentage').value = score + "%";
      document.getElementById('solutions').value = correctAnswers;
    }
    function getScore() {
      var score = 0, rbName = '', correctAnswers = "";
      var info = [];
      for (i=0; i<answers.length; i++) {
        rbName = 'q'+(i+1);
        info = getRBtnName(rbName);
        var sel = document.getElementsByName(rbName);
        ans = sel[answers[i]].value;
        correctAnswers += (i+1) + ". " + ans + "\n"; 
        if (info[0] == answers[i].toString()) { score++; }
      }
      score = (score*10)+' / '+(answers.length*10);
      document.getElementById('percentage').value = score;
      document.getElementById('solutions').value = correctAnswers;
    }
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
    //  return str;
      return [fnd,str];
    } 
    
    </script>
    </head>
    <body>
    
    <form name="quiz" action="" method="post" onsubmit="return false">
    1. Kind of fruit:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q1" value="disk">disk</label></li>
     <li><label><input type="radio" name="q1" value="sofa">sofa</label></li>
     <li><label><input type="radio" name="q1" value="orange">orange</li>
     <li><label><input type="radio" name="q1" value="book">book</label></li>
    </ol>
    <p>
    
    2. Kind of furniture:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q2" value="banana">banana</label></li>
     <li><label><input type="radio" name="q2" value="chair">chair</label></li>
     <li><label><input type="radio" name="q2" value="pencil">pencil</label></li>
     <li><label><input type="radio" name="q2" value="eraser">eraser</label></li>
    </ol>
    <p>
    
    3. Kind of color:
    <ol start="a" type="a">
     <li><label><input type="radio" name="q3" value="red">red</label></li>
     <li><label><input type="radio" name="q3" value="tree">tree</label></li>
     <li><label><input type="radio" name="q3" value="fence">fence</label></li>
     <li><label><input type="radio" name="q3" value="road">road</label></li>
    </ol>
    <p>
    
    <input type="button" value="Get score" onClick="getScore()">
    <input type="reset" value="Clear"><p>
    Score = <input type=text size=15 id="percentage"><br>
    Correct answers:<br>
    <textarea id="solutions" wrap="virtual" rows="4" cols="40"></textarea>
    </form>
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    ranaran (02-12-2014)

  • #12
    New to the CF scene
    Join Date
    Feb 2014
    Location
    The Beautiful World
    Posts
    9
    Thanks
    12
    Thanked 0 Times in 0 Posts
    jmrker

    Which line in your code show the correct answers?

    When I code a new question. How to specify the correct option in the code??

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by ranaran View Post
    jmrker

    Which line in your code show the correct answers?

    When I code a new question. How to specify the correct option in the code??
    Did you look at the altered code and compare it to the original?

    Correct answers are specified in the answer array defined near the top and highlighted in red.

    The entry will be the number 0, 1, 2, or 3 (for a 4 item question) and will correspond
    to the possible item responses for the question.

  • Users who have thanked jmrker for this post:

    ranaran (02-12-2014)

  • #14
    New to the CF scene
    Join Date
    Feb 2014
    Location
    The Beautiful World
    Posts
    9
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Did you look at the altered code and compare it to the original?

    Correct answers are specified in the answer array defined near the top and highlighted in red.

    The entry will be the number 0, 1, 2, or 3 (for a 4 item question) and will correspond
    to the possible item responses for the question.
    I understood that this line var answers = [2,1,0]; for the number of the questions. But I mean how to tell the code that this option is the correct one!! For example you add a third question which is: Kind of color: but where in the code you showed that (red) is the correct answer and not the (tree)??

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by ranaran View Post
    I understood that this line var answers = [2,1,0]; for the number of the questions. But I mean how to tell the code that this option is the correct one!! For example you add a third question which is: Kind of color: but where in the code you showed that (red) is the correct answer and not the (tree)??
    It is not only the number of questions, it is ALSO the array of correct answers.

    For each question there are (in your example) 4 responses for each question within the <li>
    Considered them numbered in sequence 0, 1, 2 or 3 for positions 1, 2, 3 and 4.
    Put the correct SEQUENCE value into the answer array for each question response POSITION.
    Code:
    var answers = [2,1,0];  // correlates to items 3, 2 and 1 of questions 1, 2 and 3.
    For your questions, the correct answer is the 3rd <li> position (sequence 2) in question #1
    and is the 2nd <li> position (sequence 1) in question #2.

    I added the 3rd question with the answer as position #1 (sequence 0).

    That's a really complicated answer for a really simple concept.
    In short, the answer array contains the sequence # for each position of each question and the # of questions is the length of the array.

  • Users who have thanked jmrker for this post:

    ranaran (02-12-2014)


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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