Главная » Уроки по ООП »Создание обучающей программы

ПРАКТИЧЕСКАЯ РАБОТА

Создание обучающей программы

1. В окне Object Inspector установите для формы свойство Caption в значение Добро пожаловать! . А также установите свойства Height = 333, Width = 444, Position = poScreenCenter.
2. Сохраните программу в отдельной папке (выполните команду File – Save all).
3. В эту папку скопируйте папку Заготовки.
4. Теперь добавим в форму текст и графику. Для этого необходимо воспользоваться двумя компонентами из палитры компонентов: компонент Label  (стр. Standard) и компонент Image (вкладка Additional).
5. Для вставки графических объектов используется компонент  Image (стр. Additional). Установите на форму компонент Image. Установите свойства компонента в соответствии с таблицей.

1. С помощью свойства Picture загрузите изображение из файла fon.jpg (он расположен в папке «Заготовки»).
2. Компонент Label используется для отображения надписей. Установите на форму компонент  Label и настройте следующие его свойства в окне инспектора объектов Object Inspector: текст надписи, цвет фона, шрифт, размер шрифта, тип начертания, цвет надписи, способ выравнивания текста внутри компонента.

1. Тем самым вы создали тень надписи. Теперь создадим саму надпись. Для этого скопируйте данный компонент (выделите его и нажмите сочетание клавиш Ctrl + C) и вставьте на форму (Ctrl + V). Измените цвет надписи на голубой (clBlue) и расположите его так как показано на рисунке ниже.
2. В результате форма должна принять следующий вид:

1. Запустите программу на выполнение командой Run – Run или клавишей F9.
2. Таким образом, вы создали окно приветствия (обложку учебника). Но для обучения этого мало, поэтому создадим новое окно, в котором будет отображаться информация, предназначенная для изучения.
3. Для этого создайте новую форму (командой File – New Form), размеры и расположение на экране которой должны совпадать с первой. Свойство Caption установите равным «Лекционный материал» и сохраните форму командой File – Save as… в папку с программой.
4. Переход с первой формы (form1) на вторую (form2) будет осуществляться посредством кнопок.
5. Установите на первую форму (form1) три кнопки  SpeedButton (стр. Additional) и настройте свойства компонентов в соответствии с таблицей:

1. Для того чтобы нажатие на кнопки приводило к выполнению каких-нибудь действий нужно их запрограммировать.
2. Для этого щелкните дважды по кнопке «Выход». В результате на экране появится окно редактора кода, в котором между служебными словами Begin и End следуют вписать следующий код программы:

procedure TForm1.SpeedButton3Click(Sender: TObject);
begin
Close; // закрывает форму
end;

1. Запустите программу на выполнение и проверьте работу кнопки «Выход».
2. Теперь займёмся созданием перехода с одной формы на другую.
3. Для этого вернитесь на первую форму и дважды щелкните мышью по кнопке «Начать занятие». И в открывшееся окно редактора кода вставьте следующий код:

form1.hide; // Скрываем первую форму
form2.show; // Показываем вторую форму

1. Откройте теперь вторую форму. Создайте на ней кнопку выхода, аналогичную той, которую вы разместили на первой форме. В качестве кода, для выхода из программы, используйте оператор Application.Terminate;//закрывает программу.
2. Запустите программу на выполнение. В момент запуска на экране появится следующее сообщение Delphi:

1. Delphi говорит о том, что две формы не связаны между собой с помощью раздела Uses и предлагает связать их. Нажмите на кнопку Yes и запустите программу еще раз и проверьте правильность работы кнопок.
2. На первой форме осталась одна невостребованная кнопка «О программе». Создайте ещё одну форму (form3) и разместите на ней фоновое изображение, текст о себе и кнопку возврата к первому окну.

1. Скопируйте в папку, содержащую вашу программу, папку Заготовки, которая расположена рядом с заданием.
2. Установите на вторую форму компонент  Panel (стр. Standart).
3. Вырежьте кнопку «Выход» (Ctrl+X), выделите компонент Panel и вставьте из буфера кнопку (Ctrl+V).
4. У панели установите следующие свойства: Align = alButtom, Color = clSkyBlue, Height = 30.
5. Расположите кнопку «Выход» в правом углу панели и установите свойство Anchor следующим образом:

1. Разместите на панель еще три кнопки SpeedButton и настройте свойства в соответствии с таблицей:

1. Установите кнопку «Вернуться» в левом углу панели, а оставшиеся две кнопки около кнопки выход.
2. Установите на форму следующие компоненты и настройте их свойства в соответствии с таблицей.

Компонент	Свойства
ImageList (стр. Win32)	Дважды щелкните по компоненту и в открывшемся окне с помощью кнопки «Add» откройте картинки из папки Заготовки в следующей последовательности: Bookopen.bmp Bookshut.bmp Ball_Glasses.bmp Gray_Indicator.bmp
TreeView (стр. Win32 )	Align = alLeft Color = clSkyBlue AutoExpand = true Дважды щелкните по компоненту и в открывшемся окне щелкните по кнопке «New Item» и внесите текст «Лекции». Затем щелкните по кнопке «New SubItem» и внесите текст Лекция №1. Требования к технологии разработки программ. Далее нажмите кнопку «New Item» и внесите текст Лекция №2. Жизненный цикл ПС. Аналогичным образом добавьте еще 3 пункта: Лекция №3. Модульное программирование Лекция №4. Структурное программирование Лекция №5. Отладка и тестирование ПС Затем выделите пункт Лекции, щелкните по кнопке «New Item» и внесите текст Лабораторные работы. Затем щелкните по кнопке «New SubItem» и внесите текст Лабораторная работа №1. Щелкнув по кнопке «New Item» добавьте пункт Лабораторная работа №2. После этого закройте окно с помощью кнопки «ОК».
Splitter (стр. Additional)	Align = alLeft Beveled = True
WebBrowser (стр. Internet)	Align = alClient

1. Запустите программу на выполнение (F9) и проверьте, как работает содержание (компонент TreeView).
2. Вернитесь в режим разработки и создайте обработчики событий для кнопок (двойным щелчком по кнопке).
3. Для кнопки «Вернуться» напишите следующий код программы:

form2.Hide;
form1.show;

1.  Для кнопки SpeedButton3 напишите следующий код программы:

try
 WebBrowser1.GoBack;
except
 beep;
end;

1. Для кнопки SpeedButton4 напишите следующий код программы:

try
 WebBrowser1.GoForward;
except
 beep;
end;

1. Для компонента TreeView создайте обработчик события OnClick (на вкладке Events окна Object Inspector дважды щелкните по пустому полю в правом столбце рядом с текстом onClick) и внесите следующий код программы:

Path:=ExtractFilePath(Application.ExeName)+'Заготовки\';
case TreeView1.Selected.AbsoluteIndex of
 0:Path:=Path+'Лекции.htm';
 1:Path:=Path+'Лекция1.htm';
 2:Path:=Path+'Лекция2.htm';
 3:Path:=Path+'Лекция3.htm';
 4:Path:=Path+'Лекция4.htm';
 5:Path:=Path+'Лекция5.htm';
 6:Path:=Path+'Лабораторные работы.htm';
 7:Path:=Path+'Лабораторная работа №1.htm';
end;
WebBrowser1.Navigate(path);

1. Перед словом Begin в этой процедуре добавьте следующую строку: var path:string;
2. Создайте для компонента TreeView обработчик события onGetImageIndex и внесите следующий код программы:

Node.SelectedIndex:=2;
 if Node.Count>0 then
                   begin
                     if Node.Expanded then Node.ImageIndex:=0
                                      else Node.ImageIndex:=1;
                   end
                 else Node.ImageIndex:=3;

1. В окне Object Inspector в выпадающем списке найдите Form2. Откройте вкладку Events, создайте обработчик события OnCreate (дважды щелкните напротив названия события) и внесите следующий код программы:

WebBrowser1.Navigate(ExtractFilePath(Application.ExeName)+'Заготовки\Лекции.htm');

1. Запустите программу на выполнение и проверьте правильность работы. При нажатии пунктов меню в содержании должны открываться соответствующие документы, а переход между ними можно осуществлять с помощью кнопок SpeedButton3 и SpeedButton4.

 

Практическая работа 2. Создание теста

Уровень 1

Задание 1. После того как пользователь ознакомится с материалом, представленным обучающей программой, возникает необходимость в контроле полученных знаний. Формой контроля в нашей программе будет являться тестирование. Программа должна выводить на экран монитора вопрос, а пользователь должен будет выбрать правильный ответ из представленных. Выбор будет осуществляться при помощи переключателей или как их ещё называют кнопок выбора (радио-кнопок).

1. Создайте четвертую форму.
2. Создайте следующий интерфейс пользователя (рис.ниже). Необходимо установить три компонента RadioGroup и две кнопки.

Рисунок 1. Интерфейс четвертой формы

Код для кнопки «Повторить материал»

Создайте три реальных тестовых вопроса по изученным ранее темам.

Код для кнопки «Закончить тестирование»

Уровень 2

Задание 2. Добавить в тест еще два вопроса. Выводить оценку за тестирование, а не количество правильных ответов.

Уровень 3

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

Перемещаться по вопросам можно будет с помощью кнопок «Назад» и «Далее».
Форма для тестирования будет выглядеть следующим образом:

Первый вопрос можно загрузить в событии формы onCreate.

 

Составитель: Салий Н.А.