首页 > 解决方案 > 如何为不同的“正确”答案分配要汇总的单个值?

问题描述

在一个简单的测试中,如何分配一个要递增的唯一值,而不是在每个正确答案的分数上加 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>

标签: javascripthtmljquery

解决方案


编辑

好的,这是对整个事情的另一次重写。: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>


推荐阅读