Побудова системи дистанційного навчання

Рисунок 2.2. Сторінка з переліком допустимих курсів

Далі вибираємо КУРС КОРИСТУВАЧА ПК. На цій сторінці студенту буде запропоновано три текстові посилання (рис. 2.3).

Рисунок 2.3. Посиланя курса користувача ПК

Перше посилання теоретичний матеріал - містить весь лекційний матеріал з цього курсу (рис. 2.4).

Рисунок 2.4. Зміст сторінки теоретичного матеріалу

Всі лекції представлені в електронному вигляді. Вивчати матеріал можно як в інтернеті так і без нього. Кожну лекцію можно завантажити собі в комп ютер і читати коли заманеться. Для зручності в кінці кожної лекції зроблен швидкий перехід на наступну лекцію або на попередню (рис. 2.5).

Рисунок 2.5. Розміщення посилянь в кінці лекцій

Також для швидкого переходу на практичні роботи та на контрольні тести в головному меню були розроблені допоміжні розділи (рис. 2.6).

Рисунок 2.6. Вид головного меню

Друге посилання Практичні роботи. Містить у собі 20 практичних робіт (рис. 2.7). Всі роботи представлені так як і теорія - в електронному вигляді або в архівному. З кожної роботи можно перейти на теорію або на контролюючі тести.

Рисунок 2.7. Зміст сторінки практичних робіт

Трете посилання це контрольний тест. Складається с тестів трьох рівней: легкий середній та важкий. Кожен тест має 10 запитань на які запропоновано відповісти користувачеві. З кожного теста можно потрапити на наступний тест, попередній тест, теоретичну частину та практичну чатсину (рис. 2.8).

Сторінки заочна форма навчання та денна форма навчання містять у собі весь лекційний та практичний матеріал і по архітектурі майже однакові. На сторінках знаходиться перелік спеціальностей які можно вибрати. Далі студент вибирає предмет, потім лекцію або практику за бажанням. Як і в курсі користувача пк з любої лекції або практичної роботи можно перейти куди завгодно. Добре розроблена система зсилок дає змогу безпомилково і швидко перейти в потрібне місце.

Рисунок 2.8. Зміст сторінки теста 2 рівня

На сторінці денна форма навчання в головному меню добавлені розділи спеціальності та абітурієнту. Сторінка «спеціальності» містить перелік та опис професій яких навчають в нашому коледжі. На сторіці «Абітурієнту» розміщена інформація про ПРАВИЛА ПРИЙОМУ до Державного вищого навчального закладу «Краснолуцький гірничо-промисловий коледж» У 2010 році.

Web сайт зроблен так, що всі ці розділи знаходяться на кожній сторінці, що дає змогу в любий час перейти в потрібний розділ з будь якого місця.

Наступний невідємний елемент головної сторінки це вхідна фома, що дозволяє входити на сайт зареєстрованим користувачем, так як це надає низку переваг над гостем. Адже тільки реєстрованим користувачам дозволяється вивчати дистанційні курси. І тільки їм можно дивитися весь теоретичний і практичний матеріал з усіх спеціальностей.

Календар розташований на головні йсторінці та й взагалі на кожній сторінці показує точну дату. Шляхом невеликий маніпуляцій можно подивитися яка буде дата в майбутньому або була в минулому.

2.4 Програмна реалізація сайту інформаційної підтримки освіти

Веб - дизайн активно розвивається. Один з перших мов для написання веб сайтів яаляется HTML мова. Він дуже простий у вивченні. З його допомогою можна створювати дуже гарні й сучасні сайти. Нічим не сайтам, що поступаються, створених на таких мовах як CSS або PHP. При вивченні цієї мови учень уже з перших уроків може практично реализовивать деякі теги. Саме по цьомуе я вирішив створювати сайт дистанційної підтримки освіти на цій мові.

Термін HTML являє собою скорочення від HyperText Markup Language - мова розмітки гіпертексту. В основному, HTML-документ є простим текстовим файлом, що містить текст і нічого більше. Так що створювати веб-страницы можна в будь-якому текстовому редакторі.

Коли веб-страница відкривається в браузері, він переглядає код HTML, знаходить спеціальні символи, називані тегами, і використає їх для вставки зображень, зміни виду тексту, створення посилань на інші веб-страницы й т.д.

Для позначення тегів використається символ <тег>. Теги бувають двох видів: парні, які виділяють блок тексту, також називаються ще контейнером і одиночні. Контейнер вимагає закриваючого тегу, позначуваного </тег>. Теги нечутливі до регістра, тому запис <B> і <b> еквівалентний.

Оскільки одночасно можна використати будь-яке розумне сполучення тегів, варто пам'ятати про їхню вкладеність. Один контейнер повинен перебувати усередині іншого, і ніяк не перетинатися.

Ще одне важливе поняття як синтаксис. Синтаксис задає, як коректно писати тег і його параметри. При описі синтаксису застосовуються наступні позначення:

- вертикальна риса між значеннями (наприклад, absmіddle | baselіne) указує на логічне що виключає АБО, це означає, що треба вибрати тільки один аргумент із запропонованих;

- многоточие усередині тегу (наприклад, <іframe…>) говорить про те, що для тегу існують додаткові параметри;

- многоточие між відкриваючим і закриваючим тегом повідомляє, що усередині контейнера припустимо застосовувати будь-які інші елементи HTML.

Закриваючий тег указує, потрібний закриваючий чи тег ні. Можливі три варіанти.

- Обов'язковий - закриваючий тег обов'язково повинен бути присутнім, інакше це викличе помилку в коді.

- Не обов'язковий - у цьому випадку розроблювач сам вирішує, ставити закриваючий чи тег ні. Якщо тег не закритий, то він автоматично закривається при початку наступного елемента.

- Не потрібно - закриваючий тег ніколи не вказується.

При створенні сайту в коді були використані теги майже всіх категорій наприклад код меню сайту (рис. 2.10) виглядає так:

<table width=100% background= «5.jpg» background= «5.jpg» border=1 >

<tbody><tr><td background= «8.jpg»;

align= «center»><b>Меню сайта</b></td></tr>

<tr><td background= «8.jpg»>

<li class= «m» style= «padding: 3px 0pt 0pt;»><a class= «ma»

href= «Головна.html»>Головна сторінка</a></li>

<li class= «m» style= «padding: 3px 0pt 0pt;»><a class= «m»

href= «О центре.html»>Новини</a></li>

<li class= «m» style= «padding: 3px 0pt 0pt;»><a class= «m»

href= «Дисоб_1.html»>Про дистанційні курси</a></li>

<li class= «m» style= «padding: 3px 0pt 0pt;»><a class= «m»

href= «дк.html»>Курси</a></li>

<li class= «m» style= «padding: 3px 0pt 0pt;»><a class= «m»

href= «Коледж.html»>Коледж</a></li>

<li class= «m» style= «padding: 3px 0pt 0pt;»><a class= «m»

href= «Кон_пр.html»>Заочна форма навчання</a></li>

<li class= «m» style= «padding: 3px 0pt 0pt;»><a class= «m»

href= «Очоб.html»>Денна форма навчання</a></li>

<li class= «m» style= «padding: 3px 0pt 0pt;»><a class= «m»

href= «Фото.html»>Фотогалерея</a></li>

</td></tr>

</table>

Рисунок 2.10. Головне меню

У якому тег <table> служить для створення таблици, а теги <tr> і <td> для створення рядків і стовпців відповідно в цій таблиці. Параметр background визначає загальне тло таблици. Тег а є одним з важливих елементів HTML і призначений для створення посилань. Залежно від присутності параметрів name або href тег A установлює посилання або якір. Якорем називається закладка усередині сторінки, яку можна вказати як мета посилання. При використанні посилання, що вказує на якір, уідбувається перехід до закладки усередині веб-страницы.

Іншим важним елементом є тег SCRІPT. Він призначений для опису скриптов, може містити посилання на програму або її текст певною мовою. Скрипты можуть розташовуватися в зовнішньому файлі й зв'язуватися з будь-яким HTML-документом. Такий підхід дозволяє використати ті самі загальні функції на багатьох веб-страницах і прискорює їхнє завантаження, тому що зовнішній файл кэшируется при першому завантаженні, і скрипт викликається швидше при наступних викликах.

SCRІPT може розташовуватися в заголовку або тілі HTML-документа в необмеженій кількості. У більшості випадків місце розташування скрипта ніяк не позначається на роботу програми. Однак скрипты, які повинні виконуватися в першу чергу, звичайно поміщають у заголовок документа. Наприклад За допомогою тегу скрипт була написана форма входу (мал. 2.11):

Рисунок 2.11. Зовнішній вигляд вхідної форми

<script type= «text/javascript»>

sendFrm549854=function() {

var o=$('#frmLg549854') [0], pos=_uGetOffset(o), o2=$('#blk549854') [0];

document.body.insertBefore (o2, document.body.firstChild);

$(o2).css({top: (pos['top'])+'px', left: (pos['left'])+'px', width:o.offsetWidth+'px', height:o.offsetHeight+'px', display:''}).html ('<div align= «left» style= «padding:5px;»><div class= «myWinLoad»></div></div>');

_uPostForm ('frmLg549854', {type:'POST', url:'/index/sub/', error:function() {

$('#blk549854').html ('<div align= «left» style= «padding:10px; "><div class= «myWinLoadSF» title= «Невозможно выполнить запрос, попробуйте позже»></div></div>');_uWnd.alert ('<div class= «myWinError»>Невозможно

выполнить запрос, попробуйте позже</div>', '', {w:250, h:90, tm:3000, pad:'15px'});

setTimeout(«$('#blk549854').css ('display', 'none');», '1500');});}

</script>

Особлива увага треба приделить розробці контрольного тесту. Його архітектура повинна бути сучасної, простій у реалізації, простій у використанні користувачем. Тому що сайт має три види складності тестів зовсім не обезательно розробляти для кожного тесту свою програмну реалізацію. Можна просто для тестів певної складності підібрати певні питання й усе.

Отже із чого ж складається тест реалізований у нашім сайті (рис. 2.12).

Він складається з десяти питань і декількох варіантів відповідей для кожного питання. Віконця для показу правильності відповіді й виводящего вікна для кінцевого результату тестування.

Для перевірки правильний чи ні обраний варіант відповіді використається спеціально написаний скрипт. Ця програма працює за принципом лічильника. Якщо обрано правильний варіант відповіді то до загального значення додається одиниця. Початкове значення 0. Якщо не правильний то нече не додається. В остаточному підсумку результат виводиться у вікні плаваючого фрейму.

Рисунок 2.12. Зовнішнійй вигляд сторінки з тестом 1 рівня

Ще однією особливістю тесту є функція перевірки кожного питання на правильність. Після виконання завдань користувачеві пропонується глянути у віконце поруч із питанням і якщо відповідь правильний те там +, якщо немає те - (рис. 2.13).

Рисунок 2.13. Фрагмент теста

Програмною мовою цю функцію виконує спеціальний скрипт.

Всі що пов'язане з питаннями, із кнопками варіантів відповідей, із кнопками після фрейму всі зделано за допомогою тегу ІNPUT.

Тег ІNPUT є одним з різнобічних елементів форми й дозволяє створювати різні елементи інтерфейсу й забезпечити взаємодію з користувачем. Головним чином ІNPUT призначений для створення текстових полів, різних кнопок, перемикачів і прапорців. Хоча елемент ІNPUT не потрібно поміщати усередину контейнера FORM, що визначає форму, але якщо уведені користувачем дані повинні бути відправлені на сервер, де їх обробляє CGі-программа, те вказувати FORM обов'язково. Те ж саме обстоит і у випадку обробки даних за допомогою клієнтських додатків, наприклад, скриптов мовою JavaScrіpt.

Так тегу ІNPUT передує тег FORM потрібно знати для чого він потрібний.

Тег FORM установлює форму на веб-странице. Форма призначена для обміну даними між користувачем і сервером. Область застосування форм не обмежена відправленням даних на сервер, за допомогою клієнтських скриптов можна одержати доступ до будь-якого елемента форми, змінювати його й застосовувати за своїм розсудом.

Документ може містити будь-яка кількість форм, але одночасно на сервер може бути відправлена тільки одна форма. Із цієї причини дані форм повинні бути незалежні друг від друга. Коли форма відправляється на сервер, керування даними передається CGі-программе, заданої параметром actіon тегу FORM. Попередньо браузер підготовляє інформацію у вигляді пари «ім'я=значення», де ім'я визначається параметром name тегу ІNPUT, а значення уведене користувачем або встановлено в поле форми за замовчуванням. Вікно висновку результатів (рис. 2.14) складається в основному із фрейму й контролюючого скрипта. У цьому вікні виводиться кількість правильних відповідей і оцінка за них.

Рисунок 2.14. Вікно виводу результатів

Тег ІFRAME створює плаваючий фрейм, що перебуває усередині звичайного документа, він дозволяє завантажувати в область заданих розмірів будь-які інші незалежні документи.

Тег ІFRAME є контейнером, зміст якого ігнорується браузерами, не підтримуючих даний тег. Для таких браузерів можна вказати альтернативний текст, що побачать користувачі. Він повинен розташовуватися між елементами <іframe> і <іframe>.

Список джерел

1. Благовіщенська М.М. і ін. Концепція розвитку міжвузової комплексної програми «Наукомісткі технології утворення» (МКП НТО) на 2001-2005 р. - М.:МГУПП, 2001. - 70 с.

2. Благовіщенська М.М. Концептуальний аналіз стану утворення. - М.:МГУПП, 2001. - 94 с.

3. Бобровников А.Э., Пантелєєв А.В. Система дистанційного тестування з ієрархічною структурою предметного наповнення. // Наукова сесія МИФИ-2001, Москва, 2001: Тез. докл. - М., 2001, тім 12. - с. 112-113.

4. Бобровников А.Э., Пантелєєв А.В. Реалізація кібернетичної технології тестування в системі із фреймово-иерархической структурою предметного наповнення. // Математичні моделі й інформаційні технології. VІ міжнародна конференція, Краснодар. 2001: Тез. докл. - Краснодар, 2001. - с. 200.

5. Бобровников А.Э., Пантелєєв А.В. Принципи формування систем мережного тестування із фреймово-иерархической структурою предметного наповнення. // Сучасні технології в завданнях керування, автоматизації й обробки інформації. X міжнародна конференція, Алушта. 2001: Тез. докл. - М.:МАИ, 2001. - с. 174-175.

6. Васильєв В.И., Демидов, А.Н., Малишев Н.Г., Тягунова Т.Н. Методологічні правила конструювання комп'ютерних тестів. - М.:ВТУ, 2000. - 64 с.

7. Гаврилова Т.А., Хорошевский В.Ф. Бази знань інтелектуальних систем. - Спб.: Питер, 2001. - 384 с.

8. Дьомін М.П., Диканова Л.С., Летова Т.А., Лунева С.Ю., Пименова Т.В,

Недачин Д.А. Розвиток комп'ютерної кібернетичної технології навчання в МАИ. // Прилади й системи. Керування, контроль, діагностика. - 2001, №8. - с. 43-50.

9. Семенов В.В. і ін. Комп'ютерні технології в дистанційному навчанні. - М.:МАИ, 1997. - 64 с.

10. Рамбо, Якобсон, Бутч. UML - довідник. - Спб.: Питер, 2002. - 652 с.

11. Усков В.П. Дистанційне інженерне утворення на базі Інтернет. - М.:Машинобудування, 2000. - 64 с.

12. Фаулер М., Скотт К. UML у короткому викладі. - М.:Мир, 1999. - 196 с.

дистанційний навчання інформаційний тестування

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