• Страница 1 из 1
  • 1
Модератор форума: webik  
Форум » JavaScript и jQuery » JavaScript » Функции » Практикум: викторина с вопросами (Создаём викторину с вопросами и ответами)
Практикум: викторина с вопросами
webikДата: Ср, 27.03.2019, 22:43 | Сообщение # 1
Offline
В этой теме мы создадим викторину, в которой участнику будут задаваться вопросы, затем выводиться сообщение, правильный или неправильный ответ дал пользователь и в конце выведем результаты прохождения викторины (на сколько вопросов пользователь дал правильные ответы).

Работать будем с двумя парами тегов script. Первая пара тегов будет в шапке страницы, вторая - в теле страницы.

Откроем в шапке страницы первую пару тегов script и создадим переменную, в которой будет сохраняться количество правильных ответов пользователя на вопросы викторины.

Код
<script>
var правильныхОтветов = 0;
</script>


мы задали начальное значение для переменной равным нулю (это значение соответствует началу викторины).

Далее нам нужно сохранить набор вопросов викторины в виде массива, а потом с помощью функции проходить по всем элементам массива, чтобы последовательно задавать участнику вопросы один за другим.

Создаём пустой массив:

Код
<script>
var правильныхОтветов = 0;
var вопросыВикторины = [
];
</script>


Наш массив будет необычным, поскольку каждый его элемент будет также массивом, в котором одновременно будет храниться и вопрос и ответ на него.
Запишем первый массив, который одновременно будет являться первым элементом массива вопросыВикторины:

Код
var вопросыВикторины = [

['Сколько Лун у планеты Земля?', 1],

];


в данном случае мы не даём этому массиву имя, поскольку он является вложенным массивом. Это массив из двух элементов, первый из которых является вопросом викторины, а второй ответом.

Добавим еще два массива (еще два элемента массива вопросыВикторины)

Код
var вопросыВикторины = [

['Сколько Лун у планеты Земля?', 1],
['Сколько Лун у планеты Сатурн?', 31],
['Сколько Лун у планеты Венера?', 0]

];


Как мы узнали ранее, для работы с массивом отлично подходит цикл. Воспользуемся циклом:

Код

var правильныхОтветов = 0;
var вопросыВикторины = [

['Сколько Лун у планеты Земля?', 1],
['Сколько Лун у планеты Сатурн?', 31],
['Сколько Лун у планеты Венера?', 0]

];
for (var i=0; i<вопросыВикторины.length; i++) {

}


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

Код

var правильныхОтветов = 0;
var вопросыВикторины = [

['Сколько Лун у планеты Земля?', 1],
['Сколько Лун у планеты Сатурн?', 31],
['Сколько Лун у планеты Венера?', 0]

];
for (var i=0; i<вопросыВикторины.length; i++) {
задавайВопрос(вопросыВикторины[i]);
}


Это мы прописали вызов функции, саму функцию нам предстоит создать. Помещаем её перед циклом:

Код

var правильныхОтветов = 0;
var вопросыВикторины = [

['Сколько Лун у планеты Земля?', 1],
['Сколько Лун у планеты Сатурн?', 31],
['Сколько Лун у планеты Венера?', 0]

];
function задавайВопрос(вопрос) {

}
for (var i=0; i<вопросыВикторины.length; i++) {
задавайВопрос(вопросыВикторины[i]);
}


у данной функции один аргумент(переменная вопрос), осталось только прописать исполняемый функцией код:

Код

var правильныхОтветов = 0;
var вопросыВикторины = [

['Сколько Лун у планеты Земля?', 1],
['Сколько Лун у планеты Сатурн?', 31],
['Сколько Лун у планеты Венера?', 0]

];
function задавайВопрос(вопрос) {
var ответ = prompt(вопрос[0], '');
if (ответ == вопрос[1]) {
alert('Верно!');
правильныхОтветов ++;
} else {
alert('Неверно. правильный ответ ' + вопрос[1]);
}
}
for (var i=0; i<вопросыВикторины.length; i++) {
задавайВопрос(вопросыВикторины[i]);
}


В теле страницы напишите вторую пару тегов script и создадим переменную сообщение:

Код
<script>
var сообщение = 'Вы ответили правильно на ' + правильныхОтветов;
сообщение += ' из ' + вопросыВикторины.length;
сообщение += ' вопросов. ';
document.write)'<p>' + сообщение + '</p>');
</script>


Оцените работу викторины)
 
профиль цитата изменить удалить
Форум » JavaScript и jQuery » JavaScript » Функции » Практикум: викторина с вопросами (Создаём викторину с вопросами и ответами)
  • Страница 1 из 1
  • 1
Поиск: