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）;

Question2 是：“您喜欢冷还是热？”

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

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

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

Answer 1

假设您要使用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>

Answer 2

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

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.
];

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

2 个答案:

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

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

2 个答案:

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

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