javascript - 如何为不同的“正确”答案分配要汇总的单个值?
问题描述
在一个简单的测试中,如何分配一个要递增的唯一值,而不是在每个正确答案的分数上加 1,一个问题可能比其他问题的权重更大?已尝试先将测试分开,问题可能更容易解决,但不确定如何进行。
<body>
<h1>Test for Stroke and Diabetes</h1>
<form name="combitest">
<p style="color:green;font-size:20px">
History of Stroke</p>
<ul style="margin-top: 3pt">
<label><input type="radio" name="hststroke" value="Yes">Yes</label><br>
<label><input type="radio" name="hststroke" value="No">No</label><br>
</ul>
<p style="color:green;font-size:20px">
Age</p>
<ul style="margin-top: 3pt">
<label><input type="radio" name="age" value="<84">less than 84</label><br>
<label><input type="radio" name="age" value=">84">greater than 84</label><br>
</ul>
<p style="color:green;font-size:20px">
Female</p>
<ul style="margin-top: 3pt">
<label><input type="radio" name="female" value="Yes">Yes</label><br>
<label><input type="radio" name="female" value="No">No</label><br>
</ul>
<p style="color:green;font-size:20px">
History of diabetes mellitus</p>
<ul style="margin-top: 3pt">
<label><input type="radio" name="hstdiabetesmellitus" value="Yes">Yes</label><br>
<label><input type="radio" name="hstdiabetesmellitus" value="No">No</label><br>
</ul>
<p style="color:green;font-size:20px">
History of congestive heart failure</p>
<ul style="margin-top: 3pt">
<label><input type="radio" name="hstcongestiveheart failure" value="Yes">Yes</label><br>
<label><input type="radio" name="hstcongestiveheart failure" value="No">No</label><br>
</ul>
<p style="color:green;font-size:20px">
History of hypertension</p>
<ul style="margin-top: 3pt">
<label><input type="radio" name="hsthypertension" value="Yes">Yes</label><br>
<label><input type="radio" name="hsthypertension" value="No">No</label><br>
</ul>
<p style="color:green;font-size:20px">
Proteinuria</p>
<ul style="margin-top: 3pt">
<label><input type="radio" name="proteinuria" value="Yes">Yes</label><br>
<label><input type="radio" name="proteinuria" value="No">No</label><br>
</ul>
<p style="color:green;font-size:20px">
EGFR less than 45 or end-stage renal disease</p>
<ul style="margin-top: 3pt">
<label><input type="radio" name="eGFRlt45orendstagerenal" value="Yes">Yes</label><br>
<label><input type="radio" name="eGFRlt45orendstagerenal" value="No">No</label><br>
</ul>
<p> Score for test 1 (Stroke) = <span class="res"></span><br><br>
<p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
<p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
<input type="reset" value="Clear Answers">
</form>
</body>
<script>
const ca=[
["Yes", "Yes"],
[">84", "<84"],
["Yes", ,"Yes"],
["Yes", "Yes"],
["Yes", , "No"],
["Yes"],
["Yes"],
["Yes", "No"]
];
let spans=[...document.querySelectorAll('span.res')];
document.querySelector("input[type=reset]").onclick=ev=>spans.forEach(sp=>sp.textContent="");
document.querySelector("form").onchange=ev=>{
let cnt=[0,0,0], res=[0,0,0], uls=document.querySelectorAll('form ul');
ca.forEach((c,i)=>{
c.forEach((ca,j)=>{ var q;
// evrything happens here:
// * the count is incremented for each question (cnt[])
// * if the answer fits, the score is incremented too (res[])
ca && ++cnt[j] && (q=uls[i].querySelector("input:checked")) && q.value==ca && ++res[j]
});
});
res.forEach((r,i)=>spans[i].textContent=(200*r/cnt[i]).toFixed(2))
}
</script>
解决方案
编辑
好的,这是对整个事情的另一次重写。:D
我重组了您的 HTML 标记。它过于冗长和重复。我现在从 object 生成所有内容questions
。在其中,您会发现问题本身以及所有可能的答案选项(可以是任意数量的答案)。答案数组(a
每个问题对象中的属性)具有以下格式:[["possible answer value", [test1score,test2score,test3score]], ["next possible answer",[...]], ...]
. 根据选择的答案,其中一个点数组将被添加到结果数组res
中。然后总和将显示在三个.res
跨度中。
const questions=[ // questions, answers with their associated points:
{q:"History of Stroke", a:[["Yes",[10,10, 0]],["No" , [ 0, 0, 0]]]},
{q:"Age", a:[[">84",[20,20, 0]],["<84", [ 0, 0, 0]]]},
{q:"Female", a:[["Yes",[10, 0,30]],["No" , [ 0, 0, 0]]]},
{q:"History of diabetes mellitus", a:[["Yes",[20,50, 0]],["No" , [ 0, 0, 0]]]},
{q:"History of congestive heart failure",a:[["Yes",[30, 0,50]],["No" , [ 0, 0, 0]]]},
{q:"History of hypertension", a:[["Yes",[30, 0, 0]],["No" , [ 0, 0, 0]]]},
{q:"Body mass index", a:[["<23",[ 0, 0, 0]],["23...28",[20,20,30]],[">28" ,[50,60,40]]]},
{q:"Proteinuria", a:[["Yes",[10, 0, 0]],["No", [ 0, 0, 0]]]},
{q:"EGFR less Than 45 or end-stage renal desease",
a:[["Yes",[0, 0, 0]],["No", [ 0, 0, 0]]]}
];
const frm =document.querySelector("form");
// create questions block first:
frm.innerHTML=questions.map(q=>{
let nam=q.q.toLowerCase().replace(/ /g,"").substr(0,12)
return `<p style="color:green;font-size:20px">${q.q}</p>
<ul style="margin-top: 3pt">${q.a.map(([a])=>`<label><input type="radio" name="${nam}" value="${a}">${a}</label>`).join('<br>\n')}</ul>`;
}).join('\n')+frm.innerHTML;
let spans=[...document.querySelectorAll('span.res')];
document.querySelector("input[type=reset]").onclick=ev=>spans.forEach(sp=>sp.textContent="");
frm.onchange=ev=>{
let res=[0,0,0], uls=document.querySelectorAll('form ul');
questions.forEach((qo,i)=>{ var a;
if (a=uls[i].querySelector("input:checked")){ // only if an answer has been chosen
let pts=qo.a.find(([el])=>el==a.value)[1] // get array with points for all tests
res.forEach((r,i)=>res[i]+=pts[i]); // add points to res-array
}
});
res.forEach((r,i)=>spans[i].textContent=r)
};
<h1>Test for Stroke and Diabetes</h1>
<form name="combitest">
<p> Score for test 1 (Stroke) = <span class="res"></span><br><br>
<p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
<p> Score for test 3 (some other test) = <span class="res"></span><br><br>
<input type="reset" value="Clear Answers">
</form>
推荐阅读
- javascript - 如何在 Rails 应用程序中实现过滤器而不需要重新加载页面?
- python - Python 3 - 不理解单行双循环
- python-3.x - 如何实现 request.args.get('next')
- oracle - 创建触发器以插入和删除行
- android - 如何为我用 Kotlin 编写的自定义 IssueRegistry 解决“过时的自定义 lint 检查”并使其工作(Android)
- java - 比较两个字符串作为日期,并检索月份和年份
- angular - rxjs behaviorsubject 不改变 Ionic 4 视图
- scala - 在 Scala 中返回部分应用的函数
- c# - 如何根据我的系列值获取辅助轴的比例?
- python - python selenium submit 以交互方式工作,但不在脚本中,甚至与 time.sleep