Thiết kế trang “Kiểm tra-đỏnh giỏ”

Một phần của tài liệu thiết kế và sử dụng website hỗ trợ dạy và học phần lý thuyết chủ đạo môn hóa học ở trường trung học phổ thông (Trang 103 - 111)

2.5.7.1. í tưởng thiết kế

Trang “Kiểm tra - đỏnh giỏ” được xõy dựng dựa trờn mĩ nguồn mở PHP&MySQL dưới phương thức trang web trắc nghiệm. Cở sở dữ liệu MySQL cú chức năng lưu trữ ngõn hàng cõu hỏi, cỏc đề kiểm tra, kết quả kiểm tra… của trang trắc nghiệm. Đõy là dạng trang web động, cú ưu điểm hơn rất nhiều so với cỏc trang khỏc website. Nú cú khả năng nhập cỏc cõu hỏi theo nhiều dạng bao gồm: dạng text, dạng flash, dạng picture với nhiều định dạng file khỏc nhau,…rất thuận tiện cho người quản trị (trong trường hợp này là GV biờn soạn ngõn hàng cõu hỏi trắc nghiệm và cỏc đề kiểm tra, đề thi,…). Mặt khỏc, với tớnh năng ưu việt của hệ quản trị cơ sở dữ liệu MySQL, trang “Kiểm tra – đỏnh giỏ” cú khả năng sao lưu và hồi phục dữ liệu một cỏch dễ dàng nhờ chức năng backup/restore của hệ thống.

Phần mềm mĩ nguồn mở này cú giao diện ở dạng tiếng Anh nờn cần được việt húa để phự hợp với người sử dụng. Một bước cũng rất quan trọng mà khụng thể thiếu trong phần xõy dựng trang “Trắc nghiệm” đú là việc xõy dựng cơ sở dữ liệu.

Cỏc cõu hỏi được nhập vào theo hai dạng: dạng text và dạng image (cỏc file dạng *.jpg, *.png hoặc *.gif,…); nếu nhập theo dạng text, người quản trị (GV) cú thể gừ trực tiếp trong ụ cõu hỏi; cũn nếu nhập theo dạng image, người quản trị cú thể dựng chức năng chốn hỡnh ảnh để nhập cõu hỏi.

2.5.7.2. Thực hiện

Cỏch thức xõy dựng và cài đặt trang “Kiểm tra – đỏnh giỏ” như sau:

- Trước hết, chỳng tụi download mĩ nguồn mở iGiveTest - trang trắc nghiệm với PHP&MySQL trờn Internet, rồi Việt húa giao diện, sau đú lưu trong một thư mục cú tờn là “tracnghiem” bao gồm cỏc folder sau:

+ Thư mục “editors” chứa mĩ nguồn cho phần soạn thảo cõu hỏi bao gồm cỏc tớnh năng soạn thảo văn bản, chốn hỡnh ảnh, chốn cỏc file dạng multimedia,…

+ Thư mục “files” chứa cỏc file được upload lờn trang trắc nghiệm, hỗ trợ nhiều định dạng khỏc nhau như: dạng picture, dạng flash, dạng video,…

+ Thư mục “images” chứa cỏc file ảnh cho giao diện của trang trắc nghiệm + Thư mục “inc” bao gồm cỏc file cấu hỡnh và cỏc file *.php là mĩ nguồn thực thi của trang trắc nghiệm. Chỳng tụi Việt húa hay chỉnh sửa giao diện cho trang web cũng là chỉnh sửa cỏc file mĩ nguồn trong thư mục này.

+ Thư mục “Database” chứa cơ sở dữ liệu mà người dựng lưu trữ nhằm mục đớch sao lưu cơ sở dữ liệu cho trang trắc nghiệm.

+ Thư mục “guide” chứa mĩ nguồn trang hướng dẫn sử dụng trang trắc nghiệm với mĩ nguồn là PHP

Ngồi ra trong thư mục “tracnghiem” cũn bao gồm cỏc file Gioithieu.html, file cấu hỡnh config.php, file cung cấp thụng tin bản quyền license.htm...

- Sử dụng cụng cụ Dreamweaver hay một trỡnh soạn thảo mĩ lệnh PHP bất kỳ, mở file thực thi cú tờn là vn.lng.php cú nội dung như hỡnh sau:

Hỡnh 2.31. Nội dung file vn.lng.php mà ta cần chỉnh sửa

- Tiến hành Việt húa tờn cỏc biến, cỏc đoạn mĩ lệnh cần thiết, thay đổi cỏc ảnh xuất hiện trờn giao diện trang trắc nghiệm,…Trong trường hợp này ta chốn file logo.gif làm ảnh giới thiệu cho trang web. Cỏch tạo file logo.gif như sau:

+ Sử dụng phần mềm Adobe Photoshop tạo 1 file ảnh dạng *.jpg cú kớch thước 240x60 rồi chốn hỡnh nền, dũng chữ giới thiệu rồi lưu lại với tờn là logo.jpg

Hỡnh 2.32. Tạo file ảnh cho trang trắc nghiệm

+ Sử dụng phần mềm Flash Intro Maker tạo một ảnh với kớch thước là 240x60 rồi chốn hỡnh nền là file logo.jpg đĩ tạo ở bước trờn. Chốn thờm một file ảnh cú hỡnh nền và dũng chữ “Trắc Nghiệm Húa học” vào phần “Text and Image” của phần mềm Flash Intro Maker.

Ảnh cần chốn thờm vào phần Text and Image của Flash Intro Maker

+ Màn hỡnh thiết kế file logo.gif cú giao diện như sau:

Hỡnh 2.33. Màn hỡnh thiết kế file logo.gif

+ Thờm một số hiệu ứng cho đẹp mắt rồi nhấn nỳt Publish để tạo file logo.gif mà chỳng ta mong muốn, sau đú chốn file ảnh vừa tạo vào phần đầu trang chủ trắc nghiệm bằng đoạn mĩ lệnh sau:

$lngstr['branding']['top_logo'] = '<img src="images/logo.gif" width=240 height=40>';

- Tải về bộ phần mềm WampServer 2.0c và cài đặt lờn hệ thống. Bộ phần mềm này tớch hợp nhiều chức năng bao gồm: Apache version 2.2.8 đúng vai trũ là webserver, php version 5.2.6, và cơ sở dữ liệu MySQL version 5.0.51b.

- Copy thư mục “tracnghiem” vào bờn trong thư mục www của wamp, giả sử theo đường dẫn “C:\wamp\www\tracnghiem”. Tiếp đến, chỉnh sửa file

config.inc.phptrong thư mục inctheo cỏc thụng tin như đoạn code sau:

$srv_settings['title_postfix'] = 'TracNghiemHoaHoc | [Vũ Lờ Hà Khỏnh_Test]'; $srv_settings['default_email'] = 'vlta_vlhk@yahool.com'; $srv_settings['language'] = 'vn'; $srv_settings['db_driver'] = 'mysql'; $srv_settings['db_host'] = 'localhost'; $srv_settings['db_db'] = 'tracnghiem'; $srv_settings['db_user'] = 'root'; $srv_settings['db_password'] = ' '; $srv_settings['table_prefix'] = 'tracnghiemhoahoc_'; $srv_settings['url_root'] = '/tracnghiem/'; $srv_settings['dir_root_full'] = 'C:/wamp/www/tracnghiem/'; $srv_settings['url_files'] = '/tracnghiem/files/'; $srv_settings['dir_files_full'] = 'C:/wamp/www/tracnghiem/files/';

- Mở http://localhost/phpmyadmin/ và tạo một cơ sở dữ liệu “tracnghiem” rồi sau đú Import cơ sở dữ liệu được lưu trong CD vào hệ thống.

Để Import cơ sở dữ liệu chỳng ta làm như sau:

Mở chương trỡnh quản lý cơ sở dữ liệu MySQL với phpMyAdmin:

Hỡnh 2.36. Tạo cơ sở dữ liệu cho trang Trắc nghiệm Húa học

Trờn màn hỡnh giao diện của phpMyAdmin → Chọn cơ sở dữ liệu “tracnghiem” vừa tạo → Bấm vào nỳt Import trờn danh sỏch cỏc tỏc vụ → Bấm chọn mục File to import rồi chọn đường dẫn đến file cơ sở dữ liệu trong thư mục tracnghiem\Database lưu trong CD → Nhấn vào nỳt Go rồi chờ trong giõy lỏt cho quỏ trỡnh Import cơ sở dữ liệu kết thỳc.

- Mở trang trắc nghiệm bằng cỏch gừ địa chỉ trang trắc nghiệm vào cửa sổ Internet Explorer với địa chỉ như sau: http://localhost/tracnghiem/.

Đăng nhập vào hệ thống với username và mật khẩu, ban đầu username là admin, mật khẩu là admin.

- Nhập ngõn hàng cõu hỏi và tạo cỏc bài kiểm tra cho trang trắc nghiệm

+ Cõu hỏi cú thể được nhập theo dạng text hoặc dạng ảnh. Loại cõu hỏi cũng cú nhiều dạng, bao gồm: Cõu hỏi nhiều lựa chọn, cõu hỏi Đỳng/Sai, cõu hỏi ngắn, cõu hỏi dễ,… nờn rất thuận tiện cho GV khi nhập cõu hỏi. Để cú thể nhập cõu hỏi, GV cần đăng nhập vào hệ thống với username là admin (Quản trị của trang trắc nghiệm). Khi đú, nhấn nỳt chọn “Ngõn hàng đề” rồi bấm nỳt tạo cõu hỏi mới; một giao diện mới hiện ra cho phộp GV cú thể dễ dàng bổ sung thờm cõu hỏi vào ngõn hàng cõu hỏi.

Hỡnh 2.38. Giao diện màn hỡnh trang nhập cõu hỏi trắc nghiệm

Trong trường hợp nếu ta muốn nhập cõu hỏi dạng image, trước hết ta cần tạo cỏc ảnh cú liờn quan đến cỏc cõu hỏi trước, sau đú sử dụng tớnh năng chốn ảnh, multimedia để ta upload lờn trang trắc nghiệm.

Hỡnh 2.39. Nhập cõu hỏi bằng cỏch chốn hỡnh ảnh

Khi cỏc cõu hỏi được nhập xong, chỳng ta sẽ cú một danh sỏch cỏc cõu hỏi được sắp xếp theo từng chương, từng chủ đề trờn trang trắc nghiệm. Để tạo cỏc bài kiểm tra, trước hết đăng nhập với username là admin, nhấn vào nỳt “Quản lý bài kiểm tra” rồi điền cỏc thụng tin trờn cỏc ụ thụng tin của bài kiểm tra.

Sau khi điền cỏc thụng tin và thiết đặt cỏc thụng số cho bài kiểm tra, chỳng ta nhấn nỳt “Cập nhật/Chuyển qua cõu hỏi” và bắt đầu nhập cỏc cõu hỏi cho bài kiểm tra đú. Ta cú thể nhập lần lượt từng cõu hỏi mới, hoặc cũng cú thể nhập theo cỏch thức đỏnh dấu lựa chọn cỏc cõu hỏi cú trong ngõn hàng cõu hỏi mà ta đĩ nhập.

Một phần của tài liệu thiết kế và sử dụng website hỗ trợ dạy và học phần lý thuyết chủ đạo môn hóa học ở trường trung học phổ thông (Trang 103 - 111)