js显示选择题列表和验证脚本 [英] js to display list of multiple choice questions and script to validate

问题描述

可显示许多无问题的javascript代码

并验证答案，我需要显示结果

就像考试

javascript code to display many no of questions

and to validate answers and i need to show the result

like examination

推荐答案

尊敬的Srinivas，
您所期望的都是一个完整的考试应用软件.

请说明您的需求-

1)您只是针对HTML和JavaScript还是存在服务器端脚本?
2)代码生成动态还是静态的多项选择题?或
3)验证所有问题是否已得到回答的代码?或
4)验证答案是否正确的代码?或
5)代码将所有问题提交到服务器端?或
6)代码显示结果，静态还是动态?

请使用适当的要求规范编辑您的问题.一个班轮问题造成歧义.

谢谢&问候，
Niral Soni

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

这是所需的代码-
(1)创建 Examination.js 文件

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

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)创建HTML文件

(2) Create HTML file

<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显示选择题列表和验证脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！