exam.js

class Question {
	uuid
	question
	question_image_list
	option_list
	answer_list
	explanation_list
	force_multi_answer

	constructor(
		question,                      // 问题的标题
		question_image_list,           // 问题的配图路径列表，如果不需要配图，直接给空列表即可
		option_list,                   // 问题的选项列表
		answer_list,                   // 答案列表，例：['A', 'B', 'C']
		explanation_list,              // 答案解析文本列表，会自动用一个ol，为每个项分配一个li。
		force_multi_answer=false,      // 是否强制为多选
	) {
		this.uuid = crypto.randomUUID() // 自动为每个问题分配一个UUID，该UUID用于自动生成问题相关所有HTML元素的ID名称
		this.question = question
		this.question_image_list = question_image_list
		this.option_list = option_list
		this.answer_list = answer_list
		this.explanation_list = explanation_list
		this.force_multi_answer = force_multi_answer
	}

	/*
	 * 当前问题是否为多选题，返回true或false。
	 * 默认情况下，如果答案列表长度大于1即可返回true，
	 * 但如果force_multi_answer为true，既忽视答案列表长度直接返回true。
	 */
	is_multi_answer() {
		if (this.force_multi_answer) {
			return true
		}
		else {
			return this.answer_list.length > 1
		}
	}

	/*
	 * 获取当前问题的div的ID文本。
	 */
	get_id() {
		return `exam-question-${this.uuid}`
	}

	/*
	 * 获取当前问题的答案解析的div的ID文本。
	 */
	get_explanation_id() {
		return `exam-question-explanation-${this.uuid}`
	}

	/*
	 * 获取当前问题的选项的名称。
	 */
	get_option_name() {
		return `exam-question-option-${this.uuid}`
	}

	/*
	 * 获取问题的文本HTML。
	 */
	get_html_question() {
		if (this.is_multi_answer()) {
			return `
				<p class="exam-question-question">
					<span style="font-size: 100%; font-weight: normal;">[多选]</span>
					${this.question}
				</p>`
		}
		else {
			return `<p class="exam-question-question">${this.question}</p>`
		}
	}

	/*
	 * 获取问题的配图HTML。
	 */
	get_html_question_image_list() {
		var html = ``
		for (var path of this.question_image_list) {
			html += `<img src="${path}" class="exam-question-img"/>`
		}
		return html
	}

	/*
	 * 获取问题的选项列表HTML。
	 */
	get_html_option_list() {
		var html = `<form class="question-option-list"><ol type="A">`
		var counter = 0
		for (var option of this.option_list) {
			html += `
				<li>
					<label class="exam-question-option-item">
						<input
							type="${this.is_multi_answer() ? "checkbox" : "radio"}"
							name="${this.get_option_name()}"
						/>
						${option}
					</label>
				</li>
				`
			counter += 1
		}
		html += `</ol></form>`
		return html
	}

	/*
	 * 获取问题的答案解析HTML。
	 */
	get_html_explanation() {
		return `<div class="exam-question-explanation-none" id="${this.get_explanation_id()}"></div>`
	}

	/*
	 * 获取问题的完整HTML。
	 */
	get_html() {
		var html = `
			<li>
				<div class="exam-question" id=${this.get_id()}>
					${this.get_html_question()}
					${this.get_html_question_image_list()}
					${this.get_html_option_list()}
					${this.get_html_explanation()}
				</div>
			</li>
			`
		return html
	}

	/*
	 * 获取当前问题是否通过，返回true或false。
	 */
	pass() {
		var userResults = []
		var options = document.getElementsByName(this.get_option_name())
		var idx = 0
		for (var ele of options) {
			if (ele.checked) {
				userResults.push(idx)
			}
			idx += 1
		}
		var userResultsTranslated = []
		for (var ele of userResults) {
			userResultsTranslated.push(String.fromCharCode(65 + ele))
		}
		if (this.answer_list.length != userResultsTranslated.length) {
			return false
		}
		else {
			for (var i = 0; i < this.answer_list.length; i ++) {
				if (this.answer_list[i] !== userResultsTranslated[i]) {
					return false
				}
			}
			return true
		}
	}

	/*
	 * 获取当前问题是否通过的同时，将问题的显示状态同步好。
	 * 并返回是否通过的true或false。
	 */
	check_result() {
		var expdiv = document.getElementById(this.get_explanation_id())
		if (expdiv) {
			if (this.pass()) {
				expdiv.setAttribute("class", "exam-question-explanation-pass")
				var html = `<b>正确</b>`
				expdiv.innerHTML = html
				return true
			}
			else {
				expdiv.setAttribute("class", "exam-question-explanation-error")
				var html = `<b>错误</b>&emsp;正确答案是：${this.answer_list}`
				for (var ele of this.explanation_list) {
					html += `<p>${ele}</p>`
				}
				expdiv.innerHTML = html
				return false
			}
		}
		return false
	}

	/*
	 * 重置问题的选项状态和显示状态。
	 */
	reset() {
		var options = document.getElementsByName(this.get_option_name())
		for (var ele of options) {
			if (ele.checked) {
				ele.checked = false
			}
		}

		var expdiv = document.getElementById(this.get_explanation_id())
		if (expdiv) {
			expdiv.setAttribute("class", "exam-question-explanation-none")
			expdiv.innerHTML = ""
		}
	}

}


class Exam {
	title
	subtitle
	maxscore
	passscore
	question_list
	submited

	constructor(
		title,                // 试卷的标题
		subtitle,             // 试卷的副标题
		maxscore,             // 满分
		passscore,            // 通过分类
		question_list,        // 问题列表
	) {
		this.title = title
		this.subtitle = subtitle
		this.maxscore = maxscore
		this.passscore = passscore
		this.question_list = question_list
		this.submited = false
	}

	get_style() {
		return `
			p {
				margin: 2px;
				padding: 2px;
			}
			/* 每个问题的所有内容的Box样式 */
			.exam-question {
				background: #F4F4F4;
				border: none;
				border-radius: 4px;
				margin: 4px;
				padding: 4px;
			}
			/* 每个问题内的配图样式 */
			.exam-question-img {
				margin: 4px;
				border: none;
				border-radius: 8px;
				min-height: 128px;
				max-height: 128px;
			}
			/* 每个问题内问题文本的样式 */
			.exam-question-question {
				margin: 2px;
				padding: 2px;
				font-size: 120%;
				font-weight: bold;
			}
			/* 每个问题内选项的的样式 */
			.exam-question-option-item {
				margin-left: 4px;
			}
			.exam-question-option-item:hover {
				margin-left: 4px;
				padding-left: 4px;
				background: #DDEEFF;
			}
			/* 每个问题内答案反鐀的样式：无、通过、答案 */
			.exam-question-explanation-none {
				margin: 0px;
				padding: 0px;
			}
			.exam-question-explanation-pass {
				margin: 4px;
				padding: 4px;
				color: green;
			}
			.exam-question-explanation-error {
				margin: 4px;
				padding: 4px;
				color: red;
			}
			/* 分数样式：无、通过、错误 */
			.exam-question-score-none {
				margin: 0px;
				padding: 0px;
			}
			.exam-question-score-pass {
				margin: 4px;
				padding: 4px;
				color: green;
				font-weight: bold;
				text-align: center;
			}
			.exam-question-score-error {
				margin: 4px;
				padding: 4px;
				color: red;
				font-weight: bold;
				text-align: center;
			}
			`
	}

	/*
	 * 获取试卷问题列表的HTML。
	 */
	get_html_question_list() {
		var question_html = ''
		for (var q of this.question_list) {
			question_html += q.get_html()
		}
		return question_html
	}

	/*
	 * 获取试卷的完整HTML。
	 */
	get_html() {
		return `
			<div>
				<h1 style="text-align:center;">${this.title}</h1>
				<p style="text-align:center;">${this.subtitle}</p>
				<p style="text-align:center;">满分：${this.maxscore}&emsp;&emsp;通过：${this.passscore}</p>
				<style>${this.get_style()}</style>
				<hr/>
				<ol>${this.get_html_question_list()}</ol>
				<hr/>
				<table>
					<tr>
						<td>部门名称</td>
						<td><input id="exam-cpname" placeholder="你所在的公司名称"></input></td>
					</tr>
					<tr>
						<td>考生姓名/ID</td>
						<td><input id="exam-yourname" placeholder="你的名字"></input></td>
					</tr>
				</table>
				<button id="exam-btn-submit">提交并查看答案解析</button>
				<button id="exam-btn-reset">重置</button>
				<hr/>
				<div id="exam-question-score" class="exam-question-score-none"></div>
			</div>
			`
	}

	/*
	 * 提供一个HTML页面中的tag，自动将其内容改为试卷，并自动配置好事件。
	 */
	setup(ele) {
		if (!ele) { return }
		ele.innerHTML = this.get_html()
		const btnSubmit = document.getElementById('exam-btn-submit')
		btnSubmit.addEventListener('click', () => { this.submit() })
		const btnReset = document.getElementById('exam-btn-reset')
		btnReset.addEventListener('click', () => { this.reset() })
	}

	/*
	 * 提交前检查，如果失败将返回null，并给出相关据绝交卷的原因弹窗。
	 * 如果成功返回预检查的一些信息，比如供应商名称、考生名称。
	 */
	submit_precheck() {
		// 是否已经提交过
		if (this.submited) {
			alert("已经提交过当前试卷了，请点击试卷末尾「重置」按钮后再次考试！")
			return null
		}
		// 供应商检查
		const cpname = document.getElementById("exam-cpname");
		const yourname = document.getElementById("exam-yourname");
		if (cpname && yourname) {
			if ((!cpname.value.trim()) || (!yourname.value.trim())) {
				alert("请输入供应商名称和你的名字！")
				return null
			}
			else {
				return { "cpname": cpname.value.trim(), "yourname": yourname.value.trim() }
			}
		}
		return null
	}

	/*
	 * 交卷，并同步更新试卷显示状态。
	 * 一旦交卷，就不能重复交了，要点击「重置」。
	 */
	submit() {
		const precheckinfo = this.submit_precheck()
		if (precheckinfo == null) {
			return
		}

		const score_area = document.getElementById("exam-question-score")
		const totcnt = this.question_list.length
		var pascnt = 0
		for (var q of this.question_list) {
			var sta = q.check_result()
			if (sta) {
				pascnt += 1
			}
		}
		const score = Math.round(pascnt / totcnt * 100.0)
		if (score >= this.passscore) {
			const hint = [
				`恭喜你，考试通过！`,
				`供应商：${precheckinfo["cpname"]}`,
				`考生：${precheckinfo["yourname"]}`,
				`得分：${score}分`,
			]
			alert(hint.join("\n"))
			if (score_area) {
				score_area.setAttribute("class", "exam-question-score-pass")
				score_area.innerHTML = `<p>${hint.join("</br>")}</p>`
			}
		}
		else {
			const hint = [
				`不好意思，考试没通过！`,
				`供应商：${precheckinfo["cpname"]}`,
				`考生：${precheckinfo["yourname"]}`,
				`得分：${score}分`,
			]
			alert(hint.join("\n"))
			if (score_area) {
				score_area.setAttribute("class", "exam-question-score-error")
				const extra_text = `<span style="font-weight: normal;">可以查看答案解析，然后点击「重置」按钮重新考试。<span>`
				score_area.innerHTML = `<p>${hint.join("<br/>")}<br/>${extra_text}</p>`
			}
		}
		this.submited = true

		const maxheight = Math.max(
			document.body.scrollHeight, document.documentElement.scrollHeight,
			document.body.offsetHeight, document.documentElement.offsetHeight,
			document.body.clientHeight, document.documentElement.clientHeight
		);
		window.scrollTo({left: 0, top: maxheight, behaviour: "smooth"});
	}

	/*
	 * 重置试卷，会给已经显示出来的答案解析一块隐藏掉。
	 */
	reset() {
		for (var q of this.question_list) {
			q.reset()
		}
		const score_area = document.getElementById("exam-question-score")
		if (score_area) {
			score_area.setAttribute("class", "exam-question-score-none")
			score_area.innerHTML = ""
		}
		this.submited = false
	}
}


/*
 * ================================================================================
 *                      以下是你的问题相关的一切自定义内容
 * ================================================================================
 */


// 考试的标题
const QUESTION_TITLE     = "简单离线考试"
// 考试的副标题
const QUESTION_SUBTITLE  = "你可以多次考试，直到通过。"
// 考试满分
const QUESTION_MAXSCORE  = 100
// 考试合格分数
const QUESTION_PASSSCORE = 80
// 问题列表
const QUESTION_LIST      = [
	// Question
	new Question(
		"测试问题1？",
		[
			"https://github.com/fluidicon.png",
			"https://github.githubassets.com/assets/github-logo-55c5b9a1fe52.png",
		],
		[
			"选项A",
			"选项B",
		],
		['A'],
		[
			"你得选择A。",
			"你不能选择B。",
		],
	),
	// Question
	new Question(
		"测试问题2？",
		[
			"https://github.com/fluidicon.png",
			"https://github.githubassets.com/assets/github-logo-55c5b9a1fe52.png",
			"https://github.githubassets.com/assets/github-mark-57519b92ca4e.png",
		],
		[
			"选项A",
			"选项B",
			"选项C",
		],
		['A', 'B'],
		[
			"你得选择A、B。",
		],
	),
	// Question
	new Question(
		"测试问题3？",
		[],
		[
			"选项A<img src='https://github.com/fluidicon.png' height='64px' />",
			"选项B",
			"选项C",
		],
		['C'],
		[
			"你只能选择C，虽然这是个多选题。",
		],
		true, // 强制多选
	),
	// Question
]


/*
 * 能够在每次当前HTML页面加载时自动触发一次试卷生成逻辑。
 * 不受限于JS和当前试卷HTML加载的时机约束。
 */
document.addEventListener('DOMContentLoaded', () => {
	const exam = new Exam(
		QUESTION_TITLE,
		QUESTION_SUBTITLE,
		QUESTION_MAXSCORE,
		QUESTION_PASSSCORE,
		QUESTION_LIST,
	)
	exam.setup(document.querySelector('body'))
})


/*
 * HTML模版
 * 拷贝该HTML模版，然后在js文件中给exam.setup()的参数换成你HTML中的元素。
 */
/*
<html>
	<head>
		<script src="path/to/exam.js"></script>
	</head>
	<body>
	</body>
</html
 */