HTML/JavaScript Test Multiple Choice Multiple Answer

JavaScript/HTML

  • (2 Pages)
  • +
  • 1
  • 2

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

#16 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 - 09:53 PM

after clicking t he score button web site should be disable(because user can change the answer please help on this
<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>

This post has been edited by Dormilich: 11 December 2011 - 05:10 AM
Reason for edit:: please use [code] [/code] tags when posting source code

Was This Post Helpful? 0
  • +
  • -

#17 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 10 December 2011 - 10:15 PM

I don't believe this can be done with JS alone.

The best you might try is to save the selections of the quiz submitted to a server.
The entry should be time stamped so that any subsequent submissions can be ignored.
Was This Post Helpful? 0
  • +
  • -

#18 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 12 December 2011 - 07:04 AM

how can i generate a report ?
Was This Post Helpful? 0
  • +
  • -

#19 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 12 December 2011 - 10:32 AM

View Postashralk, on 12 December 2011 - 08:04 AM, said:

how can i generate a report ?


What report?
This was not specified in the original request.
You asked for help in displaying the score as an alert!
Are the requirements changing now?

Some ideas:
1. You can ouput the score results to a new window and then print that window to be turned in after completion of the quiz.
2. You could email the score results to yourself.
3. You could use some CGI program (like 'formmail.cgi') to send to a flat-file database for further processing.
See: http://www.scriptarc...m/formmail.html
4. You could write your own PHP or PERL program to save the scoring information.

Anyway, good luck!
:)
Was This Post Helpful? 0
  • +
  • -

#20 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 12 December 2011 - 08:37 PM

thanks your r help,

after clicking the score button exam should be End after that all the document should be print (user select questions with answer and the score) , how do i put a pass and fail in the front of the score(50< fail, 50> pass)
please help on this.............
Was This Post Helpful? 0
  • +
  • -

#21 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: HTML/JavaScript Test Multiple Choice Multiple Answer

Posted 12 December 2011 - 10:25 PM

View Postashralk, on 12 December 2011 - 09:37 PM, said:

thanks your r help,

after clicking the score button exam should be End after that all the document should be print (user select questions with answer and the score) , how do i put a pass and fail in the front of the score(50< fail, 50> pass)
please help on this.............


You already have the answers available in the score() function
[color="#FF0000"]//  str += answers.join('<br>\n')+'<br>';  // uncomment this line[/color]
  str += 'Correct: '+num_correct+' of: '+num_questions;
[color="#FF0000"]  str += ' = '+(num_correct / num_questions * 100).toFixed(2)+'%';[/color]
//  alert(str);
  document.getElementById('showResults').innerHTML = str;
};


You already have the score available as part of the str in the second red area above.
Save it as a variable for the <50% or >50% test and then attached it to the output string.

You should be starting to do some of this stuff yourself by now.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2