js实现复制html页面
复制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>