Hi-Tech  ->  Интернет  | Автор: | Добавлено: 2015-03-23

Разработка интерактивных тестов с помощью JavaScript – программы

Со временем любому пользователю Интернет начинает казаться, что в Сети чего-то не хватает. Чего-то очень важного, о чем знает только он. Или просто, без затей – рождается самое обычное, самое закономерное желание добавить свой голос в мощный хор Интернет. И вот тогда возникает идея – создать свою собственную WWW – страничку, где будет буквально ВСЕ, чего не хватает на остальных десятках миллионов.

Домашняя страничка Поистине, нет в мире Интернет ничего более удивительного: буквально за пять минут при помощи простейших манипу – ляций появляется пусть маленькое, но зато свое, доступное всем средством массовой информации. А если затратить чуть побольше времени, труда и фантазии, то результатом ваших усилий может стать настоящее произведе – ние искусств!

Тема моего электронного учебника «Интернет».

Сегодня, когда телекоммуникационные технологии все больше прони – кают во все сферы науки, техника, общественной и личной жизни людей во всех странах мира, когда развивающаяся стремительными темпами глобаль – ная информационная сеть Интернет, по сути, превращается в одну из непре – менных коммунальных услуг наряду с электричеством или радиоточкой, ко – личество разнообразных по оформлению и содержанию сайтов, составляю – щих «информационное наполнение» Интернета, возрастает поистине лави – нообразно

Одним словом, Интернет тысячелик и каждый может найти в нем свою «экологическую нишу».

Интернетом пользуются все мои друзья, мы обсуждаем все интересные сайты и многое другое по этой теме Меня очень интересует эта тема, поэ - тому для своего проекта я взяла тему - Интернет и хочу полностью раскрыть ее тайну происхождения (с истории до нашего времени).

Создание Web – сайтов

Умение создавать Web – сайты со временем становится актуальным навыком пользователя ЭВМ. Опубликовать сайт в Интернете настолько просто и дос – тупно (по сравнению с публикациями в «бумажных» изданиях), что эта воз – можность привлекает все большее число людей. Сайты могут быть частными, могут быть официальными – производственными. Практически отсутствуют какие-либо ограничения на тематику сайтов; в Интернете нет цензуры. Одна- ко Web – сайт, как и всякая публикация, может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой – то общественный интерес и если он имеет привлекательное внешнее оформление. Нередко раз- работчики Web – страниц гораздо больше уделяют внимание внешнему оформлению страниц, чем их содержанию. Оформление Web – страниц ста – новится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». Однако каким бы хорошим Web – художни – ком вы ни стали, соблюдайте золотое правило: если вам нечего сказать Ми – ру не стоит засорять Сеть! Если вы все – таки решили публиковаться в Ин- тернете, то следует разобраться – как и какими средствами создаются Web – страницы?

Web – страница представляет собой текстовый файл, содержащий описание страницы на языке HTML – (HyperText Mark-Up Language – язык разметки гипертекста). Как известно, текстовые файлы создаются с помощью прос – тых текстовых редакторов. Таким текстовым редактором в операционной сис- теме Windows является «Блокнот». Но чтобы создавать сайты в Блокноте, тре- буется знание языка HTML. Это наиболее сложный способ Web–дизайна. Фак- тически он сводится к программированию на языке HTML.

Описание языка разметки гипертекстов HTML

Документы, хранящиеся на WWW, подготавливаются на специальном язы- ке HTML. В HTML текст кодируется в ASCII и поэтому может быть создан и отредактирован в любом текстовом редакторе. Кроме самого текста в до- кументах имеются флаги разметки, которые интерпретируют клиентской программой просмотра (броузером) и позволяют воспринимать документ именно как гипертекст.

Любой гипертекст похож на книгу и может быть разбит на отдельные струк-турные элементы:

собственно текст;

главы, параграфы, пункты, подпункты;

абзацы.

Для каждого из этих элементов в HTML существует определенные стили, описывающие, в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml. html:

Пример HTML – текста

Глава 1

Параграф 1.

Добро пожаловать в HTML!

Это пример гипертекста.

Параграф 2.

Пример HTML – текста Из данного примера видно, что:

заголовок документа начинается с и заканчивается ;

заголовок первого уровня (главы)выделяется символами

и

;

заголовок последующих уровней (параграфы, пункты, подпункты и т. п. – символами и , где x – числа 2, 3, абзац – символами

Не все стили поддерживаются всеми WWW – броузерами. Если программа просмотра не поддерживает стиль, то она его игнорирует.

Основной текст отделяется от сопроводительного символами

Каждый HTML – документ должен иметь заголовок, который показывается отдельно и используется, прежде всего, для индетификации документа (нап- ример, при поиске). Заголовок должен описывать цель документа и содер – жать не больше 5 – 6 слов. Практически во всех броузерах заголовок доку - мента виден в верхней части экрана (окна).

Для выделения заголовка служат символы

Заголовок HTML имеет шесть уровней заголовков, имеющих номера с 1по 6 (заголо – вок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом – размером и толщи- ной букв. Первый заголовок в каждом документе должен быть выделен <Н1>.

Синтаксис заголовков:

Текст заголовка где y – число от 1 до 6, определяющее уровень заголовка.

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

Параграф 1.

Добро пожаловать в HTML!

Это пример гипертекстов.

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

Главное преимущество HTML состоит в его способности связываться с дру – гими документами. Броузер выделяет (обычно цветом и/или подчеркиванием) ключивые слова, являющиеся гипертекстовыми ссылками (гиперссылками). Описывается ссылка на другой документ следующим образом:

Текст, который будет служить как обращение к другому документу . Приведу пример такой гипертекстовой ссылки:

Пример HTML – текста Здесь ключивые слова «Пример HTML – текста» являются гиперссылкой на файл minihtml. html, который находится в той же директории, что и текущий документ. Также можно ссылаться на документ в любой директории, описав к нему полный путь. Например, ссылку на файл NJStats. html, лежащий в под- директории AtlanticStates, можно описать так:

New Jersey Это – так называемые относительные ссылки. Можно также использовать аб- солютное имя файла (полный путь). В общем случае, использование ссылки по абсолютному имени файла более предпочтительно.

Ссылки на документ, хранящиеся на других серверах, записываются с указа – нием их URL:

News Гиперссылки могут также использоваться для соединения с определенными разделами документов. Предположим, необходимо соединить документ А с первой главой документа В. Для этого надо создать именованную гиперссыл- ку в документе В:

Здесь вы можите увидеть Главу 1 текст первой главы.

Теперь, описывая ссылку в документе А, надо включить не только имя файла documentB. html, но также и имя гиперссылки, отделяемое символом (#):

Здесь вы можите увидеть текст

Главы 1 документ В

Теперь «кликнув» в слово «Главы 1» в документе А, можно перейти непос – редственно в Главу 1 в документе В.

Техника соединения с разделами текущего документа аналогична описанной выше, только опускается имя файла. Вот, например, связь с Главой 1 внутри того же самого файла (Документ В):

Это Глава 1 текущего документа.

Для более сложных документов HTML имеет некоторые дополнительные возможности форматирования. Так, HTML поддерживает ненумерованные и нумерованные списки. Ненумерованный список:

  • список пунктов
Например:

  • яблоки

  • бананы

что дает на экране:

( яблоки

( бананы

Нумерованный список идентичен ненумерованному списку, только вместо

    используется
      .

      Например:

      1. апельсины

      2. персики

      3. виноград

      что дает на экране:

      1. апельсин 2. персики 3. виноград

      Программа просмотра автоматически нумерует элементы такого списка.

      Списки могут быть произвольно вложены, хотя практически было бы разум- нее ограничиться тремя уровнями вложенных списков.

      Приведу пример вложенных списков:

      • Крупные города России

        • Москва

        • Санкт – Петербург

      • Крупные города Украины:

        • Киев

      что дает на экране:

      ( Крупные города России:

      ( Москва ( Санкт – Петербург

      ( Крупные города Украины:

      Флаг

      используется для того, чтобы определить автора докумен- та и способы контакта с ним (например, e-mail адрес). Обычно это последний пункт в файле. Например, последняя строка документа может выглядеть так:

      Web – master Воронежского педуниверситета den@vspu. ac. ru
      что дает на экране: Web – master Воронежского педуниверситета den@vspu. ac. ru

      Можно описывать специальными стилями отдельные слова или предложе – ния. Имеются два типа стилей: логический и физический. Логические стили определяют текст согласно заданному значению, в то время как физические стили определяют некоторые участки текста.

      Логические стили:

      служит для описания определений. (Это определение. )

      служит для выделения слов. (Это выделенное слово. )

      служит для выделения заголовков книг, фильмов, ци – тат и т. п. (Это цитата)

      служит для выделения программных кодов, текстов программ и т. п. Изображается шрифтом фиксирован – ной ширины. (The header file)

      используется для ввода с клавиатуры пользователя. Мо- жет быть изображено жирным шрифтом (но в большинст- ве browser изображается специальным шрифтом). (Введи- те passwd)

      используется для машинных сообщений. Изображается шрифтом фиксированной ширины. (Segmentation fault:Co- re dumped)

      служит для ОСОБОГО выделения слов. Обычно выделяет- ся жирным шрифтом. (Это очень важно)

      используется для символьных переменных. (Это переменная)

      Существует физические способы выделения – автор задает стиль написания текста, описывая шрифт в исходном HTML – документе. Можно задать:

      , жирный шрифт (это жирный шрифт)

      , наклонный шрифт (это наклонный шрифт)

      , фиксированный шрифт (шрифт заданной ширины) (это fixed шрифт)

      Используя флаг


      можно разделить текст горизонтальной чертой:

      Этот текст снизу от линии.

      Большинство программ просмотра могут показывать рисунок X Bitmap (XBM) или GIF формата вместе с текстом. Чтобы включить рисунок, на- до описать гиперссылку на него:

      где image_URL – URL. gif или. xbm файла, содержащего рисунок. Таким образом синтаксис ссылки на рисунок аналогичен синтаксису гиперссылки

      HREF. Форматирование положения рисунка задается включением в гиперс- cылку пункта “ALIGN=”

      Также возможны типы выравнивания:

      ALIGN = MIDDL

      ALIGN = CENTER

      Поскольку пересылка картинки замедляет загрузку основного WWW – доку- мента, рекомендуется помещать рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам может решить – смотреть или не смотреть ему этот рисунок:

      Здесь вы можете увидеть рисунок.

      Рассмотрим более длинный пример HTML – документа:

      ;Более длинный пример

      Более длинный пример

      Это простой HTML – документ.

      Это первый абзац.

      Это второй абзац, он демонстрирует некоторые возможности HTML по выде- лению слов.

      Это слово написано наклонным шрифтом.

      Это слово написано жирным шрифтом.

      Здесь вы можете увидеть картинку:

      P> Это третий абзац, он демонстрирует использование гиперссылок.

      Это гиперссылка на файл minihtml. html, содержащий простой пример HTML- документа:

      Пример HTML – текста.

      Заголовок второго уровня

      Дальнейший текст будет написан шрифтом фиксированной ширины:

       On the stiff twig up there Hunches a wet black rook Arranging and rearranging its feathers in the rain

      Это ненумерованный список, состоящий из двух элементов:

      • смородина

      • черника

      Конец документа.

      Web – master Воронежского педуниверситета den@vspu. ac. ru
      Тэги HTML и их атрибуты

      Назначение Тэг Атрибуты Значения атрибутов

      Структура HTML –документа

      Содержимое HTML –документа

      - -

      Заголовок

      HTML – документа - -

      Тело HTML - документа

      <\BODY>

      -цвет фона название цвета или его 16-

      BGCOLOR рич – ный код

      -цвет текста название цвета или его 16-

      TEXT рич-ный код

      -цвет еще не посещенных ссылок название цвета или его 16 -

      LINK рич-ный код

      -цвет уже посе-щенных ссылок название цвета

      VLINK или его 16 - рич-ный код

      -фоновая гра- фика имя файла фоно- вой графики

      (GIF JPEG), его адрес URL и

      BACKGROUND путь к не- му

      -фиксация фо- новой графики BGPROPERTIES FIXED

      -поля слева LEFTMARGIN ширина полей в пикселях или нуль для «отклю- чения» полей

      -поля сверху

      TOPMARGIN

      Титульная строка - -</p> <p>

      Оформление текста

      -выравнивание ALIGN LEFT, CENTER, RIGHT, JUSTIFY

      Разрыв строки межабзацным отступом

      Разрыв строки без отступа
      - -

      -прерывание оборки текстом CLEAR LEFT, RIGHT, ALL

      Заголовок и подзаголовок

      -выравнивание ALIGN LEFT, CENTER, RIGHT

      Вид шрифта

      -цвет текста Название цвета или его 16-рич-

      COLOR ный код

      -размер симво- лов Абсолютное (от 1 до 7) или отно- сительное (+/-) числовое

      SIZE значе- ние в условных единицах

      Размещение иллюстраций и прочих графических элементов

      Вставка иллюстрации

      -местонахожде- ние файла ил- имя графичес- кого файла люстрации SRC (GIF, JPEG), его адрес UPL и путь к не- му

      -ширина WIDTH числовое значе- ние в пикселях или в процентах

      -высота HEIDTH Числовое значе- ние в пикселях

      -оборка текс- том LEFT, RIGHT, TOP, BOTTOM,

      ALIGN MIDDLE, CEN- TER

      Маркированный список

        -символ марке- ра («буллета») TYPE DISC, CIRCLE, SQUARE

        Нумерованный список

          -тип нумерации TYPE 1, A, a, I, i

          Гиперссылки

          Гиперссылка

          -целевой ад- имя файла, ад- рес URL, путь рес/файл (в разных ком- бинациях); ma-

          HREF ilto: [адрес] - для отправки эл. почты; # [имя]-для пере-

          хода к заклад-ке

          -закладка NAME имя закладки

          -текст поясне- ния TITLE Строка текста в кавычках

          2. 3 Мой Web – сайт

          После этой интересной информации и после недолгой практики я решила попробовать создать свой Web – сайт. Не знаю, получилось у меня это или нет, но самое главное я попробовала. Я создала небольшой сайт, но вклю – чила в него самое главное: информацию о себе и о семье, краткую инфор – мацию об Интернете и небольшой тест (для проверки).

          Я опишу кратко свои действия, т. к. на предыдущей странице все основные действия изложены подробно.

          Например, avtor. html:

          (начало html-документ)

          (начало заголовка)

          (название документа) Дорогие друзья, не пропустите, самая интересная информация именно на этом сайте! (конец заголовка)

          (фоновая картинка)

          (уровень заголовка)Дорогие взломщики Интернета,Всем Привет.

          Я увлекаюсь многими вещами, но больше люблю работать на компьютере!

          Это я!
          Я уже учу моего брата, как работать на компьютере.
          Дорогие друзья, не пропустите, самая интересная информация именно на этом сайте
          А теперь немножко обо мне:
          Мои любимые места:

        1. (первый элемент)мой дом
        2. (второй элемент)дом лучшей подруги
        3. (последний элемент)городской парк

      (новый абзац) Я не люблю:

    1. (первый элемент)злых и жадных людей
    2. (второй элемент)грубость
    3. (последний элемент)запах курения
    4. информация о семье(текст) (конец тела)

      (конец html-документа)

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

      Папки: Animations(анимации),

      Fon(фоны),

      Knopki(кнопки),

      Pictures(картинки),

      Сopyright(копии)

      Эти папки нужны для усовершенствования моего сайта.

      2. 4 Разработка интерактивных тестов с помощью JavaScript – программы.

      Мой учебник содержит тест, который составлен с помощью програм- мы JavaScript. Но что же это за программа?

      В Целом язык JavaScript представляет собой классический язык программирования, включающий в себя ряд операторов, реализующих боль- шинство типовых алгоритмических конструкций: условный оператор, циклы While и For и пр. , в дополнение к которым предусмотрено большое количест- во стандартных методов. Все это позволяет реализовывать желаемые инте – рактивные действия в достаточно широких пределах возможностей.

      Одно из применений JavaScript – это создание на базе HTML «элект – ронных учебников», в частности, снабженных интерактивными тестами. В этом случае Web – страница содержит некую форму, включающую в себя текст вопросов и диалоговые элементы, позволяющие пользователю ввести (либо выбрать) ответ.

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

      III. Статистические данные

      2. 5 Мои исследования

      После изучения темы «Интернет» мне стало интересно, каковы перспективы организации Интернет в нашей школе. Для того, чтобы школьник мог свободно работать в Интернете необходимо, чтобы дома был компьютер и он имел доступ в глобальную сеть. Мною была составлена статистика по компьютеризации школьников с пятого по одиннадцатый класс. Первый шаг в исследовании – узнать, сколько учеников могут работать на компьютере у себя дома. Для этого я рассмотрела каждый класс в нашей школе. Вот, что получилось: все количество составило 412 человек, из них в 2004-2005 учебном году имели компьютеры 57 человек, в 2005-2006 учебном году количество таких счастливчиков увеличилось на 24 человека, следовательно, их стало уже 81 человек. Из этих 81 человек 17 – имеют доступ в Интернет, пользуются услугами – 39 человек. Также из этих данных я вычислила процентное отношение пользователей сетью Интернет. Следующим моим шагом стало вычисление по этим же пунктам, только уже на параллелях пятые – одиннадцатые классы. После всех этих вычислений я составила несколько диаграмм, чтобы лучше представить рост компьютеризированных школьников в нашей школе(см. приложение ). Проанализировав полученные результаты, я убедилась, что не у каждого есть возможность выйти во всемирную сеть Интернет, но такая возможность растет: с каждым годом число счастливчиков увеличивается. На основе этого можно предположить, что во всей школе и в городе сложится почти такая же ситуация.

      2. 6 Мнение со стороны

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

      Знакомы с электронными учебниками – 76%

      Слышали об электронных учебниках – 100%

      Впервые читают электронные учебники – 8%

      Оформление электронного учебника – 96%

      Доступность электронного учебника –98%

      Понятность электронного учебника – 100%

      Информативность электронного учебника – 100% (для начинающих)

      Необходимость электронного учебника – 100%

      Полезность электронного учебника – 100%

      Содержание текста электронного учебника – 97%

      Из этих результатов я делаю выводы, что мой учебник полезен и даже необходим для тех, кто начинает изучать Интернет.

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

      III. Заключение

      Моя работа закончена. Значит ли это, что, перевернув ее последнюю страничку, вы узнали об Интернете ВСЕ ?

      Конечно же, нет. Ибо вселенная Интернета, его возможности столь же неисчерпаемы, как и возможности самого человека, его пытливой фантазии.

      С помощью этой работы многие могут научиться тому, чему научилась я:

      • Научиться создавать Web – страничку;

      • Объединять Web – странички в Web – сайт;

      • Представлять Web – сайт в виде электронного учебника;

      • Изучить язык программирования HTML и многому другому

      Мой учебник был апробирован в одиннадцатых классах нашей школы

      На уроках информатики, после этого я решила узнать об их отзывах. Я разда- ла им бланки, где задала вопросы о доступности, необходимости, пользе и об информативности моего электронного учебника. Результаты оказались очень хорошие, т. к. большинство учащихся выразили полное согласие с моим учеб-ником.

      Впереди у вас – множество открытий, которые вы сделаете уже самос – тоятельно.

      А пока что, разрешите мне откланяться.

      Скорее всего, вашими дальнейшими спутниками будут уже другие проекты, книги, журналы и т. д. Но если моя информация заинтересует вас, я буду считать свою задачу выполненной!

      Комментарии


      Войти или Зарегистрироваться (чтобы оставлять отзывы)