Конкурс исследовательских и проектных работ учащихся<br /><br /><b>«ИНТЕЛЛЕКТУАЛЬНОЕ БУДУЩЕЕ МОРДОВИИ</b>»<br /><br /><b>ВОЗМОЖНОСТИ </b> <br /><br /><b>ЯЗЫКОВ ВЕБ-ПРОГРАММИРОВАНИЯ </b> <br /><br /><b>HTML И JAVASCRIPT </b> <br /><br /><b>ДЛЯ СОЗДАНИЯ ОНЛАЙН-ТЕСТА</b><br /><br /><b>Автор:</b> Заитов Рушан<br /><br />11 класс<br /><br /><b>Научный руководитель:</b> <br /><br />Багдалова Юлия Шамилевна<br /><br />Саранск<br /><br />2013<br /><br /><b>Оглавление</b><br />Информационная страница…………………….…………………………………………….…3<br /><br />Аннотация……………………………………………..……………………………………..…..4<br /><br />Введение…………………………………………………………...…………………..…………5<br /><br />1 Язык HTML………………………………………………………………….…………………6<br /><br />1.1 Элемент и теги……………………………………………………...…….………………….6<br /><br />1.2 Атрибут………………………………………………………………..….…………………..6<br /><br />1.3 Анализ существующих в Интернете онлайн-тестов …………………………..….………6<br /><ol> <ol start=4> <li><br />Структура HTML документа……………………………..………..……….……...……7<br /></ol> <li><br />Основы JavaScript………………………………………………………………..……...11<br /></ol> <br />3 Создание сценария на JavaScript……………………………..……………………..……….12<br /><br />3.1 Постановка задачи, разработка интерфейса и составление алгоритма…………..……..12<br /><br />3.2 Код сценария, отладка и тестирование программы……………………...………..……..13<br /><br />3.3 Модификация…………………………………………………………..……….……….….14<br /><br />4 Конструирование онлайн-теста по шаблону…………….…………..………..…………….15<br /><br />Заключение……………………………………….………………………………………….….16<br /><br />Список использованных источников………………………………………………………….17<br /><br />Приложение 1………………………………………………………………………………..….18<br /><br /><b>Информационная страница</b><br />МОУ «КРИВОЗЕРЬЕВСКАЯ СРЕДНЯЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА»<br /><br />Директор школы: Янгляев Наиль Хафизович<br /><span class="butback" onclick="goback(238156)">^</span> <span class="submenu-table" id="238156"><h4><span><span>Почтовый адрес: Республика Мордовия, Лямбирский район, с. Кривозерье, ул. Ленина, 8а</span></span></h4></span> <br />Телефон: 8 (83441) 3-64-30<br /><br />Автор: Заитов Рушан Камилевич<br /><br />Почтовый адрес: Лямбирский район, с. Кривозерье, ул. Садовая, 20 <br /><br />Телефон: 8 (83441) 3-64-26<br /><br />Руководитель: Багдалова Юлия Шамилевна, МОУ «Кривозерьевская СОШ», учитель математики и информатики<br /><br /><b>Аннотация</b><br /><br />Данная исследовательская работа посвящена исследованию возможностей языков веб-программирования HTML и JavaScript для создания веб-страницы, моделирующей работу онлайн-теста. В работе четко описаны все использованные учащимся инструменты языков HTML и JavaScript, поэтапно изложен весь процесс написания программного кода. В полученных тестах учтены и исправлены недостатки имеющихся в Интернете аналогов. В результате автором разработаны шаблоны 4 видов тестов, и на их основе созданы уже готовые к использованию варианты. Причем шаблоны эти может использовать практически любой учитель-предметник, для этого достаточно внести минимальные изменения в программный код и заготовить собственные задания.<br /><br />Работа выстроена правильно и грамотно.<br /><br />Данная работа актуальна, т.к. на сегодняшний день тесты широко применяются в образовательной системе как преподавателями – для контроля, так и самими обучающимися – для самоконтроля. Изучив же данную исследовательскую работу, преподаватели смогут самостоятельно конструировать онлайн-тесты – как контролирующие, так и обучающие.<br /><br /><b>Введение</b><br /><br />Вы когда-нибудь задумывались над тем, как создаются страницы Интернета? При изучении курса «Web-дизайн», я узнал, что в основе всех этих технологий лежат языки веб-программирования – HTML (Hyper Text Markup Language – язык гипертекстовой разметки), JavaScript, PHP и некоторые другие. <br /><br />В процессе подготовки к сдаче ЕГЭ мне приходится часто пользоваться так называемыми онлайн-тестами, размещенными в Интернете. Но это не всегда удобно – не все онлайн-тесты работают корректно. Тогда я задумался над тем, чтобы самому написать код веб-страницы, моделирующей работу онлайн-теста. Для этого я исследовал возможности языков веб-программирования HTML и JavaScript для создания онлайн-теста. <br /><br />Тема <i><b>актуальна</b></i>, т.к. тесты прочно обосновались в сфере образования как форма проверки уровня знаний учащихся. Поэтому онлайн-тесты так необходимы учащимся для самоподготовки. А в настоящее время преподаватели не имеют возможности самостоятельно конструировать такие тесты для своих учеников. <br /><br /><i><b>Цель исследования</b></i>: создать тест в виде веб-страницы с помощью языков HTML и JavaScript, лишенный недостатков онлайн-тестов из Интернета. <br /><br /><i><b>Задачи:</b></i> изучить недостатки онлайн-тестов, размещенных в Интернете; обзор основных команд языков HTML и JavaScript; с помощью конструкций этих языков разработать структуру тестирующей веб-страницы; создать веб-страницу с возможностью онлайн-тестирования; разработать готовые онлайн-тесты на основе созданной веб-страницы.<br /><br /><i><b>Объект исследования</b></i>: язык гипертекстовой разметки – HTML и язык создания сценариев JavaScript. <br /><br /><i><b>Предмет исследования</b></i> – возможности языков веб-программирования для создания учебных тестов.<br /><br /><i><b>Гипотеза исследования</b></i>: владея основами языков программирования HTML и JavaScript, можно самостоятельно написать программный код веб-страницы, моделирующей работу онлайн-теста. <br /><br /><b>1 Язык HTML</b><br /><br /><b>1.1 Элемент и теги.</b><br /><br />Для создания веб-страниц часто используется язык гипертекстовой разметки HTML. Существуют общие правила построения HTML-страниц. Им обязательно нужно следовать – только в этом случае HTML-код будет верно распознаваться и отображаться браузером.<br /><br />Основой языка HTML является элемент, он несет в себе определенную информацию, может описывать документ в целом или способ форматирования текста. Элемент можно назвать основой построения сайта. Все, что отображается на веб-странице, записано в ее коде с помощью элементов. <br /><br />Название элемента помещается в угловые скобки: <название элемента>, полученное выражение называется тегом. Это открывающий тег. Иногда необходимо задать парный закрывающий тег, который пишется так: </название элемента>. В основном парные теги используются при форматировании текста, они задают начало и конец блока форматирования. Иногда закрывающий тег вообще не требуется, а иногда его можно пропустить, однако для корректной обработки документа рекомендуется всегда использовать закрывающий тег. Кратко функции открывающего и закрывающего тегов можно описать так: открывающий тег включает форматирование, а закрывающий выключает. При этом основным отличием в записи тегов, кроме постановки символа / в закрывающем теге, является отсутствие атрибутов у последнего. Примером необходимости использования закрывающего тега является работа с элементом Р, который обозначает абзац: <br /><br /><P> текст абзаца </P><br /><br />Элементы используются для того, чтобы сказать браузеру, какой блок вы хотите видеть в определенном месте страницы, а также какую информацию этот блок должен содержать. Помимо этого, браузеру нужно сообщить, как отображать эту информацию. Для этого используются атрибуты элементов [4].<br /><b>1.2 Атрибут</b><br /><br />С помощью атрибутов можно указывать различные способы отображения информации, добавляемой с помощью одинаковых элементов, а в некоторых случаях использование элемента без атрибутов не дает результатов.<br /><br />Например, в одном абзаце нужно выровнять текст по левому краю, а в другом по правому. Чтобы задать выравнивание абзаца, используют атрибут align элемента Р:<br /><br /><P align=”left”>Выравнивание по левому краю</P><br /><br /><P align=”right”>Выравнивание по правому краю</P><br /><br />Значения атрибутов задаются после знака равенства, в кавычках, и могут быть разными. Некоторым атрибутам присущ набор фиксированных значений, для других количество значений ограничено.<br /><br />Элементы и их атрибуты являются основой языка HTML, но для правильного отображения страницы в браузерах еще важно верно создать структуру документа. Для этого существуют строгие правила. Есть элементы, без которых HTML-документ не может обойтись, потому что именно они определяют его структуру.<br /><b><span class="butback" onclick="goback(238157)">^</span> <span class="submenu-table" id="238157">1.3 Анализ существующих в Интернете онлайн-тестов </span></b> <br /><br />Сравнив имеющиеся в Интернете онлайн-тесты, а также опросив своих одноклассников, я выявил следующие их недостатки:<br /><br />- как правило, тест содержит полный вариант ЕГЭ и возможности проверить свои знания по конкретной теме нет;<br /><br />- ограниченное количество вариантов;<br /><br />- устаревшие типы заданий;<br /><br />- онлайн-тесты в Интернете часто не выдают результат и не показывают ошибочных ответов;<br /><br />- при прохождении теста появляются подозрительные запросы номера телефона, требования оплаты и т.п.;<br /><br />- не всегда приятное внешнее оформление, которое отвлекает от выполнения заданий;<br /><br />- слишком много рекламы и ссылок на посторонние сайты;<br /><br />- некоторых не устраивает ограниченное время для прохождения теста, так как это дополнительный стресс, хотя я думаю, что это скорее положительный момент, приближающий тестируемого к реальным условиям.<br /><br />На этапе постановки задачи я постарался учесть эти недостатки и по возможности их исправить.<br /><b><span class="butback" onclick="goback(238158)">^</span> <span class="submenu-table" id="238158">1.4 Структура HTML-документа</span></b><br /><br />Прежде всего следует определиться с внешним видом веб-документа. В окне браузера выглядеть он будет примерно так (рис. 1).<br /><br /><img src="6751_html_m6ac73025.jpg" name="рисунок 0" alt="проект.jpg" align=bottom width=411 height=279 border=0><br /><br /><i><span class="butback" onclick="goback(238159)">^</span> <span class="submenu-table" id="238159">Рис. 1.</i> <i>Предполагаемое оформление веб-страницы с онлайн-тестом.</span></i><br />Для создания структуры документа и хранения служебной информации в нем предусмотрено много элементов, они охватывают все необходимые пункты построения документа. Рассмотрим их и по порядку будем включать в HTML-код создаваемой веб-страницы. Для этого я использовал стандартный текстовый редактор «Блокнот». <br /><br /><b><span class="butback" onclick="goback(238160)">^</span> <span class="submenu-table" id="238160">Элемент HTML</span></b>. Главным при оформлении структуры страницы является элемент HTML [6]. Все содержимое страницы записывается внутри него. Все, что находится за пределами тегов <HTML> и </HTML>, не воспринимается браузером как код HTML и никак им не обрабатывается.<br /><br /><b><span class="butback" onclick="goback(238161)">^</span> <span class="submenu-table" id="238161">Элемент HEAD</span></b>. После того как для документа создан блок, внутри него нужно создать заглавную область документа. Информация, вводимая в элемент HEAD, не отображается в окне браузера, а помогает ему в обработке страницы. Должны присутствовать как открывающий, так и закрывающий теги <HEAD> и </HEAD>, между которыми и располагаются другие элементы, несущие служебную информацию о странице. У элемента HEAD нет никаких атрибутов, он выполняет исключительно структурирующие функции, показывая обработчику часть документа, в которой хранится служебная информация [3].<br /><br /><b><span class="butback" onclick="goback(238162)">^</span> <span class="submenu-table" id="238162">Элемент TITLE</span></b>. Он задает название страницы, которое будет отображаться в строке с названием приложения окна браузера. Элемент требует наличия закрывающего тега . Текст, содержащийся между открывающим и закрывающим тегами, будет отображаться в качестве заголовка таблицы.
^ . Этот элемент позволяет присоединять к документу сценарии [5]. Он требует наличия закрывающего тега, при этом текст сценария может располагаться либо в этом элементе, либо во внешнем файле. В своей программе сценарий я размещу в этом элементе, поэтому атрибуты для связи с внешним файлов здесь не рассматриваются. Мне понадобились лишь атрибуты language и defer. Атрибут language задает язык, на котором написан сценарий, а defer запрещает загрузку сценария до окончания полной загрузки страницы. Именно этот элемент и будет содержать сценарий, который я опишу позже. Пока же просто оставим для него место и продолжим формировать внешний вид документа.
Элемент BODY. Внутри элемента BODY располагается сам документ: весь текст, находящийся между открывающим тегом и закрывающим тегом |
