Embed Size (px)
Citation preview
ОГЛАВЛЕНИЕВведение.....................................................................................................................2
1 Постановка задачи...........................................................................................3
1.1 Distantion Learning Belarus......................................................................3
1.2 Помощь ученику......................................................................................4
2 Описание структуры........................................................................................6
2.1 Файлы автора...........................................................................................6
2.2 Файлы пользователя..............................................................................12
3 Алгоритмы работы........................................................................................16
3.1 Сбор информации о задаче на сервере................................................16
3.2 Структуры объектов-конструкторов заданий.....................................17
3.3 Прочие объекты.....................................................................................22
4 Технологии использования...........................................................................23
4.1 Переключение задач..............................................................................23
4.2 Другие функции.....................................................................................23
5 DL API.............................................................................................................25
5.1 Внешняя структура................................................................................25
5.2 Внутренняя структура...........................................................................27
6 Результаты апробации...................................................................................29
Заключение...............................................................................................................40
Список источников..................................................................................................41
ВВЕДЕНИЕВ данной дипломной работе описана разработка веб-приложения для
генерации обучающих заданий по программированию "на лету" для сайта
dl.gsu.by
Цель дипломной работы: овладение практическими навыками
программирования веб-приложений.
Задача дипломной работы: формирование практического навыка
программирования веб приложения. Закрепления теоретических знаний и
навыков.
Для выполнения данной цели сначала будет поставлена задача. Для этого
нужно будет разобраться с предметной областью и определить проблему.
Следующим этапом нужно будет описать структуру системы в которой
разрабатывается веб приложение.
После этого следует описать алгоритмы работы разработанного
приложения.
Затем следует описать технологии по которым работает приложение.
Следующим пунктом требуется описать дополнительные разработанные
средства.
После этого подвести итоги, описав результаты апробации приложения.
1 ПОСТАНОВКА ЗАДАЧИ
1.1 Distantion Learning Belarus
Distance Learning Belarus является первым в Беларуси проектом
дистанционного обучения, использующим возможности Internet-технологий.
Практически все этапы учебного процесса автоматизированы, что позволяет
работать с Системой в реальном времени.
Система может работать с двумя типами пользователей: индивидуальный
пользователь и команда. Команда при этом должна состоять из
зарегистрированных пользователей.
Весь учебный материал распределен по учебным курсам. Каждый такой
курс содержит соответствующий теоретический материал и задачи.
Подписавшись на курс, пользователь получает доступ к какой-то минимальной
части теории и соответствующим ей задачам. По мере решения задач
пользователю будут открываться остальные разделы теории и задачи. Изучение
курса завершается после того, как будет изучена вся теория и сдан
необходимый минимум задач.
Отдельный вид курсов - соревнования. Такие курсы, как правило,
включают только задачи и период их "жизни" значительно меньше - обычно
несколько часов. По истечении этого времени подводятся результаты и
определяются победители.
Соревнования могут быть личные и командные (по правилам чемпионата
ACM).
По желанию составителей некоторые курсы могут быть доступны только
индивидуальным ученикам или только командам.
1.2 Помощь ученику
В процессе решения задач, у учащегося рано или поздно возникают
проблемы. Преподаватель не может помочь каждому лично, так как сайт
ориентирован на самостоятельное изучение задачи.
Для того что бы пользователь смог справиться с решением проблемы, ему
предлагается решить несколько задач которые наведут ученика на верное
решение. Но задач придётся сделать очень много. Это требует больших
человеческих ресурсов. Поэтому такие задачи есть не везде.
На рисунке 1.1 изображён пример такой задачи.
Рисунок 1.1 - Пример задачи сделанной для помощи ученику
Эти задачи имели разный вид, на рисунке 1.2 изображён пример задачи на
сопоставление решения с псевдокодом.
Рисунок 1.2 - Сопоставление кода решения с псевдокодом
Такие задачи представляют собой обычные задачи, которые так же
хранятся на сервере и занимают место. Ручное создание таких задач не сможет
покрыть всё на сайте DL. Поэтому их создание нужно автоматизировать, а для
того что бы созданные задачи не занимали место на сервере, генерировать их
нужно прямо в браузере у пользователя.
2 ОПИСАНИЕ СТРУКТУРЫДля полного понимания того как работает разработанная система, следуем
описать программно-файловую структуру описанного приложения.
Для описания программно-файловой структуры будет удобно поделить
роли которые влияют на те или иные файлы в структуре.
2.1 Файлы автора
Задача автора – составлять задачи для системы обучения. Разные виды
задачи составлялись в разное время и для разных целей, поэтому имеют разную
структуру. Тут будет описана структура заданий по программированию.
Все файлы и папки которые относятся к заданиям, а не к коду – лежат в
папке dldata. Внутри папки dldata содержится папка Archives. Внутри этой
папки лежат папки с заданиями.
Название папки с заданием составляется по следующему правилу:
\<taskID>.tsk\
Это значит что задание с taskID равным 450015 будет лежать в папке \
dldata\450015.tsk\ .
Несмотря на расширение .tsk это именно папка а не файл.
<taskID> конкретной задачи узнать очень просто. В шапке каждой задачи он
указан. На рисунке Рисунок 2.3 он выделен прямоугольником.
Рисунок 2.3 - Шапка задания с выделенным <taskID>
В данной папке находятся файлы которые описаны в таблице 2.1.
Таблица 2.1 - Файлы в папке \<taskID>.tsk\
Название файла Описание файла
1 2
1.in…<n>.in n файлов с входными тестовыми данными. Имеют
расширение .in, открываются любым текстовым
редактором. Содержимое этого файла подаётся на
вход программам для тестирования. Один файл –
один тест.
1.out…<n>.out n файлов с выходными данными. Если
тестируемой программе подать на вход
содержимое файла <i>.in, то для успешного
прохождения теста она должна вернуть
содержимое файла <i>.out. Иначе считается что
код написан неверно.
<*>.<расширение языка> В папке (необязательно, но скорее всего) лежат
файлы с авторским решением. Например решение
задачи на pascal лежит в файле solution.pas, это не
строгое правило, файл может называться и по
другому, файл может лежать и во вложенной
папке, файла может вообще не быть.
Единственное что определено точно это то что
данный файл должен иметь расширение файла в
котором пишется код для этого языка
программирования.
Продолжение таблицы Таблица 2.1
1 2
task.cfg В данном файле содержатся
настройки задачи. В рамках этой
работы его содержимое не важно.
\webfiles\ Папка и картинками для задания.
Содержимое данной папки тоже не
важно в рамках данной работы.
Файлы самих условий содержатся в папке tasks, которая находится внутри
папки dldata. Условия там находятся в следующем формате:
<taskID>.htm
В отличие от \<taskID>.tsk\, <taskID>.htm это файл, а не папка. Условие
представляет из себя файл который может быть открыт текстовым редактором
или браузером.
Ещё папка \dldata\ содержит папку \images\. Она предназначена для
картинок в заданиях. К файлам в этой папке всегда открыт доступ из интернета.
Это весь перечень файлов и папок которые содержат информацию о
задачах по программированию.
Есть ещё несколько файлов которые содержат информацию
редактируемую автором.
В папке \dldata\ имеется папка \Courses\. Внутри этой папки лежат другие
папки название которых состоит из номера курса <courseID>. Номер курса
можно найти если на странице со списком курсов, который находится по адресу
http://dl.gsu.by/idesk.asp, посмотреть на адреса ссылок. Список курсов изображён
на рисунке Рисунок 2.4. Ссылка показана на рисунке Рисунок 2.5.
Рисунок 2.4 - Активные курсы
Рисунок 2.5 - Ссылка на курс
Ссылка отображается в большинстве браузеров при наведении курсора,
внизу страницы.
Всё что идёт после “id=” и есть <courseID>. В данном случае <courseID>
равняется 620.
В каждом курсе, в режиме DifferentialStudy2, есть свои ветки. Они тоже
имеют свои идентификаторы. Для этих веток предусмотрена возможность
настройки для разработанного веб-приложения. Внутри папок \<CourseID>\ есть
папки \<dSid>\, где <dSid> и есть этот самый идентификатор ветки.
Определить \dSid\ можно открыв задание в режиме DifferentialStudy2 и
посмотрев в адресную строку. Подробнее показано на рисунке Рисунок 2.6.
Рисунок 2.6 - Адресная строка страницы с открытой задачей в режиме DifferentialStudy2
Всё что идёт после “dSid=” и есть <dSid>.
В этой папке хранится файл который называется DS2Settings.json. Он
представляет из себя JSON файл с настройками курса которые читает
разрабатываемое веб приложение. А конкретно в этом файле хранится опция
hasExplain, если значение этой опции равно false или она отсутствует, то веб
приложение по генерации заданий на лету считает что его использование в этой
ветке запрещено. Оно работает только при условии что опция hasExplain равна
true.
Автору не обязательно создавать эти папки и файл вручную. Он может
изменить содержимое этой переменной прямо с сайта. При наличии прав у
пользователя появляется кнопка «Настройки курса» в нижней панель задания
которая находится по ссылке \taskfooter_ds.jsp. Это показано на рисунке
Рисунок 2.7.
Рисунок 2.7 - Нижняя панель задания
При нажатии на эту кнопку откроется окно в котором можно изменить
разрешение на использование «Не знаю» в ветке курса.
Рисунок 2.8 - Настройка ветки
Сама эта страница с настройкой, хранится на сервере как
explainControl.jsp.
В папке \dldata\ так же создана папка \explainer\. В данной папке хранятся
настройки для «не знаю».
В этой папке находится конфигурационный файл langs.json.
В этом файле содержится список языков доступных для «не знаю».
Данный файл представляет собой ассоциативный массив, в котором ключом
является расширения языка программирования, а значением полное название
языка.
Значения данного файла используются при формировании списка языков
в дереве задач DifferentialStudy2.
На рисунке Рисунок 2.9 показан список языков сгенерированный на
основе этого файла на странице differentialStudyTree2.jsp.
Рисунок 2.9 - Список языков сгенерированный на основе файла langs.json
В этой папке имеется ещё и файл helps.json. В этом файле хранятся
ссылки на помощь по языку. Ссылки хранятся в виде асоциативного массива где
ключ это расширение языка, а значение это ссылка на справку по языку. При
наличии ссылки в данном файле на текущий язык, появляется кнопка «Справка
по языку», в панеле, которую можно увидеть на рисунке Рисунок 2.7
Так же в папке \explainer\ находится папка \pseudo\. В этой папке
находятся файлы с правилами псевдокодирования. Псевдокод представляет
собой команды похожие на команды в языке программирования, только на
понятном языке. Названия этих файлов составляются по следующему
принципу:
<короткое обозначение естественного языка>.<расширение языка
программирования>.json
Например для псевдокода на русском языке с языка программирования
Pascal, файл псевдокода будет называться так: ru.pas.json
Это полный перечень файлов которые предназначены для того что бы
редактироваться автором. Схему этой структуры для автора можно представить
в виде рисунка Рисунок 2.10.
Рисунок 2.10 - Программно-файловая структура автора
2.2 Файлы пользователя
Пользователь тоже хранит собственную информацию на сервере. В
папке \users\, которая находится в папке \dldata\. Находятся папки, название
которых составляется по следующему правилу:
\<userID>\
Где <userID> означает идентификатор пользователя. Этот идентификатор
можно использовать при входе на сайт. Посмотреть свой идентификатор можно
на странице http://dl.gsu.by/idesk.asp. Он показан вверху, в квадратных скобках.
На рисунке Рисунок 2.11 показан мой <userID>. Из рисунка видно что он равен
131846.
Рисунок 2.11 - Мой <userID>
В папке \<userID>\ находится файл settings.json. В этом файле хранятся
настройки конкретного пользователя. Изменяет эти настройки пользователь
через веб-сайт. Например для изменения языка программирования в «Не знаю»,
можно выбрать пункт из меню, которое было изображено выше, на рисунке
Рисунок 2.9. Эта настройка сохранится в параметре «extension» файла
settings.json. А конкретно там сохранится расширение языка программирования.
В этот файл сохраняется ещё и выбранный естественный язык для прохождения
«Не знаю». Изменить этот параметр можно из панели которая изображена на
рисунке Рисунок 2.7, кликнув по кнопке «EN» либо «RU», в зависимости от
выбранного языка. Он сохраняется в параметре lang, и так и сохраняется либо
«EN» либо «RU».
Это все файлы, на которые может влиять пользователь. Остальные файлы
ему доступны только для работы.
Когда пользователь нажмёт кнопку «Не знаю» на панели с рисунка
Рисунок 2.7 то загрузится страница \taskNotKnow.jsp. В данной странице
проверяется наличие прав у пользователя на просмотр заданий «Не знаю»,
после вызывается функция DsTask.getTask(), в которой подготавливается объект
task для конструирования заданий в «Не знаю». В эту страницу подключается
javascript файл NotKnow.js, который и конструирует задачи из этого объекта.
Общую программно-файловую структуру можно представить на рисунке
.
Пользователь
Автор
NotKnow.js
Archives
Courses
dlbroot javascript
cssNotKnow.css
<Номер задачи>.tsk
<номер>.in <номер>.out
Explainer
Users
pseudo
<*>.<Расширение языка>
<язык>.<язык программирования
>.json
<Номер задачи>.htm
tasks
<Номер курса> <Номер ветки>DS2Settings.json
settings.json<Номер пользователя>
dldata
dl/taskNotKnow.jsp
Total CommanderNotepad++
jquery.js
DsTask.java
explainControl.jsp
langs.json
helps.json
SelectProgramLang.jsp
Рисунок 2.12 - Общая программно-файловая структура
3 АЛГОРИТМЫ РАБОТЫ
3.1 Сбор информации о задаче на сервере
При нажатии на кнопку «Не знаю», загружается страница
dl.gsu.by/taskNotKnow.jsp. Это страница вызывает метод DsTask.getTask. В этом
методе производится сбор данных, из которых будут генерироваться задания
для помощи пользователю.
Все полученные данные упаковываются в JSON объект. Структура
данного JSON объекта описан в таблице Таблица 3.2.Таблица 3.2 - Генерируемый на сервере JSON объект (task)
Ключ Тип Описание значения
1 2 3
output Упорядоченный
массив строк
Содержит содержимое
файлов 1.in..<n>.in
input Упорядоченный
массив строк
Содержит содержимое
файлов 1.out..<n>.out
condition Строчный Содержит условие из
файла \dldata\tasks\
<taskID>.htm
solve Строчный Авторское решение задачи
из папки \dldata\Archives\
<taskID>.tsk\
programLang Строчный Расширение языка
программирования
lang Строчный Короткое название
естественного языка ()
Продолжение таблицы Таблица 3.2
1 2 3
pseudo Упорядоченный массив
из упорядоченных
массивов строк
Тут находятся правила
псевдокодирования для
выбранных языков.
Данные берутся из
соответствующего
файла в папке \explainer\
pseudo\
3.2 Структуры объектов-конструкторов заданий
В файле NotKnow.js, имеется ассоциативный массив taskInfo в котором
хранятся объекты-конструкторы заданий для «Не знаю». Ассоциативный
массив в котором в роли ключа выступает название объекта-конструктора, а в
роли значения сам объект.
Данные объекты имеют общий интерфейс, описание которого приведено в
таблице Таблица 3.3.Таблица 3.3 - Интерфейс объекта-конструктора
Название параметра Обязательность
параметра
Описание
1 2 3
create Обязательный Тут хранится функция-
конструктор задачи.
сheck Обязательный Булевая функция,
проверяющая
правильность решения
задачи
Продолжение таблицы Таблица 3.3
1 2 3
params Обязательный Описаны все параметры
и их значения по
умолчанию
destroy Обязательный Содержит функцию-
деструктор задачи
Другие параметры Не обязательны В объекте могут
храниться другие
параметры, если в них
удобнее хранить
функции которые
используются в других
участках кода.
Рассмотрим каждый разработанный объект конструктор подробнее.
inputAnswer:
Конструктор задач, сутью которых является ввод конкретных ответов в
поля.
Помимо обязательных параметров содержит функцию checkAnswerLight,
которая подсвечивает введённые данные в зависимости от правильности ввода.
Так же содержит функцию showAnswer которая показывает правильные ответы
и hideAnswer которая ответы скрывает.
Объект-конструктор содержит параметры описанные в таблице Таблица
3.4.
Таблица 3.4 - Параметры inputAnswer
Название параметра Значение по
умолчанию
Описание
showAnswerButton false Указывает нужно ли
показывать кнопку
просмотра ответов
colSolvedQuestion
s
0 Количество решённых
заранее задач
answerLight true Подсветка ввода ответов
answerSource task.output Источник ответов
(массив), по умолчанию
берутся из объекта task,
поля output
questionSource task.input, Источник вопросов
(массив)
sample false Указывается нужно ли
окно с образцом
sampleSource Содержимое образца
numeration true Указывает нужно ли
нумеровать тесты
taskLimit 1000 Максимальное число
тестов
header {
RU: "Введите ответы
вручную",
EN: "Manual input"
}
Заголовок, на русском и
на английском
sortStrings:
Данный объект-конструктор ориентирован на сортировку строк
перетаскиванием.
Данный объект, помимо обязательных параметров интерфейса содержит
функцию codePool, данная функция нужна что бы заполнить блок кода,
строками разбитыми в случайном порядке. А так же функции showAnswer и
hideAnswer соответственно.
Параметры объекта содержатся в таблице ЧЧЧ.Таблица 3.5 - Параметры sortStrings
Название параметра Значение по
умолчанию
Описание
1 2 3
showAnswerButton false Указывает нужно ли
показывать кнопку
ответа
header {
RU: "Перетащите
строки так что бы
получился рабочий код",
EN: "Drag the lines to
solve the task"
}
Заголовок, на русском и
на английском
sample false Указывается нужно ли
окно с образцом
sampleSource Содержимое образца
stringsSource task.solve Источник строк для
заполнения
Продолжение таблицы Таблица 3.5
1 2 3
answerLight true Указывает нужна ли
подсветка строк которые
стоят на своих местах
writeCode:
Данный объект-конструктор предназначен для ввода кода и отправки его
на сервер. Отправляет код только в случае его полностью совпадения с
указанным источником ответа.
Не имеет необязательных параметров интерфейса.
Параметры конструктора описаны в таблице Таблица 3.6.Таблица 3.6 - Параметры writeCode
Название параметра Значение по
умолчанию
Описание
header {
RU: "Отправка кода",
EN: "Submit code"
}
Заголовок, на русском и
на английском
answerSource task.solve Источник правильного
ответа
lastTask:
Технический объект конструктор. Нужен для того что бы уничтожить
интерфейс «Не знаю» и оставить только условие задачи. Не содержит
деструктора и имеет пустой объект в качестве параметра.
3.3 Прочие объекты
В коде приложения имеется довольно важный объект. Данный объект
определяет в каком порядке и какими параметрами объект-конструктор будет
вызываться. Данный объект называется tree и представляет из себя
упорядоченный массив со структурой описанной в таблице ЧЧЧТаблица 3.7 - Структура объекта tree
Название параметра Обязательность
параметра
Описание
name Обязательный параметр Название задачи
params Обязательный параметр Параметры
explain Необязательный
параметр
Внутри этого параметра
находится
упорядоченный массив
такой же структуры, как
и объект tree. Задания
отсюда вызываются при
нажатии кнопки «Не
знаю»
currentTask:
Хранит копию объекта-конструктора, но вместо параметров по
умолчанию, в него записаны параметры из текущего tree.
current:
Хранит текущее положение в задании. Представляет из себя
упорядоченный массив динамического размера. В нулевом индексе массива
хранится номер задачи из tree. Далее хранится номер задачи внутри этого
объекта, заходя вглубь, в параметр explain.
4 ТЕХНОЛОГИИ ИСПОЛЬЗОВАНИЯ
4.1 Переключение задач
Процесс конструирования задания происходит следующим образом:
После того как весь скрипт загрузился в браузер, вызывается функция
createTask().
Данная функция вычисляет на какой позиции Функция createTask на
какой позиции дерева tree сейчас стоит очередь. Это определяется из объекта
current.
После того как позиция определена, создаёт из соответствующей позиции
с помощью объекта конструктора и параметров из объекта tree, задание.
Если пользователь нажимает «Проверить», запускается функция check
текущего задания. Если она возвращает true, то срабатывает деструктор задания,
функция next(), которая смещает current на следующую задачу, и функция
createTask() вызывается по новой. Если же функция check() возвращает false,
значит задача не решена, пользователь увидит окно с ошибкой и вернётся к
решению задачи.
Если же пользователь нажал «Не знаю», вызовется функция explainTask().
Она вызовет деструктор этой задачи и сместит current «в глубину».
Если пользователь нажал пропустить, то сразу сработает функция next() и
пользователь увидит следующую задачу.
4.2 Другие функции
В скрипте имеются и другие функции, удобнее их будет перечислить в
таблице ЧЧЧ.
Таблица 4.8 - Другие функции скрипта
Название функции Назначение
1 2
getButtonText Возвращает объект с названиями
кнопок на текущем естественном
языке
setDefaultCompiler Устанавливает компилятор по
умолчанию, в зависимости от
выбранного языка программирования
postProcessing Обрабатывает результат который
вернул сервер. Удаляет двойные
переводы строк, заменяет null на
пустые значения
getPseudocode Заменяет слова в тексте на слова из
словаря псевдокодирования
showSample Показывает окно с примером
getCols Подсчитывает максимальное
количество символов в строках
getRows Подсчитывает количество строк
replaceNULL Заменяет значения NULL на ‘’
resizer Подгоняет размеры интерфейса
5 DL APIAPI - это набор функций сервера для вызова их из внешних приложений.
Система DL давно нуждалась в этом наборе. Для того что бы вызвать
некую функцию на сервере, сохранить значение на сервере, раньше
применялось создание jsp страниц которые выполняли свою маленькую
функцию и более не использовались. Это не очень удобно потому что они
накапливались с годами и более не использовались повторно. Поэтому было
решено создать API.
5.1 Внешняя структура
Запрос
Структура методов была позаимствована у vk.com. На определённую
страницу отсылается GET запрос, в ответ страница возвращает JSON объект.
Запросы на сервер выглядят так:
Рассмотрим на примере существующего запроса который меняет язык
пользователя на русский.
dl.gsu.by/api/User.setUserSetting?key=lang&value=ru
Где
dl.gsu.by/api/ - сервлет который обрабатывает запрос.
User - объект содержащий нужные методы.
setUserSettings - метод который осуществляет установку нужных
значений в настройки пользователя.
key=lang&value=ru - параметры передаваемые в метод.
В упрощённом виде это можно изобразить так:
dl.gsu.by/api/Объект.Метод?Ключ1=значение1&КлючN=значениеN
Ответ
Ответ возвращается в формате JSON, этот формат удобно обрабатывать в
браузере так как это готовый javascript объект.
Возможны три варианта ответов:
1) Когда сервер правильно обработал запрос:
JSON ответ:
{
"response":1
}
Данные с сервера помещаются в поле response. Если ответ не требуется то
в response помещается 1 как знак того что функция успешно выполнена.
2) Когда запрос выполнился с некритическими ошибками:
JSON ответ:
{
"response":1,
"warning":
[
"Сообщение о не критичной ошибке"
]
}
Если в работе метода произошла ошибка, которая вряд ли имеет
критическое значение для вызывающего (Например: не найден файл с условием
на русском языке и поэтому послан файл условия на котором явно не указан
язык). Но об этом нужно уведомить вызывающего что бы он для себя решил
насколько это критично для него. Сообщения о таких ошибках помещаются в
массиве, так как их может возникнуть несколько. Результат, как и в прошлом
примере, помещается в response.
Когда в работе запроса возникла критическая ошибка:
JSON ответ:
{
"error":"Сообщение о критической ошибке"
}
Если во время выполнения метода произошла ошибка, из-за которой
выполнение метода невозможно (Например: отсутствие у пользователя прав на
выполнение этого метода), то ответ состоит из поля error в котором хранится
сообщение об ошибке. Поле error единственное, так как метод прекращает свою
работу сразу же после ошибки.
5.2 Внутренняя структура
DL API работает на основе Reflection API или другими словами
рефлексии.
Рефлексия (от позднелат. reflexio - обращение назад) - это механизм
исследования данных о программе во время её выполнения. Рефлексия
позволяет исследовать информацию о полях, методах и конструкторах классов.
Можно также выполнять операции над полями и методами которые
исследуются. Рефлексия в Java осуществляется с помощью Java Reflection API.
Этот интерфейс API состоит из классов пакетов java.lang и java.lang.reflect. С
помощью интерфейса Java Reflection API можно делать следующее:
Определить класс объекта.
Получить информацию о модификаторах класса, полях, методах,
конструкторах и суперклассах.
Выяснить, какие константы и методы принадлежат интерфейсу.
Создать экземпляр класса, имя которого неизвестно до момента
выполнения программы.
Получить и установить значение свойства объекта.
Вызвать метод объекта.
Создать новый массив, размер и тип компонентов которого
неизвестны до момента выполнения программ.
То есть он позволяет создавать объекты и вызывать методы которые не
были описаны в коде.
Таким образом, сервлет по адресу\api\ получает запросы, парсит из и
создаёт из них объекты в которых вызывает запрошенные методы.
Эти объекты и методы описаны в классе API.
Данная разработка была применена при смене языка без перезагрузки
страницы. Так как довольно просто послать get запрос через AJAX.
6 РЕЗУЛЬТАТЫ АПРОБАЦИИПример задания «Решение вручную» изображён на рисунке Рисунок 6.13,
предлагается вручную вычислить ответ на задачу для каждого теста. Первый
тест заполнен заранее, что бы пользователю было понятно, как решать задачу.
Рисунок 6.13 - Тип задачи "Решение вручную"
В задании есть подсветка, которая подсказывает пользователю, правильно
ли он вводит решение. Как это работает, видно на рисунках ниже. Когда
пользователь начинает вводить ответ верно – цвет шрифта зелёный. Это
показано на рисунке Рисунок 6.14.
Рисунок 6.14 - Знак "-", зелёного цвета в поле для ввода
Когда введённое значение полностью совпадает с ответом, в дополнение к
зелёному шрифту, цвет фона меняется на зелёный. На рисунке Рисунок 6.15
изображён пример.
Рисунок 6.15 - Фон поля для ввода сменился на зелёный
Если пользователь вводит неверные данные, то шрифт и фон меняются на
красный. Это изображено на рисунке Рисунок 6.16.
Рисунок 6.16 - Фон поля для ввода и цвет шрифта сменился на красный
Если нажать на кнопку «Не знаю», откроется эта же задача, но с функцией
«Посмотреть». Эта функция позволяет пользователю посмотреть правильные
ответы. При этом во время просмотра нельзя отправить ответы. После скрытия
ответов, решение нужно ввести заново. На рисунке Рисунок 6.17 изображена
панель кнопок во время показа ответов. Из рисунка видно, что кнопка
«Проверить» заблокирована.
Рисунок 6.17 - Панель кнопок во время показа ответов
Следующее задание «Составить правильную идею», изображено на
рисунке Рисунок 6.18.
Рисунок 6.18 - Задание "Составить правильную идею"
В этом задании предлагается перетащить строки мышкой, что бы
получить верный алгоритм. В этом задании используется словарь псевдокода,
который заменяет слова в языке программирования, на слова на языке
пользователя.
Строки, которые находятся на своих местах – подсвечиваются зелёным.
Цвет поля для кода зависит от выбранного языка, что бы он был более
похожим на цвет IDE которая наиболее популярна для этого языка. Если для
паскаля это жёлтые буквы на синем фоне, то для C++ это чёрные буквы на
белом фоне. Это изображено на рисунке Рисунок 6.19.
Рисунок 6.19 - Задание "Составить правильную идею" для языка C++
В данном задании доступно отображение правильных ответов.
Следующее задание «Набрать программу по алгоритму», изображено на
рисунке Рисунок 6.20.
Рисунок 6.20 - Задание "Набрать программу по алгоритму"
В этом задании предлагается ввести код программы, используя в качестве
подсказки псевдокод. Присутствует подсветка верного ввода и показ
правильных ответов.
Если нажать «Не знаю», то отобразится задание «Сопоставить идею и
решение». Это задание изображено на рисунке Рисунок 6.21.
Рисунок 6.21 - Задание "Сопоставить идею и решение"
В нём предлагается использовать псевдокод как подсказку и составить
верное решение перетаскиванием строк.
После этого задания идёт «Составить правильное решение», оно
изображено на рисунке Рисунок 6.22.
Рисунок 6.22 - Задание "Составить правильное решение"
В этом задании нужно составить правильное решение, перетаскивая
строки.
Следующее задание «Построчный ввод с подсказкой», в нём нужно
ввести все строки из подсказки в область ввода. Задание изображено на рисунке
Рисунок 6.23.
Рисунок 6.23 - Задание "Построчный ввод с подсказкой"
В следующем задании предлагается сделать тоже самое, но в качестве
подсказки теперь псевдокод. Задание «Построчный код с подсказкой-
переводом» изображено на рисунке Рисунок 6.24.
Рисунок 6.24 - Задание "Построчный ввод с подсказкой-переводом"
После прохождения предыдущего задания, появится задание
«Построчный ввод», изображённое на рисунке Рисунок 6.25. В нём
предлагается ввести код без подсказок.
Рисунок 6.25 - Задание "Построчный ввод"
После этого задания вас вернёт к заданию «Набрать программу по
алгоритму», после прохождения которой, следует задание «Напишите
программу». Задание изображено на рисунке Рисунок 6.26.
Рисунок 6.26 - Задание "Напишите программу"
В этом задании нет подсветки правильного ввода и подсказок, ученик
вводит ответ, только ориентируясь на условие задачи и на то, что вспомнит из
предыдущих заданий.
В следующем задании код вводится в поле похожее на поле из IDE. Тут
присутствует подсветка синтаксиса. Код из этой задачи отправляется на
тестирование на сервер. Задача «Отправка кода» изображена на рисунке
Рисунок 6.27.
Рисунок 6.27 - Задание "Отправка кода"
Таким образом, было сконструировано программное средство
позволяющее генерировать задания, которые подводят ученика к правильному
ответу. Интерфейс был выполнен в общей стилистике сайта и удобен в
использовании.
ЗАКЛЮЧЕНИЕВ данной дипломной работе было разработано веб-приложение для
генерации обучающих заданий по программированию "на лету" для сайта
dl.gsu.by
В конце данной работы были подведены итоги апробации разработанного
приложения, был описан его интерфейс и функционал.
Перед этим была описана разработанная технология DL API. Была
описана её внешняя и внутренняя структура.
До этого были описаны технологии работы веб приложения. Описаны
функции и задачи которые они выполняют. Технические моменты и подходы к
реализации.
Для этого понадобилось описать алгоритмы работы системы, как работала
архитектура сервера и разработанного скрипта. Описан обмен данными между
сервером и клиентской частью. Описано взаимодействие с сервером и
пользователем.
Перед этим была описана структура системы в которой разрабатывалось
веб-приложение. Были описаны данные, где они хранятся и для кого они
предназначены. Это было сделано для более лёгкого входа новых пользователей
в курс дела.
В самом начале была вводная часть. Была описана проблема и общий
подход к её решению. Была поставлена задача и представлена предметная
область.
Таким образом, можно считать задачу данной дипломной работы -
формирование практического навыка программирования веб приложения,
закрепления теоретических знаний и навыков, полностью выполненной.
Следовательно цель дипломной работы которой является овладение
практическими навыками программирования веб-приложений можно считать
успешно достигнутой.
СПИСОК ИСТОЧНИКОВ1. Distance Learning Belarus [Электронный ресурс] /2017 — Режим доступа:
http//www.dl.gsu.by, свободный. – Заголовок с экрана. – Русский язык, английский.
2. Эккель Б. Философия JAVA/Б.Эккель, Питер, 2003.– 970с.3. Тейт Б. Горький вкус Java/Б. Тейт Питер, 2003. - 336 с.4. Java Network Programming/ Elliotte Rusty Harold (O’Reilly, 1997). – 632 c.5. Б. Фок "Internet с самого начала" /Фок Б.- Пер. с англ. - СПб.: Питер, 19966. Матиас Нольден "Знакомьтесь: World-Wide Web"/ Матиас Нольден - Пер. с
нем. - Киев, 19967. Ильдар Хабибуллин “Создание распределенных приложений на Java
2”/Ильдар Хабибулин Санкт-Петербург «БХВ-Петербург» 2002 г.
