Разработка веб-приложения для измерения и визуализации обученности на основе ABC-способностей

Ниджрес М.Т.

УДК 004.942, 004.91 М. Т. Ниджрес

РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ ДЛЯ ИЗМЕРЕНИЯ И ВИЗУАЛИЗАЦИИ ОБУЧЕННОСТИ НА ОСНОВЕ ABC-СПОСОБНОСТЕЙ

Ключевые слова: ABC-способности, измерение уровня обученности, визуализация уровня обученности, компетенции.

В работе разработано веб-приложение, имеющее интуитивно понятный интерфейс, позволяющий визуализировать уровень обученности на основе АВС - способностей. При помощи данного приложения можно проследить и корректировать процесс обучения. Для разработки веб-приложения были использованы язык разметки HTML (Hyper Text Markup Language), каскадные таблицы стилей CSS (Cascading Style Sheets), языки программирования JavaScript и PHP.

Keywords: ABC-capacity, measurement of the level of training, visualization of the level of training, competence.

The web application has been developed an intuitive interface that allows to visualize the level of training on the basis of ABC - ability. You can trace and adjust the learning process of this application.For the development of web applications have been used markup language HTML (Hyper Text Markup Language), cascading styles CSS (Cascading Style Sheets), JavaScript language and PHP programming.

Введение

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

Методология и/или теоретическая часть

Одним из наиболее современных способов является мониторинг качества по АВС - способностям. В статье мы опираемся на определение мониторинга качества по АВС-способностям, которые определены у Н.К.Нуриева и Л.Н.Журбенко [7]. По ним компетенция (как способность решать любые проблемы) в любой области инвариантно поддерживается триадой способностей <А, В, С> определенного уровня развития, т.е. АВС-способностями и знаниями, как вспомогательными средствами.

Здесь А - формализационные способности, В -конструктивные способности, С - исполнительские способности.

Представим способности в виде векторов (Fj(A), F2(B), Fb(C), F4(A, B).FS(A, C), F6(B, C), F7(A, B, C)) [8].

В первом приближении можно взять следующие значения функций: Fj(A)=A Fz^^, F3(C)=Q F4(A,B)=А+В, F5(A,C)=А+С, F6(B,C)=В+С, F7(A,B,C)=А+В+С. Таким образом, мы имеем первые три блока как базисные, следующие три блока - бинарные, и последний - полный блок (рис. 1). По этой модели:

Достижение познавательно-информационного I C || C I

критерия

Достижение эмоционально-ценностного критерия IAIIAI

Достижение конструктивного критерия =1 B 1

I B|

Достижение потребностно-мотивационного

A2 ^ С 2 критерия С

Достижение деятельностного

критерия

Vb2+с 2

Достижение критерия самореализации =

Va2+в2

Достижение моделирующего критерия =

va2+в2 + с 2

Рис. 1 - Пространственная модель

Для представления семи критериев, которые были определены выше, получается следующие семь блоков

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

определят ограниченность решения поставленной задачи. Данный блок изоморфен С способностям.

Эмоционально-ценностный: осознание ценности в профессиональной деятельности; умение адекватно оценивать собственные достижения в профессиональной деятельности и свой уровень. Этот блок изоморфен А - способностям.

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

Потребностно-мотивационный: постепенно возрастающая потребность в развитии и саморазвитии; нацеленность на достижение высокого уровня. Данный блок сложный и является бинарной композицией базовых ЗМПКЛ, поддерживается формали-зационными А - способностями и глубокими исполнительскими С - способностями.

Моделирующий блок связан с преобразовательной деятельностью, предполагает: исследовательское мышление (умение анализировать информационные ресурсы и выявлять их возможности в решении профессиональных задач, проявлять креативность, гибкость, критичность, системность, мобильность, оперативность мышления в ситуациях поиска, преобразования, трансформации необходимой информации; предвидение и прогнозирование, выражающиеся в умении соотносить цель деятельности с реальными возможностями; сано-генное мышление (способность не боясь ошибок и просчетов осуществлять свои рассуждения) Весь данный блок является полной композицией всех способностей, то есть формализационными, конструктивными и исполнительскими, (поддерживается А, В, С способностями).

Блок самореализации включает: умение соотносить свою деятельность, свой стиль, уровень с профессиональным опытом; умение определять собственные достоинства и недостатки; умение определять резервы дальнейшего развития; умение целенаправленно регулировать развитие. Это означает, что достигнуто в определенной мере владение А - способностями и В - способностями.

Деятельностный блок: умения и навыки применения теоретических знаний на практике (точность, логичность, грамотность в постановке и решении профессиональных задач), самостоятельность, целенаправленность и систематическое саморазвитие. Представляет собой композицию В -способностей и С - способностей. Реализация (практическая часть)

Для разработки веб-приложения мы использовали язык разметки HTML (Hyper Text MarkupLanguage), каскадные таблицы стилей CSS (Cascading Style Sheets), языки программирования JavaScript и PHP, программу Денвер1, включающую в себя необходимые нам web-сервер Apache и ин-

11 Денвер - локальный сервер - http://denwer.ru

терпретатор PHP, текстовый редактор Notepad++[1-5].

Index.php - главная страница сайта MONO_load.php - страница с формами для загрузки двух текстовых файлов с баллами и одного -с критериями оценок

DUAL_load.php - страница с формами для загрузки четырех текстовых файлов с баллами и одного - с критериями оценок

TRIO_load.php - страница с формами для загрузки шести текстовых файлов с баллами и одного - с критериями оценок

MONO_diagramm.php - страница с обработкой трех текстовых файлов и построением диаграммы

DUAL_diagramm.php - страница с обработкой пяти текстовых файлов и построением диаграммы

TRIO_diagramm.php - страница с обработкой семи текстовых файлов и построением диаграммы

Style.css - файл со всеми стилями, применяемыми на страницах веб-приложения

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

HTML - язык тегов. Теги описывают всю структуру HTML - документа. Все теги оформляются угловыми скобками <>, а располагаются в документе в соответствии с правилами разметки. Большинство тегов - парные, они состоят из начального (показывает где начинается элемент), и закрывающего (показывает, где заканчивается элемент) тегов.

Весь текст HTML - документа расположен между тегами <html> и </html>. HTML - документ состоит из двух разделов - заголовка (между тегами <head> и </head>) и содержательной ча-сти(между тегами <body> и </body>)

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

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

В <BODY> мы используем блоки в следующей иерархии:

<div class="wrapper"> <div class="header"> <div class="content"> <div class="left"> <div class="article"> <div class="right"> <div class="right_menu"> <div class="footer"> Основным блоком здесь является wrapper. С помощью него мы уменьшим ширину рабочей ча-

сти веб-приложения до 1000 пикселей, и зададим в качестве фона белый цвет. Пропишем это в файле style.css

wrapper{ width: 1000px; background: #ffffff;

margin: 0 auto; }

В блоке wrapper находится еще три внутренних блока- header, content и footer.

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

В блоке footer, который тоже является внутренним блоку wrapper, мы поместим самую нижнюю часть нашей страницы.

<divclass="footer">

</div>

Внутренним блоком wrapper является также блок content. В блоке content располагается основная часть веб-приложения: изменяемый блок left и статичный блок ссылок right. Получается, блоки left и right являются внутренними блоками для content.

Но у блока right тоже есть свой внутренний блок - right_menu - в нем располагаются 3 гиперссылки.

<a href="MONO_load.php">A, B, C диаграммьК^

<a href="DUAL_load.php">AB, AC, BC -диаграммыК^

<a href="TRIO_load.php">ABC -диаграмма</a> </div> </div>

И блоку right, и блоку right_menu прописываем стили в style.css.

right{

width: 200px; float: right; padding-top: 20px;

}

.right_menua{ display: block; text-align: center; margin: 5px 0;

}

Эти блоки будут почти идентичны для всех PHP файлов, что мы создали.

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

В файле index.php в блоке left находятся ссылки и краткое описание диаграмм по АВС способностям

В файлах MONO_load.php, DUAL_load.php, TRIO_load.php в блоке left располагаются формы и кнопка загрузки необходимых документов.

В файлах MONO_diagramm.php, DU-AL_diagramm.php, TRIO_diagramm.php в блоке left выводится построенная диаграмма.

Index.php

В блоке <divclass="left"> на странице index.php мы вставили 3 отдельных блока <divclass="article">c картинкой, кратким текстом и ссылкой на страницу выбора и загрузки пользователем необходимых текстовых файлов.

<imgsrc="img/mono.jpg" />

<a class="title"

href="MONO_load.php"><h2></h2></a>

</div>

MONO_load.php

В блоке left на странице MONO_load.php вставим форму загрузки трех файлов и кнопку "Загрузить".

<imgsrc="img/mono.jpg" /> <br><br><br><br><br><br><br><br><br> <FORM ENCTYPE="multipart/form-data" ACTION="MONO_diagramm.php" METH-OD=POST>

Оценки 1-й группы<br><INPUT

NAME="myfile 1" TYPE="file"><br><br> Оценки 2-й группы<br><INPUT

NAME="myfile2" TYPE="file"><br><br> Параметрыоценок<br><INPUT NAME="myfile3" TYPE="file"><br><br> <INPUT TYPE="submit" VAL-

иЕ="Загрузить"> <div style="clear:both;"></div>

</div>

DUAL_load.php

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

В блоке left на странице DUAL_load.php вставим форму загрузки пяти файлов и кнопку "Загрузить".

<imgsrc="img/dual.png" /> <br><br><br><br><br><br><br><br><br>

Оценки A-критерия 1-й группы<Ьг><1КРиТ NAME="myfile 1" TYPE="file"><br><br> Оценки А-критерия 2-й группы^^хЮТиГ NAME="myfile2" TYPE="file"><br><br> Оценки B-критерия 1-й группы^гХЮТШ' NAME="myfile3" TYPE="file"><br><br> Оценки B-критерия 2-й rpynnbi<br><INPUT NAME="myfile4" TYPE="file"><br><br> Параметрыоценок<br><INPUT NAME="myfile5" TYPE="file"><br><br> <INPUT TYPE="submit" VAL-UE="Загрyзить"> <div style="clear:both;"></div> </div>

TRIO_load.php В блоке left на странице TRIO_load.php вставим форму загрузки семи файлов и кнопку "Загрузить".

<imgsrc="img/trio.jpg" /> <br><br><br><br><br><br><br><br><br> <FORM ENCTYPE-"multipart/form-data" ACTION="TRIO_diagramm.php" METHOD-POST>

Оценки A-критерия 1-й группы^^хЮТиГ NAME="myfile 1" TYPE="file"><br><br> Оценки А-критерия 2-й группы^гхЮТШ' NAME="myfile2" TYPE="file"><br><br> Оценки B-критерия 1-й группы^гхЮТШ' NAME="myfile3" TYPE="file"><br><br> Оценки B-критерия 2-й группы^^^^^ NAME="myfile4" TYPE="file"><br><br> Оценки C-критерия 1-й грyппы<br><INPUT NAME="myfile5" TYPE="file"><br><br> Оценки C-критерия 2-й грyппы<br><INPUT NAME="myfile6" TYPE="file"><br><br> Параметрыоценок<br><INPUT NAME="myfile7" TYPE="file"><br><br> <INPUT TYPE="submit" VAL-UE="Загрyзить"> <div style="clear:both;"></div> </div>

MONO_diagramm.php После выбор файлов и нажатия кнопки "Загрузить", пользователя перекидывает на один из _diagramm.php файлов.

Как и в других файлах, основная изменяемая часть - блок left

Сначала мы записываем в переменные имена загруженных на сервер файлов, далее - записываем элементы этих файлов в массив.

if(isset($_FILES["myfile1"])AND($_FILES["myfile

2"])AND($_FILES["myfile3"])) {

$myfile1 = $_FILES [ "myfile 1"] ["tmp_name"];

$ту!11е2 = $_FILES["myffle2"]["tmp_name"];

$ту!11е3 = $_FILES["myfile3"] ['Чтр_ште"];

$error_flag1 = $_FILES["myfiЫ"]["erшr"]; $error_flag2 = $_FILEs["myШe2"]["erшr"]; $еггаг_1^3 = $_FILEs["myШe3"]["erшr"];

if(($error_flag1 == 0)&&($error_flag2 ==

0)&&($error_flag3 == 0 )) {

$Ше = fopen($myfile1, "Г"); $file_array1 = file($myfile1); fdose($ffle);

$file = fopen($myfile2, "Г"); $file_aггay2 = file($myfile2); fdose($ffle);

$file = fopen($myfile3, "Г"); $file_aггay3 = file($myfile3);

fdose($ffle); }

}

У нас есть 3 массива: в первом находятся оценки первой группы, во втором массиве - оценки второй группы, и в третьем - параметры оценок. Теперь для первой и второй групп нам необходимо посчитать, сколько и каких оценок было ими получено. Заводим отдельные переменные для подсчета количества полученных оценок (к примеру, $Р1 -посредственно, $Ш - удовлетворительно, $Н1 -хорошо, $ОН1 - очень хорошо, $01 - отлично).

$Р1=0;

$и1=0;

$Н1=0;

$0Н1=0;

$01=0;

for($i=0;$i<count($ffle_array1);$i++){ if ($file_array1[$i]<$file_array3 [0]) {$Р1++;} if (($ffle_arrayЦ$i]>=$ffle_array3 [0]) && ($file_array1[$i]<$file_array3[1])) {$Ш++;} if (($file_array1[$i]>=$file_array3[1]) && ($file_array 1 [$i]<$file_array3 [2])) {$Н1++;} if (($ffle_arrayЦ$i]>=$ffle_array3 [2]) && ($file_array 1 [$i]<$file_array3 [3])) {$0Н1++;}

if ($file_array1[$i]>=$file_array3 [3]) {$01++;} }

$P2=0;

$U2=0;

$H2=0;

$OH2=0;

$O2-0;

for($i=0;$i<count($file_array2);$i++){ if ($file_array2 [$i] <$file_array3 [0]) {$P2++;} if (($file_array2[$i]>=$file_array3 [0]) && ($file_array2[$i]<$file_array3 [1])) {$U2++;}

if (($file_array2 [$i]>=$file_array3 [1]) && ($file_array2[$i]<$file_array3 [2])) {$H2++;} if (($file_array2[$i]>=$file_array3 [2]) && ($file_array2 [$i]<$file_array3 [3])) {$OH2++;}

if ($file_array2[$i]>=$file_array3 [3]) {$O2++;}

}

Рис. 2 - Интерактивная диаграмма

Далее, в цикле, проверяем условие попадания этой оценки в один из промежутков массива с параметрами оценок и считаем количество оценок.

Теперь у нас есть количества всех оценок по каждой группе.

В файлах DUAL_diagramm.php и TRIO_diagramm.php мы используем тот же алгоритм, что и в MONO_diagramm.

Для построения графика мы используем сервис Google Charts, который позволяет создавать интерактивные диаграммы (рис. 2).

Диаграмма способностей

Поер Удел Хор Очень хор Отл

Группы

Рис. 3 - Сравнительная диаграмма

Анализ и оценка разработки

Для работы в созданном веб-приложении необходимы показатели 2-х сравниваемых групп по А, В и С способностям в виде отдельных текстовых файлов. Веб-сервис предоставляет возможность найти эти документы в любом месте файловой системы. Одновременно с вводом данных исследования необходимо загрузить и параметры оценок по каждому из показателей (рис. 4).

К примеру, текстовый документ параметров оценок может выглядеть следующим образом.

Здесь подразумеваются следующие оценки: от 0 до 19 - посредственно; от 20 до 39 - удовлетворительно; от 40 до 59 - хорошо; от 60 до 79 - очень хорошо; от 80 - отлично.

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

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

Нажимая кнопку загрузить, программа автоматически строит сравнительную диаграмму 2-х групп по выбранным нами критериям (рис 3).

Если мы хотим по каждому столбцу графика получить цифровую информацию, нам достаточно навести на него курсор

Файл Правка Формат Вид Справка 20 4-0 60 80

Рис. 4 - Загрузка показателей

Заключение

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

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

Литература

1. Прохоренок Н.А. HTML, JavaScript, PHP и MySQL. Джентельменский набор Web-мастера. - 3-е изд., пере-раб. и доп. - СПб: БХВ-Петербург, 2012. - 912 с.

2. Макфарланд Д. JavaScript: Подробное руководство / Д.Макфарланд ; [пер. с англ., ред. Ф.М. Елистратова]. М.: Эксмо, 2009. - 608 с. : ил. - (Компьютер на 100%)

3. HTML справочник [электронный ресурс] - URL: http://html.manual.ru/

4. PHP: Руководство по PHP - Manual.[электронный ресурс] - URL: http://php.net/

5. Денвер - локальный сервер [электронный ресурс] -URL: http://www.denwer.ru/

6. Нуриев Н.К., Старыгина С.Д. «Формирование компетентного специалиста на основе синергетического подхода», Международный электронный журнал "Образовательные технологии и общество (Education Technology & Society)" (http://ifets.ieee.org/russian/periodical/journal.html). 10:3, 19

7. Нуриев Н.К., Журбенко Л.Н., Старыгина С.Д. «Ключевые способности поддержки деятельности и формали-

зованные условия потенциальной компетентности специалиста». Вестник Казанского технологического университета, 5(2007), 199-205 8. Галимянов А.Ф, Нуриев Н.К., Исмагилова К.К. «Повышение математической компетентности студентов гуманитарных специальностей средствами информационных технологий и квалиметрия математической культуры»,Международный электронный журнал "Образовательные технологии и общество (EducationTechnology&Society) "

(http://ifets.ieee.org/russian/periodical/journal.html)- 14:4, 425-447

9. Нуриев Н.К. «Диагностика уровня конкурентоспособности специалиста»Международный электронный журнал "Образовательные технологии и общество (EducationTechnology&Society) "8:1, 201-204

10. Галимянов А.Ф., Исмагилова К.К., Старыгина С.Д. «Метрики начальной культуры программирования студентов», Международный электронный журнал "Образовательные технологии и общество (EducationTechnology&Society) " 17:4, 645-654.

11. Notepad++ download [электронный ресурс] - URL: www.notepad-plus-plus.org

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Ниджрес М.Т.

Похожие темы научных работ по компьютерным и информационным наукам , автор научной работы — Ниджрес М.Т.

Текст научной работы на тему «Разработка веб-приложения для измерения и визуализации обученности на основе ABC-способностей»