/    Sign up×
Community /Pin to ProfileBookmark

JS Quiz numbering issue and including text boxes

[I] Reposted Thread- JS Quiz numbering issue and including text boxes [/I]

Hi Everyone

1st thanks to all for checkin out my question

I am relatively new to JavaScript so I apologise to all if my wording is wrong.

Basically I have designed a quiz with a little help and at the moment it works great for radio buttons and combo boxes.

My main problem is with the numbering as some questions have multiple parts ie a,b,c and I want them to be numbered accordingly. As you can see from my code the seperate parts of the one question actually get numbered as different questions. How can I make the numbering number parts differently ie question 2) a) and then b) instead of 2 and then 3??

Additionally I would also like to use text boxes but can’t figure out how to code in the correct JS for Question type Text Box??

Here is my Html code and my script

My HTML Code- MultiChoiceQuest.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

<html><!– InstanceBegin –>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<!– InstanceBeginEditable name=”doctitle” –>
<title>Multiple Choice Questionnaire</title>
<!– InstanceEndEditable –>
<!– InstanceBeginEditable name=”head” –>
<link rel=”stylesheet” href=”../../../../style.css”>
<!– InstanceEndEditable –>

<script type=”text/javascript” src=”Script.js”></script>

<script language=”javascript” type=”text/javascript”>

var done = new Array;
var yourAns = new Array;
var score = 0;
var ScoreMax;

function checkAllChecked(){
var a = document.forms[0].elements;

for(var i = 0 ; i < a.length ; ++i) {
if(a[i].type == “radio”) {
var radiogroup = a[a[i].name];

var itemchecked = false;

for(var j = 0 ; j < radiogroup.length ; ++j) {

if(radiogroup[j].checked){

itemchecked = true;

break;
}
}

if(!itemchecked) {
alert(“Please answer all questions”);
if(a[i].focus)
a[i].focus();

return false;
}
}
}

return Score();

}

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

function StatusAllCheckboxes(IDS,cnt) {
var str = ”;
IDS = ‘q’+IDS;
var tmp = ”;
for (var i=0; i<cnt; i++) {
tmp = document.getElementById(IDS+’_’+i);
if (tmp.checked) { str += tmp.value + ‘|’; }
}
return str;
}

function Engine(question, answer, Qtype) {
switch (Qtype) {
case “RB” : yourAns[question] = answer; break;
case “SB” : yourAns[question] = answer; break;
case “TB” : yourAns[question] = answer; break;
default : yourAns[question] = ”; alert(‘Invalid question type: ‘+Qtype); break;
}
}

function Score(){
score = 0;
var tmp = ”;
var answerText = “<p>”; // alert(‘Size of QR: ‘+QR.length);
for (var i=1; i<QR.length; i++) {
answerText = answerText+”<br>Question :”+i+” Your Answer: “+yourAns[i]+”<br>”;

tmp = QR[i][3];

if (tmp != yourAns[i]) {
answerText = answerText+”<font color=’red’>Try Again</font>”+”<br>”+explainAnswer[i]+”<hr>” ;
} else {
answerText = answerText+ ” <font color=’green’> Correct </font><hr>”;
score++;
}
}

answerText=answerText+”<br><br>Your total score is : “+score+” out of “+(QR.length-1)+”<br>”;

var ScoreMax = QR.length-1;
var ScoreInc = Math.floor(ScoreMax / 4); // Don’t have fewer than 5 questions.

answerText=answerText+”<br>Comment : “;
if(score<=ScoreInc){ answerText=answerText+”It seems you need a bit more practice. Try Reading the Presentation Again”; }
if(score>=(ScoreInc+1) && score <=(ScoreInc*2)){ answerText=answerText+”Need a bit of work”; }
if(score>=(ScoreInc*
2+1) && score <=(ScoreInc*3)){ answerText=answerText+”Not Bad, Keep Trying”; }
if(score>(ScoreInc*
3+1)){ answerText=answerText+”You’re almost there”; }

if (score!=(ScoreMax))
{
var w = window.open(”, ”, ‘height=500,width=750,scrollbars’);
w.document.open();
w.document.write(answerText);
w.document.close();
return false;
}
else
{
window.resizeTo(screen.width, screen.height)
return true;

}

}

</script>

</head>

<body class=”design”>
<!– InstanceBeginEditable name=”Body of Information” –>

<table class=”main” width=”100%” border=”10″>

<tr><td class=”heading” ><img src=”../images/multi.gif” alt=””></td></tr>

</table>

<br><br>
<!– InstanceEndEditable –>

<form name=”multichoice” action=’./eml_1.php’ method=’post’ onload=’reset()’ onsubmit= “return checkAllChecked()”>

<ol>
<script type=”text/javascript”>
var str = ”;
var tmpr = [];
var resp = [‘a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’,’i’,’j’];
for (q=1; q<QR.length; q++) {
str += ‘<li>’+QR[q][1]+'</li><br />’;
tmpr = QR[q][2].split(‘|’);
switch (QR[q][0]) {
case ‘RB’ :
for (var r=0; r<tmpr.length; r++) {
str += ‘<input type=”radio” name=”q’+q+'” value=”‘+resp[r]+'”‘;
str += ‘ onClick=”Engine(‘+q+’,this.value,”+QR[q][0]+”)”>’;
str += resp[r]+’&nbsp;&nbsp;’+tmpr[r]+'<br />’;
} break;

case ‘SB’ :
str += ‘<select name=”q’+q+'” size=”1″ id=”q’+q+'”‘;
str += ‘ onClick=”Engine(‘+q+’,this.value,”+QR[q][0]+”)”>’;
for (var r=0; r<tmpr.length; r++) {
str += ‘<option value=”‘+resp[r]+'”>’;
str += tmpr[r]+'</option>’;
} str += ‘</select>’; break;

case ‘TB’ :
for (var r=0; r<tmpr.length; r++) {
str += ‘<input type=”text” name=”q’+q+'” value=”‘+resp[r]+'”‘;
str += ‘ onClick=”Engine(‘+q+’,this.value,”+QR[q][0]+”)”>’;
str += resp[r]+’&nbsp;&nbsp;’+tmpr[r]+'<br />’;
} break;

/* test code for future entries
case ‘CBM’ : break;
case ‘SBM’ :
str += ‘<select name=”q’+q+'” size=”1″ id=”q’+q+'”‘;
str += ‘ onClick=”Engine(‘+q+’,this.value,”+QR[q][0]+”)” multiple>’;
for (var r=0; r<tmpr.length; r++) {
str += ‘<option name=”q’+q+'” value=”‘+resp[r]+'”>’;
str += tmpr[r]+'</option>’;
} str += ‘</select>’; break;
*
/
default : str += q+’: Invalid type: ‘+QR[q][0]; break;
}
str += “<p />”;
}
document.write(str);
</script>

<input type=submit value=”Submit?”>

</ol>
</form>

<br><br>

<noscript>
<center>
<h2>Sorry This Page Requires JavaScript</h2>
<a class=”link” href=”../nojavascript.html”>Click here if You can see this Message. You Need To Enable JavaScript.
</a>
</center>
</noscript>

</body>
<!– InstanceEnd –></html>

My Script Code- Script.js

var QR = [
[‘Question type’,’Question’,’Responses,…’,’Answers,…’], // format of array
[‘RB’, “What team is on top of the ladder in the AFL?”,
“St Kilda|Geelong|West Coast|Collingwood”,”a”],
[‘SB’, “Identify the INTERNAL and EXTERNAL factors? <br><br>a. Mould”,
“Please Select an Option|Internal|External”,”b”],
[‘SB’, “b. Rain”,
“Please Select an Option|Internal|External”,”c”],
[‘RB’, “Who Is the fastest man in the world:”,
“Matt Shervington|Carl Lewis|Usain Bolt|Kathy Freeman”,”c”],
[‘TB’, “Number the following accordingly; 1 , 2 or 3:”,
“1+2″,”3”],
[‘TB’, “”,
“2-1″,”1”],
[‘TB’, “”,
“3-1″,”2”],
[‘SB’, “14. Indicate if the following statements are true or false: <br><br>a. Red is Black”,
“Please Select an Option|True|False”,”c”],
[‘SB’, “b. Red is Blue”,
“Please Select an Option|True|False”,”c”],
[‘SB’, “c. Red is Red”,
“Please Select an Option|True|False”,”b”],
[‘SB’, “d. White is Red”,
“Please Select an Option|True|False”,”c”] // no comma after last entry
];

var explainAnswer = [

“”, // unused entry
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect”,
“Your Answer is Incorrect” // No comma after last entry

];

There may be some code that is not required, so ignore that if it is present. If you want to know anything else or if I am unclear please ask a question. I would really like to solve this for my quiz. Thanks very much for any help anyone can give me. Like I said I am new to Javascript so you would be doing me a great favour by helping me out

Thank you

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERAug 24.2009 — I tried to keep most of your original code.

See differences in the QR format and a small CSS style change for the <OL> tag.

I have not checked the rest of the code, only the numbering system part.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

&lt;html&gt;&lt;!-- InstanceBegin --&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;!-- InstanceBeginEditable name="doctitle" --&gt;
&lt;title&gt;Multiple Choice Questionnaire&lt;/title&gt;
&lt;!-- InstanceEndEditable --&gt;
&lt;!-- InstanceBeginEditable name="head" --&gt;
&lt;link rel="stylesheet" href="../../../../style.css"&gt;
&lt;!-- InstanceEndEditable --&gt;

&lt;!-- script type="text/javascript" src="Script.js"&gt;&lt;/script --&gt;
&lt;script type="text/javascript"&gt;
// From: http://www.webdeveloper.com/forum/showthread.php?p=1030526#post1030526

// My Script Code- Script.js contents
var QR = [
['Question type','QNo','Question','Responses,...','Answers,...'], // format of array
['RB','1', "What team is on top of the ladder in the AFL?","St Kilda|Geelong|West Coast|Collingwood","a"],
['SB','2', "Identify the INTERNAL and EXTERNAL factors? &lt;br&gt;&lt;br&gt;2a Mold","Please Select an Option|Internal|External","b"],
['SB','2b',"Rain","Please Select an Option|Internal|External","c"],
['RB','3', "Who Is the fastest man in the world:","Matt Shervington|Carl Lewis|Usain Bolt|Kathy Freeman","c"],
['TB','4', "Number the following accordingly; 1 , 2 or 3:","4a 1+2","3"],
['TB','', "","4b 2-1","1"],
['TB','', "","4c 3-1","2"],
['SB','5', "Indicate if the following statements are true or false: &lt;br&gt;&lt;br&gt;5a Red is Black","Please Select an Option|True|False","c"],
['SB','5b', "Red is Blue","Please Select an Option|True|False","c"],
['SB','5c', "Red is Red","Please Select an Option|True|False","b"],
['SB','5d', "White is Red","Please Select an Option|True|False","c"] // no comma after last entry
];

var explainAnswer = [ "", // unused entry
"Your Answer 1 is Incorrect",
"Your Answer 2a is Incorrect",
"Your Answer 2b is Incorrect",
"Your Answer 3 is Incorrect",
"Your Answer 4a is Incorrect",
"Your Answer 4b is Incorrect",
"Your Answer 4c is Incorrect",
"Your Answer 5a is Incorrect",
"Your Answer 5b is Incorrect",
"Your Answer 5c is Incorrect",
"Your Answer 5d is Incorrect" // No comma after last entry

];
&lt;/script&gt;

&lt;script language="javascript" type="text/javascript"&gt;

var done = new Array;
var yourAns = new Array;
var score = 0;
var ScoreMax;

function checkAllChecked(){
var a = document.forms[0].elements;

for(var i = 0 ; i &lt; a.length ; ++i) {
if(a[i].type == "radio") {
var radiogroup = a[a[i].name];
var itemchecked = false;
for(var j = 0 ; j &lt; radiogroup.length ; ++j) {
if(radiogroup[j].checked){
itemchecked = true;
break;
}
}
if(!itemchecked) {
alert("Please answer all questions");
if(a[i].focus) a[i].focus();
return false;
}
}
}
return Score();
}

function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i&lt;sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return str;
}

function StatusAllCheckboxes(IDS,cnt) {
var str = '';
IDS = 'q'+IDS;
var tmp = '';
for (var i=0; i&lt;cnt; i++) {
tmp = document.getElementById(IDS+'_'+i);
if (tmp.checked) { str += tmp.value + '|'; }
}
return str;
}

function Engine(question, answer, Qtype) {
switch (Qtype) {
case "RB" : yourAns[question] = answer; break;
case "SB" : yourAns[question] = answer; break;
case "TB" : yourAns[question] = answer; break;
default : yourAns[question] = ''; alert('Invalid question type: '+Qtype); break;
}
}

function Score(){
score = 0;
var tmp = '';
var answerText = "&lt;p&gt;"; // alert('Size of QR: '+QR.length);
for (var i=1; i&lt;QR.length; i++) {
answerText = answerText+"&lt;br&gt;Question :"+QR[i][3]+" Your Answer: "+yourAns[i]+"&lt;br&gt;";
tmp = QR[i][4];
if (tmp != yourAns[i]) {
answerText = answerText+"&lt;font color='red'&gt;Try Again&lt;/font&gt;"+"&lt;br&gt;"+explainAnswer[i]+"&lt;hr&gt;" ;
} else {
answerText = answerText+ " &lt;font color='green'&gt; Correct &lt;/font&gt;&lt;hr&gt;";
score++;
}
}
answerText=answerText+"&lt;br&gt;&lt;br&gt;Your total score is : "+score+" out of "+(QR.length-1)+"&lt;br&gt;";
var ScoreMax = QR.length-1;
var ScoreInc = Math.floor(ScoreMax / 4); // Don't have fewer than 5 questions.

answerText=answerText+"&lt;br&gt;Comment : ";
if(score&lt;=ScoreInc){ answerText=answerText+"It seems you need a bit more practice. Try Reading the Presentation Again"; }
if(score&gt;=(ScoreInc+1) &amp;&amp; score &lt;=(ScoreInc*2)){ answerText=answerText+"Need a bit of work"; }
if(score&gt;=(ScoreInc*2+1) &amp;&amp; score &lt;=(ScoreInc*3)){ answerText=answerText+"Not Bad, Keep Trying"; }
if(score&gt;(ScoreInc*3+1)){ answerText=answerText+"You're almost there"; }

if (score!=(ScoreMax)) {
var w = window.open('', '', 'height=500,width=750,scrollbars');
w.document.open();
w.document.write(answerText);
w.document.close();
return false;
} else {
window.resizeTo(screen.width, screen.height)
return true;
}
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body class="design"&gt;
&lt;!-- InstanceBeginEditable name="Body of Information" --&gt;
&lt;table class="main" width="100%" border="10"&gt;
&lt;tr&gt;&lt;td class="heading" &gt;&lt;img src="../images/multi.gif" alt=""&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;br&gt;&lt;br&gt;
&lt;!-- InstanceEndEditable --&gt;
&lt;form name="multichoice" action='./eml_1.php' method='post' onload='reset()' onsubmit= "return checkAllChecked()"&gt;
&lt;ol style="list-style-type:none"&gt;
&lt;script type="text/javascript"&gt;
var str = '';
var tmpr = [];
var resp = ['a','b','c','d','e','f','g','h','i','j'];
for (q=1; q&lt;QR.length; q++) {
str += '&lt;li&gt;'+QR[q][1]+' '+QR[q][2]+'&lt;/li&gt;&lt;br /&gt;';
tmpr = QR[q][3].split('|');
switch (QR[q][0]) {

case 'RB' :
for (var r=0; r&lt;tmpr.length; r++) {
str += '&lt;input type="radio" name="q'+q+'" value="'+resp[r]+'"';
str += ' onClick="Engine('+q+',this.value,''+QR[q][0]+'')"&gt;';
str += resp[r]+'&amp;nbsp;&amp;nbsp;'+tmpr[r]+'&lt;br /&gt;';
} break;

case 'SB' :
str += '&lt;select name="q'+q+'" size="1" id="q'+q+'"';
str += ' onClick="Engine('+q+',this.value,''+QR[q][0]+'')"&gt;';
for (var r=0; r&lt;tmpr.length; r++) {
str += '&lt;option value="'+resp[r]+'"&gt;';
str += tmpr[r]+'&lt;/option&gt;';
} str += '&lt;/select&gt;';
break;

case 'TB' :
for (var r=0; r&lt;tmpr.length; r++) {
str += '&lt;input type="text" name="q'+q+'" value="'+resp[r]+'"';
str += ' onClick="Engine('+q+',this.value,''+QR[q][0]+'')"&gt;';
// str += resp[r]+'&amp;nbsp;&amp;nbsp;'+tmpr[r]+'&lt;br /&gt;';
str += '&amp;nbsp;&amp;nbsp;'+tmpr[r]+'&lt;br /&gt;';
}
break;

/* test code for future entries
case 'CBM' : break;
case 'SBM' :
str += '&lt;select name="q'+q+'" size="1" id="q'+q+'"';
str += ' onClick="Engine('+q+',this.value,''+QR[q][0]+'')" multiple&gt;';
for (var r=0; r&lt;tmpr.length; r++) {
str += '&lt;option name="q'+q+'" value="'+resp[r]+'"&gt;';
str += tmpr[r]+'&lt;/option&gt;';
}
str += '&lt;/select&gt;';
break;
*/

default : str += q+': Invalid type: '+QR[q][0]; break;
}
str += "&lt;p /&gt;";
}
document.write(str);
&lt;/script&gt;
&lt;input type=submit value="Submit?"&gt;

&lt;/ol&gt;
&lt;/form&gt;
&lt;br&gt;&lt;br&gt;
&lt;noscript&gt;
&lt;center&gt;
&lt;h2&gt;Sorry This Page Requires JavaScript&lt;/h2&gt;
&lt;a class="link" href="../nojavascript.html"&gt;Click here if You can see this Message. You Need To Enable JavaScript.
&lt;/a&gt;
&lt;/center&gt;
&lt;/noscript&gt;

&lt;/body&gt;
&lt;!-- InstanceEnd --&gt;
&lt;/html&gt;

Good Luck!

?
Copy linkTweet thisAlerts:
@JscrptBeginnerauthorAug 25.2009 — Thankyou so much JMRKER you have come to the rescue. I have now sorted out my numbering issue and it works great. I don't suppose you (or anyone else) know about including text boxes. I would like to use at least one within my quiz or possibly even a mixed text/option combo list (probably even better).

Thanks again you are a lifesaver
Copy linkTweet thisAlerts:
@JMRKERAug 25.2009 — You're most welcome.

I'm glad I could help.

Getting a little late here so I'll look at it tomorrow if you don't mind.

Can you give an example of a question in the textbox format you want to display?

And I'm not sure I understand the text/option combo list format you want. Examples?
Copy linkTweet thisAlerts:
@JscrptBeginnerauthorAug 25.2009 — For Example

['TB', "Number the following accordingly; 1 , 2 or 3:",

"1+2","3"],

['TB', "",

"2-1","1"],

['TB', "",

"3-1","2"],

Qu Number the following accordingly; 1 , 2 or 3:

a 1+2

b 2-1

c 3-1

This question I was thinking a multi use combo box whereby the user can write either the number 1, 2 or 3 or select it from the combo box. I was simply trying to do this as a text box but ideally for this question a drop down list where you could type in the value or select it with the mouse would be great.

Other text box usages could be for additional comments or something not confined to a specific list. Really I just want to know how I can do it inside my for loops with the current code. I can obviously make stand alone text boxes for input, I would just like to have the option to utilise them in my quiz

Thanks again
×

Success!

Help @JscrptBeginner spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...