JavaScript тесты

219

10 марта 2018, 21:02

У меня есть код теста, и я хочу, чтобы если в тесте набралось не более 10%, то мне выводилось "плохо", а если другие результаты, то уже другие ответы

$(function() { 
 
  $('.questionForm input[type=submit]').on('click', function(e) { 
    var answer = 0; 
    $('#wrap').addClass('none'); 
    for (i = 0; i < $('.group').length; i++) { 
      $('.group').eq(i).each(function(id, elem) { 
        if ($(elem).find('input:checked').length != 0) { 
          if ($(elem).find('input:checked').attr('value') == 1) { 
            answer++; 
          } 
        } 
      }) 
    } 
    $("#wrap").hide(); 
    $(".result").show("slow", function() { 
      $(".result").replaceWith("<div class='replace-container'>" + "<div class='replace'>" + "Тест пройден на: " + "<p>" + (answer / $('.group').length) * 100 + '%' + "</p>" + "</div>" + "</div>") 
    }) 
 
    return false 
  }) 
})

div.questionBlock { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="title_js"> 
  <h1>Начальный уровень</h1> 
</div> 
 
<body> 
  <div id="wrap"> 
    <br> 
    <font size="+2"> 
      <p align="center"> 
        <div class="questionBlock"> 
          <font size="+1"> 
            <br> 
 
            <form method="POST" action="test.php" class="questionForm"> 
              <div class="group"> 
                <h3>JavaScript - это</h3> 
                <input type="radio" name="q1" value="0">Язык разметка<br> 
                <input type="radio" name="q1" value="1">Язык программирования<br> 
                <input type="radio" name="q1" value="0">Язык описания внешнего вида<br> 
              </div> 
 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q2" value="0">&ltscript text="javascript"><br> 
                <input type="radio" name="q2" value="0">&ltscript="text/javascript"><br> 
                <input type="radio" name="q2" value="1">&ltscript type="text/javascript"><br> 
                <input type="radio" name="q2" value="0">&ltscript type="javascript"><br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить комментарий надо</h3> 
                <input type="radio" name="q3" value="0">использовать */<br> 
                <input type="radio" name="q3" value="0">использовать **<br> 
                <input type="radio" name="q3" value="1">использовать //<br> 
                <input type="radio" name="q3" value="1">использовать &lt!--<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Как вывести слово "привет"</h3> 
                <input type="radio" name="q4" value="1">Через alert ('привет');<br> 
                <input type="radio" name="q4" value="0">Через hi ('привет');<br> 
                <input type="radio" name="q4" value="0">Через alert (привет);<br> 
                <input type="radio" name="q4" value="0">Через alert 'привет';<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Какой из вариантов создаст переменную "a"</h3> 
                <input type="radio" name="q5" value="0">var = a;<br> 
                <input type="radio" name="q5" value="1">var a;<br> 
                <input type="radio" name="q5" value="0">$a;<br> 
                <input type="radio" name="q5" value="0">var<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Какой вариант неправильный</h3> 
                <input type="radio" name="q6" value="0"> 
                <div class="code"> 
                  <pre style="background-color: #bfbfbf;color:#000"> <span style="color:#00f;font-weight:700">var</span> x; 
     <span style="color:#3c4c72;font-weight:700">alert</span>(<span style="color:#0000cd">x</span>);</pre> 
                </div> 
                <input type="radio" name="q6" value="1"> 
                <div class="code"> 
                  <pre style="background-color: #bfbfbf;color:#000"> <span style="color:#00f;font-weight:700">var</span> x = 10; 
     <span style="color:#3c4c72;font-weight:700">alert</span>(<span style="color:#0000cd">x</span>);</pre> 
                </div><br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q7" value="0">1)<br> 
                <input type="radio" name="q7" value="0">2)<br> 
                <input type="radio" name="q7" value="1">3)<br> 
                <input type="radio" name="q7" value="0">4)<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q8" value="0">1)<br> 
                <input type="radio" name="q8" value="1">2)<br> 
                <input type="radio" name="q8" value="0">3)<br> 
                <input type="radio" name="q8" value="0">4)<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q9" value="0">1)<br> 
                <input type="radio" name="q9" value="1">2)<br> 
                <input type="radio" name="q9" value="0">3)<br> 
                <input type="radio" name="q9" value="0">4)<br> 
              </div> 
              <br> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q10" value="0">1)<br> 
                <input type="radio" name="q10" value="0">2)<br> 
                <input type="radio" name="q10" value="0">3)<br> 
                <input type="radio" name="q10" value="1">4)<br> 
              </div> 
 
              <br> 
              <input type="submit" value="ОТПРАВИТЬ" name="submit"> 
              <br> 
              <br> 
            </form> 
          </font> 
        </div> 
  </div> 
  <div class="result"> 
    <span>Тест пройден на <p>0%</p></span> 
  </div> 
  <div class="result1"> 
    <span>Вы не прошли тест!</span> 
  </div> 
  </div>

Answer 1

Ну, собственно, добавить переменную, отвечающую за процент прохождения, и в зависимости от её значения изменять код страницы с помощью функции, аргумент которой - эта самая переменная:

function result(percent) { 
  if (percent <= 10) return 'Плохо'; 
  //дальше - код для других значений 
} 
 
$(function() { 
 
  $('.questionForm input[type=submit]').on('click', function(e) { 
    var answer = 0; 
    $('#wrap').addClass('none'); 
    for (i = 0; i < $('.group').length; i++) { 
      $('.group').eq(i).each(function(id, elem) { 
        if ($(elem).find('input:checked').length != 0) { 
          if ($(elem).find('input:checked').attr('value') == 1) { 
            answer++; 
          } 
        } 
      }) 
    } 
    var percent = (answer / $('.group').length) * 100; 
    $("#wrap").hide(); 
    $(".result").show("slow", function() { 
      $(".result").replaceWith("<div class='replace-container'>" + "<div class='replace'>" + "Тест пройден на: " + "<p>" + percent + '%' + "</p>" + "</div>" + "</div>") 
      $(".result1").replaceWith("<div class='replace-container'>" + "<div class='replace'>" + "<p>" + result(percent) + "</p>" + "</div>" + "</div>") 
    }); 
 
    return false; 
  }) 
})

div.questionBlock { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="title_js"> 
  <h1>Начальный уровень</h1> 
</div> 
 
<body> 
  <div id="wrap"> 
    <br> 
    <font size="+2"> 
      <p align="center"> 
        <div class="questionBlock"> 
          <font size="+1"> 
            <br> 
 
            <form method="POST" action="test.php" class="questionForm"> 
              <div class="group"> 
                <h3>JavaScript - это</h3> 
                <input type="radio" name="q1" value="0">Язык разметка<br> 
                <input type="radio" name="q1" value="1">Язык программирования<br> 
                <input type="radio" name="q1" value="0">Язык описания внешнего вида<br> 
              </div> 
 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q2" value="0">&ltscript text="javascript"><br> 
                <input type="radio" name="q2" value="0">&ltscript="text/javascript"><br> 
                <input type="radio" name="q2" value="1">&ltscript type="text/javascript"><br> 
                <input type="radio" name="q2" value="0">&ltscript type="javascript"><br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить комментарий надо</h3> 
                <input type="radio" name="q3" value="0">использовать */<br> 
                <input type="radio" name="q3" value="0">использовать **<br> 
                <input type="radio" name="q3" value="1">использовать //<br> 
                <input type="radio" name="q3" value="1">использовать &lt!--<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Как вывести слово "привет"</h3> 
                <input type="radio" name="q4" value="1">Через alert ('привет');<br> 
                <input type="radio" name="q4" value="0">Через hi ('привет');<br> 
                <input type="radio" name="q4" value="0">Через alert (привет);<br> 
                <input type="radio" name="q4" value="0">Через alert 'привет';<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Какой из вариантов создаст переменную "a"</h3> 
                <input type="radio" name="q5" value="0">var = a;<br> 
                <input type="radio" name="q5" value="1">var a;<br> 
                <input type="radio" name="q5" value="0">$a;<br> 
                <input type="radio" name="q5" value="0">var<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Какой вариант неправильный</h3> 
                <input type="radio" name="q6" value="0"> 
                <div class="code"> 
                  <pre style="background-color: #bfbfbf;color:#000"> <span style="color:#00f;font-weight:700">var</span> x; 
     <span style="color:#3c4c72;font-weight:700">alert</span>(<span style="color:#0000cd">x</span>);</pre> 
                </div> 
                <input type="radio" name="q6" value="1"> 
                <div class="code"> 
                  <pre style="background-color: #bfbfbf;color:#000"> <span style="color:#00f;font-weight:700">var</span> x = 10; 
     <span style="color:#3c4c72;font-weight:700">alert</span>(<span style="color:#0000cd">x</span>);</pre> 
                </div><br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q7" value="0">1)<br> 
                <input type="radio" name="q7" value="0">2)<br> 
                <input type="radio" name="q7" value="1">3)<br> 
                <input type="radio" name="q7" value="0">4)<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q8" value="0">1)<br> 
                <input type="radio" name="q8" value="1">2)<br> 
                <input type="radio" name="q8" value="0">3)<br> 
                <input type="radio" name="q8" value="0">4)<br> 
              </div> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q9" value="0">1)<br> 
                <input type="radio" name="q9" value="1">2)<br> 
                <input type="radio" name="q9" value="0">3)<br> 
                <input type="radio" name="q9" value="0">4)<br> 
              </div> 
              <br> 
              <br> 
              <div class="group"> 
                <h3>Чтобы добавить код JS надо написать</h3> 
                <input type="radio" name="q10" value="0">1)<br> 
                <input type="radio" name="q10" value="0">2)<br> 
                <input type="radio" name="q10" value="0">3)<br> 
                <input type="radio" name="q10" value="1">4)<br> 
              </div> 
 
              <br> 
              <input type="submit" value="ОТПРАВИТЬ" name="submit"> 
              <br> 
              <br> 
            </form> 
          </font> 
        </div> 
  </div> 
  <div class="result"> 
    <span>Тест пройден на <p>0%</p></span> 
  </div> 
  <div class="result1"> 
    <span>Вы не прошли тест!</span> 
  </div> 
  </div>

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Спарсить значение html в массив / объект

На странице есть элемент <span class="companies-rating__spec-name">, я в цикле хочу получить текст внутри этих элементовНаписал следующий код:

195

javascript

Рисовать символы рекурсией

Хочу добавить еще один параметр, скажем "m", чтоб при drStRec("*", 5, 10) получилось 5 строк с 10 звездамиЕсли можно, с объяснением, как это сделали, чтоб...

199

javascript

Удаление изображения из массива формы

Есть код, который выводит изображения, которые были добавлены в <input> и там есть кнопка удаления изображения, но у меня никак не получается...

195

javascript

Гиперссылки как у iCloud Pages

Добрый день, как сделать гиперссылки как у iCloud Pages когда пишешь сайт и он сразу становится ссылкой как и в Google DocsИмеется div contenteditable="true"

132