HTML Javascript自我评估测验/问卷_Javascript_Html

HTML Javascript自我评估测验/问卷

javascript html

HTML Javascript自我评估测验/问卷,javascript,html,Javascript,Html,大家好，我得到了一个非常基本的JavaScript HTML测试，但我想最终得到的是一个评估型测试，有15个问题，分为3类（例如酗酒、抑郁症、吸毒），例如：你多久喝酒一次？ -一直 -偶尔 -从来没有玩家回答所有15个问题，最后根据他们回答问题的方式分配一个类别，例如，你的类别是药物滥用等我在想，也许每个类别都有自己的计数器，每个可能的答案都有一个值，例如，在玩家回答问题时，总是给3分，偶尔给2分等等，这些值被存储在相应的类别中，最后将每个类别的分数相加，并将分数最高的类别分配给玩家如有

大家好，我得到了一个非常基本的JavaScript HTML测试，但我想最终得到的是一个评估型测试，有15个问题，分为3类（例如酗酒、抑郁症、吸毒），例如：

你多久喝酒一次？ -一直 -偶尔 -从来没有

玩家回答所有15个问题，最后根据他们回答问题的方式分配一个类别，例如，你的类别是药物滥用等

我在想，也许每个类别都有自己的计数器，每个可能的答案都有一个值，例如，在玩家回答问题时，总是给3分，偶尔给2分等等，这些值被存储在相应的类别中，最后将每个类别的分数相加，并将分数最高的类别分配给玩家

如有任何帮助，将不胜感激：）

HTML:

CSS:


div#测试{
边框：#000 1px实心；
填充：10px40px40px40px；
}

JS:


var pos=0，测试，测试状态，问题，选择，选择，chA，chB，chC，正确=0；
变量问题=[
[“你多久喝一次？”、“一直”、“经常”、“从不”、“B”]，
[“你曾经无缘无故地感到悲伤吗？”、“一直”、“经常”、“从未”、“C”]，
[“你试过毒品吗”、“一直”、“经常”、“从未”、“C”]，
[“你在别人身边感到不安吗”，“一直”，“经常”，“从未”，“C”]
];
函数ux）{
返回文档.getElementById（x）；
}
函数renderQuestion（）{
测试=uu（“测试”）；
如果（位置>=问题长度）{
test.innerHTML=“您的类别是”；
_（“测试状态”）.innerHTML=“测试完成”；
pos=0；
正确=0；
返回false；
}
_（“测试状态”）.innerHTML=“问题”+（pos+1）+”of“+问题长度；
问题=问题[pos][0]；
chA=问题[pos][1]；
chB=问题[pos][2]；
chC=问题[pos][3]；
test.innerHTML=“+问题+”；
test.innerHTML+=“+chA+”
”；
test.innerHTML+=“”+chB+“
”；
test.innerHTML+=“”+chC+“

”；
test.innerHTML+=“提交答案”；
}
函数checkAnswer（）{
选项=document.getElementsByName（“选项”）；
对于（var i=0；i由生成的可执行Javascript片段its）（公共GIT存储库在此提供），测验按参数和类别组织；下面可以看到UML图


var u extends=this.u extends | |函数（d，b）{
如果（b.hasOwnProperty（p））d[p]=b[p]；
函数{this.constructor=d；}
__.原型=b.原型；
d、 原型=新的；
};
var类别；
（职能（类别）{
var QuestionCategory=（函数（）{
功能类别（值）{
这个。值=值；
}
返回问题类别；
})();
Categories.QuestionCategory=问题类别；
var AQuestionCategory=（函数（_super）{
__扩展（AQuestionCategory，超级）；
函数AQuestionCategory（）{
_超级呼叫（本，1）；
}
返回AQuestionCategory；
})（问题类别）；
Categories.aquestioncategority=aquestioncategority；
var BQuestionCategory=（函数（_super）{
__扩展（BQuestionCategory，_super）；
函数BQuestionCategory（）{
_超级。呼叫（这个，2）；
}
返回BQuestionCategory；
})（问题类别）；
Categories.bquestioncategority=bquestioncategority；
var CQuestionCategory=（函数（_super）{
__扩展（CQuestionCategory，_super）；
函数CQuestionCategory（）{
_超级。呼叫（这个，3）；
}
返回CQuestionCategory；
})（问题类别）；
Categories.cquestioncategority=cquestioncategority；
})（类别| |（类别={}））；
var问题；
（职能（问题）{
var Answer=（函数（）{
函数应答（文本、值）{
this.Text=文本；
这个。值=值；
}
返回答案；
})();
问题。答案=答案；
变量问题=（函数（）{
功能问题（文本、id、类别、答案）{
this.Text=文本；
this.ID=ID；
这个。类别=类别；
这个。答案=答案；
}
Question.prototype.Render=函数（）{
var_this=这个；
var dContainer=document.createElement（“div”）；
var dQuestion=document.createElement（“h3”）；
dQuestion.innerHTML=this.Text；
dContainer.appendChild（dq）；
var dCategory=document.createElement（“div”）；
dCategory.innerHTML='Category:'+this.Category.Value；
dContainer.appendChild（dCategory）；
dContainer.appendChild（document.createElement（“br”））；
var计数器=0；
this.Answers.forEach（函数（a）{
var\uuu id=\u this.id+计数器；
var dRadio=document.createElement（“输入”）；
setAttribute（'type'，'radio'）；
dRadio.setAttribute（'id'，_id）；
dRadio.setAttribute（'data-category'，_this.category.Value+''；
dRadio.setAttribute（'value'，a.value+''）；
setAttribute（'name'，_this.ID）；
var dLabel=document.createElement（“标签”）；
dLabel.innerHTML=a.Text；
dLabel.setAttribute（'For'，u id）；
数据容器。附加子对象（dRadio）；
dContainer.appendChild（dLabel）；
计数器++；
});
dContainer.appendChild（document.createElement（“hr”）；
返回数据容器；
};
返回问题；
})();
问题。问题=问题；
var QuestionCollection=（函数（）{
功能收集（qu
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2 id="test_status"></h2>
<div id="test"></div>
</body>
</html> 

<style>
div#test {

     border:#000 1px solid;
     padding: 10px 40px 40px 40px;
}
</style>

    <script>
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
    ["How often do you drink?", "All the time", "Often", "Never", "B"],
    ["Do you ever feel sad for no reason?", "All the time", "Often", "Never", "C"],
    ["Have you ever tried drugs", "All the time", "Often", "Never", "C"],
    ["Do you feel uneasy around people", "All the time", "Often", "Never", "C"]


];

function _(x) {

   return document.getElementById(x);

}

function renderQuestion () {

   test = _("test");
   if(pos >= questions.length) {
     test.innerHTML = "<h2>Your Category is  </h2>";
     _("test_status").innerHTML = "Test Completed";
     pos = 0;
     correct = 0;
     return false;
     }



   _("test_status").innerHTML = "Question "+(pos+1)+" of"+questions.length;
  question = questions[pos] [0];
  chA = questions[pos] [1];
  chB = questions[pos] [2];
  chC = questions[pos] [3];
  test.innerHTML = "<h3>"+question+"</h3>";
  test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
  test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
  test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>"; 
  test.innerHTML +="<button onclick='checkAnswer()'>submit Answer</button>"; 
   }

   function checkAnswer() {
     choices = document.getElementsByName("choices");
     for (var i=0; i<choices.length; i++) {
     if(choices[i].checked) {
       choice = choices[i].value;
   }
   }
    if(choice == questions[pos] [4]) {
     correct++;
     }
     pos++;
     renderQuestion();
   }
   window.addEventListener("load", renderQuestion, false);
</script>