js to display list of multiple choice questions and script to validate

Question

1.00/5 (4 votes)

See more:

javascript code to display many no of questions

and to validate answers and i need to show the result

like examination

Posted 27-Aug-11 8:32am

Srinivas Kumar Pasumarthi

Add a Solution

Comments

mhamad zarif 27-Aug-11 17:16pm

Are you offering a job for freelancer or what ?.Man this is not a way for asking.What did you try ? No one can help you if you did not help your self first.

[no name] 5-Sep-11 9:06am

Well said, I'm also confused.

Smithers-Jones 27-Aug-11 18:30pm

Not a question, not even a full sentence, demanding and no effort, therefore downvoted.

Srinivas Kumar Pasumarthi 28-Aug-11 3:17am

its not like demanding , iam just asking the javascript code to display a list of multiple choice questions on web form and when user select the answers
they may click on submit to submit answers after i need to display the result this is our requirement

dont misunderstand

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Niral Soni · Answer 1 · 2011-09-02T01:32:00

Dear Srinivas,
what you are expecting is all together a complete Examination application software.

Please clarify your need -

1) are you just targeting the HTML and JavaScript or is there any server side scripting exists?
2) code to generate the multiple choice questions, dynamically or static? or
3) code to validate whether all the questions has been answered? or
4) code to validate whether the answers are correct or not? or
5) code to submit all the questions to server side? or
6) code to display the results, static or dynamic ?

Please edit your question with proper specification of requirements. One liner questions creates ambiguity.

Thanks & Regards,
Niral Soni

Niral Soni · Answer 2 · 2011-09-05T02:47:00

Here is the desired code -
(1) Create Examination.js file

JavaScript

function Examination(placeHolderId) {
	var _q = [], _qi = [], ph = placeHolderId;
	var self = this;

	function _add(qn, q, op, im, ai) {
		_qi[_qi.length] = qn;
		_q[qn] = {};
		_q[qn]['Q'] = q;
		_q[qn]['O'] = op;
		_q[qn]['M'] = im;
		_q[qn]['A'] = ai;
	}

	function _renderQue() {
		var i, j, rc, row, col, c, tbl, tb, type, btn, opt;

		c = document.getElementById(ph);
		tbl = document.createElement('table');
		tbl.id = ph + '_tblQuestions';
		tbl.border = '1';
		tbl.width = '100%';
		tbl.cellPadding = '5';
		tbl.cellSpacing = '0';
		c.appendChild(tbl);

		tb = document.createElement('thead');
		tbl.appendChild(tb);

		row = tb.insertRow(0);
		col = row.insertCell(0);
		col.align = 'center';
		col.style.fontWeight = 'bold';
		col.innerHTML = 'Question No#';

		col = row.insertCell(1);
		col.align = 'center';
		col.style.fontWeight = 'bold';
		col.innerHTML = 'Question';

		col = row.insertCell(2);
		col.align = 'center';
		col.style.fontWeight = 'bold';
		col.innerHTML = 'Options';

		tb = document.createElement('tbody');
		tbl.appendChild(tb);


		for(i = 0; i < _qi.length; i++) {
			rc = tb.rows.length;
			row = tb.insertRow(rc);
			col = row.insertCell(0);
			col.width = '15%';
			col.style.verticalAlign = 'top';
			col.innerHTML = _qi[i];

			col = row.insertCell(1);
			col.width = '45%'
			col.style.verticalAlign = 'top';
			col.innerHTML = _q[_qi[i]].Q;

			col = row.insertCell(2);
			col.width = '45%';
			col.style.verticalAlign = 'top';
			type = _q[_qi[i]].M ? 'checkbox' : 'radio';
			for(var j = 0; j < _q[_qi[i]].O.length; j++) {
				col.innerHTML += '<input type="' + type + '" name="Question' + i + '" value="' + j + '"> ' + _q[_qi[i]].O[j] + '<br>';
			}
		}
		tb = document.createElement('tfoot');
		tbl.appendChild(tb);

		rc = tb.rows.length;
		row = tb.insertRow(rc);
		col = row.insertCell(0);
		col.colSpan = 4;
		col.align = 'center';

		btn = document.createElement('input');
		btn.type = 'button';
		btn.value = 'Submit';
		btn.onclick = function() { self.renderResult(); }

		col.appendChild(btn);
	}

	function _renderRe() {
		var i, j, rc, row, col, c, tbl, tb, type, opt, mi = '', checked = true, res, cnt = 0;

		for(i = 0; i < _qi.length; i++) {
			opt = document.getElementsByName('Question'+i);
			for(j = 0; j < _q[_qi[i]].O.length; j++) {
				checked = opt[j].checked;
				if(checked) break;
			}
			if(!checked) mi += _qi[i] + '\n';
		}
		if(mi.length > 0) {
			alert('Please provide the answers for following questions - \n' + mi);
			return false;
		}

		tbl = document.getElementById(ph + '_tblQuestions');
		col = tbl.tHead.rows[0].insertCell(tbl.tHead.rows[0].cells.length);
		col.align = 'center';
		col.style.fontWeight = 'bold';
		col.innerHTML = 'Result';

		tb = tbl.tBodies[0];
		for(i = 0; i < _qi.length; i++) {
			row = tb.rows[i];
			col = row.insertCell(row.cells.length);
			col.style.verticalAlign = 'top';

			opt = document.getElementsByName('Question'+i);
			checked = false;
			if(_q[_qi[i]].M) {
				for(j = 0; j < _q[_qi[i]].O.length; j++) {
					if(opt[j].checked) {
						for(c = 0; c < _q[_qi[i]].A.length; c++) {
							checked = (parseInt(_q[_qi[i]].A[c],10) == parseInt(opt[j].value,10));
							if(checked) break;
						}
						if(!checked) break;
					}
				}
			}
			else {
				checked = opt[_q[_qi[i]].A[0]].checked;
			}
			res = checked ? 'Correct' : 'Wrong';
			if(checked) cnt++;
			col.innerHTML = res;

			col = tbl.tFoot.rows[0].cells[0];
			col.innerHTML = cnt + ' of ' + _qi.length + ' questions are correct.<br>Result = ' + Math.round(cnt/_qi.length*100).toFixed(2) + '%';
		}

	}

	this.addQuestion = function(QuestionNumber, Question, OptionsArray, isMultiple, AnswerIndexArray) {
		_add(QuestionNumber, Question, OptionsArray, isMultiple, AnswerIndexArray);
	}

	this.renderQuestions = function() {
		_renderQue();
	}

	this.renderResult = function() {
		_renderRe();
	}
}</br></br>

(2) Create HTML file

JavaScript

<html>
	<HEAD>
		<TITLE>Examination</TITLE>
	</HEAD>

	<BODY>
		<SCRIPT LANGUAGE="JavaScript" SRC="Examination.js"></SCRIPT>
		<div id="examDiv"></div>
		<SCRIPT LANGUAGE="JavaScript">
		<!--
			var exam = new Examination('examDiv');
				//addQuestion(QuestionNumber, Question, OptionsArray, isMultiple, AnswerIndexArray)
			exam.addQuestion('Question 1', 'What Microsoft program is usually used to view a web page?',['Word','Excel','Internet Explorer','Photoshop'], false, [2]);
			exam.addQuestion('Question 2', 'Which of these is not a web browser?',['Safari','Firefox','Ubantu','Opera','Crome'], false, [2]);
			exam.addQuestion('Question 3', 'Which item is an input device?',['Printer','Mouse','Keyboard','CPU','Touch Screen'], true, [1,2,4]);
			exam.renderQuestions();
		//-->
		</SCRIPT>
	</BODY>
</HTML>
</html>

js to display list of multiple choice questions and script to validate

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0