Здравствуйте, давайте создадим тест и опрос на html, который будет состоять из 3 вопросов и 6 ответов в каждом из них и обработаем их результаты с помощью javascript.
Для того чтобы узнать какой товар (услуга) пользуется наибольшим спросом на данный момент времени применяют различные опросы и тесты.
Как только вы сможете проанализировать результаты тестов и опросов – начинайте рекламировать ваш товар (услугу) – лучше всего для этого подойдет Яндекс.Директ – идеальная площадка для размещения рекламы на просторах Рунета. Ежедневно эту сеть посещает свыше 5 миллионов пользователей в России и других странах СНГ, поэтому частотность показов релевантных объявлений достаточно высокая. А для того чтобы ваша реклама была максимальна эффективна, то лучше всего обратиться по настройке Яндекс.Директа к профессионалам от Direct-UP – dircet-up.ru. Удачного вам бизнеса!
1. Создаем тест на JavaScript:
Скачать готовые html файлы для теста можно по следующей ссылке – скачать!
Тест будет состоять из 3 вопросов, вы можете установить правильный ответ в каждом из вопросов и в зависимости от набранных баллов перенаправить посетителя на разные страницы.
Рассмотрим код первого вопроса:
<div class="quizsection"> <h2>Вопрос #1</h2> <div class="answer"> <input name="q1" value="value2" id="value1" type="radio" checked="checked" /> Value 1 </div> <div class="answer"> <input name="q1" value="value1" id="value2" type="radio" /> Value 2 </div> <div class="answer"> <input name="q1" value="value1" id="value3" type="radio" /> Value 3 </div> <div class="answer"> <input name="q1" value="value1" id="value4" type="radio" /> Value 4 </div> <div class="answer"> <input name="q1" value="value1" id="value5" type="radio" /> Value 5 </div> <div class="answer"> <input name="q1" value="value1" id="value6" type="radio" /> Value 6 </div> </div>
Здесь правильный ответ помечен значением value2, все остальные имеют значение value1.
Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти сколько же набрано правильных ответов в тесте:
if (value2 == 0) {
// Нет правильных ответов
result = "ocenka2";
}
В принципе, мы проверяем только значение value2 и в зависимости от его количества выставляем оценку.
После того, как мы узнали оценку, то можем перенаправить посетителя на разные странички, в зависимости от результата:
window.location = result + '.html';
Например, перенаправить посетителя на страничку /ocenka2.html.
Вот готовый код файл index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Multiple Choice Quiz with JavaScript</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
*, *:before, *:after {margin: 0; padding: 0; box-sizing: border-box;}
body {background: #2F2556; color: #B9B5C7; font: 14px 'Open Sans', sans-serif;}
.top { padding-right: 20px; background: #261F41; text-align: right; }
a { color: rgba(255,255,255,0.6); text-transform: uppercase; text-decoration: none; line-height: 42px; }
h1 {padding: 50px 0; font-weight: 400; text-align: center;}
.main {margin: 0 auto; max-width: 500px;}
.main .quizsection {margin-bottom: 20px;}
</style>
</head>
<body>
<h1>JavaScript Quiz</h1>
<section class="main">
<form name="quiz" action="javascript:check();" class="quizform">
<div class="quizsection">
<h2>Вопрос #1</h2>
<div class="answer">
<input name="q1" value="value2" id="value1" type="radio" checked="checked" /> Value 1
</div>
<div class="answer">
<input name="q1" value="value1" id="value2" type="radio" /> Value 2
</div>
<div class="answer">
<input name="q1" value="value1" id="value3" type="radio" /> Value 3
</div>
<div class="answer">
<input name="q1" value="value1" id="value4" type="radio" /> Value 4
</div>
<div class="answer">
<input name="q1" value="value1" id="value5" type="radio" /> Value 5
</div>
<div class="answer">
<input name="q1" value="value1" id="value6" type="radio" /> Value 6
</div>
</div>
<div class="quizsection">
<h2>Вопрос #2</h2>
<div class="answer">
<input name="q2" value="value1" id="value1" type="radio" checked="checked" /> Value 1
</div>
<div class="answer">
<input name="q2" value="value2" id="value2" type="radio" /> Value 2
</div>
<div class="answer">
<input name="q2" value="value1" id="value3" type="radio" /> Value 3
</div>
<div class="answer">
<input name="q2" value="value1" id="value4" type="radio" /> Value 4
</div>
<div class="answer">
<input name="q2" value="value1" id="value5" type="radio" /> Value 5
</div>
<div class="answer">
<input name="q2" value="value1" id="value6" type="radio" /> Value 6
</div>
</div>
<div class="quizsection">
<h2>Вопрос #3</h2>
<div class="answer">
<input name="q3" value="value1" id="value1" type="radio" checked="checked" /> Value 1
</div>
<div class="answer">
<input name="q3" value="value1" id="value2" type="radio" /> Value 2
</div>
<div class="answer">
<input name="q3" value="value2" id="value3" type="radio" /> Value 3
</div>
<div class="answer">
<input name="q3" value="value1" id="value4" type="radio" /> Value 4
</div>
<div class="answer">
<input name="q3" value="value1" id="value5" type="radio" /> Value 5
</div>
<div class="answer">
<input name="q3" value="value1" id="value6" type="radio" /> Value 6
</div>
</div>
<input value="Submit" type="submit" /> <input value="Reset" type="reset" />
</form>
</section>
<script type="text/javascript">// <![CDATA[
var result;
function check()
{
var question;
var value1;
var value2;
question = 1;
value1 = 0;
value2 = 0;
result = "";
var choice;
for (question = 1; question <= 3; question++) {
var q = document.forms['quiz'].elements['q'+question];
for (var i = 0; i < q.length; i++) {
if (q[i].checked) {
choice = q[i].value;
}
}
if (choice == "value1") {
value1++;
}
if (choice == "value2") {
value2++;
}
}
if (value2 == 0) {
// Нет правильных ответов
result = "ocenka2";
}
else if (value2 == 1) {
// Один правильный ответ
result = "ocenka3";
}
else if (value2 == 2) {
// Два правильных ответа
result = "ocenka4";
}
else if (value2 == 3) {
// Три правильных ответа
result = "ocenka5";
}
else {
result = "404";
}
window.location = result + '.html';
}
// ]]></script>
</body>
</html>
2. Создаем простой опрос на javaScript:
Скачать готовые html файлы для теста можно по следующей ссылке – скачать!
Рассмотрим код первого вопроса:
<div class="quizsection"> <h2>Вопрос #1</h2> <div class="answer"> <input name="q1" value="value1" id="value1" type="radio" checked="checked" /> Value 1 </div> <div class="answer"> <input name="q1" value="value2" id="value2" type="radio" /> Value 2 </div> <div class="answer"> <input name="q1" value="value3" id="value3" type="radio" /> Value 3 </div> <div class="answer"> <input name="q1" value="value4" id="value4" type="radio" /> Value 4 </div> <div class="answer"> <input name="q1" value="value5" id="value5" type="radio" /> Value 5 </div> <div class="answer"> <input name="q1" value="value6" id="value6" type="radio" /> Value 6 </div> </div>
Затем мы повторяем этот шаблон для каждого вопроса.
Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти ответ с наибольшим значением:
if (value1 >= value2 && value1 >= value3 && value1 >= value4 && value1 >= value5 && value1 >= value6 && value1 > 0) {
// value1 is the highest
result = "value1";
}
В принципе, мы проверяем, что сумма всех ответов со значением value1 выше суммы других возможных вариантов, а также что она выше 0.
Мы выполняем одинаковую проверку для каждого значения.
После того, как мы знаем, самое высокое значение, мы можем использовать этот результат, например, чтобы перенаправить посетителя на разные url:
window.location = result + '.html';
Так если в большинстве вопросов был выбран ответ под цифрой 1, то result = value1 и соответственно посетитель попадет на страничку value1.html.
Счастливое кодирование!