Tải bản đầy đủ

Hướng dẫn xây dựng hệ thống trắc nghiệm tự động chấm điểm trên web bằng HTML và javascript

MỤC LỤC
NỘI DUNG
1. CƠ SỞ ĐỀ XUẤT GIẢI PHÁP
1.1. Sự cần thiết hình thành giải pháp
1.2. Tổng quan các vấn đề liên quan đến giải pháp
1.3. Mục tiêu của giải pháp
1.4. Các căn cứ đề xuất giải pháp
1.4.1. Cơ sở lý luận
1.4.2. Cơ sở thực tiễn
1.5. Phương pháp nghiên cứu
1.6. Đối tượng và phạm vi áp dụng
2. QUÁ TRÌNH HÌNH THÀNH VÀ NỘI DUNG GIẢI PHÁP
2.1 . Quá trình hình thành giải pháp
2.2. Nội dung giải pháp
2.2.1. Hướng dẫn cài đặt phần mềm Notepad++ để viết mã lập trình
2.2.2. Hướng dẫn các tab cơ bản của HTML xây dựng giao diện trắc
nghiệm
2.2.3. Hướng dẫn các lệnh cơ bản javascript xây dựng hệ thống
chấm tự động
2.2.4. Xây dựng một bài kiểm tra trắc nghiệm
3. HIỆU QUẢ ÁP DỤNG

3.1. Thời gian áp dụng
3.2. Hiệu quả đạt được
3.3. Khả năng triển khai, áp dụng các giải pháp
4. KẾT LUẬN VÀ ĐỀ XUẤT, KIẾN NGHỊ
4.1. Kết luận
4.2. Đề xuất, kiến nghị
*Tài liệu tham khảo

1

TRANG
2
2
2
3
3
3
3
3
4
4
4
4
4
7
13
25
35
35
36
36
36
36
36
37


1. CƠ SỞ ĐỀ XUẤT GIẢI PHÁP
1.1. Sự cần thiết hình thành giải pháp
Trong xu thế hội nhập toàn cầu nói chung, hội nhập nền công nghiệp 4.0 đang
lan tỏa trên toàn thế giới. Việc sử dụng công cụ web là một nền tảng mới mẻ và
trong tương lai còn phát triên mạnh hơn trên nền tảng này. Nhận thấy được những
tiến bộ trong thế giới khoa học phần mềm, đặc biệt nền tảng web đang phát triển
mạnh mẽ. Trong đó ngôn ngữ lập trình HTML là một ngôn ngữ cơ bản và được
xem là tiên phong trong lãnh vực web, ngôn ngữ HTML vừa đơn giản cho người
học, cho người sử dụng mà còn làm giảm dung lượng cho trang web rất nhiều,
đồng thời đáp ứng được hầu hết các mong đợi của người dùng về trình bày trên
trang web, bên cạnh đó việc kết hợp với ngôn ngữ Java script là một ngôn ngữ lập
trình mạnh trên trang web, đáp ứng được các yêu cầu của người dùng từ dễ dàng
đến phức tạp, ngoài ra ngôn ngữ Java script còn có khả năng kết hợp mạnh mẽ với
các ngôn ngữ lập trình khác, tạo ra những đoạn mã dễ hiểu và nhẹ bộ nhớ.
Nhận thấy xu hướng 4.0 lan tỏa mạnh, tôi cũng muốn ứng dụng công nghệ
thông tin và giảng dạy để giảm gánh nặng cho người giáo viên. Đặc biệt là trong
khâu kiểm tra đánh giá học sinh. Người giáo viên có thể tạo ra một hệ thống trắc
nghiệm trên web và tự động chấm điểm sẽ làm cho học sinh cảm thấy mới mẽ trong
kiểm tra, và đỡ vất vả cho giáo viên trong khâu chấm điểm. Và đặc biệt là bất kỳ
giáo viên cũng có thể xây dựng cho mình một hệ thống kiểm tra trắc nghiệm như
thế này mà không cần phải hiểu biết sâu về tin học. Chỉ cần làm theo những hướng
dẫn của tôi ở trong đề tài này là có thể thực hiện được.
1.2. Tổng quan các vấn đề liên quan đến giải pháp
Trong đề tài này tôi sẽ hướng dẫn tổng quan cho mọi người:
− Xây dựng một hệ thống trắc nghiệm tự động bằng ngôn ngữ lập trình HTML
và ngôn ngữ lập trình Java script
− Hướng dẫn mọi người cách sử dụng
2


− Hướng dẫn mọi người cách cài đặt phần mềm viết mã lập trình.
1.3. Mục tiêu của giải pháp
Trong giai đoạn hội nhập nền công nghiệp 4.0. người giáo viên cũng cần đẩy
mạnh ứng dụng công nghệ thông tin vào giảng dạy. Mục tiêu của giải pháp này là
hướng dẫn mọi người cách xây dựng một hệ thống trắc nghiệm cho riêng mình và
dễ dàng sử dụng nâng cao tay nghề giáo viên trong việc ứng dụng công nghệ thông
tin vào giảng dạy.
1.4. Căn cứ đề xuất giải pháp
1.4.1 Cơ sở lý luận
HTML là chữ viết tắt của cụm từ HyperText Markup Language (dịch là Ngôn
ngữ đánh dấu siêu văn bản) được sử dụng để tạo một trang web, trên một website
có thể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML. Cha đẻ
của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và
chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn
trên môi trường Internet).
Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có
sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng
Website. Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox,
Chrome, ... thậm chí các trình duyệt trên thiết bị di động cũng có hỗ trợ.
Để xây dựng được hệ thống trắc nghiệm tự động này người sử dụng cần biết về
ngôn ngữ lập trình HTML và Java script.
1.4.2 Cơ sở thực tiễn
− Xây dựng giao diện trang web bằng ngôn ngữ lập trình HTML
− Lập trình hệ thống tự động bằng ngôn ngữ lập trình Java script
− Xây dựng giao diện đẹp cần sự thẩm mỹ người dùng
1.5. Phương pháp nghiên cứu
− Phương pháp thực nghiệm khoa học
3


− Phương pháp phân tích và tổng kết kinh nghiệm
1.6. Đối tượng và phạm vi áp dụng
− Đối tượng nghiên cứu: ngôn ngữ lập trình HTML và Java script
− Phạm vi áp dụng: học sinh, giáo viên và cho mọi người yêu thích tin học
muốn xây dựng cho riêng mình một hệ thống trắc nghiệm tự động.
2. QUÁ TRÌNH HÌNH THÀNH VÀ NỘI DUNG GIẢI PHÁP
2.1. Quá trình hình thành giải pháp
Sau khi nghiên cứu học tập các ngôn ngữ lập trình, tôi nhận thấy việc xây dựng
các phần mềm trên web là xu hướng của toàn cầu, và việc sử dụng ngôn ngữ lập
trình HTML và Java script cũng khá là dễ dàng cho người học và người sử dụng
Chính vì vậy trong lòng tôi nung nấu một suy nghĩ phải cố gắng thực hiện một
đề tài giúp cho các giáo viên và mọi người có thể tự mình xây dựng một hệ thống
trắc nghiệm tự động chấm điểm mà không cần phải biết nhiều về tin học, không
phải bỏ ra chi phí thuê hoặc mua các sản phẩm, tự mình cũng có thểm làm được
một hệ thống trắc nghiệm cho riêng mình và cho các em học sinh trãi nghiệm.
2.2 . Nội dung giải pháp

2.2.1 Hướng dẫn cài đặt phần mềm Notepad++ để viết mã lập trình
Bước 1: vào trang web google gõ vào ô tìm kiếm Notepad++ download
( tùy theo windows của bạn là 64bit hay 32bit mà tải bản cài đặt cho phù hợp)

4


Bước 2: Ở đây tôi chọn bản 64bit và chọn vào địa chỉ như đã chọn ở dưới.
Notepad++ v7.5.8 - Current Version
https://notepad-plus-plus.org/download/

1.

5


Bước 3: chọn vào hình download như phía dưới:

Bước 4: sau khi tải xong, tiến hành cài đặt và làm theo hướng dẫn cài đặt. Chương
trình sẽ xuất hiện trên desktop với biểu tượng như sau:

Và giao diên chương trình khi mở lên:

6


2.2.2 Hướng dẫn các tab cơ bản của HTML xây dựng giao diện trắc nghiệm
a. Bố cục một trang web:



Page Title

//Tiêu đề một trang web



This is a Heading



// phần này viết mã chính cho trang

This is a paragraph.





// tab đóng trang web

Vd: mở notepad++ lên và gõ đoạn mã sau

7


Sau đó lưu lại và đặt tên webtracnghiem.html

8


Chạy lên được:

9


b. Tab liên kết: tab này giúp chúng ta có thể thực hiện tạo một link liên kết
đến một trang web khác.
Cú pháp: link text
Ví dụ: Mở trang học HTML

Viết code

Kết quả chạy trang web
10


Khi bạn click vào sẽ chạy đến trang web học HTML quốc tê rất hay

c. Tab nút chọn đối tượng ( Radio Button Input)
Cú pháp:
Male


Trong đó:
type="radio" : kiểu nút chọn
name="gender" : tên biến, người dùng tự đặt
value="male" : kiểu dữ liệu, người dùng tự đặt
Male : phần nội dung người dùng gõ
11


vd: xem đoạn code sau

Tin học

Tiếng Anh

Môn khác

Kết quả:

12


Còn rất nhiều lệnh hay và tab hay, các bạn có thể xem và học tại trang web
https://www.w3schools.com/html/default.asp
2.2.3 Hướng dẫn các lệnh cơ bản javascript xây dựng hệ thống chấm tự động
a. Chạy javascript trong HTML
Để chạy java script trong HTML người dùng cần tab
Ví dụ: chạy một lệnh Java script in ra câu “chào các bạn”



Kết quả:

13


 Web

14


b. Xây dựng mã lệnh chấm tự động trắc nghiệm
• Khai báo các biến để sử dụng
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC,
correct = 0;
• Khai báo gõ nội dung câu hỏi, kết quả
var questions = [
["nội dung câu hỏi thứ 1", "kết quả A", " kết quả B ", " kết quả C ", "Gõ đáp
án đúng"]
]
Ví dụ: ở đây tôi sẽ thử tạo 4 câu hỏi, nếu muốn nhiều hơn chỉ việc thêm dòng
lệnh phía trên vào phần mã lệnh bên dưới.
var questions = [
["Bác Hồ sinh năm mấy?", "Năm 1890", "Năm 1879", "Năm 1889", "A"],
15


["Thiếu phần nào sau đây máy tính không chạy được?", "Ram",
"Mainboard", "Cả A và B", "C"],
["Trẻ em mấy tuổi vào học lớp 1?", "5", "6", "7", "B"],
["Bài hát quốc ca Việt Nam được nhạc sĩ Văn Cao sáng tác vào năm nào?",
"1944", "1945", "1946", "A"]
];
• Xây dựng hàm đọc câu hỏi
Function renderQuestion(){
test = get("test");
if(pos >= questions.length){
test.innerHTML = "

Bạn đúng "+correct+" trong "+questions.length+"
câu hỏi

";
get("test_status").innerHTML = "HOÀN THÀNH BÀI KIỂM TRA";
// trả về kết quả khi hoàn tất bài kiểm tra
pos = 0;
correct = 0;
// dừng và trả kết quả
return false;
}
• Lệnh lấy kết quả của người chọn
get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "

"+question+"

";
// the += appends to the data we started on the line above
16


test.innerHTML += "
"+chA+"
";
test.innerHTML += "
"+chB+"
";
test.innerHTML += "
"+chC+"

";
test.innerHTML += "";
• Hàm kiểm tra kết quả chọn và tính điểm
function checkAnswer(){
choices = document.getElementsByName("choices");
for(var i=0; iif(choices[i].checked){
choice = choices[i].value;
}
}
if(choice == questions[pos][4]){
correct++;
}
pos++;
renderQuestion();
}
• Lệnh hiển thị kết quả lên màn hình
window.addEventListener("load", renderQuestion, false);
c. Tổng hợp các lệnh xây dựng hệ thống câu hỏi trắc nghiệm.


17




Hệ Thống Trắc Nghiệm




CHÀO MỪNG BẠN ĐẾN VỚI THỬ THÁCH CỦA CHÚNG TÔI






Vd: chạy thử kết quả trên
20


21


22


• Ví dụ ta chạy chương trình với chọn đáp án sai

23


24


Kết quả

2.2.4 Xây dựng một bài kiểm tra trắc nghiệm
Bước 1: bạn copy đoạn code sau vào Notepad++ để sửa


25


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×

×