Главная База знаний "Allbest" Программирование, компьютеры и кибернетика Разработка электронного учебного пособия по курсу "Теория вероятностей"

Разработка электронного учебного пособия по курсу "Теория вероятностей"

Интернет-технологии в образовании, основные аспекты и принципы их применения на современном этапе. Этапы создания электронного пособия, его внутренняя структура, предъявляемые требования и технологическое обеспечение. Листинг разработанного кода.

Рубрика Программирование, компьютеры и кибернетика
Вид дипломная работа
Язык русский
Дата добавления 03.01.2014
Размер файла 1,4 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Страница:

Рисунок 5 - Взаимодействие клиента с web-сервером

Например, вы можете написать функцию JavaScript, проверяющую информацию, которою вводят пользователи, попросить от них почтовый индекс или номер телефона. Без передачи по сети, браузер, используя HTML-страницу с вложенными операторами языка JavaScript, может проверить введенные данные и запросить новый ввод, если предыдущий был неправилен.

Включение JavaScript в HTML - документы.

Существуют следующие способы подключения JavaScript - программ к HTML документу:

1. Использование тега <SCRIPT>.

2. Объявление JavaScript-файла, содержащего текст программы.

3. Определение JavaScript-выражения в качестве значения для HTML-атрибутов.

Объявление JavaScript-программы в качестве обработчика событий.

JavaScript - является интерпретируемым; используются встроенные, расширяемые объекты, но никаких классов или наследований; вложен в HTML; типы данных не обьявляются; выполняется динамическое связывание, ссылки проверяются во время выполнения.

4.5 Структура пособия

Электронное пособие по курсу «Теория вероятностей» создавалось в профессиональном редакторе HTML Macromedia Dreamweaver MX 2004. Выбор данной программы обусловлен тем, что она имеет огромное количество различных возможностей таких как: возможность работы с HTML, CSS, JavaScript, PHP и др.; широкие возможности по дизайну и многое другое.

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Рисунок 6 - Схема структуры электронного пособия

Структуру пособия можно разбить на четыре основных элементов (рисунок 6):

Ш Главная страница (MAIN.html) является обложкой данного пособия и написана полностью на JavaScript (рисунок 17). Использован необычный эффект страницы, напоминающий полусолнце (листинг кода приведен в приложении 1). Цветовая гамма представлена тремя оттенками: синего, голубого и желтого. Что касается шрифта, то его цвет желтый, шрифт Arial, размер 10 pt.

Ш Содержание представлено в виде списка глав, вошедших в пособие, каждая из которых является ссылкой, нажимая на которую происходит переход на нужную тему (рисунок 7). Использовано два оттенка фона: бледный розово-лиловый и темно-синий, составляющий 25% от ширины страницы. Шрифт: Verdana и Arial, 10 pt; цвет: черный (заголовок), синий (темы глав), ярко-красный (названия глав).

Для форматирования шрифта использован физический стиль. Физический стиль - прямое указание браузеру на модификацию текущего шрифта. HTML позволяет определять внешний вид целых абзацев текста. Абзацы организованы в списки и выведены на экран в отформатированном виде. При создании пособия были использованы ненумерованные списки.

Ненумерованные списки: <UL>… </UL>

Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка начинается с метки <LI>.

Рисунок 7 - Внешний вид содержания пособия

Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:

A:link COLOR: #000080; TEXT-DECORATION: none

A.nav:link COLOR: #ffffff; TEXT-DECORATION: none

TR FONT-FAMILY: Verdana, Arial; FONT-SIZE: 10pt

DIV FONT-FAMILY: Verdana, Arial; FONT-SIZE: 10pt

body text= "#000000» bgcolor= "#FFF0F5»

bgcolor - Определяет цвет фона документа.

text - Определяет цвет текста документа.

link - Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.

vlink - Определяет цвет ссылки на документ, который уже был просмотрен ранее.

alink - Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.

Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF).

Ш Теоретические главы пособия по своей структуре напоминают структуру содержания, однако, добавлено меню пособия, написанное на JavaScript.

При наведении мышкой на нужный элемент меню меняется цвет с темно-синего на более светлый тон. Формулы обведены в рамку, встроены графики, рисунки.

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

В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:

<A HREF=» [адрес перехода]">

выделенный фрагмент текста</A>.

Ш Меню. Элементы меню

Меню написано на JavaScript (рисунок 8). Цвет темно-синий, цвет шрифта белый. При наведении курсором на любой элемент меню меняется фон на более светлый.

Рисунок 8 - Меню пособия

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

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

Ш Глоссарий состоит из странички с тремя фреймами.

В каком-то смысле фрейм - это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя тег <FRAME>, дизайнер НТМL-страницы разделяет экран браузера на части. В результате человек, просматривающий страницу, может изучать одну часть страницы независимо от остальной части. Фактически браузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана.

В результате такого представления страницы у нас возникает следующая иерархия объектов (рисунок 9):

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Рисунок 9 - Иерархия объектов на странице

В вершине иерархии находится окно браузера. В данном случае оно разбито на три фрейма. Таким образом, окно, как объект, является родоначальником, родителем данной иерархии, а три фрейма - соответственно, его потомки. Мы присвоили этим трем фреймам уникальные имена - frame1, frame2 и frame3. И с помощью этих имен мы можем обмениваться информацией с тремя указанными фреймами.

То есть получилась реализация трех задач:

главное окно / фрейм получает доступ к фрейму-потомку

фрейм-потомок получает доступ к родительскому окну / фрейму

фрейм-потомок получает доступ к другим фреймам-потомкам.

Схематически страница глоссария выглядит следующим образом (рисунок 10):

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Рисунок 10 - Схема страницы глоссария

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

· Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов

· Каждый фрэйм имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрэйма

· Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального параметра)

Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:

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

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

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

· Создавать формы типа «мастер-деталь» для WEB-приложений, обслуживающих базы данных.

«Алфавит» представляет собой список букв, начиная с которых в глоссарии можно найти определение (рисунок 11). Он написан на JavaScript. При наведении курсора на необходимую букву область вокруг буквы меняет фон с темно-синего на ярко синий.

Рисунок 11 - «Алфавит»

При нажатии на необходимую букву в «алфавите» появляется список определений на данную букву в окошке «определения». Список представляет с собой ссылки, при нажатии на которые расшифровка нужного определения появляется в окошке «ответ».

Ш Тестовые задания являются заключительным элементом в электронном пособии по курсу «Теория Вероятностей».

Приведены 3 теста по трем разным темам: основные понятия Теории Вероятностей, теория случайных величин и итоговый тест.

Начальная страница теста имеет свое небольшое меню, с помощью которого можно перейти к выбранному тесту (рисунок 12). На Java скриптах написан анимированный текст.

Рисунок 12 - Стартовая страница тестов

Цветовая гамма представлена в сочетании пяти оттенках: белого, светло-зеленого, черного, красного и серого. Цветовая гамма в мягких тонах и не раздражает глаз читателя.

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

Функции суммирования очков и перехода к следующему тесту выглядят следующим образом:

function Engine (question, answer) {

if (answer!= ans[question]) {

if (! done[question]) {

done[question] = -1;

alert («Ошибка!\n\nВаш счет:» + score);

}

else {

alert («Вы уже отвечали на этот вопрос!»);

}

}

else {

if (! done[question]) {

done[question] = -1;

score++;

alert («Правильно!\n\nВаш счет:» + score);

}

else {

alert («Вы уже отвечали на этот вопрос!»);

}

}

}

function NextLevel () {

if (score > 18) {

alert («Cheater!»);

}

if (score >= 12 && score <= 19)

{

self.location= «1.html»

}

else {

alert («Доступ закрыт! Вы должны были правильно ответить на 12 вопросов.»)

}

Каждый тест представлен от 13 до 20 различных вопросов. Если выбран правильный ответ, то вылетает алерт «Правильно» и происходит переход к следующему вопросу, если же ответ не верный, то соответственно вылетает алерт «Ошибка» и так же происходит переход к следующему вопросу (рисунок 13).

Рисунок 13 - Страница с заданием

Также производится суммирование очков, которые присуждаются за каждый правильно нажатый ответ, если количество очков меньше определенного числа, которое зависит, от количества вопросов в тесте, то студент должен пройти тест еще раз, иначе он не сможет перейти к следующему тесту (рисунок 14). Переход к следующему тесту осуществляется с помощью кнопки «Перейти на следующий уровень». Кнопка написана на JavaScript и меняет цвет при наведении курсора.

<input type=button onClick= «NextLevel()» value= «Перейти на следующий уровень»>

Рисунок 14 - Связь кнопки с аллертом

Больше одного раза отвечать на один и тот же вопрос нельзя. При повторном нажатии на вопрос, ответ к которому уже был дан, вылетает аллерт, что на этот вопрос уже был получен ответ (рисунок 15).

Рисунок 15 - Аллерт, появляющийся при повторном ответе на вопрос

К каждому вопросу приведено два-три ответа, среди которых один правильный (рисунок 16). Ответы представлены в виде ненумерованных списков, каждый элемент которого является ссылкой перехода к следующему вопросу.

Рисунок 16 - Один из вопросов теста и приведенные к нему ответы

При нажатии на элемент меню «На главную страницу» осуществляется переход к начальной странице тестировочных заданий.

Элемент «Назад» производит переход на ту страницу, на которой был человек до этого, то есть запоминает историю. Сделано это с помощью JavaScript.

<p align= «center»>[<a href= «javascript:history.back()»>

<font size= «2» face= «Arial»>

<strong>Назад</strong></font></a>]</p>

Заключение

Разработано электронное учебное пособие по курсу «Теория Вероятностей». Можно сделать вывод, что данное методическое пособие облегчит работу преподавателям и станет «помощником» студентам в самостоятельной подготовке к занятию или зачету.

Для достижения поставленных целей и решения предложенной задачи мною была проделана следующая работа:

- рассмотрена ситуация компьютеризации нашего общества и процесса образования;

- изучены языки HTML, JavaScript;

- изучена программа Macromedia Dreamweaver MX 2004, являющаяся редактором HTML;

- рассмотрены принципы изложения информации с точки зрения современной теории дизайна;

- проведен анализ теоретического материала, предлагаемого к изучению студентам, и выбран материал для первоочередной реализации в электронном пособии;

- подобрана система практических заданий, предназначенных для закрепления изученного материала и выработки практических умений и навыков в решении подобных заданий;

- созданы тесты по курсу «Теория Вероятностей».

Поставленные в дипломной работе задачи выполнены в соответствии с заданными требованиями.

Список использованных источников

1. Кузина И.В. - Язык HTML, JavaScript и WWW. - http://www.osp.ru/os/os_6_96/source.

2. Аленова Н.Г. - HTML для начинающих. - http://skat.pp.ru/

3. Стефан Кох - Введение в JavaScript для мага. - 1997, http://rummelplatz.uni-mannheim.de/~ skoch/js.

4. Колемаев В.А. - Теория вероятностей и математическая статистика. - М.: Высшая школа, 1991. 400 с.

5. Гмурман В.Е. - Руководство к решению задач по теории вероятностей и математической статистике. - М.: Высшая школа, 2001. 400 с.

6. Справочное руководство по JavaScript.

7. Борк A. - «История» новых технологий в образовании. - М.: Российский открытый университет, 1990.

Приложение

образование интернет электронный пособие

Листинг кода «Плавающего текста»

HTML><HEAD>

<META http-equiv=Content-Type content= «text/html; charset=windows-1251»>

<SCRIPT language=JavaScript>

arrCos = new Array(360); /* придерживает cos от 0 до 359 градусов */

arrSin = new Array(360); /* придерживает sin от 0 до 359 градусов */

for (i=0; i<360; i++) {

arrSin[i] = Math.sin (i * Math.PI / 180);

arrCos[i] = Math.cos (i * Math.PI / 180);

}

function rotate (objID, x, y, r, deg, rinc) {

/* objID - идентификатор объекта, которым мы собираемся управлять

* x - значение оси х

* y - значение оси у

* r - радиус

* deg - текущее значение вращения вокруг оси

* rinc - насколько мы увеличиваем радиус в данное время

*/

y = r * arrSin[deg];

x = r * arrCos[deg];

document.all[objID].style.pixelLeft = x;

document.all[objID].style.pixelTop = y+r+10;

if (deg% 60 == 0) r += rinc;

/* Если радиус достиг минимума или максимума, то изменяем rinc

*/

if (r > 60 || r < 10) {

rinc *= -1;

r += rinc;

}

deg += 5;

if (deg >= 360) deg = 0;

setTimeout («rotate('» + objID + «',» + x +»,» + y +»,» + r +»,» + deg +»,» + rinc +»)», 10);

}

function highlight (objNum, lastNum) {

/* objNum - объекты подсветки

* lastNum - какой именно объект подсвечен

*/

document.all [«obj» + objNum].style.color = «#FFFFFF»;

document.all [«obj» + objNum].style.fontStyle = «italic»;

if (lastNum!= 0) document.all [«obj» + lastNum].style.color = «»;

if (lastNum!= 0) document.all [«obj» + lastNum].style.fontStyle = «»;

lastNum = objNum;

if (++objNum > 3) objNum = 1; /* Проверяем, достигли ли мы последнего объекта */

document.all [«obj» + objNum].style.color = «#AAAAAA»;

setTimeout («highlight(» + objNum+»,» + lastNum +»)», 2000);

}

function doit() {

x=0; /* начальная позиция х координаты */

y=0; /* начальная позиция у координаты */

r=10; /* начальный радиус */

deg=0; /* начальный сдвиг вокруг оси, в градусах */

rinc = 1; /* приращение радиуса */

/* Начало вращение объектов с возможным смещением к начальным координатам */

rotate («obj1», x, y, r+10, deg, rinc);

rotate («obj2», x, y, r, deg+45, rinc);

rotate («obj3», x, y, r+20, deg+90, rinc);

rotate («obj4», x, y, r, deg+270, rinc);

/* Начало подсвечивания объектов*/

highlight (1,0);

}

</SCRIPT>

<STYLE>.rotateOBJ {

POSITION: relative

}

</STYLE>

<META content= «MSHTML 6.00.2900.2180» name=GENERATOR></HEAD>

<BODY text=white vLink=#990000 link=#ff0000 bgColor=#000066 onload=doit()>

<P>

<CENTER>

<P><I><FONT face=»» size=5><SPAN class=rotateOBJ id=obj1><FONT color=#ff9900>Здесь</FONT></SPAN></FONT><FONT color=#ff9900><BR><FONT face=»» size=5><SPAN

class=rotateOBJ id=obj2>вы можете</SPAN></FONT><BR><FONT face=»»

size=5><SPAN class=rotateOBJ id=obj3>пройти тесты по</SPAN></FONT><BR></FONT></I><FONT face=»» color=#ff9900 size=6><SPAN

class=rotateOBJ id=obj4><A

href=test/1.html><B><I>Теории Вероятностей</I></B></A></SPAN></FONT> </P>

<P>&nbsp;</P>

<P>&nbsp;</P>

<P>&nbsp;</P>

<P><BR>&nbsp;

</P></CENTER></BODY></HTML>

Размещено на Allbest.ru

Страница:


Подобные документы

  • Разработка электронного учебника по теме "Характеристика и классификация вычислительной техники"

    Особенности электронных учебных пособий и основные принципы их создания. Сбор и подготовка исходного материала для электронного учебного пособия. Разработка структуры электронного пособия. Выбор программ и разработка интерфейса электронного учебника.

    дипломная работа [738,5 K], добавлен 27.06.2012

  • Разработка электронного учебного пособия

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

    курсовая работа [613,6 K], добавлен 31.01.2016

  • Разработка электронного учебного пособия на тему "Линейное программирование"

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

    курсовая работа [1,7 M], добавлен 09.06.2010

  • Технология создания электронного учебного пособия

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

    курсовая работа [49,1 K], добавлен 18.06.2010

  • Разработка электронного учебника по Информатике

    Концептуальные основы разработки электронного учебника на основе гипертекстовых технологий. Архитектура учебного пособия. Этапы построения электронного учебника "Информатика" и его структура. Анализ практического использования электронного учебника.

    дипломная работа [104,9 K], добавлен 02.05.2012

  • Проект создания интернет-учебного пособия

    Сущность, принципы, методы и средства построения компьютерных учебников. Общая характеристика существующих программных продуктов, позволяющих создавать компьютерные учебники. Технология создания интернет-учебного пособия "Нелинейная теория устойчивости".

    дипломная работа [235,5 K], добавлен 14.10.2010

  • Разработка электронного обучающего курса по дисциплине "Методы обработки информации"

    Аспекты применения современных информационных технологий в образовании. Системный подход к созданию электронных пособий. Инструментальные средства и технология проектирования электронного учебного пособия. Способы защиты информации и компьютерных систем.

    дипломная работа [3,2 M], добавлен 15.04.2012

  • Разработка электронного учебного пособия по Visual Basic 6.0

    Развитие и классификация языков программирования. Методические рекомендации по изучению языков программирования. Основные понятия объектно-ориентированного программирования. Создание электронного учебного пособия с помощью языка гипертекстовой разметки.

    курсовая работа [331,1 K], добавлен 06.09.2011

  • Разработка электронного учебника по курсу "Новые информационные технологии"

    История развития электронных учебников, их применение, достоинства и недостатки. Программные средства создания учебного пособия по курсу "Новые информационные технологии". Технические характеристики персонального компьютера; руководство пользователя.

    дипломная работа [1,5 M], добавлен 23.04.2015

  • Создание электронного учебного пособия

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

    реферат [1,9 M], добавлен 29.12.2014

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.

© 2000 — 2023, ООО «Олбест» Все права защищены