• Страница 1 из 1
  • 1
Форум » I. JavaScript » Функции » Многомерные массивы - разбираем на примере (Делаем викторину с вопросами и ответами)
Многомерные массивы - разбираем на примере
1 Как мы уже знаем, в качестве элементов массива могут выступать и массивы тоже. Получается вложенный, или многомерный массив:

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

['Сколько лап у собаки?', '4'],
['Сколько рогов у коровы?', '2'],
['Сколько хвостов у тигра?', '1']

];


Данный код иллюстрирует массив вопросыВикторины, элементами которого являются три разных отдельных массива, каждый из которых состоит из двух элементов (в нашем случае из вопроса и ответа).
Имена этим массивам не присваиваются, потому что они вложены в основной массив.

В этой теме мы создадим программу викторины с вопросами и ответами. Общие задачи для создания программы(что должно быть в итоге реализовано):

1. программа должна уметь задавать вопросы пользователю

2. программа должна уметь сообщить пользователю, правильно ли тот ответил на вопрос викторины или нет.

3. программа должна выводить результаты прохождения викторины (число правильных ответов пользователя)

Вот такие входные установки. Здесь нам как раз может пригодится многомерный массив для хранения вопросов и ответов викторины.

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

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


Теперь наступил черёд сохранить в переменной наш список вопросов и ответов(там же, в шапке страницы). Используем для этого многомерный массив:

Код
<script>
var правильныхОтветов = 0;
var вопросыВикторины = [
['Сколько лап у собаки?', '4'],
['Сколько рогов у коровы?', '2'],
['Сколько хвостов у тигра?', '1']
];
</script>


Теперь нужно реализовать, каким образом будут задаваться вопросы. Как мы помним, отличным способом последовательно пройтись по элементам массива(а ведь нам именно это и нужно: один за другим задавать вопросы) является использование цикла.
Используем структуру цикла for:

Код

<script>
var правильныхОтветов = 0;
var вопросыВикторины = [
['Сколько лап у собаки?', '4'],
['Сколько рогов у коровы?', '2'],
['Сколько хвостов у тигра?', '1']
];
for(var i = 0; i < вопросыВикторины.length; i++) {

}
</script>


Теперь подумаем, что же должно происходить при каждой итерации цикла? Так как викторина - это последовательно задаваемые вопросы, то при каждой итерации цикла должен задаваться вопрос, а значит, нам нужно реализовать этот момент, с задаванием вопроса.
Используем для этого старый-добрый prompt(). А так как у нас будет часто повторяющийся код, самое время вспомнить про функции, создадим функцию, задающую вопросы, и при каждой итерации её будем вызывать:

Код

<script>
var правильныхОтветов = 0;
var вопросыВикторины = [
['Сколько лап у собаки?', '4'],
['Сколько рогов у коровы?', '2'],
['Сколько хвостов у тигра?', '1']
];
function задатьВопрос(параметр) {
   var ответ = prompt(параметр[0], ' ');
}
for(var i = 0; i < вопросыВикторины.length; i++) {

}
</script>


Так как prompt() возвращает значение, введённое пользователем в окне, мы сохраняем его в переменную ответ.

Вызов функции будем осуществлять с передачей в виде аргумента массива вопросыВикторины:

Код

<script>
var правильныхОтветов = 0;
var вопросыВикторины = [
['Сколько лап у собаки?', '4'],
['Сколько рогов у коровы?', '2'],
['Сколько хвостов у тигра?', '1']
];
function задатьВопрос(параметр) {
var ответ = prompt(параметр[0], ' ');
}
for(var i = 0; i < вопросыВикторины.length; i++) {
  задатьВопрос(вопросыВикторины[i]);
}
</script>


А теперь немного остановимся и разберём вот эту строку функции:

Код
var ответ = prompt(параметр[0], ' ');


что она делает? вызывает всплывающее окно, в котором задаётся вопрос пользователю и предлагается в пустом поле ввести ответ.
Каким образом выводится вопрос?

За это отвечает вот этот кусочек в коде:

Код
параметр[0]


в данном случае параметр - это переменная, параметр функции задатьВопрос, и когда мы вызываем функцию:

Код
задатьВопрос(вопросыВикторины[i]);


то вместо этого кода:

Код
параметр[0]


по сути, получаем такой:

Код
вопросыВикторины[i][0]


вместо i у нас при каждой итерации будут подставляться цифры 0, 1, 2 и так далее, являющиеся индексами элементов массива вопросыВикторины, например:

Код
вопросыВикторины[0][0]


и что будет означать такая запись? А вот что: выбрать элемент массива вопросыВикторины с индексом 0, а затем, так как он сам является также массивом, выбрать элемент у него с индексом 0.
А так как элемент массива с индексом 0, это всегда его первый элемент, то получается, что мы выбираем первый элемент массива вопросыВикторины:

Код
['Сколько лап у собаки?', '4']


он является вложенным массивом, а затем выбираем его первый элемент, а это вопрос викторины:

Цитата
'Сколько лап у собаки?'


а это как раз то что нам и было нужно! Теперь нам только остаётся прописать условие, в котором будет сравниваться ответ пользователя с правильным ответом на вопрос викторины:

Код

<script>
var правильныхОтветов = 0;
var вопросыВикторины = [
['Сколько лап у собаки?', '4'],
['Сколько рогов у коровы?', '2'],
['Сколько хвостов у тигра?', '1']
];
function задатьВопрос(параметр) {
var ответ = prompt(параметр[0], ' ');
if(ответ == параметр[1]) {
   alert('Это верный ответ!');
   правильныхОтветов++;
} else {
   alert('Это не правильный ответ! Правильный ответ ' + параметр[1]);
}
}
for(var i = 0; i < вопросыВикторины.length; i++) {
  задатьВопрос(вопросыВикторины[i]);
}
</script>


разбираемся с тем, что мы тут понаписали, первым делом интересно вот это условие:

Код
if(ответ == параметр[1])


опять же, при вызове функции оно превращается в такое:

Код
if(ответ == вопросыВикторины[i][1])


где вместо i будут подставляться при каждой итерации цифры 0, 1, 2 и так далее, например:

Код
if(ответ == вопросыВикторины[0][1])


и получается, что мы берём первый элемент массива вопросыВикторины(вложенный массив с индексом 0), а потом берём второй элемент у этого вложенного массива(элемент с индексом 1), а в нём содержится правильный ответ на вопрос викторины, и сравниваем с ответом пользователя.

Если значение ответа пользователя совпадает с правильным ответом на вопрос, выскакивает окно с текстом

Цитата
Это верный ответ!


а значение переменной правильныхОтветов увеличивается на единицу:

Код
правильныхОтветов++;


если же ответ участника не совпадает с правильным ответом, выскакивает окно с текстом:

Цитата
Это не правильный ответ! Правильный ответ такой-то


Теперь дело за малым, нужно подвести итоги и вывести результаты прохождения викторины на страницу(сколько правильных ответов было дано участником викторины).
Этот код мы разместим в тело страницы:

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


на странице это будет выглядеть так:

Цитата
Вы ответили правильно на 2 из 3-х вопросов викторины


Теперь вы можете протестировать викторину!

Изменить / Удалить

2 А теперь доработаем немного нашу программу. Нужно предусмотреть такой вариант, что участник викторины захочет ввести ответ не цифрами, а буквами.
Например, на вопрос: "Сколько лап у собаки?" участник вводит ответ не "4", а "четыре". Как среагирует программа? А вот как:

Цитата
Это не правильный ответ! Правильный ответ 4


Такие дела...Ответ то верный. И как быть? Воспользуемся нашим решением, описанным ранее здесь. Перепишем программу таким образом:

Код
<script>
var правильныхОтветов = 0;
var вопросыВикторины = [
['Сколько лап у собаки?', '4'],
['Сколько рогов у коровы?', '2'],
['Сколько хвостов у тигра?', '1']
];
function задатьВопрос(параметр) {
  do {
    var ответ = prompt(параметр[0], ' ');
    ответ = parseInt(ответ, 10);
  } while (isNaN(ответ));
  
if(ответ == параметр[1]) {
   alert('Это верный ответ!');
   правильныхОтветов++;
} else {
   alert('Это не правильный ответ! Правильный ответ ' + параметр[1]);
}
}
for(var i = 0; i < вопросыВикторины.length; i++) {
  задатьВопрос(вопросыВикторины[i]);
}
</script>


Вот теперь наша викторина полностью закончена. Тестируем!

Изменить / Удалить

Форум » I. JavaScript » Функции » Многомерные массивы - разбираем на примере (Делаем викторину с вопросами и ответами)
  • Страница 1 из 1
  • 1
Поиск: