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

Содержание

Содержание

Введение. Цели и задачи

Теория пределов

Дифференциальное исчисление

Обзор программного обеспечения

Фреймворк Django

AJAX

Разработка модели

Рекурсивные модели

Модель дисциплин и тем

Работа программы

Описание разделов

Описание задач

Редактирование тем

Редактирование задач

Заключение

Список литературы



Введение. Цели и задачи

С незапамятных времен человек передавал свои знания об окружающим мире другим людям. Обучение следовало за человечеством через века, изменяясь и открывая новые горизонты. В современном веке огромное место в жизни людей заняли информационные технологи. Довольно сложно представить свою жизнь без компьютеров, мобильных телефонов и других достижений последних десятилетий, однако и сейчас современные технологии все глубже и глубже оседают в нашем сознании и помогают нам достичь большего в проблемах человеческой жизнедеятельности. Безусловно, одной из таких проблем является обучение.

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

В качестве примера интерактивной системы обучения будет правильно рассмотреть Национальный Открытый Университет «ИНТУИТ». ИНТУИТ - это сайт дистанционного обучения по нескольким программам (в основном техническим). Тут можно пройти обучение и получить бесплатный или платный электронный сертификат. На просторах данной интерактивной системы вы найдете множество курсов и видеокурсов, вы сможете получить сертификации и повысить свою квалификацию. Каждая программа обучения состоит из нескольких глав теории, после одной или нескольких глав обучаемому предлагается пройти тест по данной теме, тест оценивается по пятибалльной шкале. Тесты можно проходить сколько угодно раз, вопросы теста постоянно меняются, что создает препятствие для списывания или нахождения ответов. В конце каждого курса идет самый главный тест - экзамен. Только после сдачи экзамена курс считается пройденным и можно получить отчет об обучении с оценками за все тесты.

На данный момент ИНТУИТ активно работает с Intel. Именно их специалисты совместно с российскими университетами создали специальные курсы для обучению программирования с использованием инструментов Intel. Называются эти курсы - Академия Intel. Также в ИНТУИТе существует курсы под названием Академия Microsoft.

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

Для начала сформулируем основные концепции описания разделов:

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

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

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

В качестве создаваемого раздела я решил выбрать «Дифференциальное исчисление» и «Теорию пределов». Попробую описать главную концепцию моих разделов.



Теория пределов

Этот раздел будет делиться на «Предел функции», «Правило Лопиталя» и «Замечательный предел».

Переходя в раздел «Предел функции» мы попадаем на набор задач вида

Тут функция f(x) является произвольной, генерируется случайным образом с помощью встроенной функцией RandomChoice(, , , …). В дальнейшем будем предполагать, что все функции генерируются подобным образом.

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

Подтема «Замечательный предел» включает в себя задачи вида:

Дифференциальное исчисление

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

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

Следующим уровнем будут задачи на производную суммы, произведения и деления:

Эти задачи уже сложнее, чем на элементарные функции.

В уровне 3 будут находиться задачи на дифференцирования сложной функции:

При правильном ответе пользователь сможет увидеть надпись «Success!» и сможет вернуться обратно к уровню или же решить задание повторно. В противном случае сервер выдаст «You failed… Take a look at the right solution.», подсказку решения этого примера и правильный ответ.

«Теория пределов» и «Дифференциальное исчисление» будут описывать основные задачи по этим темам. Учитывая, что каждая функция будет генерироваться определенным образом, то можно утверждать, что нельзя будет запомнить все ответы и обучаемый должен хорошо разбираться в подобных задачах. В будущем, когда эта интерактивная система будет дополнена остальными темами из математического анализа и будут созданы новые дисциплины, возможность обучения на PyTaskPower станет прекрасным опытом для ученика и возможностью улучшить методику обучения для преподавателя.



Обзор программного обеспечения

Фреймворк Django

Фреймворк - это платформа, которая определяет структуру системы программ, она облегчает написание и объединение разных программных пакетов. В каком- то смысле фреймворк состоит из каркаса (неизменной части программы) и изменяемых модулей (точек расширения). В отличие от библиотек, он не только является набором подпрограмм, а также определяет собственную архитектуру. Каркас может объединять в себе множество разных по своей функциональности библиотек. Главной особенностью фреймворков является одинаковая структура приложений.

Примеры фреймворков:

· NET Framework от Microsoft

· MacApp от Apple

· WebObjects от NeXT

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

Сейчас фреймворки часто используются для Web-программирования на таких языках как Java (например Apache Click), php (например Zend Framework) и Python (например Django).

Абсолютное большинство Web-фреймворков на данный момент используют паттерн проектирования MVC(model-view-controller). MVC является общим для написания приложений и разделяет создание самого приложения на несколько частей:

· Model используется для работы с базами данных. Она помогает решить логическую часть нашего приложения.

· View отвечает за вид нашего приложения. Шаблон, выбранный контроллером, заполняется данными из моделей.

· Controller организует связь между бизнес-логикой (Model) и представлением (View). Работая с нужными ресурсами и объектами, контроллер выполняет нужные пользователю действия.

В приложении паттерна MVC к разработке WEB-приложений контроллер зачастую берет на себя работу по обработке HTTP-запросов. Взаимодействие описанных частей в MVC при этом происходит обычно следующим образом:

1. Сделав запрос, пользователь отправляет его на контроллер. В зависимости от вида запроса( GET или POST ) он проверяет запрос и параметры и вызывает модель.

2. Модель ищет нужные данные из базы, затем отправляет обратно на контроллер.

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

На рис. 1 представлен графический вид такого взаимодействия.



Рис.1. Взаимодействие MVC

Для написания нашего приложения мы использовали Django. Django (название в честь джазмена Джанго Рейнхардт) - это свободный фреймворк для написания Web-приложений с использованием языка Python, поддерживаемый организацией DSF(Django Software Foundation). Он создан для более простого написания приложений, что позволяет увеличить производительность работы. Многие программисты выбирают Django из-за языка Python, который в последнее время стал очень популярен благодаря своему изяществу и простоте. Фреймворк постоянно развивается и выпускает более новые версии.

В фреймворке Django используется архитектурная модель, которая называется MTV(model-template-view), она хоть и похожа на MVC, но имеет ряд особенностей. Здесь обработкой запроса пользователя занимается уровень View, вместо обычного для MVC Controller, и является мостом между моделями и шаблонами (template).

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

Одним из начальных этапов разработки приложений почти всегда является созданием обобщения для определенного вида данных. Например, при создании системы с какими-то данными об успеваемости учеников гимназии по математике будет разумно объединить данные о детях в абстракцию, например «Schoolclass». Понятие абстракция лежит в основе определения объектно-ориентированного языка программирования. В Django описанием класса, его хранением и преобразованием занимается модель. Модели имеют собственную таблицу в базе данных. Продолжим определять модель «Schoolclass». Очевидно, что у каждого ученика можно выделить имя, фамилию и успеваемость по предмету. Для этого в классе «Schoolclass» введем следующие переменные: last_name, first_name и progress. Реализация данной модели имеет вид:

Рис.2. Класс Schoolclass

Каждое поле задается с помощью подкласса (дочерних классов) Field. Поля могут имеют свой, определенный, тип - например, PositiveIntegerField для полей с положительным целым числом, CharField указывает на тексовое поле. В каком то смысле мы говорим Django о том какой тип данных хранят эти поля.

У каждого поля имеется название в машинной форме (first_name, last_name и progress). Мы будем использовать эти названия при написании кода.

В полях таких как CharField может содержаться обязательный аргумент, например в данном поле необходимо передать max_length. Также поля могут принимать необязательные аргумента, например PositiveIntegerField мы задали default равным нулю.

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

Таблица 1

Структура базы данных для модели Schoolclass

Field	Type	Null	Key	Default	Extra
id	Int(11)	No	PRI	NULL	auto_increment
first_name	Varchar(20)	No		NULL
last_name	Varchar(20)	No		NULL
progress	int	No		0

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

Рассмотрим пример добавления в базу данных ученика Ивана Попова с нефиксируемой успеваемостью (default = 0) и удаление из нее. Данный пример будет показан в shell.



Рис.3. Работа с shell

После определения данных и описания действия с ними, надо задуматься над тем, что с этими данными мы можем сделать. Как раз в это время мы переходим к написанию View. Как я уже говорил, на этом уровне происходит работа с данными из базы: получение данных, отображение и изменение. Тут можно описывать каким образом будут представлены пользователю значения базы. В представлении используются функции python для более удобной работы с моделями, в основном такие функции представлены как callback. Callback функции также называются функциями обратного вызова. С их помощью пользователь отправляя запрос(request) получает ответ(response) на обратном выходе. Для этих целей Django использует HttpRequest и HttpResponse. Таким образом view программируются на языке Python и все классы внутри должны возвращать HttpResponse, который содержит ответ от сервера и адрес новый страницы.

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

После работы view, моделей и переходе на страницу начинается последний этап - загрузка этой самой страницы. В дело вступает уровень с template. Templates представляет собой набор HTML файлов со стилями CSS и кодом на языке JavaScript и Django Template Language. Чтением этих файлов занимается сам браузер. Сейчас мы поговорим подробнее о HTML и CSS.

HTML (HyperText Markup Language) - это язык разметки, определяющий расположение элементов на web-странице. Довольно сложно представить сайт без использования данной системы верстки. Браузер с легкостью читает код html и расставляет элементы на странице так как этого хочет «верстальщик». Сам html файл состоит из набора определенных тегов. Например, для создания заголовка надо ввести тег <p>ЗАГОЛОВОК</p>. Бывает два вида тегов - парные и непарные, в нашем примере мы имели дело именно с парным тегом, тут открывающий тег <p> и закрывающий </p>. Надо заметить, что закрывающий тег всегда содержит косую черту перед обозначением данного тега. Одиночные теги, например <br> - перенос строки, не используют закрывающие теги.

При написании на Django в HTML файл можно добавлять код написанный на Django Template Language. Этот код будет обрамлен слева символами «{%» и «%}» - справа. Получается довольно удобный механизм управления разметкой. Программист может вводить логические операция прямо в html-файле не описывая подробный процесс во view. Для примера рассмотрим логическую операцию if и работу с моделями из template.

{% if leaner %}

<p> {% leaner %} -- {% leaner.progress %} </p>

{% endif %}

В этом примере leaner является именем какого-либо ученика из базы данных Schoolclass о которой мы говорили выше. Само имя нам должны передать view-функции, однако бывает так, что почему-то программе не удается это сделать (например когда база данных не заполнена). Для этого разумно поставить проверку if leaner, если значение leaner не было передано, то программа пропустит эту часть кода и начнет выполнять после конца (endif). Если же имя ученика было успешно передано, то в теге <p> выводится его имя с помощью команды {% leaner %} и оценка - {% leaner.progress %}.

Одного HTML мало для создания красивой web-страницы, по-этому верстальщик должен уметь пользоваться стилями или CSS. CSS (Cascading Style Sheets) - это язык внешнего вида, написанного с помощью HTML кода.

Существует несколько способов подключения CSS:

· Если таблица стилей находится в отдельном от HTML файла, то можно подключить через тег <link> внутри контейнера <head>

· Можно между тегами <style> определить стиль в самом файле, для этого необходимо задать конструкцию: имя_тега { действие над тегом; … }. В том примере имя_тега - название контейнера, над которым будет проводиться действие (например body), действие над тегом - изменение стиля (например color : red;)

· Таблица стилей может находиться внутри самого тега. Подобная конструкция позволяет менять не сразу все контейнеры, а подходить к проблеме верстки более выборочно. Пример <p style=” color: red; ”> красный текст </p> <p style=” color: green ”> зеленая строчка</p>.

Свою популярность CSS приобрел благодаря преимуществами над другими подобными продуктами. Одно из подобных преимуществ является разделение труда. При написании web-приложения дизайнер, описывая стили не мешает работе разработчика, а только дополняет ее. Также код легче читается браузером и быстро загружается, что позволяет пользователю быстрее получить доступ к необходимой информации. Нельзя не отметить и саму систему дизайна - при написании можно точно контролировать размер, поля, позиционирования и так далее… На данный момент всем wed-дизайнерам рекомендуется использовать CSS.

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

Ajax

предел дифференциальный база данные

Перед тем как говорить про AJAX надо сказать про JavaScript.

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

Способы подключения скриптов схожи с подключением стилей:

· Внутри тега

· Отдельным файлом

· Внутри странице (для этого существует специальный тег, работающий с JavaScript <script>)

Даже при написании на других языках web-программирования ( таких как php, Django и тд. ) разработчик часто сталкивается с необходимостью добавления сценария на JavaScript для разработки интерфейса. С его помощью программа может реагировать на событие (например клик мыши на картинку может запустить какую-нибудь функцию), изменять страницу(производить удаления, писать и добавлять на ней текст), можно считывать cookie и производить действия над ними.

Пример работы с JavaScript:

<a href="#"

OnMouseOver="document.getElementById('elment_id1').src='/foto1.gif'"

OnMouseOut="document.getElementById('elment_id2').src='/foto2.gif'">

<img id="B_B" src="/be.gif" border=0

align="left">

</a>

В этом примере OnMouseOver и OnMouseOut функции, позволяющие изменять элемент при наведении компьютерной мышки на него, или за его приделы. В конечном виде получается, что картинка (foto1.gif) при перемещении указателя изменяется на другую картинку (foto2.gif) и обратно, при перемещении мыши за пределы картинки (foto2.gif) изображение меняется на первую картинку (foto1.gif). В этом, хоть и малым по своим размерам коде, можно разглядеть всю мощь написания событий и действия над ними.

Одной из главных возможностей JavaScript является наличие механизмов работы с сервером и изменения страницы без перезагрузки. Эти способы принято называть AJAX.

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

В данный момент невозможно представить web-программирование без использования AJAX методов.

В основе AJAX запросов широко используются callback функции, позволяющие получить ответ без перезагрузки страницы.



Рис.4. Схема работы AJAX

На самом деле архитектура очень проста: пользователь делает запрос и отправляет его через callback функцию на языке JavaScript, которая вызывает AJAX, собственно который уже отправляет данные на сервер, используя XmlHttpRequest, и получает от него ответ. Новые данные подгружаются в начальный HTML файл и, соответственно, выводятся в Browser. Именно поэтому страница не перезагружается полностью.

Особенности AJAX:

· Высокая интерактивность

· Обновление только определенной части на Browser делает код более привлекательным

· Большая скорость. Приложение на AJAX гораздо быстрее, чем обычные web-приложения

Однако существуют и минусы:

· AJAX не будет работать без JavaScript

· Начальная страница загружается медленней, чем страница без использования AJAX

· Данные получаемые от сервера динамические и не могут использоваться в поисковой машине

· Нельзя вернуться обратно через кнопку «назад»

Бывают случаи когда браузер не может прочитать XmlHttpRequest. Это тоже доставляет некоторое неудобство в программировании, но его можно избежать пользуясь другими, более адекватными, браузерами, такими как Google Chrome, Mozilla Fire Fox и так далее.

При программировании на Django следует использовать специальные AJAX библиотеки Dajaxice для связи кода написанного на JavaScript с кодом сервера на Python. Это позволяет облегчить задачу программиста и облегчить понимание кода. Приведем пример реализации простой программы с использованием Dajaxice. Создадим функцию умножения на странице. Задача заключается в том, что пользователь записывает числа a и b, эти числа перемножаются, затем данные передаются серверу и получаем готовый ответ, который записываем на HTML странице.

Допустим, в HTML файле у нас описаны четыре input (три для числа «a», числа «b» и записи ответа «result», еще один для создания кнопки выводящей ответ):

Рис.5. Код HTML файла

На кнопке «Multiply!» мы пишем onclick на функцию calculate. В этой функции мы записываем обращение к серверу с данными о числах a и b следующим образом:



Рис.6. Код функции calculate

Dajaxice.task.multiply передает значение a и b в функцию multiply, которая расположена по адресу /task/ajax.py и запускает на исполнение JavaScript функцию «draw_result». Рассмотрим работу ajax.py :

Рис.7. код функции multiply

Для начала заметим, что тут язык программирования Python. Здесь происходит перемножение элементов и передача ответа обратно пользователю. Как указано выше, функция «calculate» запускает «draw_result», туда и передается ответ от сервера:

Рис.8. Код функции draw_result

Здесь JavaScript функция заменяет значение value в текстовом input c id = result на перемножение a*b.

Этот пример показывает основную идею AJAX ( возможность обратиться к серверу и обновить страницу без перезагрузки). При написании своего web-приложения я довольно часто использовал библиотеку Dajaxice для создания callback - функций.



Разработка модели

Рекурсивные модели

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

Заметим, что часто в организации какого-либо процесса мы стараемся придерживаться организации в виде дерева. Допустим, если рассматривать расположения книг в библиотеке, мы можем записать подобного вида структуру: Библиотека Зал Шкаф Полка Книга. То же происходит при поездке на поезде: Станция отправления Первая остановка Вторая остановка … Предпоследняя остановка Станция назначения. Мы видим, что у этих примеров прямая организация и не изменяющаяся. Описать такую модель можно очень просто: на каждом уровне создавать отдельную таблицу в базе данных и описать связи между ними. Теперь представим, что книгу можно взять в зале, не подходя к шкафу, или нам надо выйти на предпоследней остановке, не доезжая до конечной станции. В этом случае глубина вложения нам неизвестна или она может меняться в зависимости от чего-то. Идеальным выходом из подобной ситуации стала разработка иерархических моделей.

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

С рекурсией программисты сталкиваются в независимости от того, какой базой данных они пользуются. Часто для создания такого рода структуры запроса приходится водить новую переменную, которая будет указывать отношения к идентификатору id других объектов:

Таблица 2

Пример реализации рекурсии

Id	PID	Name
1		Московская область
2	1	Домодедовский район
3	2	Деревня Житнево
4	1	Город Химки
5	2	Деревня Белые столбы

PID является этим самым отношением внутри таблицы. В примере видно, что в Московской области расположен Домодедовский район и город Химки, а в Домодедовском районе находится деревни Житнево и Белые столбы, однако эти деревни никак не относятся к городу Химки. Из этой таблицы мы можем получить следующее дерево:

Рис.9. График реализованной рекурсии

В последнее время возможность создавать иерархические запросы была добавлена почти во все базы данных. Модели Django предлагают свой способ выполнения данной задачи.

Для большего понимания создания рекурсивных моделей в Django следует объяснить на каком-нибудь примере. Для удобства возьмем иерархическую модель с уже знакомой нами идеей родители - потомки. Создадим таблицу, в которой будут переменные name и parent:

Рис.10. Класс Men

В данном примере name - переменная имени человека, она имеет обычное текстовое поле максимальной длиной 50 символов, parent - имя родителя, оно тоже имеет текстовое поле, только тут существует ForeignKey. В Django существует набор полей, для осуществления связи между классами, примером такого поля и является ForeignKey. Это поле использует связь многое - к - одному. Для создании рекурсии в ForeignKey предусмотрено переменная «self», такая как в нашем примере, с ее помощью связь многое - к - одному ссылается на себя. В примере я использовал еще одну полезную вещь: null = True, это обозначат, что если мы не укажем напрямую имя переменной parent, то ее значение останется пустым.

Теперь посмотрим как теперь можно работать с объектами класса Men, для этого заглянем в Django shell:



Рис.11. Работа с классом Men в shell

Мы видим новый атрибут в shell - это men_set. Дело в том, что при создании связи через ForeignKey объекты автоматически снабжаются новым атрибутом <class_name>_get. Через него можно получать списки всех объектов класса <class_name>, которые взаимодействуют с данным объектом.

Мы видим, что «Alex» имеет связь с «Ivan» и «Dmitry», как отец с сыновьями. Таким образом мы построили рекурсивную модель в Django, которая может иметь сколь угодно сложные связи.

Модель дисциплин и тем

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

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

Рис.12. Реализация класса Theme

Функция delete выполняет замену связей класса Theme и класса задач на значение None. При значении None элемент не показывается вообще, то есть связь задач с начальной темой потеряет свое значение. Класс super позволяет передавать параметры обновления словаря. Модель Task без объектов для построения задач выглядит следующим образом:

Рис.13. Реализация класса Task

В дальнейшем в Task были добавлены объекты, такие как solution, description, head, problem, result и author, способные записать поведение задачи от постановки вопроса, до конечного результата.

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

При создание модели с классом Discipline мы этот класс с помощью уже известного ForeignKey привязываем к классам Theme, получая тем самым неразрывную конструкцию (при добавления задач в темы нам будет необходима также взаимодействовать с объектами дисциплин). На примере библиотеки мы получаем: Библиотека любая глубина вложения Книга. Работая с view для моего web-приложения тоже понадобиться писать обращения к Discipline. Но самая большая проблема будет непосредственно в создании самого HTML файла, ведь там необходимо эти все данные представить перед пользователем.

В конечном счете было принято решение не создавать класс Discipline. Для замены его была создана view, позволяющая отделять первое вхождение( без запроса AJAX) на страницу и последующие действия, в конечном счете наличие этих действий определяет HTML файл подгрузки, благодаря которому происходит обновление страницы без перезагрузки. Этим мы смогли решить проблемы, возникающие при отсутствии класса Discipline и их наличии.



Работа программы

Описание разделов

Описание разделов является основным при написании web-приложения. Именно благодаря им - пользователь знакомится с проектом и может активно его использовать в своих нуждах. При описании разделов надо учитывать то, что они должны быть «friendly», то есть легкими для понимания пользователя. Основную идею разделов «Дифференциальные уравнения» и «Теорию пределов» я уже изложил в введении. Сейчас я покажу на практике их структуру и возможность.

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

При выборе дисциплины к изначальной странице с помощью методов AJAX добавляются темы данного уровня. На рисунке показан пример выбора дисциплины математический анализ:

Рис.14. Выбор дисциплины

Под дисциплинами мы видим кнопку «Edit», через нее пользователь попадает в редактор и может добавлять новые темы, дисциплины и задачи. Про редактирование мы поговорим позже.

Допустим теперь нам надо перейти в тему «Дифференциальное исчисление», там находятся подтемы, внутри которых задачи. На рисунке представлен переход в одну из таких подтем:

Рис.15. Переход в подтему «Уровень 2»

Нажимая на задачу пользователь переходит на новую страницу и может начать заниматься изучением данной темы. Теперь мы вплотную подошли к очень важной части web-приложения - задачам.

Описания задач

При написании задачи используется язык описании задач SmallTask, разработанный Ильей Турунтаевым.

Перейдем в задачу под названием «multiplication». Нам открывается страница, на которой расположено задание по дифференцированию двух перемноженных функции:



Рис.16. Multiplication

Первое на что следует обратить внимание - это постановка задачи и сама формула. Данные обо всех задачах хранятся в таблице Task базы данных, эта таблица была создана с помощью класса Task из модели.

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



Рис.17. Неправильный ответ в multiplication

Тут расположена формулировка данной задачи, ее решение, ответ на задачу и ответ пользователя. Решение задачи может быть написано как на языке SmallTask, так и при помощи TeX. Ниже ответа пользователя расположена кнопка «Try again», позволяющая пользователю переместиться на страницу с подобной задачей. И начать выполнять задание с новым условием.

При правильном решении задачи пользователь видит свой ответ, надпись «Success!» и кнопку, позволяющую попробовать опять решить подобную задачу.

Редактирование тем

Для редактирования темы пользователю необходимо нажать на кнопку «Edit». При нажатии открывается страница редактирования. Здесь изначально представлены темы верхнего уровня - дисциплины. внизу под дисциплинами находятся две кнопки: назад к темам и добавить новую тему. У каждой дисциплины есть кнопка редактирования(Edit) и удаления(Delete). При нажатии на кнопку «Delete» происходит удаления темы и всех ее подтем, однако задачи из данной темы и ее подтем остаются в базе данных. На рисунке представлена картинка верхнего уровня тем:

Рис.18. Верхний уровень тем в редакторе

В нашем примере существует только одна тема верхнего уровня - это «Математический анализ». Теперь перейдем в раздел редактирования этой дисциплины. Рисунок показывает последствие такого перехода:

Рис.19. «Математический анализ» в редакторе

Как мы видим сверху, появляется возможность изменить названия темы. Ниже подтем кнопка «Назад к темам» заменяется на кнопку «Назад» и появляется новая кнопка «Добавить задачу». Про добавление и редактирование задач мы поговорим позже.

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

Разберем редактирование темы на примере. Добавим в «Математический анализ» подтему «Новая подтема». Для этого нажимаем на кнопку «Добавить подтему» и переходим на страницу добавления:

Рис.20. Добавление подтемы

Записываем название нашей подтемы в разделе «Name» и нажимаем на кнопку «submit». Заметим, что в разделе «Parent» изначально выбрана тема в которой происходит добавление, но мы можем изменить название этой темы и тогда добавление будет происходить в выбранную тему. Посмотрим как изменится список подтем темы «Математический анализ»:

Рис.21. Изменение подтем

В список подтем добавилась подтема «Новая подтема». Зайдем в ее редактирование, и изменим ее имя на «Старая подтем». Вернемся через кнопку «Назад» и посмотрим как изменился список подтем:



Рис.22. Изменение названия подтемы

Давайте теперь удалим нашу тему. Нажимая на кнопку «Delete» мы вызываем специальную JavaScript функцию, которая постепенно удаляет данную подтему из поля видимости.

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

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

Редактирование задач

Задача может находиться в любой теме, кроме тем верхнего уровня. Я уже писал, что в редакторе существует кнопка «Добавить задачу». При нажатии на нее пользователю дается выбор между созданием новой задачи или добавить из уже имеющейся:



Рис.23. Добавление задачи

Такой выбор обусловлен тем, что все задачи хранятся в независимости от их наличия в какой-либо из тем. При удалении темы задачи этой темы остаются в базе данных.

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

Рис.24. Список задач

Здесь можно создать новую задачу, нажав на кнопку «+ Create New Task». Также пользователь сможет редактировать старую задачу, переходя по ссылке из кнопки «Edit», работу с редактором я буду описывать при создании новой задачи. Для удаления задачи следует нажать на красный квадрат с минусом посередине (удаление происходит из базы данных).

Очень полезной является кнопка «Generate», при нажатии она выдает окно в котором программа генерирует задачу и выводит пример, решение и ответ. Посмотрим возможности этой кнопки на уже нам известном примере «multiplication»:

Рис.25. Пример работы «Generate»

Рассмотрим вариант создания новой задачи. На этот раз в теме «Математический анализ» мы выбираем «Создать новую задачу». Мы попадаем на страницу редактирования задачи. На этой странице находятся текстовые поля: Name, Description, Head, Problem, Solution и Result. Пусть наша новая задача будет называться cos_n_pi и выводить значения cos(n*р), где n - целое число:

Рис.26. Первая часть создания новой задачи



Рис.27. Вторая часть создания новой задачи

В этом примере n принимает случайное значение от 2 до 7 с шагом 1. Для удобства в Head объявим переменную cos_n_pi, принимающую значение cos(n*р).

После определения задачи пользователь должен записать ее формулировку в графе Problem. Для этого можно использовать язык SmallTask (в данном примере с помощью этого языка определяем значение n, которое является случайным и сразу указать его в виде числа нельзя), также можно вставлять формулы на языке TeX.

Рис.28. Третья часть создания новой задачи

В Solution для описания решения мы опять используем язык SmallTask. Ниже этой графы мы видим в каком виде написанное будет отображаться в примере, это очень полезно при использовании языка TeX. Result является ответом на задачу и содержит нашу переменную cos_n_pi.

Попробуем решить нашу задачу. Для этого перейдем на страницу выбора тем и выберем «Математический анализ»:

Рис.29. Новая задача в теме «Математический анализ»

Нажимаем на задачу с названием «cos_n_pi» и можно приступать к решению:

Рис.30. Решение новой задачи

Для рассмотрения параграфа Solution введем неправильный ответ - 123.



Рис.31. Неправильный ответ на новую задачу

В этом параграфе я разобрал основные возможности приложения. Остается только добавить про использования языка SmallTask и TeX в поле Problem и Solution:

· Для записи текста на языке TeX надо использовать тег «\(» в начале и «\)» в конце.

· При записи функции между тегами «{$» и «$}» записываемая функция выводится «как есть» (эти теги являются блоком языка SmallTask). Например, записывая между тегами «cos(pi)» мы получим «\cos{\pi}».

· Также с помощью языка SmallTask и тегов «{$=» и «$}» можно записать решение функции. Записывая между этими тегами «cos(pi)» получаем «0».

· Также существуют теги «{$!» и «$}». Содержимое данного блока никак не выводится.



Заключение

В результате работы мною был создан механизм создания и редактирования разделов, также были добавлены разделы: Дифференциальные уравнения и Теория пределов. Разделы и редактирование разделов удовлетворяют поставленным задачам:

· Верхний уровень тем (дисциплин) не содержит задач

· Темы остальных уровней имеют возможность содержать в себе подтемы и задачи

· В каждой теме с помощью редактора пользователь может создать подтемы и задачи

· Название каждой задачи и темы можно изменить

· Каждую задачу или тему можно удалить, при удалении темы задачи сохраняются в базе данных

· Каждую задачу можно редактировать, изменяя ее содержимое

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

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

Как известно основным способом обучения является домашнее обучение. С помощью нашей интерактивной системы обучения изучение математических дисциплин может стать более простым и доступным для учеников школ и ВУЗов.

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

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

Надеемся, что данная интерактивная система в дальнейшем станет хорошим помощником для студентов и преподавателей.



Список литературы

1. Лутц М. Программирование на Python. Том 1. 4-е изд. М.: Символ-Плюс, 2011.

2. Лутц М. Программирование на Python. Том 2. 4-е изд. М.: Символ-Плюс, 2011.

3. Хахаев И. А. Практикум по алгоритмизации и программированию на Pythpn. М.: Альт Линукс, 2010.

4. Форсье Дж., Биссекс П., Чан У. Django. Разработка веб-приложений на Python. М.: Символ-Плюс, 2010.

5. Головатый А., Каплан-Мосс Дж. Django. Подробное руководство. СПб.: Символ, 2010.

6. Петин В. Сайт на AJAX под ключ. Готовое решение для интернет-магазина. СПб.: БХВ, 2012.

7. Келли Л.Мэрдок. JavaScriopt. Наглядный курс создания динамической Web-страницы.: Диалектика, 2001.

8. Херрон Д. Node.js Разработка серверных веб-приложений на JavaScript.: ДМК Пресс, 2012.

9. Крейн Д., Паскарелло Э., Даррен Дж. Ajax в действии.: Вильямс, 2006.

10. Современный учебник JavaScript. URL: http://learn.javascript.ru/ .

11. AJAX учебник. URL: http://www.wisdomweb.ru/AJAX/ajax-first.php .

12. Учебник CSS. URL: http://www.wisdomweb.ru/CSS/css-first.php .

13. Учебник HTML. URL: http://ru.html.net/tutorials/html/ .

14. Документация Django 1.7. URL: http://djbook.ru/rel1.7/ .

15. Мержевич В. Справочник по HTML. URL: http://htmlbook.ru/html .

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

...