Создание и наполнение заданиями сайта для выполнения домашних заданий по элементарной математике с возможностью анализа успеваемости

В информационной зоне помещается слева – блок «Меню» дополнительной навигации, а справа – блок статичной текстовой информации «Новости» или «Обновления заданий». Центральная область, конечно, отведена для основного содержания разделов. Необходимость организации подвала с дублирующей навигацией также обусловлена требованиями юзабилити.

 На всех страницах сайта будет использован одинаковый шаблон (см. рисунок 2.7).

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

Рисунок 2.7 – интерфейс self-study.u-gu.ru/

 

4.   Физическая структура сайта

Физическая структура сайта описывает размещение файлов и папок на диске компьютера.

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

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

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

Опишем физическую структуру сайта:

 

• Index.html – главная страница сайта. При переходе с главной страницы на «мою страницу» вам будет предложена авторизация, если вы ещё не авторизованы, в противном случае вы попадете на свою страницу.
• Config.php – хранит данные подключения к базе данных.
• Mypage.php – персональная страница пользователя, содержащая меню, соответствующее уровню доступа.
• Join.php – регистрация пользователей.
• Login.php – авторизация.
• Upload.php, Upload2.php – загрузка заданий на сайт. Содержит форму для загрузки задания, включающую выбор темы и класса, добавление заметки и ответа, пример заполнения .docx. На сервере хранится один файл (структура описана в гл. 3), путь к файлу имеет вид: «upload/логин_учителя/имя_файла». Имя файла представляет собой дату, отображающую количество секунд, прошедших с начала Эпохи Unix (The Unix Epoch, 1 января 1970 00:00:00 GMT). При этом в БД заносится соответствующая запись. Такая форма записи позволяет создавать уникальное имя файла публикации для каждого пользователя и, одновременно, хранить информацию о дате записи.

$query = sprintf("INSERT INTO tasks(t_login, date, topic, class, answers, note) VALUES('%s', '%s','%s', %s, '%s', '%s')",

mysql_real_escape_string($log1),

mysql_real_escape_string($xmlDate),

mysql_real_escape_string($_POST['topic']),

mysql_real_escape_string($_POST['class_num']),

mysql_real_escape_string($_POST['answer']),

mysql_real_escape_string($_POST['note']));

mysql_query($query);

• Change_task.php, see_publ_tasks.php, publ_tasks.php – просмотр и редактирование опубликованных заданий, добавленных авторизованным пользователем. Изменения заносятся в БД. При успешном изменении данных идет переадресация на страницу выбора темы для дальнейшего изменения, при этом отображается соответствующее уведомление.

$query = sprintf("UPDATE tasks set answers='%s', note='%s'  where id=%s ;",

mysql_real_escape_string( $_POST['new_answer']),

mysql_real_escape_string( $_POST['new_note']),

mysql_real_escape_string( $id));

if(mysql_query($query)){

  header("Location: publ_tasks.php?msg=1");

}

• Solution.php – отображение конкретного задания.Т.к на сервере хранятся уже дополненные и измененные данные, нужно найти нужные  файлы и отобразить.

while($row = mysql_fetch_assoc($result)){

$way="/home/u35607/domains/self-study.u-gu.ru/public_html/upload/".$row['t_login'].'/'.$row['date'];

$handle = fopen($way, "r");

$file = fread($handle, filesize($way));

print $file;

}

• Text.php – отображение и форматирование текста. Получение голого текста получаем следующим образом:

function xml2text($filename) {

$content=file_get_contents($filename);

$xml = DOMDocument::loadXML($content, LIBXML_NOENT | LIBXML_XINCLUDE | LIBXML_NOERROR | LIBXML_NOWARNING);

//избавляемся от тегов

return strip_tags($xml->saveXML());

}

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

• Add_answer.php – добавление ответов от ученика. Данные записываются в таблицу Answers (см. п. 2.5). Ответ сверяется с верным, оставленным преподавателем при загрузке задания, при верности ответа в поле a_check записывается «1», в противном случае «0».
• Answers.php, my_answers.php – просмотр ответов, добавленных авторизованным пользователем. Указывается верность ответа, логин пользователя, оставившего задание и ссылка на отображение формулы. Отображение добавлено скорее как напоминание, т.к. возможность повторно ответить на задание отсутствует. Имя автора задания публикуется для возможности обсуждения задания между учеником и учителем.
• Rating.php, teach_rate.php – просмотр персонального рейтинга, рейтинга класса, общего рейтинга. Рейтинги подсчитываются по графе a_check. Возможно, будет реализована функция обнуления ответов по тем или иным заданиям, или же обнуления всех ответов по прошествии определенного срока.
• Available_tasks.php – доступные задания для авторизованного пользователя. Включает в себя выбор темы. Задание будет выбрано случайно, из списка неотвеченных и подходящих по классу.
• Inc/header.inc, inc/menu_left.inc, inc/menu_left_teacher.inc, inc/menu_top.inc – меню для различных частей страницы и пользователей.
• Style/ - содержит графические элементы страниц
• Unpload/ - содержит данные опубликованных задач.

Листинг некоторых элементов будет приведет в приложениях.

 

5.   Использование БД для хранения информации

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

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

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

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

В процессе функционирования баз данных для систематизации, хранения и представления информации используются специальные сервисные программные средства — системы управления базами данных (СУБД). Системы управления базами данных играют центральную роль в их функционировании как хранилища специально организованных и логически связанных информационных элементов.

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

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

Создадим три таблицы, для хранения пользователей, опубликованных заданий и ответов (см. рисунок).

Для добавления данных будем использовать запросы вида:

$query = sprintf("INSERT INTO tasks(t_login, date, topic, class, answers, note) VALUES('%s', '%s','%s', %s, '%s', '%s')",

mysql_real_escape_string($login),

mysql_real_escape_string($xmlDate),

mysql_real_escape_string($_POST['topic']),

mysql_real_escape_string($_POST['class_num']),

mysql_real_escape_string($_POST['answer']),

mysql_real_escape_string($_POST['note']));

mysql_query($query);

Полный код добавления и изменения данных будет приведен в приложениях.

 

Рисунок 2.8 - структура БД

 

 

3. Наполнение сайта заданиями

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

1. Варианты реализации

• Сохранение в Word2003, формулы преобразуются в  jpeg, далее сохраняем в html, они сохраняются в отдельные файлы. Практически тоже, что делать скриншот. Минус – трудоемкость при размещении на сайте.
• Конвертация Word-LaTex-html. И ещё уйма двухшаговых конвертаций. Каждое такой метод требует установки 2х и более утилит или плагинов. Например, рассмотрим конвертацию tex-html.

Рисунок 3.1 - содержимое исходного tex-файла

Рисунок 3.2- результат трансляции tex-файла в html-файл

Далее оставляем необходимый html код, получаем:

Рисунок 3.3- полученное представление на web

 

 

• Использование библиотеки jDoc. Достаточно новая библиотека, поддерживает только чтение. Минус, некорректное отображение некоторых формул.  Пример чтения документа:

jDoc.read(file, {

    before: function () {},

    success: function (parsedFile) {

    },

    error: function (error) {

    },

    complete: function () {}

});

• Использование MathML (Mathematical Markup Language) –

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

 

3.2 Mathematical Markup Language

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

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

В настоящее время возникла новая среда связи, представленная ЭВМ с сетевой  структурой. Это открывает новые возможности для передачи и представления математической информации.

MathML – язык разметки на основе  XML для представления математических символов и формул в документах WWW. MathML рекомендован математической группой W3C. Также разрабатывается система разметки математической семантики, призванная дополнить MathML. Она называется OpenMath.

В качестве примера рассмотрим отображение формулы решения квадратного уравнения.

 

MathMl является составляющей HTML5, пятой версии стандартного языка разметки во всемирной паутине. Предыдущая версия HNML была стандартизирована ещё в 1997 году. По состоянию на октябрь 2013 года, HTML5 ещё находится в разработке. Однако, стандарт HTML5 ещё не принят, и отображение формул остается нерешенной проблемой.

В настоящее время некоторые браузеры, такие как Opera, Mozilla Firefox, IE (при установке дополнительного плагина MathPlayer) поддерживают MathMl.

 

<?xml version="1.0" encoding="UTF-8"?>

<math xmlns="http://www.w3.org/1998/Math/MathML">

<mrow>

  <mi>x</mi>

  <mo>=</mo>

  <mfrac>

    <mrow>

      <mrow>

        <mo>-</mo>

        <mi>b</mi>

        <mo>±</mo>

      </mrow>

      <msqrt>

        <mrow>

          <msup>

            <mi>b</mi>

            <mn>2</mn>

          </msup>

          <mo>-</mo>

          <mrow>

            <mn>4</mn>

            <mi>a</mi>

            <mi>c</mi>

          </mrow>

        </mrow>

      </msqrt>

    </mrow>

    <mrow>

      <mn>2</mn>

      <mi>a</mi>

    </mrow>

  </mfrac>

 </mrow>

</math>

 

 

2. Office Open XML

Office Open XML (OOXML, DOCX, проект ISO/IEC IS 29500:2008) — серия форматов файлов для хранения электронных документов пакетов офисных приложений - в частности, Microsoft Office. Формат представляет собой zip-архив, содержащий текст в виде XML, графику и другие данные[2], которые могут быть переведены в последовательность битов (сериализованы) с применением защищённых патентами двоичных форматов, спецификации которых были опубликованы Microsoft для пользователей OOXML на условиях Microsoft Open Specification Promise.[4]

Первоначально формат создавался как замена прежнему двоичному формату документов, который использовали приложения Microsoft Office вплоть до версии Office 2003 включительно. В 2006 году формат Office Open XML был объявлен свободным и открытым форматом Ecma International. Он является форматом по умолчанию для приложений Microsoft Office 2007 и более поздних.