HTML 表单计算 - JS 还是 PHP？ （多个变量）

Question

我正在构建一个测验。示例 HTML：

<div class="panel qContainer">
    <ol id="left">
        <li>
            Question1:<br/>
            <input type="radio" value="1A" name="SortingQ1" />1A
            <input type="radio" value="1B" name="SortingQ1" />1B
            <input type="radio" value="1C" name="SortingQ1" />1C
        </li>
        <li>
            Question2:<br/>
            <input type="radio" value="2A" name="SortingQ2" />2A
            <input type="radio" value="2B" name="SortingQ2" />2B
            <input type="radio" value="2C" name="SortingQ2" />2C
            <input type="radio" value="2D" name="SortingQ2" />2D
            <input type="radio" value="2E" name="SortingQ2" />2E
        </li>
    </ol>
    <input type="button" id="button" value="submit" />
</div>

计算结果有5个变量：sL、sK、sA、sG、sB。 每个答案都为这些变量赋予数值。例子： 1A = sL+4, sK+1, sA+2, sG+5, sB+3

提交后，所有的值都应该相加，最大的变量将作为结果返回。

我的问题是：

• 如何正确调用计算/提交值的动作？

• 如何只取选定的输入值？

• 如何计算结果？

关于结果，我认为最简单的方法是使用简单的 IF 语句：

$x = ''; //value from input, not sure how to initialise it
if ($x == '1A'){
    $sL=+4;
    $sK=+1;
    $sA=+2;
    $sG=+5;
    $sB=+3;
}

当然，我不确定PHP是否有这样的计算逻辑。也许Javascript会更容易？至少自己做计算。使用 JS 非常简单。我正在考虑使用 PHP，因为结果将应用于用户数据库字段。

欢迎提出任何建议！

如果您有任何问题，请告诉我。 （此表单将在phpBB环境中使用）

这是我的想法的一个简单示例： 测验你是什么动物？

可能的结果：R1 = 狮子； R2 = 企鹅；

问题 1 是：“你吃肉吗？”

1A - 是（R1=+1；R2=+0）；

1B - 否（R1=+0；R2=+1）；

问题 2 会是：“你喜欢冷还是热？”

2A - 冷（R1=+0；R2=+1）；

2B - 热量（R1=+1；R2=+0）；

答案变量被求和后，返回总和更高的结果（狮子或企鹅）

Answer 1

如何正确调用计算/提交值的动作？

form 将极大地帮助处理数据服务器端。所以我假设你想计算submit。

This MDN documentation describes sending form data。您将看到如何通过工具查看request 对象并以编程方式在服务器端访问它。

---

如何只取选定的输入值？

上面已经处理好了。

---

如何计算结果？ ... 示例：1A = sL+4, sK+1, sA+2, sG+5, sB+3

这个例子对我来说毫无意义。描述性变量名称可能会有所帮助。

问答作为数据结构。现在考虑一下，不要重写所有内容！

比方说，如果问题/答案在一个数组中，那么所有这些都可以消失。那就去看看答案吧。

我将断言数据结构在任何地方都可以简化您的所有代码这一普遍真理。它在客户端和服务器端都很容易使用。我毫不怀疑它可以帮助解决这个难以理解的计算。结构是一种一致的“形式”，它将帮助从 UI 页面来回获取数据到数据库。它消除了整个地方的许多损失变量。它减少了冗余变量。使用数据结构时，函数更简单。

它会是什么样子？使用数组、对象等将属于一起的事物分组。没有正确的答案。通常存在反映对象关系的结构嵌套。有时事物是结构化的（分组的），因为它们相互作用。

var aQuestion = { 
   question : "question one",
   answers : [ 'ans1', 'ans2', 'ans3'],
   correct : 0    // index into answers array
   };

var twentyQuestions = [
   { 
   question : "question one",
   answers : [ 'ans1', 'ans2', 'ans3'],
   correct : 0    // index into answers array
   },

   { 
   question : "question two",
   answers : [ 'ans1', 'ans2', 'ans3'],
   correct : 2    // index into answers array
   }

   // ... and so on.
];

Answer 2

假设您要使用 javascript：

• 如何正确调用计算/提交值的动作？

您向按钮添加事件侦听器：

document.getElementById("button").addEventListener("click", function(){
//code here
});

• 如何只取选定的输入值？

一种可能性是：

var question1 = document.getElementsByName('SortingQ1');
for (var i = 0; i<=question1.length; i++) {
    if (question1[i].checked) {
    //question1[i] is the answer 
        break;
    }
}

• 如何计算结果？

这里是一个例子：

var optionsSelected = document.getElementsByClassName('option');

var submit = document.getElementById("button").addEventListener("click", function() {

  var param = {};
  param.sL = 0;
  param.sK = 0;
  param.sA = 0;
  param.sG = 0;
  param.sB = 0;

  var calSum = {};
  calSum['1A'] = [4, 1, 2, 5, 3];
  calSum['1B'] = [3, 2, 3, 4, 2];
  calSum['1C'] = [20, 30, 40, 330, 10];
  calSum['2A'] = [1, 4, 5, 5, 0];
  calSum['2B'] = [0, 5, 6, 5, 0];
  calSum['2C'] = [5, 6, 7, 0, 0];
  calSum['2D'] = [6, 7, 8, 0, 3];
  calSum['2E'] = [70, 80, 90, 100, 30];

  var max = 0;
  var par = "";
  for (var i = 0; i < optionsSelected.length; i++) {
    if (optionsSelected[i].checked) {
      let j = 0;
      for (let key in param) {
        param[key] += calSum[optionsSelected[i].value][j];
        j++;
        if (param[key] > max) {
          max = param[key];
          par = key;
        }
      }

    }
  }

  console.log(param);
  alert("max " + max);
  alert("max param " + par);

});

<div class="panel qContainer">
    <ol id="left">
        <li>
            Question1:<br/>
            <input type="radio" value="1A" name="SortingQ1" class="option" />1A
            <input type="radio" value="1B" name="SortingQ1" class="option"/>1B
            <input type="radio" value="1C" name="SortingQ1" class="option"/>1C
        </li>
        <li>
            Question2:<br/>
            <input type="radio" value="2A" name="SortingQ2" class="option"/>2A
            <input type="radio" value="2B" name="SortingQ2" class="option"/>2B
            <input type="radio" value="2C" name="SortingQ2" class="option"/>2C
            <input type="radio" value="2D" name="SortingQ2" class="option"/>2D
            <input type="radio" value="2E" name="SortingQ2" class="option"/>2E
        </li>
    </ol>
    <input type="button" id="button" value="submit" />
</div>