Подправить JS код

520
24 ноября 2016, 10:22

Есть JS код который обрабатывает результаты теста(найден на просторах интернета), но он работает если в тесте 5 вопросов. Как сделать чтобы можно было делать любое количество вопросов?

function count() 
{ 
var answer = 0; 
var ball = 0; 
var good = ""; 
var bad = ""; 
var solv = 1; 
  for (var i=0; i<26; i++) { 
  if (document.form1.elements[i].checked) { 
    if (document.form1.elements[i].value != 0) { 
          if (good != "") { 
             good += ", "+solv; 
          } 
          else { 
             good += "№ "+solv; 
          } 
       } 
     else { 
         if (bad != "") { 
             bad += ", "+solv; 
          } 
          else { 
             bad += "№ "+solv; 
          } 
     } 
     solv++; 
  } 
} 
for (var i=0; i<26; i++) { 
    if (document.form1.elements[i].checked) { 
      answer +=1; 
    } 
  } 
 if (answer < 5) { 
     alert("Вы не ответили на все вопросы теста!"); 
  } 
  else { 
     if (good == "") good = " нет :("; 
     if (bad == "") bad = " нет =)"; 
 
var answer = "<span style=color:green>Решены правильно:</span> "+good+ "<br>"; 
if (bad == "нет") {  answer += "Неправильно: "+bad+"."; } 
else { answer += "<span style=color:red>Неправильно:</span>"+bad+ "";} 
 
if (navigator.userAgent.toLowerCase().indexOf("gecko") > 0) {  
  div1 = document.getElementById('div1'); 
}  
     div1.innerHTML = answer; 
     div1.style.display = 'block'; 
 
     var paragraphs = document.all.tags('I'); 
     for (s=0; s< paragraphs.length; s++) { 
             if (document.form1.elements[s].checked) { 
                 paragraphs(s).style.fontWeight = 'bold'; 
                 if (document.form1.elements[s].value != 0) { 
                     paragraphs(s).style.color = 'green'; 
                 } 
                 else { 
                     paragraphs(s).style.color = 'red'; 
                 } 
              } 
      } 
  } 
}
<form name="form1" class="test"> 
<p>1. Вопрос 1<br> 
<input type="radio" name="a" value="1"><i>Вариант 1</i><br> 
<input type="radio" name="a" value="0"><i>Вариант 2</i><br> 
<input type="radio" name="a" value="0"><i>Вариант 3</i><br> 
<input type="radio" name="a" value="0"><i>Вариант 4</i><br> 
<input type="radio" name="a" value="0"><i>Вариант 5</i> 
</p> 
<p>2. Вопрос 2<br> 
<input type="radio" name="b" value="0"><i>Вариант 1</i><br> 
<input type="radio" name="b" value="0"><i>Вариант 2</i><br> 
<input type="radio" name="b" value="0"><i>Вариант 3</i><br> 
<input type="radio" name="b" value="1"><i>Вариант 4</i><br> 
<input type="radio" name="b" value="0"><i>Вариант 5</i> 
 
</p> 
<p>3. Вопрос 3<br> 
<input type="radio" name="c" value="0"><i>Вариант 1</i><br> 
<input type="radio" name="c" value="1"><i>Вариант 2</i><br> 
<input type="radio" name="c" value="0"><i>Вариант 3</i><br> 
<input type="radio" name="c" value="0"><i>Вариант 4</i><br> 
<input type="radio" name="c" value="0"><i>Вариант 5</i> 
 
</p> 
<p>4. Вопрос 4<br> 
<input type="radio" name="d" value="0"><i>Вариант 1</i><br> 
<input type="radio" name="d" value="0"><i>Вариант 2</i><br> 
<input type="radio" name="d" value="0"><i>Вариант 3</i><br> 
<input type="radio" name="d" value="1"><i>Вариант 4</i><br> 
<input type="radio" name="d" value="0"><i>Вариант 5</i> 
 
</p> 
<p>5. Вопрос 5<br> 
<input type="radio" name="f" value="0"><i>Вариант 1</i><br> 
<input type="radio" name="f" value="0"><i>Вариант 2</i><br> 
<input type="radio" name="f" value="0"><i>Вариант 3</i><br> 
<input type="radio" name="f" value="1"><i>Вариант 4</i><br> 
<input type="radio" name="f" value="0"><i>Вариант 5</i> 
 
</p> 
<div border="1" id="div1" style="padding:9px 0 11px 10px;margin:9px 17px;border:1px solid green;display:none;"></div> 
<input type="button" value="Узнать результат" onclick="count();"> 
</form>

Answer 1

Исправление оригинального кода конкретно под данный html код:

function count()
{
var answer = 0;
var ball = 0;
var good = "";
var bad = "";
var solv = 1;
  for (var i=0; i<36; i++) {
  if (document.form1.elements[i].checked) {
    if (document.form1.elements[i].value != 0) {
          if (good != "") {
             good += ", "+solv;
          }
          else {
             good += "№ "+solv;
          }
       }
     else {
         if (bad != "") {
             bad += ", "+solv;
          }
          else {
             bad += "№ "+solv;
          }
     }
     solv++;
  }
}
for (var i=0; i<36; i++) {
    if (document.form1.elements[i].checked) {
      answer +=1;
    }
  }
 if (answer < 7) {
     alert("Вы не ответили на все вопросы теста!");
  }
  else {
     if (good == "") good = " нет :(";
     if (bad == "") bad = " нет =)";
var answer = "<span style=color:green>Решены правильно:</span> "+good+ "<br>";
if (bad == "нет") {  answer += "Неправильно: "+bad+"."; }
else { answer += "<span style=color:red>Неправильно:</span>"+bad+ "";}
if (navigator.userAgent.toLowerCase().indexOf("gecko") > 0) { 
  div1 = document.getElementById('div1');
} 
     div1.innerHTML = answer;
     div1.style.display = 'block';
     var paragraphs = document.all.tags('I');
     for (s=0; s< paragraphs.length; s++) {
             if (document.form1.elements[s].checked) {
                 paragraphs(s).style.fontWeight = 'bold';
                 if (document.form1.elements[s].value != 0) {
                     paragraphs(s).style.color = 'green';
                 }
                 else {
                     paragraphs(s).style.color = 'red';
                 }
              }
      }
  }
}

В цикле, где 26 - добавляем наши вопросы, я добавил 10 (2 секции по 5 вопросов), т.е. я 36 поставил. Где answer < 5 - добавляем 2 наши секции, т.е. 7 стает. В Html у каждой группы вопросов должен быть свой, отдельный name - это показывает, что группа радиокнопок выбора есть одним блоком для выбора одного элемента из них.

А вот улучшенная версия Javascript кода (благодаря подсказке об этом Grundy :) ), здесь не нужно вручную ничего менять при добавлении новых блоков вопросов в Html код:

function count() { 
  answer = 0; 
  answerBlocksCount = document.form1.getElementsByTagName("p").length; 
  questionsCount = document.form1.querySelectorAll('input[type=radio]').length + 1; 
  var ball = 0; 
  var good = ""; 
  var bad = ""; 
  var solv = 1; 
 
  for (var i = 0; i < questionsCount; i++) { 
    if (document.form1.elements[i].checked) { 
      if (document.form1.elements[i].value != 0) { 
        if (good != "") { 
          good += ", " + solv; 
        } else { 
          good += "№ " + solv; 
        } 
      } else { 
        if (bad != "") { 
          bad += ", " + solv; 
        } else { 
          bad += "№ " + solv; 
        } 
      } 
      solv++; 
    } 
  } 
  for (var i = 0; i < questionsCount; i++) { 
    if (document.form1.elements[i].checked) { 
      answer += 1; 
    } 
  } 
  if (answer < answerBlocksCount) { 
    alert("Вы не ответили на все вопросы теста!"); 
  } else { 
    if (good == "") good = " нет :("; 
    if (bad == "") bad = " нет =)"; 
 
    var answer = "<span style=color:green>Решены правильно:</span> " + good + "<br>"; 
    if (bad == "нет") { 
      answer += "Неправильно: " + bad + "."; 
    } else { 
      answer += "<span style=color:red>Неправильно:</span>" + bad + ""; 
    } 
 
    if (navigator.userAgent.toLowerCase().indexOf("gecko") > 0) { 
      div1 = document.getElementById('div1'); 
    } 
    div1.innerHTML = answer; 
    div1.style.display = 'block'; 
 
    var paragraphs = document.form1.getElementsByTagName("i").length; 
    for (s = 0; s < paragraphs.length; s++) { 
      if (document.form1.elements[s].checked) { 
        paragraphs(s).style.fontWeight = 'bold'; 
        if (document.form1.elements[s].value != 0) { 
          paragraphs(s).style.color = 'green'; 
        } else { 
          paragraphs(s).style.color = 'red'; 
        } 
      } 
    } 
  } 
}
<form name="form1" class="test"> 
  <p>1. Вопрос 1 
    <br> 
    <input type="radio" name="a" value="1"><i>Вариант 1</i> 
    <br> 
    <input type="radio" name="a" value="0"><i>Вариант 2</i> 
    <br> 
    <input type="radio" name="a" value="0"><i>Вариант 3</i> 
    <br> 
    <input type="radio" name="a" value="0"><i>Вариант 4</i> 
    <br> 
    <input type="radio" name="a" value="0"><i>Вариант 5</i> 
  </p> 
  <p>2. Вопрос 2 
    <br> 
    <input type="radio" name="b" value="0"><i>Вариант 1</i> 
    <br> 
    <input type="radio" name="b" value="0"><i>Вариант 2</i> 
    <br> 
    <input type="radio" name="b" value="0"><i>Вариант 3</i> 
    <br> 
    <input type="radio" name="b" value="1"><i>Вариант 4</i> 
    <br> 
    <input type="radio" name="b" value="0"><i>Вариант 5</i> 
 
  </p> 
  <p>3. Вопрос 3 
    <br> 
    <input type="radio" name="c" value="0"><i>Вариант 1</i> 
    <br> 
    <input type="radio" name="c" value="1"><i>Вариант 2</i> 
    <br> 
    <input type="radio" name="c" value="0"><i>Вариант 3</i> 
    <br> 
    <input type="radio" name="c" value="0"><i>Вариант 4</i> 
    <br> 
    <input type="radio" name="c" value="0"><i>Вариант 5</i> 
 
  </p> 
  <p>4. Вопрос 4 
    <br> 
    <input type="radio" name="d" value="0"><i>Вариант 1</i> 
    <br> 
    <input type="radio" name="d" value="0"><i>Вариант 2</i> 
    <br> 
    <input type="radio" name="d" value="0"><i>Вариант 3</i> 
    <br> 
    <input type="radio" name="d" value="1"><i>Вариант 4</i> 
    <br> 
    <input type="radio" name="d" value="0"><i>Вариант 5</i> 
 
  </p> 
  <p>5. Вопрос 5 
    <br> 
    <input type="radio" name="f" value="0"><i>Вариант 1</i> 
    <br> 
    <input type="radio" name="f" value="0"><i>Вариант 2</i> 
    <br> 
    <input type="radio" name="f" value="0"><i>Вариант 3</i> 
    <br> 
    <input type="radio" name="f" value="1"><i>Вариант 4</i> 
    <br> 
    <input type="radio" name="f" value="0"><i>Вариант 5</i> 
 
  </p> 
  <p>6. Вопрос 6 
    <br> 
    <input type="radio" name="h" value="0"><i>Вариант 1</i> 
    <br> 
    <input type="radio" name="h" value="0"><i>Вариант 2</i> 
    <br> 
    <input type="radio" name="h" value="0"><i>Вариант 3</i> 
    <br> 
    <input type="radio" name="h" value="1"><i>Вариант 4</i> 
    <br> 
    <input type="radio" name="h" value="0"><i>Вариант 5</i> 
 
  </p> 
  <p>7. Вопрос 7 
    <br> 
    <input type="radio" name="j" value="0"><i>Вариант 1</i> 
    <br> 
    <input type="radio" name="j" value="0"><i>Вариант 2</i> 
    <br> 
    <input type="radio" name="j" value="0"><i>Вариант 3</i> 
    <br> 
    <input type="radio" name="j" value="1"><i>Вариант 4</i> 
    <br> 
    <input type="radio" name="j" value="0"><i>Вариант 5</i> 
 
  </p> 
  <div border="1" id="div1" style="padding:9px 0 11px 10px;margin:9px 17px;border:1px solid green;display:none;"></div> 
  <input type="button" value="Узнать результат" onclick="count();"> 
</form>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте beauty-health.com.ua
ТОП-10
READ ALSO
Обработка POST запроса
javascript

Обработка POST запроса

Есть POST запрос на yandex. translate ([URL="https://tech.

530
Выделение текущего пункта меню (PHP)
CSS

Выделение текущего пункта меню (PHP)

При изменении стиля, меняется всё меню целиком. .

489
Не вешается hover background rgba на картинку
CSS

Не вешается hover background rgba на картинку

что я делаю не так? не работает и все тут :( нужно при наведении что бы на картинку накладывался цвет. Я наверное не знаю хитрость :).

541
Разработка мобильной версии сайта
CSS

Разработка мобильной версии сайта

Здравствуйте. Хочу сделать для сайта мобильную версию.

428