上下各有一个框,框里有元素(点击下面的元素,显示到上面的框里面去,按一定顺序排放)
/**
* 点击备选答案里面的内容(item里),显示在上面的内容框里(slot里)
* 之后提交按钮显示出来,然后点击提交答案。
*/
function objBtnS(){
var objtext = document.querySelectorAll(".slot");//slot上面的框
var objBtn = document.querySelectorAll(".item");//下面的框
var showHow = document.querySelector('.show-how');//点击执行的按钮
for (var i = 0; i < objBtn.length; i++) {
var b = objBtn[i]; //遍历之后的每个item
b.addEventListener(MIGlobals.eventTouchEnd, function(){
if (iStuas) {//true执行
var userAanwer = this.getAttribute("user-answer");
var thisText = this.innerHTML;//item里面的是内容
if (this.getAttribute("data-down") == "y") {//item里面的属性 == y 返回false
return false;
}
this.setAttribute("data-down", "y");
var m = 0;
for (var j = 0; j < objtext.length; j++) {
var text = document.querySelector(".slot[data-ind='"+ m +"']");
if(text.getAttribute("data-status") == "n"){
var dataInd = parseInt(text.getAttribute("data-ind"));
text.innerHTML = thisText;
text.setAttribute("data-status", "y");
text.setAttribute("user-answer-right",userAanwer);
checkStatus(m);//++
if (dataInd < 4) {
MIGlobals.addClass(text, "textright");
}else if ((dataInd ==4) || (dataInd == 9)|| (dataInd == 14)) {
MIGlobals.addClass(text,"textdown");
}else if (4 < dataInd && dataInd < 9) {
MIGlobals.addClass(text,"textleft");
}else if (9 < dataInd && dataInd < 14) {
MIGlobals.addClass(text,"textright");
}else if (dataInd == 15) {
MIGlobals.addClass(text,"textleft");
};
break;
}
m++;
};
this.style.opacity = "0";
}
if (checkAllBlanksFilled()) {
showHow.style.display = 'block';
selfTest.style.height = 0 + 'px';
selfGren.style.display = 'none';
}else{
showHow.style.display = 'none';
}
})
}
}
/**
* 当答案已经出现在内容框里,点击回到原来的位置。
* 和上面的objBtnS()函数是一个联动的反应
*/
function objtextS(){
var objtext = document.querySelectorAll(".slot");
var objBtn = document.querySelectorAll(".item");
var showHow = document.querySelector('.show-how');
for (var i = 0; i < objtext.length; i++) {
var TextBtn = objtext[i];
TextBtn.setAttribute("data-status", "n");
TextBtn.addEventListener(MIGlobals.eventTouchEnd,function(){
if (iStuas) {//++
var text = this.innerHTML;
this.innerHTML ="";
this.setAttribute("data-status", "n");
for (var j = 0; j < objBtn.length; j++) {
var Btn = objBtn[j];
var BtnText = Btn.innerHTML;
var dataInd = parseInt(this.getAttribute("data-ind"));//++
if(Btn.getAttribute("data-down") == "y" && BtnText == text){
Btn.style.opacity = "1";
Btn.setAttribute("data-down", "n");
compareArray();
if (dataInd < 4) {
MIGlobals.removeClass(this,"textright");
}else if ((dataInd ==4) || (dataInd == 9)|| (dataInd == 14)) {
MIGlobals.removeClass(this,"textdown");
}else if (4 < dataInd && dataInd < 9) {
MIGlobals.removeClass(this,"textleft");
}else if (9 < dataInd && dataInd < 14) {
MIGlobals.removeClass(this,"textright");
}else if (dataInd == 15) {
MIGlobals.removeClass(this,"textleft");
};
break;
}
};
}else{
}
if (!checkAllBlanksFilled()) {
showHow.style.display = 'none';
selfTest.style.height = 274 + 'px';
selfGren.style.display = 'block';
}
});
};
}