HTML/JavaScript Test Multiple Choice Multiple Answer

JavaScript/HTML

  • (2 Pages)
  • +
  • 1
  • 2

20 Replies - 45671 Views - Last Post: 12 December 2011 - 10:25 PM

#1 mak3nsh1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 06-January 11

HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 06 January 2011 - 11:56 AM

I work in the IT department at a company in Mississippi. Our department of three was asked to take a test on Hazardous Material handling and make it into a web page. The requirement was that it took a persons name and their grade and record it (I decided that it would be best to email the results to the test administrator). I have gotten quite a bit of the work done on it. I am just having issues with it take multiple answers for a question and grading it as if it were another question. The test is 9 actual questions long but has a total of 16 correct answers. How can I make this easier for myself? Also I am not getting it to email me the actual percentage but it is allowing me to see what the answers submitted were.

Below you will find the code necessary:

<HTML>
<HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#1e90ff" VLINK="#000080" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">
<script language="Javascript"><!--

function scoreTest() {
 
	var thetest = document.getElementById('thetest');
 
	var numquestions = thetest.Q.length;
 
	var numcorrect = 0;
 
 
 
	for (var q=0; q<numquestions; q++) {
 
		var qname = thetest.Q[q].value;
 
		var correct = thetest["CANS."+qname].value;
 
		var checkboxgroup = thetest["ANS."+qname];
 
		for (var i=0; i<checkboxgroup.length; i++) {
 
			var response = checkboxgroup[i].value;
 
			var label = document.getElementById("LANS."+qname+"."+i);
 
			if (response == correct) {
 
				label.style.background = '#c5f4c8';
 
				if (checkboxgroup[i].checked) numcorrect++;
 
			} else if (checkboxgroup[i].checked) {
 
				label.style.background = '#f1cccd';
 
			} else {
 
				label.style.background = 'transparent';
 
			}
 
			checkboxgroup[i].disabled = true;
 
		}
 
	}
 
 
 
	var percent = Math.round(numcorrect / numquestions * 100);
 
	document.getElementById('score').innerHTML = "<b>You got " + numcorrect
 
	+ " out of " + numquestions + " correct. (That's " + percent
 
	+ "%.)</b>";
 
 
 
	document.getElementById('btn_submit').style.display = 'none';
 
	document.getElementById('btn_reset').style.display = 'inline';
 
	document.getElementById('results').style.display = 'inline';
 
 
 
	window.scrollTo(0,0);
 
	return false;
 
};
 
 
 
function resetTest() {
 
	var thetest = document.getElementById('thetest');
 
	var numquestions = thetest.Q.length;
 
 
 
	thetest.reset();
 
 
 
	for (var q=0; q<numquestions; q++) {
 
		var qname = thetest.Q[q].value;
 
		var checkboxgroup = thetest["ANS."+qname];
 
		for (var i=0; i<checkboxgroup.length; i++) {
 
			var label = document.getElementById("LANS."+qname+"."+i);
 
			label.style.background = 'transparent';
 
			checkboxgroup[i].checked = false;
 
			checkboxgroup[i].disabled = false;
 
		}
 
	}
 
 
 
	document.getElementById('btn_submit').style.display = 'inline';
 
	document.getElementById('btn_reset').style.display = 'none';
 
	document.getElementById('results').style.display = 'none';
 
 
 
	window.scrollTo(0,0);
 
};
 
//--></script> 
<noscript>
<p align="center">
<b>This page requires Javascript</b>, which you don't seem to have.  Please try a different browser.
</p>
</noscript> 

<form method="post" action="mailto:jinzer@starkaerospace.com?subject=HAZ CON Quiz" enctype="text/plain" id="thetest">
Name: <input type="text" size="10" maxlength="40" name="name"> <br />
<div class="chapt_body" id="quiz">
<div id="results" style="display:none">
<p align="center" id="score"></p>
<p align="center">
Scroll through the page to review your answers.  The correct answer is highlighted in <span style="background:#c5f4c8">&nbsp;green.&nbsp;</span> Your
 incorrect answers (if any) are highlighted in <span style="background:#f1cccd">&nbsp;red.&nbsp;</span> If you'd like to take the test over again, click the reset button at the end of the test.
 </p>
</div> 
 
<div><b><span class="vs_normaltext">01.	A chemical is defined as:</span></b> 
 
<div id="LANS.1.0"><label><input name="ANS.1" type="checkbox" value="A">(A) A liquid in a can</label></div> 
 
<div id="LANS.1.1"><label><input name="ANS.1" type="checkbox" value="B">(B)/> Any element, chemical compound or mixture of elements and/or compound</label></div> 
 
<div id="LANS.1.2"><label><input name="ANS.1" type="checkbox" value="C">(C) Any can with a hazard label on it</label></div> 
 
<input name="Q" type="hidden" value="1"><input name="CANS.1" type="hidden" value="B"></div><br> 


 
<div><b><span class="vs_normaltext">02.	Exposure or exposed means:</span></b> 
 
<div id="LANS.2.0"><label><input name="ANS.2" type="checkbox" value="A">(A) You are subjected to a chemical that is a physical or health hazard</label></div> 
 
<div id="LANS.2.1"><label><input name="ANS.2" type="checkbox" value="B">(B)/> You spill acetone on your hands with no gloves on</label></div> 
 
<div id="LANS.2.2"><label><input name="ANS.2" type="checkbox" value="C">(C) You stayed in the sun too long</label></div> 
 
<input name="Q" type="hidden" value="2"><input name="CANS.2" type="hidden" value="A"></div><br> 


 
<div><b><span class="vs_normaltext">03.	What does the term "flash point" mean:</span></b> 
 
<div id="LANS.3.0"><label><input name="ANS.3" type="checkbox" value="A">(A) The maximum temperature at which a liquid gives off a vapor</label></div> 
 
<div id="LANS.3.1"><label><input name="ANS.3" type="checkbox" value="B">(B)/> The minimum temperature at which a liquid gives off a vapor</label></div> 
 
<div id="LANS.3.2"><label><input name="ANS.3" type="checkbox" value="C">(C) The temperature at which the chemical must be stored</label></div> 
 
<input name="Q" type="hidden" value="3"><input name="CANS.3" type="hidden" value="B"></div><br> 


 
<div><b><span class="vs_normaltext">04.	What is a MSDS:</span></b> 
 
<div id="LANS.4.0"><label><input name="ANS.4" type="checkbox" value="A">(A) A piece of paper that comes with hazardous materials</label></div> 
 
<div id="LANS.4.1"><label><input name="ANS.4" type="checkbox" value="B">(B)/> A data sheet that tells you the PPE necessary to avoid injury when using a hazardous chemical</label></div> 
 
<div id="LANS.4.2"><label><input name="ANS.4" type="checkbox" value="C">(C) A sheet that tells you what the chemical can do to your health</label></div> 
 
<input name="Q" type="hidden" value="4"><input name="CANS.4" type="hidden" value="A"></div>
<input name="Q" type="hidden" value="5"><input name="CANS.4" type="hidden" value="B"></div>
<input name="Q" type="hidden" value="6"><input name="CANS.4" type="hidden" value="C"></div><br> 


 
<div><b><span class="vs_normaltext">05.	Where are the MSDS sheets kept:</span></b> 
 
<div id="LANS.5.0"><label><input name="ANS.5" type="checkbox" value="A">(A) Warehouse</label></div> 
 
<div id="LANS.5.1"><label><input name="ANS.5" type="checkbox" value="B">(B)/> Tool crib</label></div> 
 
<div id="LANS.5.2"><label><input name="ANS.5" type="checkbox" value="C">(C) QA desk</label></div> 
 
<div id="LANS.5.3"><label><input name="ANS.5" type="checkbox" value="D">(D) Joe's office</label></div> 
 
<input name="Q" type="hidden" value="7"><input name="CANS.5" type="hidden" value="B"></div>
<input name="Q" type="hidden" value="8"><input name="CANS.5" type="hidden" value="C"></div><br> 


 
<div><b><span class="vs_normaltext">06.	What information must be included on a container label:</span></b> 
 
<div id="LANS.6.0"><label><input name="ANS.6" type="checkbox" value="A">(A) Chemical Name</label></div> 
 
<div id="LANS.6.1"><label><input name="ANS.6" type="checkbox" value="B">(B)/> Hazard warning</label></div> 
 
<div id="LANS.6.2"><label><input name="ANS.6" type="checkbox" value="C">(C) Manufacturer</label></div> 
 
<div id="LANS.6.3"><label><input name="ANS.6" type="checkbox" value="D">(D) HMIS label</label></div> 
 
<input name="Q" type="hidden" value="9"><input name="CANS.6" type="hidden" value="A"></div>
<input name="Q" type="hidden" value="10"><input name="CANS.6" type="hidden" value="B"></div>
<input name="Q" type="hidden" value="11"><input name="CANS.6" type="hidden" value="C"></div>
<input name="Q" type="hidden" value="12"><input name="CANS.6" type="hidden" value="D"></div><br> 

 
<div><b><span class="vs_normaltext">07.	Who is responsible for insuring MSDS sheets are in the binder"</span></b> 
 
<div id="LANS.7.0"><label><input name="ANS.7" type="checkbox" value="A">(A) Tool crib assistant</label></div> 
 
<div id="LANS.7.1"><label><input name="ANS.7" type="checkbox" value="B">(B)/> Employee who orders the chemicals</label></div> 
 
<div id="LANS.7.2"><label><input name="ANS.7" type="checkbox" value="C">(C) Warehouse employee</label></div> 
 
<input name="Q" type="hidden" value="13"><input name="CANS.7" type="hidden" value="A"></div><br> 


 
<div><b><span class="vs_normaltext">08.	You pour from a labelled container to an unlabeled container, the new container needs to be labeled if:</span></b> 
 
<div id="LANS.8.0"><label><input name="ANS.8" type="checkbox" value="A">(A) You are the only person using that container</label></div> 
 
<div id="LANS.8.1"><label><input name="ANS.8" type="checkbox" value="B">(B)/> The container is left unattended in a work area</label></div> 
 
<div id="LANS.8.2"><label><input name="ANS.8" type="checkbox" value="C">(C) Empties the new container immediately after using it</label></div> 
 
<input name="Q" type="hidden" value="14"><input name="CANS.8" type="hidden" value="B"></div><br> 
 


<div><b><span class="vs_normaltext">09.	What information does not need to be included on a NFPA label:</span></b> 
 
<div id="LANS.9.0"><label><input name="ANS.9" type="checkbox" value="A">(A) Chemical identity</label></div> 
 
<div id="LANS.9.1"><label><input name="ANS.9" type="checkbox" value="B">(B)/> PPE necessary</label></div> 
 
<div id="LANS.9.2"><label><input name="ANS.9" type="checkbox" value="C">(C) Volume</label></div> 

<input name="Q" type="hidden" value="15"><input name="CANS.9" type="hidden" value="A"></div>
<input name="Q" type="hidden" value="16"><input name="CANS.9" type="hidden" value="B"></div><br> 
 
 
<div id="btn_submit">
<p align="center">
<input class="quizsubmit" onclick="scoreTest(); return false;" src="button_submit.gif" type="image">
</p>
</div>
<div id="btn_reset" style="display:none">
<p align="center">
<input class="quizsubmit" onclick="resetTest(); return false;" src="button_reset.gif" type="image">
</p>
</div>
</form>
</div> 

 
</TD> 	
</BODY>
</HTML> 




Is This A Good Question/Topic? 0
  • +

Replies To: HTML/JavaScript Test Multiple Choice Multiple Answer

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,441
  • Joined: 08-June 10

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 06 January 2011 - 12:24 PM

issue 1. emails are best send using a server-side script
issue 2. you are aware that by just peeking at the source code, I get all the answers?
issue 3. doesn’t work with Javascript disabled.
issue 4. labels contain the info for a form element, thus the respective form element should be outside the label.

I recommend to make the email and the result analysis on the server.

depending on the server script, form fields with the same names are treated as array (e.g. in PHP you would have to use a name ending with [], like "ANS.9[]"). for Javascript this doesn’t matter as document.getElementsByName() always returns a list.

This post has been edited by Dormilich: 06 January 2011 - 12:28 PM

Was This Post Helpful? 1
  • +
  • -

#3 mak3nsh1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 06-January 11

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 06 January 2011 - 01:51 PM

I appreciate the help given. I haven't really dabbled into .asp coding all that much and from what I am being told .php script isn't allowed on this server. What would be the direction I need to start off with writing it in .asp. Also I'm aware that at the present time the answers can be seen. I intended to make them hidden after I got the rest of the bugs worked out, but it seems that I need to fix that as well. Correct me if I am wrong but I should be able to make an file that has the questions and answers that the page calls to ask the questions. I just need to create an array in the file to do so and call each individually then compare it to a correctanswer array.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,441
  • Joined: 08-June 10

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 06 January 2011 - 02:53 PM

View Postmak3nsh1, on 06 January 2011 - 08:51 PM, said:

What would be the direction I need to start off with writing it in .asp.

I have no idea. I’m a PHP guy, sorry.

generally, to hide the answers, you have to keep them on the server, anything else can be spotted (so Javascript & HTML are off for this).

This post has been edited by Dormilich: 06 January 2011 - 02:54 PM

Was This Post Helpful? 1
  • +
  • -

#5 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 129
  • View blog
  • Posts: 837
  • Joined: 25-October 08

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 06 January 2011 - 09:35 PM

This is not a finished product, but it might help you onto your next step. Let me know if you want to pursue it further or if you need some answers about the parts I've put in already.

The color highlighting of correct/incorrect is not included here, but could be added if really necessary. Was not worth the extra work to me if you don't like the concept.

You could put the QRA array into an external JS file if desired. You could also separate the Answers array into another external JS file with a cryptic filename. I would not use JS for any test/quiz that would constitute a major portion of a "grade", but for review purposes and other learning requirements, I believe a JS quiz would be sufficient.


It is not going to stop the determined user with some knowledge of JS, but you could also make it a timed test given at a predetermined time.

<HTML>
<HEAD>
<title> Hazardous Material Handling</title>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#1e90ff" VLINK="#000080"
 TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">
<script type="text/javascript"> <!-- archaic form: language="Javascript" -->

function $_(IDS) { return document.getElementById(IDS); }

function scoreTest() {
  var num_questions = 0;
  var num_correct = 0;
  var tmp = '';
  var answers = [];  var info = '';
  for (q=0; q<QRA.length; q++) {
    for (i=1; i<QRA[q].length; i++) {
      if (Ans[q][(i-1)] != 0) { num_questions++; }
      tmp = 'Q'+q;
      if ($_(tmp+i).checked) { 
        if ($_(tmp+i).value == Ans[q][(i-1)]) {
          info = 'correct';  num_correct++;
        } else {
          info = 'incorrect'; 
        }
        answers.push((tmp+i)+':'+$_(tmp+i).value+' = '+info);
      }
    }
  }  
  var str = answers.join('\n');
  str += '\nCorrect: '+num_correct+' of: '+num_questions;
  str += ' = '+(num_correct / num_questions * 100).toFixed(2)+'%';
  alert(str);
 	return false;
};
 
var QRA = [
  ['A chemical is defined as:',
   '(A) A liquid in a can',
   '(B)/> Any element, chemical compound or mixture of elements and/or compound',
   '(C) Any can with a hazard label on it'],
  ['Exposure or exposed means:',
   '(A) You are subjected to a chemical that is a physical or health hazard',
   '(B)/> You spill acetone on your hands with no gloves on',
   '(C) You stayed in the sun too long'],
  ['What does the term "flash point" mean:',
   '(A) The maximum temperature at which a liquid gives off a vapor',
   '(B)/> The minimum temperature at which a liquid gives off a vapor',
   '(C) The temperature at which the chemical must be stored'],
  ['What is a MSDS:',
   '(A) A piece of paper that comes with hazardous materials',
   '(B)/> A data sheet that tells you the PPE necessary to avoid injury when using a  hazardous chemical',
   '(C) A sheet that tells you what the chemical can do to your health'],
  ['Where are the MSDS sheets kept:',
   '(A) Warehouse',
   '(B)/> Tool crib',
   '(C) QA desk',
   '(D) Joe\'s office'],
  ['What information must be included on a container label:',
   '(A) Chemical Name',
   '(B)/> Hazard warning',
   '(C) Manufacturer',
   '(D) HMIS label'],
  ['Who is responsible for insuring MSDS sheets are in the binder',
   '(A) Tool crib assistant',
   '(B)/> Employee who orders the chemicals',
   '(C) Warehouse employee'],
  ['You pour from a labelled container to an unlabeled container, the new container needs to be labeled if:',
   '(A) You are the only person using that container',
   '(B)/> The container is left unattended in a work area',
   '(C) Empties the new container immediately after using it'],
  ['What information does not need to be included on a NFPA label:',
   '(A) Chemical identity',
   '(B)/> PPE necessary',
   '(C) Volume']
];
var Ans = [ [0,2,0],[1,0,0],[0,2,0],[1,2,3],[0,2,3,0],[1,2,3,4],[1,0,0],[0,2,0],[1,2,0] ];

</script> 
<noscript>
<p align="center">
<b>This page requires Javascript</b>, which you don't seem to have.  Please try a different browser.
</p>
</noscript> 

<!-- form method="post" action="mailto:jinzer@starkaerospace.com?subject=HAZ CON Quiz" enctype="text/plain" id="thetest" -->
<form id="thetest" onsubmit="return false"> <!-- for testing purposes -->

Name: <input type="text" size="10" maxlength="40" name="name"> <br />

<div class="chapt_body" id="quiz">
 <div id="results" style="display:none">
  <p align="center" id="score"></p>
  <p align="center">
  Scroll through the page to review your answers.  
  The correct answer is highlighted in 
  <span style="background:#c5f4c8">&nbsp;green.&nbsp;</span> 
  Your incorrect answers (if any) are highlighted in 
  <span style="background:#f1cccd">&nbsp;red.&nbsp;</span> 
  If you'd like to take the test over again, click the reset button at the end of the test.
  </p>
 </div> 

<script type="text/javascript">
 var str = '';
 var tmp = '';
 for (var q=0; q<QRA.length; q++) {
   str += '<ul>#'+(q+1)+' '+QRA[q][0];
   for (var i=1; i<QRA[q].length; i++) {
     str += '<li style="list-style-type:none;padding-left:1em;"><label>'
     tmp = 'Q'+q;
     str += '<input name="'+tmp+'" id="'+(tmp+i)+'" type="checkbox" value="'+i+'"> ';
     str += QRA[q][i];
     str += '</label></li>';
   }
   str += '</ul>';
 }
 document.write(str);
</script>  
  
 <div id="btn_submit">
  <p align="center">
  <input class="quizsubmit" onclick="scoreTest(); return false;"
   src="button_submit.gif" type="image">
  </p>
 </div>

</div>
</form>
</BODY>
</HTML> 


Let me know if it is of any use to you.
Modify more if necessary and have fun with it!
:hammer:
Was This Post Helpful? 1
  • +
  • -

#6 mak3nsh1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 06-January 11

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 07 January 2011 - 07:21 AM

Thanks I will see what I can do to modify and make this work beautifully

This post has been edited by Dormilich: 07 January 2011 - 08:38 AM
Reason for edit:: removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#7 ashralk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 08-December 11

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 08 December 2011 - 05:24 AM

how do i get the score on page (i the same page then i can print the all document with the score)
please help on this

<HTML>
002	<HEAD>
003	<title> Hazardous Material Handling</title>
004	</HEAD>
005	<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#1e90ff" VLINK="#000080"
006	 TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">
007	<script type="text/javascript"> <!-- archaic form: language="Javascript" -->
008	 
009	function $_(IDS) { return document.getElementById(IDS); }
010	 
011	function scoreTest() {
012	  var num_questions = 0;
013	  var num_correct = 0;
014	  var tmp = '';
015	  var answers = [];  var info = '';
016	  for (q=0; q<QRA.length; q++) {
017	    for (i=1; i<QRA[q].length; i++) {
018	      if (Ans[q][(i-1)] != 0) { num_questions++; }
019	      tmp = 'Q'+q;
020	      if ($_(tmp+i).checked) {
021	        if ($_(tmp+i).value == Ans[q][(i-1)]) {
022	          info = 'correct';  num_correct++;
023	        } else {
024	          info = 'incorrect';
025	        }
026	        answers.push((tmp+i)+':'+$_(tmp+i).value+' = '+info);
027	      }
028	    }
029	  } 
030	  var str = answers.join('\n');
031	  str += '\nCorrect: '+num_correct+' of: '+num_questions;
032	  str += ' = '+(num_correct / num_questions * 100).toFixed(2)+'%';
033	  alert(str);
034	    return false;
035	};
036	  
037	var QRA = [
038	  ['A chemical is defined as:',
039	   '(A) A liquid in a can',
040	   '(B)/> Any element, chemical compound or mixture of elements and/or compound',
041	   '(C) Any can with a hazard label on it'],
042	  ['Exposure or exposed means:',
043	   '(A) You are subjected to a chemical that is a physical or health hazard',
044	   '(B)/> You spill acetone on your hands with no gloves on',
045	   '(C) You stayed in the sun too long'],
046	  ['What does the term "flash point" mean:',
047	   '(A) The maximum temperature at which a liquid gives off a vapor',
048	   '(B)/> The minimum temperature at which a liquid gives off a vapor',
049	   '(C) The temperature at which the chemical must be stored'],
050	  ['What is a MSDS:',
051	   '(A) A piece of paper that comes with hazardous materials',
052	   '(B)/> A data sheet that tells you the PPE necessary to avoid injury when using a  hazardous chemical',
053	   '(C) A sheet that tells you what the chemical can do to your health'],
054	  ['Where are the MSDS sheets kept:',
055	   '(A) Warehouse',
056	   '(B)/> Tool crib',
057	   '(C) QA desk',
058	   '(D) Joe\'s office'],
059	  ['What information must be included on a container label:',
060	   '(A) Chemical Name',
061	   '(B)/> Hazard warning',
062	   '(C) Manufacturer',
063	   '(D) HMIS label'],
064	  ['Who is responsible for insuring MSDS sheets are in the binder',
065	   '(A) Tool crib assistant',
066	   '(B)/> Employee who orders the chemicals',
067	   '(C) Warehouse employee'],
068	  ['You pour from a labelled container to an unlabeled container, the new container needs to be labeled if:',
069	   '(A) You are the only person using that container',
070	   '(B)/> The container is left unattended in a work area',
071	   '(C) Empties the new container immediately after using it'],
072	  ['What information does not need to be included on a NFPA label:',
073	   '(A) Chemical identity',
074	   '(B)/> PPE necessary',
075	   '(C) Volume']
076	];
077	var Ans = [ [0,2,0],[1,0,0],[0,2,0],[1,2,3],[0,2,3,0],[1,2,3,4],[1,0,0],[0,2,0],[1,2,0] ];
078	 
079	</script>
080	<noscript>
081	<p align="center">
082	<b>This page requires Javascript</b>, which you don't seem to have.  Please try a different browser.
083	</p>
084	</noscript>
085	 
086	<!-- form method="post" action="mailto:jinzer@starkaerospace.com?subject=HAZ CON Quiz" enctype="text/plain" id="thetest" -->
087	<form id="thetest" onsubmit="return false"> <!-- for testing purposes -->
088	 
089	Name: <input type="text" size="10" maxlength="40" name="name"> <br />
090	 
091	<div class="chapt_body" id="quiz">
092	 <div id="results" style="display:none">
093	  <p align="center" id="score"></p>
094	  <p align="center">
095	  Scroll through the page to review your answers. 
096	  The correct answer is highlighted in
097	  <span style="background:#c5f4c8">&nbsp;green.&nbsp;</span>
098	  Your incorrect answers (if any) are highlighted in
099	  <span style="background:#f1cccd">&nbsp;red.&nbsp;</span>
100	  If you'd like to take the test over again, click the reset button at the end of the test.
101	  </p>
102	 </div>
103	 
104	<script type="text/javascript">
105	 var str = '';
106	 var tmp = '';
107	 for (var q=0; q<QRA.length; q++) {
108	   str += '<ul>#'+(q+1)+' '+QRA[q][0];
109	   for (var i=1; i<QRA[q].length; i++) {
110	     str += '<li style="list-style-type:none;padding-left:1em;"><label>'
111	     tmp = 'Q'+q;
112	     str += '<input name="'+tmp+'" id="'+(tmp+i)+'" type="checkbox" value="'+i+'"> ';
113	     str += QRA[q][i];
114	     str += '</label></li>';
115	   }
116	   str += '</ul>';
117	 }
118	 document.write(str);
119	</script> 
120	   
121	 <div id="btn_submit">
122	  <p align="center">
123	  <input class="quizsubmit" onclick="scoreTest(); return false;"
124	   src="button_submit.gif" type="image">
125	  </p>
126	 </div>
127	 
128	</div>
129	</form>
130	</BODY>
131	</HTML>

This post has been edited by Dormilich: 08 December 2011 - 06:20 AM
Reason for edit:: please use [code] /* your code source here */ [/code] tags when posting code

Was This Post Helpful? 0
  • +
  • -

#8 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 129
  • View blog
  • Posts: 837
  • Joined: 25-October 08

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 08 December 2011 - 10:06 AM

You will still need to modify the <form> tag for a true submit of the information as this was modified for testing purposes.
<HTML>
<head>
<title> Hazardous Material Handling</title>
<script type="text/javascript">
// For: http://www.dreamincode.net/forums/topic/208615-htmljavascript-test-multiple-choice-multiple-answer/page__pid__1506131__st__0&#entry1506131

function $_(IDS) { return document.getElementById(IDS); }

function scoreTest() {
  var num_questions = 0;
  var num_correct = 0;
  var tmp = '';
  var answers = [];  var info = '';
  for (q=0; q<QRA.length; q++) {
    for (i=1; i<QRA[q].length; i++) {
      if (Ans[q][(i-1)] != 0) { num_questions++; }
      tmp = 'Q'+q;
      if ($_(tmp+i).checked) { 
        if ($_(tmp+i).value == Ans[q][(i-1)]) {
          info = 'correct';  num_correct++;
        } else {
          info = 'incorrect'; 
        }
        answers.push((tmp+i)+':'+$_(tmp+i).value+' = '+info);
      }
    }
  }  
  var str = '';
//  str += answers.join('<br>\n')+'<br>';
  str += 'Correct: '+num_correct+' of: '+num_questions;
  str += ' = '+(num_correct / num_questions * 100).toFixed(2)+'%';
//  alert(str);
  document.getElementById('showResults').innerHTML = str;
};
 
var QRA = [
  ['A chemical is defined as:',
   '(A) A liquid in a can',
   '(B)/> Any element, chemical compound or mixture of elements and/or compound',
   '(C) Any can with a hazard label on it'],
  ['Exposure or exposed means:',
   '(A) You are subjected to a chemical that is a physical or health hazard',
   '(B)/> You spill acetone on your hands with no gloves on',
   '(C) You stayed in the sun too long'],
  ['What does the term "flash point" mean:',
   '(A) The maximum temperature at which a liquid gives off a vapor',
   '(B)/> The minimum temperature at which a liquid gives off a vapor',
   '(C) The temperature at which the chemical must be stored'],
  ['What is a MSDS:',
   '(A) A piece of paper that comes with hazardous materials',
   '(B)/> A data sheet that tells you the PPE necessary to avoid injury when using a  hazardous chemical',
   '(C) A sheet that tells you what the chemical can do to your health'],
  ['Where are the MSDS sheets kept:',
   '(A) Warehouse',
   '(B)/> Tool crib',
   '(C) QA desk',
   '(D) Joe\'s office'],
  ['What information must be included on a container label:',
   '(A) Chemical Name',
   '(B)/> Hazard warning',
   '(C) Manufacturer',
   '(D) HMIS label'],
  ['Who is responsible for insuring MSDS sheets are in the binder',
   '(A) Tool crib assistant',
   '(B)/> Employee who orders the chemicals',
   '(C) Warehouse employee'],
  ['You pour from a labelled container to an unlabeled container, the new container needs to be labeled if:',
   '(A) You are the only person using that container',
   '(B)/> The container is left unattended in a work area',
   '(C) Empties the new container immediately after using it'],
  ['What information does not need to be included on a NFPA label:',
   '(A) Chemical identity',
   '(B)/> PPE necessary',
   '(C) Volume']
];
var Ans = [ [0,2,0],[1,0,0],[0,2,0],[1,2,3],[0,2,3,0],[1,2,3,4],[1,0,0],[0,2,0],[1,2,0] ];

</script> 
</head>

<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#1e90ff" VLINK="#000080"
 TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">
<noscript>
<p align="center">
<b>This page requires Javascript</b>, which you don't seem to have.
   Please try a different browser.
</p>
</noscript> 

<!-- form method="post" action="mailto:jinzer@starkaerospace.com?subject=HAZ CON Quiz" enctype="text/plain" id="thetest" name="myForm" onsubmit="return true" -->
<!-- following is for testing purposes -->
<form id="thetest" name='myForm' onsubmit="return false">

Name: <input type="text" size="10" maxlength="40" name="fullName"> <br />

<div class="chapt_body" id="quiz">
 <div id="results" style="display:none">
  <p align="center">
  Scroll through the page to review your answers.<br>  
  The correct answer is highlighted in 
  <span style="background:#c5f4c8">&nbsp;green.&nbsp;</span> <br>
  Your incorrect answers (if any) are highlighted in 
  <span style="background:#f1cccd">&nbsp;red.&nbsp;</span> <br>
  If you'd like to take the test over again, click the reset button at the end of the test.
  </p>
 </div> 

<script type="text/javascript">
 var str = '';
 var tmp = '';
 for (var q=0; q<QRA.length; q++) {
   str += '<ul>#'+(q+1)+' '+QRA[q][0];
   for (var i=1; i<QRA[q].length; i++) {
     str += '<li style="list-style-type:none;padding-left:1em;"><label>'
     tmp = 'Q'+q;
     str += '<input name="'+tmp+'" id="'+(tmp+i)+'" type="checkbox" value="'+i+'"> ';
     str += QRA[q][i];
     str += '</label></li>';
   }
   str += '</ul>';
 }
 document.write(str);
</script>  

 <div id="showResults"></div>
 <div id="btn_submit">
  <p align="center">
   <input type="button" value="Score" onclick="scoreTest();return false">
  <input class="quizsubmit" src="button_submit.gif" type="submit" value="Submit">
  </p>
 </div>

</div>
</form>
</body>
</HTML> 


Was This Post Helpful? 0
  • +
  • -

#9 ashralk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 08-December 11

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 08 December 2011 - 10:43 PM

can we link this for any sql , if i can get records its good, i want to put 1 hour count down , if we doing this exam we must allow one time for user after submit the exam its should exit and print all the answer and score in the sheet
Was This Post Helpful? 0
  • +
  • -

#10 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 129
  • View blog
  • Posts: 837
  • Joined: 25-October 08

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 09 December 2011 - 01:42 PM

I know nothing about SQL.
Either some other forum members will respond about this
or you might try posting to a different section of this forum.

I do know that JS is not a very good language to use
if you want to have "quiz for grades". Anyone, and I mean ANYONE,
can simple view the source of the JS and get the answers.
Everyone will get a !00% grade.

You have several options to try to trick the casual user
by storing the questions and answers in different external files
Encrypting the answers is another option, but you would need to
decrypt to display and if you can do that, so can the quiz taker.
JS is just not a very secure language for quizzes and exams.

Assuming you are using PHP to acquire the records from the SQL,
you might be better off designing the quiz from scratch using
the server-side language rather than the JS option.
Was This Post Helpful? 0
  • +
  • -

#11 ashralk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 08-December 11

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 09 December 2011 - 08:42 PM

can we put time count down for 60 minute
Was This Post Helpful? 0
  • +
  • -

#12 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 129
  • View blog
  • Posts: 837
  • Joined: 25-October 08

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 09 December 2011 - 09:52 PM

View Postashralk, on 09 December 2011 - 09:42 PM, said:

can we put time count down for 60 minute


Why bother? All the user has to do is refresh the page and the timer would restart for another 60 minutes.

You might consider setting a cookie at the time the user first enters the quiz
and check that timer if the user tries to reload the page a second time.
There are a number of scripts to set and read cookies in this forum and on the web.

However, that would probably not allow the quiz to be taken on the same computer without
some very special logic, possibly using a user login query.

If you could guarantee the user would be using HTML5, you might be able to rig some code
using the new 'localstorage' command. It is similar to, but still quite different, from
a cookie solution. Google 'HTML5 localstorage' for a number of references.

It is possible to use a countdown timer, but because of the security problems I would
not recommend any JS solution involving a "grade" for a course. Subject review
and self-testing review would be fine, but as a educator at the college level, I would
not try using JS for testing when real grades are to be awarded.
Was This Post Helpful? 0
  • +
  • -

#13 ashralk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 08-December 11

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 10 December 2011 - 12:22 AM

thanks , how do i put a back ground picture , i want put my log in to back ground,
please help on this
Was This Post Helpful? 0
  • +
  • -

#14 RetardedGenius  Icon User is offline

  • >>──(Knee)──►
  • member icon

Reputation: 126
  • View blog
  • Posts: 555
  • Joined: 30-October 10

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 10 December 2011 - 08:58 AM

You could hash the answers in the source code to prevent the user from being able to see the answers directly but there would be nothing stopping them from modifying your Javascript (however unlikely that may seem).

You really should validate the answers on the server side, it makes sense as you will be sending the email from there anyway. I would also recommend shuffling the order of answers and questions; to prevent someone printing a cheat-sheet and sharing it among their colleagues! :D

Oh, and you might want to give Moodle a look!
Was This Post Helpful? 0
  • +
  • -

#15 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 129
  • View blog
  • Posts: 837
  • Joined: 25-October 08

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 10 December 2011 - 01:38 PM

View Postashralk, on 10 December 2011 - 01:22 AM, said:

thanks , how do i put a back ground picture , i want put my log in to back ground,
please help on this

Look up CSS "background-Image".
Here's a start: http://www.w3schools...round-image.asp
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2