根据用户评分进行问卷评分

时间:2018-05-20 04:42:19

标签: javascript jquery forms calculator rating

我是一个总菜鸟,所以请原谅错误。我正在尝试创建一个脚本,根据用户A的分数,根据5分李克特量表调查问卷的结果,返回用户B的新分数。两者首先在页面顶部输入,然后更改用户B的分数的问卷在下面。它应该这样工作:

首先:
用户A得分= x
用户B得分= y
它将用户A的得分四舍五入到最近50,然后将它除以50以创建一个我们称之为z的数字。
例如,用户A得分= 442,它被四舍五入为450,然后除以50 = 9.这个新数字是z。或z = x / 50(最接近的整数)。现在根据调查回复,如果用户A点击“非常差”",它会获取用户B的得分输入数据并从中减去z。然后根据提交后的问卷调查结果给出以下新结果:
很差= yz
差= y(不改变分数)满意= y + z
良好= y + z + 1
很好= y + z + 2

让我知道这是否有意义。我附上了我在下面尝试过的示例代码,但我确定它错了。它需要做的不仅仅是这个,但这是我想要弄清楚的最低限度。感谢

 <!DOCTYPE html>
    <html>
        <head>

    </head>
    <body>

    <h1>
        Questionnaire mess around
    </h1>
    <p>

        <label for='ascore' class="inlinelabel">User A Score</label>
        <input id="ascore" type="number"> <br>
        <br>
        <label for='bscore' class="inlinelabel">User B Score</label>
        <input id="bscore" type="number">

        </p>


    <form action="" id="scorecalc" onsubmit="return false;">
       <fieldset>


        <br>
        <legend>Peer Review Questionnaire!</legend>
        <h3> Based on your recent project together, how would you rate User B in the following Skills</h3>

            <hr>
        <label ><strong>Time Management</strong></label> 
        <br>
        <br>
        <input type="radio"  name="tmscore" value="tmvpoor" />
        Very Poor
        <input type="radio"  name="tmscore" value="tmpoor"/>
        Poor
        <input type="radio"  name="tmscore" value="tmsat" />
        Satisfactory
        <input type="radio"  name="tmscore" value="tmgood"/>
        Good
        <input type="radio"  name="tmscore" value="tmvgood" />
        Very Good

        <br>

       <button onclick="myFunction()" class="button">Submit</button>


        </fieldset>
    </form>

    <h2>

    User B New Score </h2>

    <p id="result"></p>

    <script> 
    var theForm = document.forms["scorecalc"];
    var x = document.getElementByID(ascore).value
    var y = document.getElementByID(bscore).value

    function closest50(x) {
      return Math.round(x/ 50) * 50
    }

    var z = closest50(x)

    var tm_result = new Array();
    tm_result["tmvpoor"]=y-z;
    tm_result["tmpoor"]=y;
    tm_result["tmsat"]=y+z;
    tm_result["tmgood"]=y+z+1;
    tm_result["tmvgood"]=y+z+2

    function myFunction() {
        document.getElementById("result").innerHTML = tm_result;
    }
    </script>
    </body>

1 个答案:

答案 0 :(得分:0)

您的代码中存在很多问题

  • 应该在函数内部的东西不是
  • 你真的不想要一个数组,而是想要存储键/值对的对象
  • 输入字段的值始终是字符串,您需要在使用它进行数学运算之前将其转换为数字
  • document.getElementByID不是您想要的功能... ById
  • 你说你要把x除以50,但你马上把它乘以50再回到原来的
  • 你的document.getElementById中的ascore和bscore应该是字符串
  • 您希望将字符串传递给.innerHTML而不是数组/对象

这是工作代码。如果您对此有疑问,请在下面发表评论(我只更改了JS部分)。

&#13;
&#13;
const theForm = document.querySelector('#scorecalc');

function closest50(x) {
 return Math.round(x / 50);
}

function myFunction() {
   const x = Number(document.getElementById('ascore').value);
   const y = Number(document.getElementById('bscore').value);
   const choice = document.querySelector('input[type=radio]:checked').value;
   const z = closest50(x)

   const tm_result = {
     tmvpoor: y - z,
     tmpoor: y,
     tmsat: y + z,
     tmgood: y + z + 1,
     tmvgood: y + z + 2
   };

   document.getElementById("result").innerHTML = tm_result[choice];
}
&#13;
    <h1>
        Questionnaire mess around
    </h1>
    <p>

        <label for='ascore' class="inlinelabel">User A Score</label>
        <input id="ascore" type="number"> <br>
        <br>
        <label for='bscore' class="inlinelabel">User B Score</label>
        <input id="bscore" type="number">

        </p>


    <form action="" id="scorecalc" onsubmit="return false;">
       <fieldset>


        <br>
        <legend>Peer Review Questionnaire!</legend>
        <h3> Based on your recent project together, how would you rate User B in the following Skills</h3>

            <hr>
        <label ><strong>Time Management</strong></label>
        <br>
        <br>
        <input type="radio"  name="tmscore" value="tmvpoor" />
        Very Poor
        <input type="radio"  name="tmscore" value="tmpoor"/>
        Poor
        <input type="radio"  name="tmscore" value="tmsat" />
        Satisfactory
        <input type="radio"  name="tmscore" value="tmgood"/>
        Good
        <input type="radio"  name="tmscore" value="tmvgood" />
        Very Good

        <br>

       <button onclick="myFunction()" class="button">Submit</button>


        </fieldset>
    </form>

    <h2>User B New Score </h2>

    <p id="result"></p>
&#13;
&#13;
&#13;