Пример №1. Викторина

В коде данного HTML примера предусмотрено место для текста вопросов (id="question"), для переключателя с вариантом ответа (id="answers") и для вывода результата (id="result"), кроме этого предусмотрена кнопка для управления викториной (id="next"). В HTML коде реакция на щелчок по кнопочке не задана, но задан текст на кнопке «Начать викторину».

В коде jQuery вначале описаны данные: score – кол-во правильных ответов; quiz – массив вопросов, причем каждый вопрос включает текст вопроса, номер верного ответа и массив вариантов ответа.

Здесь же определяется кол-во вопросов в массиве.

Далее приводятся используемые в программе функции:

1) askQuestions () – эта функция выбирает очередной вопрос, выводит текст вопроса в HTML документ, с помощью функции buildAnswers () формирует переключатель с вариантами ответов и выводит соответствующую строку документа.
Кроме этого каждому элементу переключателя задается реакция на Click. А именно при щелчке на любом из элементов переключателя программа сравнивает его значение с правильным ответом, и при правильном ответе увеличивает значение переменной Score

2) buildAnswers () – Эта функция формирует фрагмент HTML документа, состоящий из тегов input type="radio" переключателя на столько позиций, сколько вариантов ответа. (Упрощенное определение: эта функция формирует переключатель на столько позиций, сколько имеется вариантов ответа).

3) giveResults () — В соответствующее место HTML документа выводит кол-во правильных ответов и общее кол-во вопросов.

Основной код управляет викториной с помощью кнопки id="next". Основное назначение этого кода – задать вопрос, если они еще есть, или выдать результат, если все вопросы заданы. Но кроме этого код меняет надпись на кнопки в зависимости от наличия или отсутствия вопросов.

Макет страницы

Разработка интерфейса (HTML и CSS)

Листинг HTML

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='quiz.js'></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="text2">
<p><em><strong>Викторина</strong></em></p>
</div>
<div id="all">
<div id="questionArea">
<p id="question"></p>
<p id="answers"></p>
<p id="result"></p>
<input type="button" value="Начать викторину" id="next">
</div>
</div>
</body>
</html>

Листинг CSS

#images2 {
position: absolute;
margin-top: 1px;
margin-left: 15px;
left: 430px;
}
#all {
font-size: 14px;
margin-left: 40px;
width: 500px;
}

Добавление интерактивности

Листинг jQuery

$(document).ready(function() {
var score = 0;
var quiz = [
['Сколько лун у планеты Земля?',1,[0,1,2,3]],
['Сколько лун у планеты Сатурн?',31,[0,14,31,160]],
['Сколько лун у планеты Венера?',0,[0,1,11,15]]
];

//получить общее кол-во вопросов
var totalQuestion=quiz.length;

//сгенерировать и отображать вопросы с несколькими вариантами ответов
function askQuestion() {
//выберите вопрос
var currentQ=quiz.pop();
// получить текст вопроса
$('#question').text(currentQ[0]);
/* вызов buildAnswers() функции для генерирования переключателей с разнообразным выбором */
var answers=buildAnswers(currentQ[2]);
// добавить выбор на страницу
$('#answers').html(answers);
// click() событие для оценки ответа пользователя
$('#answers input').click(function() {
if ($(this).val()==currentQ[1]) {
score++;
$('#result').prepend('Верно!');
} else {
$('#result').prepend('Неверно. Правильный ответ '+currentQ[1]);
}
// показать кнопку далее
$('#next').show();
}); // end click()
}

function buildAnswers(answers) {
var answerHTML='';
// цикл по каждому элементу в массиве ответов
for (i=0;i<answers.length;i++) {
//построить переключатель
answerHTML+=' <input name="quiz" type="radio" value="'; answerHTML+=answers[i] + '">' + answers[i];
}
//возвращаем завершенный HTML переключатель
return answerHTML;
}

function giveResults() {
var results='Вы ответили правильно на ' + score + ' из ' +
totalQuestion + ' вопросов.';
$('#questionArea').html(results);
}
$('#next').click(function() {
$(this).hide();
$('#result').text('');
if (quiz.length==totalQuestion) {
$(this).val('Следующий вопрос >>');
} else if (quiz.length==1) {
$(this).val('Показать результаты');
}
if (quiz.length>0) {
askQuestion();
} else {
giveResults();
}
});
}); // end ready

Контрольные вопросы

  • Какие данные используются в программе?
  • Как организуется цикл задавания вопросов?
  • Как формируется экран с текстом вопроса и вариантами ответов?
  • Как работает функция askQuestion ()?
  • Как работает функция buildAnswers ()?
  • Что происходит при выборе варианта ответа?
  • Каким образом заканчивается цикл задавания вопросов?
  • Как работает функция giveResults ()?
  • Для чего в программе используются функции: hide (), show (), text (), html (), next ()?
  • Для чего можно использовать эту программу?