Lt;P>Хочешь попробовать свои силы? Тогда введи пароль

и нажми кнопку & laquo; Начать& raquo;

< CENTER>

< INPUT type=password name=psw>

< INPUT type=button onclick=" valid_psw()"

value=" Начать " >

< /CENTER>

< FORM name=f1>

...

c скрипты для обработки теста поместим в файл test.js, поэтому сообщи об этом браузеру:

< HEAD>

< TITLE> Птичья логика< /TITLE>

< LINK rel=stylesheet type=text/css href=my_style.css>

< SCRIPT src=" test.js" > < /SCRIPT>

< /HEAD>

...

c так как вопросы теста будут появляться только после ввода пароля, до поры до времени сделаем их невидимыми. Для этого в каждый тег < FORM> добавь атрибут «невидимости»:

< FORM name=f1 style=" visibility: hidden; " >

c создай файл test.js и запиши в него следующий текст:

//в переменной test_ok хранится режим работы теста

//если test_ok=true, идёт тестирование

//если test_ok=false, тестирование закончено

var test_ok;

//otv – массив номеров верных ответов

var otv=new Array(0, 3, 3, 4, 2, 3);

//kol – количество вопросов

var kol=5;

//password – пароль

var password=" please";

//эта функция проверяет правильность введённого пароля

function valid_psw()

//если пароль введён верно, то есть содержимое поля psw

//совпадает со значением переменной password

{ if (psw.value==password)

//то выполняется этот блок

{ var cmd;

//для всех i от 1 до kol

for (var i=1; i< =kol; i++)

//«создаётся» объект с именем f1, f2, …

{ cmd=eval(" f" +i);

//этот объект делается видимым

cmd.style.visibility=" visible";

//скрываются все поля с результатами (f1.vo, f2.vo, …)

cmd.vo.style.visibility=" hidden";

}

//задаётся режим тестирования

test_ok=true;

//очищается поле ввода пароля

psw.value=" ";

}

//если пароль введён неверно

else

//то выводится информационное окно с сообщением и подсказкой

{ alert (' Неверный пароль! \n Введи ' +password);

//и содержимое поля psw выделяется

psw.select();

}

}

Что стоит пояснить?

Во-первых, атрибут type=password тега < INPUT> задаёт «секретное» текстовое поле, в котором при вводе текста отображаются звёздочки. Именно такие поля применяются при вводе пароля для защиты от подсматривания. Запомни, что мы дали этому объекту имя psw.

Параметр visibility атрибута style управляет видимостью объекта. Он может принимать значения hidden (скрытый) или visible (видимый).

В тексте файла test.js появились необычные строки. Они начинаются с двух слэшей //. Это комментарий языка Java Script. В комментарии пишутся пояснения к текстам скриптов, и, хоть без них функции всё равно будут работать, не стоит ими пренебрегать. В достаточно больших программах комментарии – это единственное, что помогает ориентироваться в текстах скриптов. Прочитай ещё раз внимательно комментарии и попробуй понять логику работы функции.

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

Оператор цикла

for (нач_знач i=1, услов_заверш i< =kol, прав_измен i++) { команды }

работает так: сначала переменной i присваивается начальное_значение 1 и выполняются все команды, расположенные в фигурных скобках. Затем i изменяется по правилу_изменения i++, то есть увеличивается на 1, и, если не достигнуто условие_завершения i< =kol, снова выполняются команды.

Мы создали пять форм с похожими именами f1, f2, … f5, что даёт нам возможность работать с этими формами в цикле. Единственная трудность – как записать имя очередной формы. Конструкция " f" +i даёт нам строку " f1" или подобную. А вот оператор eval превращает строку в имя объекта. Без оператора eval нам пришлось бы вместо трёх строк, записанных в цикле, перечислять все формы и изменять их видимость:

f1.style.visibility=" visible";

f1.vo.style.visibility=" hidden";

f2.style.visibility=" visible";

f2.vo.style.visibility=" hidden";

f3.style.visibility=" visible";

f3.vo.style.visibility=" hidden";

и так далее.

3. Теперь проверь работу странички:

c введи неверный пароль и убедись, что окно с подсказкой исправно появляется:

c попробуй выбрать верный ответ и в момент выбора обрати внимание на сообщение в статусной строке браузера:

Не пугайся – это не твоя ошибка. В момент щелчка по переключателю браузер должен выполнить функцию ot(), которую не может найти, вот он и сообщает об ошибке.

4. Создаём функцию ot(nv, no), имеющую два аргумента nv (номер вопроса) и no (номер выбранного ответа):

c в файл test.js добавь строки:

function ot(nv, no)

//если режим тестирования

{ if (test_ok)

{ var cmd;

//создаётся объект f1, f2 …

cmd=eval(" f" +nv);

//если номер выбранного ответа no совпадает

//со значением элемента массива otv под номером nv

if (no==otv[nv])

//то в поле vo помещается слово «верно»

{ cmd.vo.value=" верно" }

//иначе - слово «неверно»

else

{ cmd.vo.value=" неверно" }

}

}

c с помощью комментариев разберись в работе этой функции;

c проверь её работу в браузере. К сожалению, ты не видишь, как оцениваются твои ответы – они выводятся в скрытых полях. Чтобы сейчас, на стадии разработки, увидеть «внутреннюю» работу браузера, закомментарь в скрипте строчку, делающую невидимым поле vo:

// cmd.vo.style.visibility=" hidden";

5. Работает? А теперь займёмся выводом и сообщением оценки. Прежде всего поместим на страничку кнопку Посмотреть результат и контейнеры для вывода оценки:

c добавь в конец файла klava.htm выделенные строки:

...

< /FIELDSET>

< /FORM>

< CENTER>

< INPUT type=button id=res

value=" Посмотреть результат "

onclick=" ok()" style=" visibility: hidden; " >

< DIV id=res1> < /DIV>

< DIV id=res2 style=" color: red; font-size: 800%; " > < /DIV>

< /CENTER>

< /BODY>

< /HTML>

Кнопка Посмотреть результат запускает функцию ok(). Два контейнера < DIV> предназначены для вывода сообщений: в первый выведем количество и процент верных ответов, во второй – саму оценку.

c при загрузке страницы кнопка Посмотреть результат скрыта (и действительно, что смотреть-то!), поэтому её нужно сделать видимой в функции valid_psw(). Добавь в эту функцию строчку:

...

for (var i=1; i< =kol; i++)

{ cmd=eval(" f" +i);

cmd.style.visibility=" visible";

// cmd.vo.style.visibility=" hidden";

}