Javascript Quiz

Ho to display answers

  • (2 Pages)
  • +
  • 1
  • 2

23 Replies - 6941 Views - Last Post: 05 May 2010 - 11:10 AM

#1 Guest_mandy easter*


Reputation:

Javascript Quiz

Posted 21 April 2010 - 05:10 AM

hi all, apologies this code is a bit confusing(or a bit confused!:),i have to set up a Javascript Test which has five questions in the form of radio buttons.It has to show feedback on the answers checked and the correct answers when i press getScore, so that a new page gets displayed with the all answers given a tick or a cross to each. If this isn't exactly clear please let me know,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test.html</title>
<style type="text/css">
<!--
.batang
{
	font-family: Batang, BatangChe, "Bauhaus 93", "Bell MT";
	font-size: 16px;
	color: #000000;
	font-style: normal;
	background-color: #FFF;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
	border-top-width: thin;
	border-color: #600;
	font-weight: bolder;
}
.batang #form1 p
{
	text-align: left;
}
.frmborder
{
	border: thin solid #600;
	color: #600;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
	border-color: #600;
	margin: 1em;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
<script type = "text/javascript"><!-- Begin
// Insert number of questions
var numQuestions = 5;

// Insert number of choices in each question
var numChoice = 4;

var answers = new Array(5);

answers[0] = "Quantum Particle";
answers[1] = "Lines of Force within a field around a Proton";
answers[2] = "How often a wave cycle occurs within a unit of time";
answers[3] = "Radio wave";
answers[4] = "Gamma Ray";


function getScore(form)
{
	var score = 0;
var currElement;
var currSelection;
 
for (i=0; i<numQuestions; i++)
{
  currElement = i * numChoice;
for (j=0; j<numChoice; j++) 
  {
  currSelection = form.elements[currElement + 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;
}
//  End -->


</script>
</head>
<body class="batang">
<p><img src="ReviseWise.html_clip_image001.gif" width="125" height="120" alt="RW" /></p>
<center>
<h1>Test Yourself -Electromagnetism </h1></center>
<form action="" method="post" enctype="multipart/form-data" name="test" class="frmborder" id="form1">
<p>&nbsp;</p>
<p><u> Name:</u>
  <input type="text" name="Name" id="textfield" />
</p>
<p><u>Password:</u>
  <label>
<input type="text" name="Password" id="textfield2" />
</label>
</p><!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

</p>

<p>&nbsp;   </p>
<p><u> Question 1</u></p>
<p>What is a Photon? </p>
<p>
<label>
<input type="radio" name="RadioGroup1" value="Quantum Particle" id="RadioGroup1_0" /> 
Quantum Particle</label>
<br /> 
<label>
<input type="radio" name="RadioGroup1" value="Wave" id="RadioGroup1_1" /> 
Wave</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="Electron" id="RadioGroup1_2" /> 
Electron </label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="All of the above" id="RadioGroup1_3" /> 
All of the above</label>
</p>
<p>&nbsp;</p>
<p><u> Question 2</u></p>
<p> What is the Line of Force?</p>
<p>
<label>
<input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_0" /> A force field</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_1" /> A electronic wave</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_2" /> 
Lines of force within a field around a Proton</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_3" /> 
A positively charged field around a Proton</label>
<br />
</p>
<p><img src="_notes/lowFrequency.gif" width="280" height="231" alt="photon" /> </p>
<p><u>Question 3</u> -study the diagram above then answer the question.</p>
<p>What does a Wavelength Frequency represent?</p>
<p>
<label>
<input type="radio" name="RadioGroup3" value="radio" id="RadioGroup3_0" /> 
How often a wave cycle occurs in a unit of time</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="radio" id="RadioGroup3_1" /> 
The amount of electrons in a wave</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="radio" id="RadioGroup3_2" /> 
The measurement from one wave crest to another</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="radio" id="RadioGroup3_3" /> 
The speed of light multiplied by a wavelength</label>
<br />
</p>
<p>&nbsp; </p>
<p><u>Question 4</u></p>
<p>What is the longest wavelength on the electromagnetic spectrum?</p>
<p>
<label>
<input type="radio" name="RadioGroup4" value="radio" id="RadioGroup4_0" /> 
Radio wave</label>
<br />
<label>
<input type="radio" name="RadioGroup4" value="radio" id="RadioGroup4_1" /> 
Gamma ray</label>
<br />
<label>
<input type="radio" name="RadioGroup4" value="radio" id="RadioGroup4_2" /> 
Infared</label>
<br />
<label>
<input type="radio" name="RadioGroup4" value="radio" id="RadioGroup4_3" /> 
Sunlight</label>
<br />
</p>
<p>&nbsp; </p>
<p><u>Question 5</u></p>
<p>What is the shortest wavelength?</p>
<p>
<label>
<input type="radio" name="Radiogroup5" value="radio" id="Radiogroup5_0" />
    Sunlight</label>
  <br />
  <label>
    <input type="radio" name="Radiogroup5" value="radio" id="Radiogroup5_1" />
    Microwave</label>
  <br />
  <label>
    <input type="radio" name="Radiogroup5" value="radio" id="Radiogroup5_2" />
    Radioactive wave</label>
  <br />
  <label>
    <input type="radio" name="Radiogroup5" value="radio" id="Radiogroup5_3" />
    Gamma Ray</label>
  <br />
</p>
<p></p>
<p>&nbsp;  </p>
<p>
  <input type="submit" name="onclick" id="onclick" value="Submit" />
  <input type="reset" value="Clear answers" />
  <input type="button" value="Get score" onclick="getScore(this.form)" />
 
  </p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</form>
</body>
</html>











Is This A Good Question/Topic? 0

Replies To: Javascript Quiz

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 125
  • View blog
  • Posts: 818
  • Joined: 25-October 08

Re: Javascript Quiz

Posted 21 April 2010 - 09:25 AM

Consider these changes ...

Note you could put the questions into one external JS file
and the answers in another for a "bit" more security.

Could also encrypt the answers, but that probably is not worth the bother.

If they want to cheat, there is nothing you can do about it in normal JS. :hammer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test.html</title>
<!-- From: http://www.dreamincode.net/forums/topic/169343-javascript-quiz/ -->

<style type="text/css">
.batang {
        font-family: Batang, BatangChe, "Bauhaus 93", "Bell MT";
        font-size: 16px;
        color: #000000;
        font-style: normal;
        background-color: #FFF;
        border-top-color: #600;
        border-right-color: #600;
        border-bottom-color: #600;
        border-left-color: #600;
        border-top-width: thin;
        border-color: #600;
        font-weight: bolder;
}
.batang #form1 p {
        text-align: left;
}
.frmborder {
        border: thin solid #600;
        color: #600;
        border-top-color: #600;
        border-right-color: #600;
        border-bottom-color: #600;
        border-left-color: #600;
        border-color: #600;
        margin: 1em;
}

a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover   { text-decoration: none; }
a:active  { text-decoration: none; }
</style>

<script type="text/javascript">

var QR = [
    ['Electromagnetism'],
    ['What is a proton?',
	'Quantum Particle','Wave','Electron','All of the above'],
    ['What is the Line of Force?',
	'A force field','A electronic wave',
        'Lines of force within a field around a Proton',
        'A positively charged field around a Proton'],
    ['What does a Wavelength Frequency represent?',
	'How often a wave cycle occurs in a unit of time',
	'The amount of electrons in a wave',
	'The measurement from one wave crest to another',
	'The speed of light multiplied by a wavelength'],
    ['What is the longest wavelength on the electromagnetic spectrum?',
	'Radio wave','Gamma ray','Infared','Sunlight'],
    ['What is the shortest wavelength?',
	'Sunlight','Microwave','Radioactive wave','Gamma Ray']		// Note: no comma after last entry
];
var QRans = [0,1,3,1,1,4];

function getScore(form) {
  var currSelection;
  var numQuestions = QR.length-1;
  var score = 0;

  for (var i=1; i<QR.length; i++) {
    if (getRBtnName('RG'+i) == (QRans[i]-1)) { score++; }
// following for testing purposes only
//    alert(getRBtnName('RG'+i)+' == '+(QRans[i]-1)+'\n#'+ i+' score: '+score+' of '+numQuestions);
  }

  score = ((score/numQuestions) * 100).toFixed(2)+'%';
  var correctAnswers = "";
  for (var i=1; i<QR.length; i++) {
    correctAnswers += i + ". " + QR[i][QRans[i]] + "\r\n";
  }
  var str = 'Score: '+score+'\n\nCorrect answers\n\n'+correctAnswers;
  alert(str);
}

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;
} 

</script>
</head>
<body class="batang">
 <center>
  <p><img src="ReviseWise.html_clip_image001.gif" width="125" height="120" alt="RW" /></p>
   <h1>Test Yourself -Electromagnetism </h1> 
 </center>

  <form action="" method="post" enctype="multipart/form-data"
   name="test" class="frmborder" onsubmit="return false">
  <p>&nbsp;</p>

  <table border="0"><tr><td>
   <u> Name:</u> <input type="text" name="Name" id="textfield" />
  </td><td>
   <u>Password:</u> <input type="text" name="Password" id="textfield2" />
  </td></tr></table>

<p>&nbsp;   </p>
<script type="text/javascript">
  var str = '';
  for (var q=1; q<=2; q++) {
    str  += '<p><u> Question '+q+'</u>  -- ';
    str += ' '+QR[q][0]+'</p><blockquote>';
    for (var r=1; r<QR[q].length; r++) {
      str += '<p><label><input type="radio" name="RG'+q+'" value="'+r+'"> '+QR[q][r]+'</label>';
    }
    str += '</blockquote>';
  }
  document.write(str);
</script>

<p><img src="_notes/lowFrequency.gif" width="280" height="231" alt="photon image" /> </p>
<p><u> -study the diagram above then answer following the question.</u></p>

<script type="text/javascript">
  var str = '';
  for (var q=3; q<=5; q++) {
    str  += '<p><u> Question '+q+'</u>  -- ';
    str += ' '+QR[q][0]+'</p><blockquote>';
    for (var r=1; r<QR[q].length; r++) {
      str += '<p><label><input type="radio" name="RG'+q+'" value="'+r+'"> '+QR[q][r]+'</label>';
    }
    str += '</blockquote>';
  }
  document.write(str);
</script>

<p>&nbsp; </p>
<p>
  <input type="submit" name="onclick" value="Submit" />
  <input type="reset" value="Clear all" />
  <input type="button" value="Get score" onclick="getScore(this.form)" />
</p>
<p>&nbsp;</p>

</form>
</body>
</html>


Post back if you have questions about the set-up

Good Luck!
:bananaman:
Was This Post Helpful? 0
  • +
  • -

#3 Guest_mandy easter*


Reputation:

Re: Javascript Quiz

Posted 21 April 2010 - 11:57 AM

Thankyou very much for your help, will let you know,


Mandy
Was This Post Helpful? 0

#4 oomlaut  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 27
  • Joined: 07-April 09

Re: Javascript Quiz

Posted 21 April 2010 - 12:05 PM

You could also try to obfuscate the answers, though again, the process is pretty easy to reverse.
Was This Post Helpful? 0
  • +
  • -

#5 Guest_mandy easter*


Reputation:

Re: Javascript Quiz

Posted 22 April 2010 - 05:43 AM

Hi i have connected a myscript.js file to my Test.html with all the code listed below, i couldn't get it to work in Dreamweaver or by just loading it into the browser, however it worked in EditPlus 3, when i click on the 'show in browser' tab.....bizarre eh! I only need it to work in IE and firefox, no other browsers.
In Dreamweaver it spikes a code error in the first line, not sure if i have set it up correctly, i added this to the top of the original Test.html file:

<script language="Javascript" src="myscript.js" type="text/javascript">
</script>


Thankyou!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" //Dreamweaver shows a red mark here
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test.html</title>
<!-- From: http://www.dreamincode.net/forums/topic/169343-javascript-quiz/ -->

<style type="text/css">
.batang {
        font-family: Batang, BatangChe, "Bauhaus 93", "Bell MT";
        font-size: 16px;
        color: #000000;
        font-style: normal;
        background-color: #FFF;
        border-top-color: #600;
        border-right-color: #600;
        border-bottom-color: #600;
        border-left-color: #600;
        border-top-width: thin;
        border-color: #600;
        font-weight: bolder;
}
.batang #form1 p {
        text-align: left;
}
.frmborder {
        border: thin solid #600;
        color: #600;
        border-top-color: #600;
        border-right-color: #600;
        border-bottom-color: #600;
        border-left-color: #600;
        border-color: #600;
        margin: 1em;
}

a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover   { text-decoration: none; }
a:active  { text-decoration: none; }
</style>

<script type="text/javascript">

var QR = [
    ['Electromagnetism'],
    ['What is a proton?',
	'Quantum Particle','Wave','Electron','All of the above'],
    ['What is the Line of Force?',
	'A force field','A electronic wave',
        'Lines of force within a field around a Proton',
        'A positively charged field around a Proton'],
    ['What does a Wavelength Frequency represent?',
	'How often a wave cycle occurs in a unit of time',
	'The amount of electrons in a wave',
	'The measurement from one wave crest to another',
	'The speed of light multiplied by a wavelength'],
    ['What is the longest wavelength on the electromagnetic spectrum?',
	'Radio wave','Gamma ray','Infared','Sunlight'],
    ['What is the shortest wavelength?',
	'Sunlight','Microwave','Radioactive wave','Gamma Ray']		// Note: no comma after last entry
];
var QRans = [0,1,3,1,1,4];

function getScore(form) {
  var currSelection;
  var numQuestions = QR.length-1;
  var score = 0;

  for (var i=1; i<QR.length; i++) {
    if (getRBtnName('RG'+i) == (QRans[i]-1)) { score++; }
// following for testing purposes only
//    alert(getRBtnName('RG'+i)+' == '+(QRans[i]-1)+'\n#'+ i+' score: '+score+' of '+numQuestions);
  }

  score = ((score/numQuestions) * 100).toFixed(2)+'%';
  var correctAnswers = "";
  for (var i=1; i<QR.length; i++) {
    correctAnswers += i + ". " + QR[i][QRans[i]] + "\r\n";
  }
  var str = 'Score: '+score+'\n\nCorrect answers\n\n'+correctAnswers;
  alert(str);
}

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;
} 

</script>
</head>
<body class="batang">
 <center>
  <p><img src="ReviseWise.html_clip_image001.gif" width="125" height="120" alt="RW" /></p>
   <h1>Test Yourself -Electromagnetism </h1> 
 </center>

  <form action="" method="post" enctype="multipart/form-data"
   name="test" class="frmborder" onsubmit="return false">
  <p>&nbsp;</p>

  <table border="0"><tr><td>
   <u> Name:</u> <input type="text" name="Name" id="textfield" />
  </td><td>
   <u>Password:</u> <input type="text" name="Password" id="textfield2" />
  </td></tr></table>

<p>&nbsp;   </p>
<script type="text/javascript">
  var str = '';
  for (var q=1; q<=2; q++) {
    str  += '<p><u> Question '+q+'</u>  -- ';
    str += ' '+QR[q][0]+'</p><blockquote>';
    for (var r=1; r<QR[q].length; r++) {
      str += '<p><label><input type="radio" name="RG'+q+'" value="'+r+'"> '+QR[q][r]+'</label>';
    }
    str += '</blockquote>';
  }
  document.write(str);
</script>

<p><img src="_notes/lowFrequency.gif" width="280" height="231" alt="photon image" /> </p>
<p><u> -study the diagram above then answer following the question.</u></p>

<script type="text/javascript">
  var str = '';
  for (var q=3; q<=5; q++) {
    str  += '<p><u> Question '+q+'</u>  -- ';
    str += ' '+QR[q][0]+'</p><blockquote>';
    for (var r=1; r<QR[q].length; r++) {
      str += '<p><label><input type="radio" name="RG'+q+'" value="'+r+'"> '+QR[q][r]+'</label>';
    }
    str += '</blockquote>';
  }
  document.write(str);
</script>

<p>&nbsp; </p>
<p>
  <input type="submit" name="onclick" value="Submit" />
  <input type="reset" value="Clear all" />
  <input type="button" value="Get score" onclick="getScore(this.form)" />
</p>
<p>&nbsp;</p>

</form>
</body>
</html>


Post back if you have questions about the set-up

Good Luck!
:bananaman:
[/quote]
Was This Post Helpful? 0

#6 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 125
  • View blog
  • Posts: 818
  • Joined: 25-October 08

Re: Javascript Quiz

Posted 22 April 2010 - 06:22 AM

What are the contents of 'myscript.js'?

Where did you put the line loading it in the "Test.html" file?

The code I provided works in FF and MSIE without modifications. What other changes have you made to it and why are you putting it into DreamWeaver? Are you putting all of the .html file in or just the JS parts?

I'm a little confused as to what you are doing and the errors that you are getting. I also don't know what "EditPlus 3" is. I'm assuming an editor with an browser interface?

:bigsmile:
Was This Post Helpful? 0
  • +
  • -

#7 Guest_Guest*


Reputation:

Re: Javascript Quiz

Posted 22 April 2010 - 02:23 PM

Im building a revision website project in Dreamweaver so opened a blank .js file putting all the code you gave me 'cut and paste' into it, html and js code to it.


I added this:

<script language="Javascript" src="myscript.js" type="text/javascript">
</script>

to the <head> of the Test.html, to link it to the .js file.

Ok, what needs to go in the .js file? and what needs to go in the Test.html file?
Was This Post Helpful? 0

#8 Guest_Guest*


Reputation:

Re: Javascript Quiz

Posted 22 April 2010 - 02:32 PM

Apologies...i misunderstood what you said about using an external file.....so i scrapped my .js file and it is now working!!! Thankyou very much indeed :genius:

Mandy
Was This Post Helpful? 0

#9 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 125
  • View blog
  • Posts: 818
  • Joined: 25-October 08

Re: Javascript Quiz

Posted 22 April 2010 - 06:09 PM

View PostGuest, on 22 April 2010 - 01:32 PM, said:

Apologies...i misunderstood what you said about using an external file.....so i scrapped my .js file and it is now working!!! Thankyou very much indeed :genius:

Mandy

You're most welcome.
Happy to help.

BTW, if you still want to go with an external file, just put the following code (NO HTML COMMANDS AT ALL) in the external file that you choose to call 'myscript.js'

var QR = [
    ['Electromagnetism'],
    ['What is a proton?',
        'Quantum Particle','Wave','Electron','All of the above'],
    ['What is the Line of Force?',
        'A force field','A electronic wave',
        'Lines of force within a field around a Proton',
        'A positively charged field around a Proton'],
    ['What does a Wavelength Frequency represent?',
        'How often a wave cycle occurs in a unit of time',
        'The amount of electrons in a wave',
        'The measurement from one wave crest to another',
        'The speed of light multiplied by a wavelength'],
    ['What is the longest wavelength on the electromagnetic spectrum?',
        'Radio wave','Gamma ray','Infared','Sunlight'],
    ['What is the shortest wavelength?',
        'Sunlight','Microwave','Radioactive wave','Gamma Ray']          // Note: no comma after last entry
];

// could add more security by separating the answers from the questions 
// and putting the next line into another external file
var QRans = [0,1,3,1,1,4];

function getScore(form) {
  var currSelection;
  var numQuestions = QR.length-1;
  var score = 0;

  for (var i=1; i<QR.length; i++) {
    if (getRBtnName('RG'+i) == (QRans[i]-1)) { score++; }
// following for testing purposes only
//    alert(getRBtnName('RG'+i)+' == '+(QRans[i]-1)+'\n#'+ i+' score: '+score+' of '+numQuestions);
  }

  score = ((score/numQuestions) * 100).toFixed(2)+'%';
  var correctAnswers = "";
  for (var i=1; i<QR.length; i++) {
    correctAnswers += i + ". " + QR[i][QRans[i]] + "\r\n";
  }
  var str = 'Score: '+score+'\n\nCorrect answers\n\n'+correctAnswers;
  alert(str);
}

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;
} 


Remove the code from the main .html file and put in the following to call the external file with this:
<script type="text/javascript" src="myscript.js"></script>


You could optionally put the answers into another separate external file.
It would just be the single line in a file named 'myanswers.js'
var QRans = [0,1,3,1,1,4];
and would be removed from the first external .js file
But again, it's not much more secure as all JS can be seen if the user knows how.
Make sure the files are in the same directory unless you change the /path/ references to the files.

Good Luck!
:)
Was This Post Helpful? 1
  • +
  • -

#10 Guest_mandy easter*


Reputation:

Re: Javascript Quiz

Posted 28 April 2010 - 09:51 AM

Hi JMARKER,
could i just ask one more question please, if i wanted to add more questions to the quiz would that be difficult to do or just a few minor alterations?


Thankyou

mandy
Was This Post Helpful? 0

#11 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: Javascript Quiz

Posted 28 April 2010 - 11:28 AM

After the last entry in the QR variable, add a comma and put your questions in brackets. Just follow what he has there. Be sure to add the answers in the right order for the QRans variable.

var QR = [
    ['Electromagnetism'],
    ['What is a proton?',
        'Quantum Particle','Wave','Electron','All of the above'],
    ['What is the Line of Force?',
        'A force field','A electronic wave',
        'Lines of force within a field around a Proton',
        'A positively charged field around a Proton'],
    ['What does a Wavelength Frequency represent?',
        'How often a wave cycle occurs in a unit of time',
        'The amount of electrons in a wave',
        'The measurement from one wave crest to another',
        'The speed of light multiplied by a wavelength'],
    ['What is the longest wavelength on the electromagnetic spectrum?',
        'Radio wave','Gamma ray','Infared','Sunlight'],
    ['What is the shortest wavelength?',
        'Sunlight','Microwave','Radioactive wave','Gamma Ray'],
    ['New question?', 'answer', 'answer', 'answer'],
    ['Another new question?', 'answer', 'answer']      // Note: no comma after last entry
];

var QRans = [0,1,3,1,1,4,2,1];



Was This Post Helpful? 0
  • +
  • -

#12 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 125
  • View blog
  • Posts: 818
  • Joined: 25-October 08

Re: Javascript Quiz

Posted 28 April 2010 - 08:41 PM

View PostCamoDeveloper, on 28 April 2010 - 10:28 AM, said:

After the last entry in the QR variable, add a comma and put your questions in brackets. Just follow what he has there. Be sure to add the answers in the right order for the QRans variable.


Just like "CamoDeveloper" indicated.
You can add as many questions as you can think of.
Only the last question does not have a comma separator.

You can use the ' character in a question (as in don't)
if you precede it with a backslash, like don\'t

Or you can surround the question with " characters
instead of the single ' character and use: don't
if you have such a question.

Good Luck!
:bananaman:
Was This Post Helpful? 0
  • +
  • -

#13 Guest_mandy easter*


Reputation:

Re: Javascript Quiz

Posted 29 April 2010 - 04:46 AM

Hi All,
I carried out what you both suggested, i seem to be getting this error message:


'QR[...].0' is null or not an object line 171 character 5 RE: via Notepad

The page loads in FF displaying the first 2 questions but not the rest, i was wondering as to whether i need to adjust any of the loops?

Thanks guys, i really appreciate your help


 <script type="text/javascript">
var str = '';
  for ( var q=3; q<=5; q++ ) 
{
    str += '<p><u> Question '+q+'</u>  -- ';
    str += ''+QR[q][0]+'</p><blockquote>'; error message shows->  'QR[...].0' is null or not an object  
    for ( var r=1; r<QR[q].length; r++ ) 
	{
      str += '<p><label><input type="radio" name="RG'+q+'" value="'+r+'"> '+QR[q][r]+'</label>';
    }	
    str += '</blockquote>';
  }
  document.write(str);	
</script>
</p>
<p></p>
<p>&nbsp; </p>
<p>&nbsp; </p>
<p>
  <input type="reset" value="Clear all" />
  <input type="button" value="Get score" onclick="getScore(this.form)" />
</p>
<p>&nbsp;</p>

</form>
</body>
</html>




Was This Post Helpful? 0

#14 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: Javascript Quiz

Posted 29 April 2010 - 07:17 AM

You might need to change the "for" loop. Since the inside loop does the length of the QR Array, and the outside one only does 3 to 5. Try changing the 5 to how many questions you have. Make sure you count the questions using the 0 index rule.

In my example I gave earlier, the length would be 7 since the first one is always a 0. That should fix your problem.

for(var q=3;q<=7;q++)


Was This Post Helpful? 0
  • +
  • -

#15 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 125
  • View blog
  • Posts: 818
  • Joined: 25-October 08

Re: Javascript Quiz

Posted 29 April 2010 - 08:11 AM

Personally, I would leave the loops as:
  for (var i=1; i<QR.length; i++) {


That way you can add as many questions as you want
so long as the number of questions matches the number of responses.

The calculation of how many questions to display then becomes automated from 1..N

If you want to display only CERTAIN questions, then a slight modification
to the function call could be implemented. It would not be hard.
:stuart:
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2