js实现复制html页面

js实现复制html页面

		<h5>一.单选题请选择</h5>
		<div class="pojo">
			<h7>1.fajfajjj</h7>
			<p>
				<input type="radio" value="1" />1
				<input type="radio" value="2" />2
				<input type="radio" value="3" />3
				<input type="radio" value="4" />4
				<!-- 	<input type="radio" name="dd" value="1" />1
				<input type="radio" name="dd" value="2" />2
				<input type="radio" name="dd" value="3" />3
				<input type="radio" name="dd" value="4" />4 -->
			</p>
		</div>

		<div class="pojo">
			<h8>2.fafafdfa</h8>
			<p>
				<input type="radio" value="1" />1
				<input type="radio" value="2" />2
				<input type="radio" value="3" />3
				<input type="radio" value="4" />4
				<!-- <input type="radio" name="dd2" value="1" />1
				<input type="radio" name="dd2" value="2" />2
				<input type="radio" name="dd2" value="3" />3
				<input type="radio" name="dd2" value="4" />4 -->
			</p>
		</div>



		<h5>二.填空题</h5>

		<div class="pojo">
			<h8>1.faf_（1）___afdf__(2)___a</h8>
			<p>
				<textarea cols="40" rows="3"></textarea>
			</p>
		</div>


		<h5>三.应用题</h5>

		<div class="pojo">
			<h8>2.fafafdfa</h8>
			<p>
				<textarea cols="40" rows="3"></textarea>
			</p>
		</div>


		<h5>四.判断题</h5>
		<div class="pojo">
			<h7>1.fajfajjj</h7>
			<p>
				<input type="radio" name="yy" value="1" />对
				<input type="radio" name="yy" value="2" />错
			</p>
		</div>
	</div>

	<button onclick="getModule()" style="color: #01AAED;">得到模板</button>
	<button onclick="trasitionToPojo()" style="color: #01AAED;">转对象</button>

	<button onclick="cloneM()" style="color: #01AAED;">克隆clone</button>



	<div id="md2" style=" border:1px solid">




	</div>

	<script>
		var questionType = []; //存储每一道题类型(0代表单选和判断,1代表填空和简答)
		var questions = []; //存储每一道题
		var answers = []; //存储每一道题学生的答案
		var pojoList = []; //将每一道题转对象后存在这个集合中


		//将每一道题转为questionPojo对象，存放在pojoList中
		function trasitionToPojo() {
			// alert(answers.toString())
			for (var i = 0; i < questions.length; i++) {

				var questionPojo = {
					qType: "",
					qContent: "",
					qAnswer: ""
				};
				questionPojo.qType = questionType[i];
				questionPojo.qContent = questions[i];
				questionPojo.qAnswer = answers[i];
				pojoList[i] = questionPojo
			}

			console.log("qustionPOJOList")
			console.log(pojoList)
		}


		//获取每一道题的类型存放在questionType数组中,每一道题的内容存放在questionContent数组中,
		//每一道题的学生答案存放在answers数组中,供后面将每一道题都转为一个对象

		function getModule() {
			// 	将题转对象
			// 	     题号
			// 			 题目类型(单选.多选.判断.应用题)
			// 			 内容
			// 			 正确答案
			var pojo = [];
			pojo = document.getElementsByClassName("pojo") //每一道题都在一个class="pojo"的div中
			for (var i = 0; i < pojo.length; i++) {
				questions[i] = pojo[i].innerHTML;
			}
			var answerP = []; //存放p标签
			answerP = document.getElementsByTagName("p");
			for (var j = 0; j < answerP.length; j++) {
				answerP[j].id = "answerP" + j; //设置p标签的id,供p的子标签设置class
			}
			var pAns = []; //根据p标签id存放p标签(方便获取每一个p标签中的选项)
			var num = 0; //供设置class属性使用
			for (var k = 0; k < answerP.length; k++) { //answerP.length就是p标签个数即题的个数
				pAns = document.getElementById("answerP" + k); //根据p标签id获取每一个p标签
				var pChilds = []; //存放单个p标签中的每一个单选项
				pChilds = pAns.children;
				for (var m = 0; m < pChilds.length; m++) {
					pChilds[m].className = "answerI" + num; //为同一道题的每一个选项设置相同的class
					pChilds[m].name = "answerI" + num; //为每一道题设置name属性(这里针对单选按钮需要name属性)
				}
				num++;
			}
			for (var n = 0; n < answerP.length; n++) { //answerP.length就是p标签个数即题的个数
				var qClass = []; //存放同一道题的所有选项
				qClass = document.getElementsByClassName("answerI" + n); //同一道题的class值相同,不同题的class值才不同
				// 					console.log("qClass")
				// 					console.log(qClass)
				// 					console.log("标签类型" + qClass[0].tagName)
				if (qClass[0].tagName.toString() === "INPUT") {
					//alert("single")
					questionType[n] = "0"; //0代表单选和判断,1代表填空和简答
					answers[n] = singleChoiseResult(qClass);

				} else if (qClass[0].tagName.toString() === "TEXTAREA") {
					//alert("sortAnswer")
					questionType[n] = "1"; //0代表单选和判断,1代表填空和简答
					answers[n] = sortAnswerResult(qClass);
				}
			}
			console.log("题目")
			console.log(questions.toString())
			console.log("回答")
			console.log(answers.toString())
		}

		//获取单选题选择回答结果
		function singleChoiseResult(qClass) {
			var madeChoise = null; //选中的值
			for (var j = 0; j < qClass.length; j++) {
				if (qClass[j].checked == true) {
					madeChoise = qClass[j].value;
					//alert(madeChoise)
				}
			}
			return madeChoise;
		}


		//获取简答题回答结果
		function sortAnswerResult(qClass) {
			var fillIn = null; //简答题填写的内容
			//alert(qClass[0].value)
			fillIn = qClass[0].value;
			return fillIn;
		}



  //将上方表单复制一份到下方
		function cloneM() {
			var md2 = document.getElementById("md2");

			for (var i = 0; i < pojoList.length; i++) {
				var doc = document.createElement("div");
				doc.innerHTML = pojoList[i].qContent;
				md2.appendChild(doc)
			}
			md2setIdAndClass()
		}

		//复制上方表单
		function md2setIdAndClass() {
			var di = document.getElementById("md2") //应为要将上方表单复制到下方div中
			var answerP = []; //存放md2中的所有p标签
			answerP = di.getElementsByTagName("p");
			for (var j = 0; j < answerP.length; j++) {
				answerP[j].id = "answerPP2" + j; //设置md2中p标签的id,供子标签设置class
			}
			var pAns = [];
			var num = 0;
			for (var k = 0; k < answerP.length; k++) {
				pAns = document.getElementById("answerPP2" + k); //根据id获取每一个p(主要是单选按钮是p的子节点)
				var pChilds = []; //存放p的子节点
				pChilds = pAns.children;
				for (var m = 0; m < pChilds.length; m++) {
					pChilds[m].className = "answerII2" + num; //为每一道题的选项设置相同的class
					pChilds[m].name = "answerII2" + num; //为每一道题设置name属性(这里针对单选项需要name属性)
				}
				num++;
			}
			for (var n = 0; n < answerP.length; n++) {
				var qClass = [];
				qClass = document.getElementsByClassName("answerII2" + n);
				if (qClass[0].tagName.toString() === "INPUT") {
					// alert(pojoList[n].qAnswer)
					for (var g = 0; g < qClass.length; g++) {
						if (qClass[g].value.toString() === pojoList[n].qAnswer) {
							qClass[g].checked = true;
						}
					}

				} else if (qClass[0].tagName.toString() === "TEXTAREA") {
					qClass[0].value = pojoList[n].qAnswer
				}
			}

		}
	</script>
</body>