Разработка электронного учебного пособия по материаловедению

    Специализированное  программное обеспечение  применялось для создания страниц с большим количеством текста. При этом использовались программы Microsoft FrontPage 2002 и Microsoft Word 2002, входящие в пакет Office XP.

    В основном использовался  (и планируется использовать) редактор FrontPage, так как он является специализированным средством для создания HTML-страниц и предоставляет для этого широкие возможности. Однако все возможности программы при создании страниц не использовались, так как страницы, создаваемые в данном редакторе, оптимизированы для просмотра в браузере Microsoft Internet Explorer, а пособие предполагается просматривать в браузере K-Meleon (см. пункт 3.1.5), и существует вероятность некорректного отображения в данном браузере созданной во FrontPage страницы. Это связано с тем, что корпорацией Microsoft разработана собственная спецификация HTML, используемая в разработанном ей браузере, несколько отличающаяся от стандартной. Поэтому редактор FrontPage был использован только для наполнения созданных в «Блокноте» шаблонов текстом и его форматирования. Использование данной программы существенно сократило расходы времени, связанные с трудоемким однообразным вводом текстового материала.

    Microsoft Word использовался при редактирования материала в том случае, если применение редактора FrontPage было невозможно в связи с отсутствием данной программы на компьютере, предоставленном техникумом. Word позволяет работать с HTML-документом как с обычным документом формата .doc. Это сильно ограничивает возможности редактирования, но возможность корректировки текстового материала достигается вполне. Однако существует несколько причин, по которым использование Word для дальнейшего редактирования материала преподавателем нежелательно:

1. после сохранения отредактированной в Word страницы такие ее активные компоненты, как меняющиеся при наведении указателя изображения (используемые практически в каждом кадре пособия в качестве элементов навигации), становятся обыкновенными статичными картинками;
2. размер файла значительно увеличивается за счет дополнительного HTML-кода, который дописывает Word в редактируемую страницу. Большая часть этого кода при просмотре в браузере не отображается, однако место он занимает.

    Исходя  из вышеописанного, следует применять  Microsoft Word при редактировании только в том случае, если нет возможности использовать другой редактор, в частности, FrontPage. 

    3.1.3 Использованные активные  компоненты и язык JavaScript

    Под активными компонентами HTML-страницы в данном случае подразумеваются содержащиеся в ней динамически изменяемые объекты, такие, как Flash-анимация или элементы формы. Интеграция активных компонентов в пособие производилась ручным набором их кода в текстовом редакторе.

    Были  использованы следующие  виды активного содержимого:

1. Раскрывающиеся списки. Они применены на страницах, содержащих структуру разделов. Раскрытый список предоставляет перечень ссылок на уроки, вопросы и лабораторные работы (помеченные как уроки), доступные в указанной теме.

Пример HTML-кода:

     <select onchange="location.href=this.options[selectedIndex].value">

      <option>Выберите урок</option>

      <option value="./tema_11/urok_1(1).htm">Урок 1</option>

      <option value="./tema_11/voprosi.htm">Вопросы по теме</option>

      </select>

где «Выберите урок» − надпись в поле списка по умолчанию, «Урок 1» и «Вопросы по теме» − доступные элементы списка.

2. Изображения, меняющиеся при наведении указателя. Принцип действия этого средства состоит в том, что при наведении указателя мыши на такое изображение оно заменяется другим, а при снятии указателя исходное изображение возвращается.

Пример  HTML-кода:

<a href="./vvedenie.htm" target="basic" onmouseover="document.vveden.src='./files/img/buttons/vveden1.png';" onmouseout="document.vveden.src='./files/img/buttons/vveden0.png';">

<img src="./files/img/buttons/vveden0.png" name="vveden" border="0"></a>

где «vveden0.png», «vveden1.png» − файлы картинок, отображающихся соответственно без наведения и при наведении указателя.

3. Flash-анимация. Для вставки данного компонента была использована следующая конструкция:

<embed src="../../files/img/rastyagenie.swf" quality="high" width="269" height="213" align="right">

где «rastyagenie.swf» − имя файла анимации.

4. Эскизы изображений. При щелчке на таком эскизе в новом окне открывается его увеличенный вариант, причем это может быть как полноценный вариант картинки, отображаемой в эскизе в искусственно уменьшенном виде, так и изображение, содержащееся в другом файле.

Пример HTML-кода:

<a href="Javascript:view(585,578,'../../files/img/1_6_a.jpg')"><img border="0" src="../../files/img/1_6_a_small.png" width="262" height="168">

где «1_6_a.jpg» − имя файла изображения, открывающегося в новом окне, «1_6_a_small.jpg» − имя файла, содержащего отображаемый на странице эскиз.

Как видно, в данном случае эскиз и полноценное  изображение хранятся в различных файлах.

5. Элементы формы. Данный вид активных компонентов использован при разработке тестов. Взаимодействие данных элементов (кнопок, переключателей, текстовых полей) с пользователем основано на функциях JavaScript.

    JavaScript − это скриптовый язык управления сценариями просмотра гипертекстовых страниц. JavaScript позволяет изменять значения атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем без перезагрузки страницы.

    Основной  принцип действия JavaScript состоит в том, что при просмотре страницы при возникновении какого-либо события, инициированного пользователем или произошедшего независимо от его действий, выполняется функция обработки этого события, содержащая последовательность команд языка JavaScript. К таким событиям относится нажатие кнопки, переход по ссылке, наведение указателя на определенный объект и т.д.

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

    3.1.4 Разработка тестов

    Первая  страница теста содержит один элемент формы: кнопку «Начать». При нажатии на нее выполняется функция go(), прописанная в начале кода страницы. Эта функция открывает в главном окне первый вопрос теста.

    Пример кода функции:

    <script>

      function go() {

          parent.basic.location.href='q1.htm';

     }

    </script>

где «parent.basic.location.href=’q1.htm’» − присвоение содержанию текущего окна значения первой страницы теста, содержащейся в файле «q1.htm».

    Пример  кода вызова функции:

    <form name="begin">

      <input type="button" value="Начать" onClick="go();">

    </form>

где «onClick» − событие, происходящее при нажатии на кнопку «Начать», при котором выполняется функция «go()».

    Различные виды вопросов тестов организованы с использованием различных элементов формы. К ним относятся: текстовые поля для ввода, переключатели и радиокнопки. Принцип взаимодействия вопросов с пользователем основан на вводе данных последним и их проверке, то есть сравнении введенной информации с эталонной, которая хранится в HTML-коде страницы. Для каждого случая есть свои особенности организации проверки.

    С применением текстовых полей разработаны вопросы открытой формы, на соответствие и на упорядочение.

    Вопросы открытой формы содержат только одно текстовое  поле для ввода. При нажатии на кнопку «Проверка» последовательно выполняется несколько функций:

1. Функция проверки заполнения текстового поля. Если поле не заполнено, выдается сообщение «Пожалуйста, введите ваш вариант ответа!».
2. Функция проверки правильности введенной информации. Она вызывается в случае, если поле содержит хотя бы один символ. Пользовательская информация сравнивается с эталонной, то есть прописанной изначально в коде функции. Следствием этого являются жесткие ограничения на форму написания ответа тестируемым, так как ответы сравниваются посимвольно, при этом играет роль и регистр ответов, и количество пробелов (пробел также является символом). Если введенный ответ соответствует эталонному полностью или с некоторыми учтенными погрешностями (ввод с заглавной буквы, вместо строчных букв − прописные, буква «Е» вместо «Ё»), на экран выдается сообщение о правильности ответа, иначе выдается уведомление об ошибке и верный вариант.
3. Функция проверки грамотного написания ответа. В ряде случаев организован контроль за грамотностью. Если написание ответа не соответствует эталонному, выполняется данная функция, вторично проверяющая введенный ответ. В случае неграмотного написания ответа на экран выдается уведомление об этом и указание на орфографическую ошибку, в противном случае ответ засчитывается как неверный.
4. Функция перехода на следующий вопрос. Она выполняется в последнюю очередь независимо от всех рассмотренных выше функций. Однако ей тоже предусмотрена проверка на заполнение поля ввода, что помогает избежать ситуации, когда поле не заполнено, а переход на следующий вопрос осуществляется (так как данная функция выполняется в обязательном порядке при нажатии на кнопку «Проверка»). Если поле заполнено, переход происходит, в противном случае не происходит ничего.

    Вопросами на соответствие и  упорядочение предусмотрено  несколько полей для ввода. Данные вопросы основаны на проверке соответствия каждому полю введенной в него цифры (либо порядковый номер элемента в упорядоченной последовательности − вопрос на упорядочение, либо номер соответствующего элемента другой группы − вопрос на соответствие). При проверке выполняются следующие функции:

1. Функция проверки заполнения текстового поля. Ее действие аналогично действию подобной функции вопроса открытого вида, то есть проверяется заполнение всех полей. Если поля заполнены, выполняется следующая функция.
2. Функция расчета количества совпадений. Ей проверяется соответствие каждого поля и введенного в него символа (это должна быть цифра от 1 до 9). Если полю соответствует введенная в него информация, специальной переменной, указанной для этого поля, присваивается значение «1», в противном случае − «0». После проверки всех полей эти переменные складываются. Полученный результат, соответствующий количеству совпадений, выдается на экран.
3. Функция перехода на следующий вопрос. Она полностью аналогична подобной функции вопросов открытой формы.

    Вопросы закрытой формы с одним эталонным ответом разработаны с использованием радиокнопок. Радиокнопки представляют собой список переключателей, из которых отмечен может быть только один, поэтому данный элемент формы представляет собой подходящее средство для создания вопросов с единственным верным вариантом ответа. При проверке выполняются следующие функции:

1. Функция проверки отметки одного из вариантов ответа. Аналогична функции проверки заполнения текстового поля.
2. Функция проверки отметки верного варианта ответа. Если отмечен правильный вариант, выдается сообщение «Это ПРАВИЛЬНЫЙ ответ», иначе выдается уведомление об ошибке и верный вариант.
3. Функция перехода на следующий вопрос.

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