Расчет формы 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 будет звучать так: «Тебе нравится холод или жара?»

2А - Холодный (R1 = + 0; R2 = + 1);

2B - Обогрев (R1 = + 1; R2 = + 0);

После того, как переменные ответа суммированы, возвращается результат с более высокой суммой (лев ИЛИ пингвин)

Answer 1

как правильно вызвать действие вычисления / отправки значений?

A form очень поможет справиться со стороной сервера данных. Итак, я предполагаю, что вы хотите рассчитать на submit.

Эта документация MDN описывает отправку данных формы . Вы увидите, как с помощью инструментов просматривать объект request и программно обращаться к нему на стороне сервера.

---

как принимать только выбранные входные значения?

Об этом позаботились выше.

---

как рассчитать результат? ... Пример: 1A = sL + 4, sK + 1, sA + 2, sG + 5, sB + 3

Этот пример не имеет смысла для меня. Описательные имена переменных могут помочь.

Вопросы и ответы как структура данных. Подумайте об этом сейчас, не переписывайте все!

Все это может уйти, если вопросы / ответы были в массиве, скажем так. Тогда просто посмотрите ответ.

Я буду утверждать как универсальную истину, что структуры данных упрощают весь ваш код везде. Он легко используется как на стороне клиента, так и на стороне сервера. Я не сомневаюсь, что это может помочь исправить этот непонятный расчет. Структура - это согласованная «форма», которая поможет передавать данные со страницы пользовательского интерфейса в базу данных, туда и обратно. Это избавляет от множества переменных потерь повсюду. Это уменьшает избыточные переменные. Функции проще при использовании структур данных.

Как это может выглядеть? Используйте массивы, объекты и т. Д. Для группировки вещей, которые принадлежат друг другу. Нет «правильного» ответа. Часто происходит вложение структур, отражающих взаимосвязь объектов. Иногда вещи структурированы (сгруппированы), потому что они взаимодействуют.

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>