Скачать 266,51 Kb.
|
«ИНТЕЛЛЕКТУАЛЬНОЕ БУДУЩЕЕ МОРДОВИИ» ВОЗМОЖНОСТИ ЯЗЫКОВ ВЕБ-ПРОГРАММИРОВАНИЯ HTML И JAVASCRIPT ДЛЯ СОЗДАНИЯ ОНЛАЙН-ТЕСТА Автор: Заитов Рушан 11 класс Научный руководитель: Багдалова Юлия Шамилевна Саранск 2013 Оглавление Информационная страница…………………….…………………………………………….…3 Аннотация……………………………………………..……………………………………..…..4 Введение…………………………………………………………...…………………..…………5 1 Язык HTML………………………………………………………………….…………………6 1.1 Элемент и теги……………………………………………………...…….………………….6 1.2 Атрибут………………………………………………………………..….…………………..6 1.3 Анализ существующих в Интернете онлайн-тестов …………………………..….………6
3 Создание сценария на JavaScript……………………………..……………………..……….12 3.1 Постановка задачи, разработка интерфейса и составление алгоритма…………..……..12 3.2 Код сценария, отладка и тестирование программы……………………...………..……..13 3.3 Модификация…………………………………………………………..……….……….….14 4 Конструирование онлайн-теста по шаблону…………….…………..………..…………….15 Заключение……………………………………….………………………………………….….16 Список использованных источников………………………………………………………….17 Приложение 1………………………………………………………………………………..….18 Информационная страница МОУ «КРИВОЗЕРЬЕВСКАЯ СРЕДНЯЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА» Директор школы: Янгляев Наиль Хафизович ^ Телефон: 8 (83441) 3-64-30 Автор: Заитов Рушан Камилевич Почтовый адрес: Лямбирский район, с. Кривозерье, ул. Садовая, 20 Телефон: 8 (83441) 3-64-26 Руководитель: Багдалова Юлия Шамилевна, МОУ «Кривозерьевская СОШ», учитель математики и информатики Аннотация Данная исследовательская работа посвящена исследованию возможностей языков веб-программирования HTML и JavaScript для создания веб-страницы, моделирующей работу онлайн-теста. В работе четко описаны все использованные учащимся инструменты языков HTML и JavaScript, поэтапно изложен весь процесс написания программного кода. В полученных тестах учтены и исправлены недостатки имеющихся в Интернете аналогов. В результате автором разработаны шаблоны 4 видов тестов, и на их основе созданы уже готовые к использованию варианты. Причем шаблоны эти может использовать практически любой учитель-предметник, для этого достаточно внести минимальные изменения в программный код и заготовить собственные задания. Работа выстроена правильно и грамотно. Данная работа актуальна, т.к. на сегодняшний день тесты широко применяются в образовательной системе как преподавателями – для контроля, так и самими обучающимися – для самоконтроля. Изучив же данную исследовательскую работу, преподаватели смогут самостоятельно конструировать онлайн-тесты – как контролирующие, так и обучающие. Введение Вы когда-нибудь задумывались над тем, как создаются страницы Интернета? При изучении курса «Web-дизайн», я узнал, что в основе всех этих технологий лежат языки веб-программирования – HTML (Hyper Text Markup Language – язык гипертекстовой разметки), JavaScript, PHP и некоторые другие. В процессе подготовки к сдаче ЕГЭ мне приходится часто пользоваться так называемыми онлайн-тестами, размещенными в Интернете. Но это не всегда удобно – не все онлайн-тесты работают корректно. Тогда я задумался над тем, чтобы самому написать код веб-страницы, моделирующей работу онлайн-теста. Для этого я исследовал возможности языков веб-программирования HTML и JavaScript для создания онлайн-теста. Тема актуальна, т.к. тесты прочно обосновались в сфере образования как форма проверки уровня знаний учащихся. Поэтому онлайн-тесты так необходимы учащимся для самоподготовки. А в настоящее время преподаватели не имеют возможности самостоятельно конструировать такие тесты для своих учеников. Цель исследования: создать тест в виде веб-страницы с помощью языков HTML и JavaScript, лишенный недостатков онлайн-тестов из Интернета. Задачи: изучить недостатки онлайн-тестов, размещенных в Интернете; обзор основных команд языков HTML и JavaScript; с помощью конструкций этих языков разработать структуру тестирующей веб-страницы; создать веб-страницу с возможностью онлайн-тестирования; разработать готовые онлайн-тесты на основе созданной веб-страницы. Объект исследования: язык гипертекстовой разметки – HTML и язык создания сценариев JavaScript. Предмет исследования – возможности языков веб-программирования для создания учебных тестов. Гипотеза исследования: владея основами языков программирования HTML и JavaScript, можно самостоятельно написать программный код веб-страницы, моделирующей работу онлайн-теста. 1 Язык HTML 1.1 Элемент и теги. Для создания веб-страниц часто используется язык гипертекстовой разметки HTML. Существуют общие правила построения HTML-страниц. Им обязательно нужно следовать – только в этом случае HTML-код будет верно распознаваться и отображаться браузером. Основой языка HTML является элемент, он несет в себе определенную информацию, может описывать документ в целом или способ форматирования текста. Элемент можно назвать основой построения сайта. Все, что отображается на веб-странице, записано в ее коде с помощью элементов. Название элемента помещается в угловые скобки: <название элемента>, полученное выражение называется тегом. Это открывающий тег. Иногда необходимо задать парный закрывающий тег, который пишется так: название элемента>. В основном парные теги используются при форматировании текста, они задают начало и конец блока форматирования. Иногда закрывающий тег вообще не требуется, а иногда его можно пропустить, однако для корректной обработки документа рекомендуется всегда использовать закрывающий тег. Кратко функции открывающего и закрывающего тегов можно описать так: открывающий тег включает форматирование, а закрывающий выключает. При этом основным отличием в записи тегов, кроме постановки символа / в закрывающем теге, является отсутствие атрибутов у последнего. Примером необходимости использования закрывающего тега является работа с элементом Р, который обозначает абзац: текст абзаца Элементы используются для того, чтобы сказать браузеру, какой блок вы хотите видеть в определенном месте страницы, а также какую информацию этот блок должен содержать. Помимо этого, браузеру нужно сообщить, как отображать эту информацию. Для этого используются атрибуты элементов [4]. 1.2 Атрибут С помощью атрибутов можно указывать различные способы отображения информации, добавляемой с помощью одинаковых элементов, а в некоторых случаях использование элемента без атрибутов не дает результатов. Например, в одном абзаце нужно выровнять текст по левому краю, а в другом по правому. Чтобы задать выравнивание абзаца, используют атрибут align элемента Р: Выравнивание по левому краю Выравнивание по правому краю Значения атрибутов задаются после знака равенства, в кавычках, и могут быть разными. Некоторым атрибутам присущ набор фиксированных значений, для других количество значений ограничено. Элементы и их атрибуты являются основой языка HTML, но для правильного отображения страницы в браузерах еще важно верно создать структуру документа. Для этого существуют строгие правила. Есть элементы, без которых HTML-документ не может обойтись, потому что именно они определяют его структуру. ^ Сравнив имеющиеся в Интернете онлайн-тесты, а также опросив своих одноклассников, я выявил следующие их недостатки: - как правило, тест содержит полный вариант ЕГЭ и возможности проверить свои знания по конкретной теме нет; - ограниченное количество вариантов; - устаревшие типы заданий; - онлайн-тесты в Интернете часто не выдают результат и не показывают ошибочных ответов; - при прохождении теста появляются подозрительные запросы номера телефона, требования оплаты и т.п.; - не всегда приятное внешнее оформление, которое отвлекает от выполнения заданий; - слишком много рекламы и ссылок на посторонние сайты; - некоторых не устраивает ограниченное время для прохождения теста, так как это дополнительный стресс, хотя я думаю, что это скорее положительный момент, приближающий тестируемого к реальным условиям. На этапе постановки задачи я постарался учесть эти недостатки и по возможности их исправить. ^ Прежде всего следует определиться с внешним видом веб-документа. В окне браузера выглядеть он будет примерно так (рис. 1). ![]() ^ Предполагаемое оформление веб-страницы с онлайн-тестом. Для создания структуры документа и хранения служебной информации в нем предусмотрено много элементов, они охватывают все необходимые пункты построения документа. Рассмотрим их и по порядку будем включать в HTML-код создаваемой веб-страницы. Для этого я использовал стандартный текстовый редактор «Блокнот». ^ . Главным при оформлении структуры страницы является элемент HTML [6]. Все содержимое страницы записывается внутри него. Все, что находится за пределами тегов и , не воспринимается браузером как код HTML и никак им не обрабатывается. ^ . После того как для документа создан блок, внутри него нужно создать заглавную область документа. Информация, вводимая в элемент HEAD, не отображается в окне браузера, а помогает ему в обработке страницы. Должны присутствовать как открывающий, так и закрывающий теги и , между которыми и располагаются другие элементы, несущие служебную информацию о странице. У элемента HEAD нет никаких атрибутов, он выполняет исключительно структурирующие функции, показывая обработчику часть документа, в которой хранится служебная информация [3]. ^ . Он задает название страницы, которое будет отображаться в строке с названием приложения окна браузера. Элемент требует наличия закрывающего тега ^ . Этот элемент позволяет присоединять к документу сценарии [5]. Он требует наличия закрывающего тега, при этом текст сценария может располагаться либо в этом элементе, либо во внешнем файле. В своей программе сценарий я размещу в этом элементе, поэтому атрибуты для связи с внешним файлов здесь не рассматриваются. Мне понадобились лишь атрибуты language и defer. Атрибут language задает язык, на котором написан сценарий, а defer запрещает загрузку сценария до окончания полной загрузки страницы. Именно этот элемент и будет содержать сценарий, который я опишу позже. Пока же просто оставим для него место и продолжим формировать внешний вид документа. Элемент BODY. Внутри элемента BODY располагается сам документ: весь текст, находящийся между открывающим тегом и закрывающим тегом |