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

Trong đó ngôn ngữ lập trình HTML là một ngôn ngữ cơ bản và đượcxem là tiên phong trong lãnh vực web, ngôn ngữ HTML vừa đơn giản cho ngườihọc, cho người sử dụng mà còn làm giảm dung lượng

MỤC LỤC

1.2 Tổng quan các vấn đề liên quan đến giải pháp 2

2.2.1 Hướng dẫn cài đặt phần mềm Notepad++ để viết mã lập trình 42.2.2 Hướng dẫn các tab cơ bản của HTML xây dựng giao diện trắc

3.3 Khả năng triển khai, áp dụng các giải pháp 36

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 đanglan 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ữngtiế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ểnmạnh mẽ Trong đó ngôn ngữ lập trình HTML là một ngôn ngữ cơ bản và đượcxem là tiên phong trong lãnh vực web, ngôn ngữ HTML vừa đơn giản cho ngườihọ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êntrang 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ậptrì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ớicá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à trongkhâ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ắcnghiệ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ệmnhư 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ữnghướ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 đẩymạ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ôngtin 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ônngữ đá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ụngWebsite 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

 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ựngcá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ậptrình HTML và Java script cũng khá là dễ dàng cho người học và người sử dụngChí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ốngtrắ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ôngphả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 đượcmộ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.

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

< /html > // tab đóng trang web

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

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

8

Chạy lên được:

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: <a href="url"> link text< /a >

Ví dụ: < a href ="https://www.w3schools.com/html/"> Mở 1 trang học HTML < /a >

Viết code

10

Kết quả chạy trang web

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:

< input type ="radio" name ="gender" value ="male" checked > Male < br >

Trong đó:

type ="radio" : kiê1 u nút chọn

name ="gender" : tên biê( n, người dùng tự đặt

value ="male" : kiê1 u dữ liệu, người dùng tự đặt

Male : phần nội dung người dùng gõ

vd: xem đoạn code sau

< form >

< input type ="radio" name ="gender" value ="male" checked > Tin học < br >

< input type ="radio" name ="gender" value ="female"> Tiê( ng Anh < br >

< input type ="radio" name ="gender" value ="other"> Môn khác

< /form >

Kê( t qua 1:

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 <script> </script>

Ví dụ: chạy một lệnh Java script in ra câu “chào các bạn”

 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,

["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?",

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

 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];

test.innerHTML += "<input type='radio' name='choices' value='A'>

 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.

<!DOCTYPE html>

<html lang="en">

["Bác Hồ sinh năm mấy?", "Năm 1890", "Năm 1879", "Năm 1889", "A"],

["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?",

test.innerHTML = "<h2>Bạn đúng "+correct+" trong "+questions.length+" câu hỏi</h2>";

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

get("test_status").innerHTML = "Câu hỏi thứ: "+(pos+1)+" trong

"+questions.length + " câu hỏi";

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

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

<!DOCTYPE html>

["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?",

test.innerHTML = "<h2>Bạn đúng "+correct+" trong

"+questions.length+" câu hỏi</h2>";

get("test_status").innerHTML = "HOÀN THÀNH BÀI KIỂM TRA";

26

// trả về kết quả khi hoàn tất bài kiểm tra

get("test_status").innerHTML = "Câu hỏi thứ: "+(pos+1)+" trong

"+questions.length + " câu hỏi";

["Bit là gì?", "Là đơn vị nhỏ nhất của thông tin được sử dụng trong máy tính", "Là một phần tử nhỏ mang một trong 2 giá trị 0 và 1", "Cả A và B",

["Danh sách các mục chọn trong thực đơn gọi là:", "Menu bar ", "Menu pad", "Menu options ", "A"],

["Để chạy một ứng dụng trong Windows, bạn làm thế nào?", "Nhấp phải vào biểu tượng và chọn Open ", "Nhấp đúp vào biểu tượng ", "Tất cả đều đúng ", "C"],

["Chương trình cho phép định lại cấu hình hệ thống thay đổi môi trường làm việc cho phù hợp", "Display ", "Control panel", "Sreen Saver ", "B"], ["Thao tác Shift + Enter có chức năng gì?", "Xuống hàng chưa kết thúc paragraph ", "Nhập dữ liệu theo hàng dọc", "Xuống một trang màn hình",

"C"],

["Phím nóng Ctrl + Shift + =, có chức năng gì?", "Bật hoặc tắt chỉ số trên",

"Bật hoặc tắt chỉ số dưới ", "Bật hoặc tắt gạch dưới nét đôi ", "A"],

["Để kết thúc việc trình diễn trong PowerPoint, ta bấm:", "Phím ESC",

"Phím Enter", "Phím Delete", "A"]

3 HIỆU QUẢ GIẢI PHÁP

3.1 Thời gian áp dụng hoặc áp dụng thử của giải pháp

Đã áp dụng năm 2017, ra đề kiểm tra cho học sinh khối 6, khối 7, tạo chương

có thể áp dụng trên mọi Window, chỉ cần người sử dụng có đam mê và chịu học hỏi

sẽ tạo ra một hệ thống trắc nghiệm hay Và chắc chắn rằng giải pháp tạo hệ thốngtrắc nghiệm này sẽ giúp ích rất nhiều cho mọi người và nâng cao giải pháp giáo dụchọc sinh, làm cho các em học sinh hứng thú hơn trong học tập

Ở trên tôi chỉ ví dụ 4 câu hỏi, nếu mọi người muốn làm nhiều câu hỏi hơn thìchỉ việc thêm câu hỏi ở phần khai báo

var questions = [

["Bác Hồ sinh năm mấy?", "Năm 1890", "Năm 1879", "Năm 1889", "A"], ["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"]

// Thêm câu hỏi ở đây

];

Tôi nghĩ với giải pháp này người đọc chỉ cần 1 buổi làm việc chăm chỉ sẽ thựchiện được cho riêng mình một hệ thống trắc nghiệm, ngoài ra học sinh THCS cũng

có thể học và thực hiện thử để bản thân có thể trãi nghiệm và tự tao cho mình 1 hệthống trắc nghiệm thi thố với các bạn

3.2 Hiệu quả đạt được

Tạo ra một hệ thống trắc nghiệm thú vị sẽ kích thích quá trình học tập và làmviệc giữa thầy và trò, giải quyết được một số bài kiểm tra có thể áp dụng trắcnghiệm để các em kiểm tra lấy điểm Tuy nhiên người viết phải tự sao chép vàhoán đổi các câu hỏi để tạo sự công bằng cho tất cả các em học sinh kiểm tra

Giải pháp tạo hệ thống trắc nghiệm tự động chấm điểm đã áp dụng thànhcông trong quá trình giảng dạy của tôi, làm cho học sinh thấy mới mẻ trong kiểmtra học tập, các em rất vui vì có thể biết điểm liền và có thể tự điều chỉnh lại việchọc của mình

3.3 Khả năng triển khai, áp dụng các giải pháp

Giải pháp có thể triển khai rộng dễ dàng đến mọi người, chỉ cần có một trình độtin học cơ bản, rồi áp dụng các mã lệnh trên thì sẽ thành công

Tôi đã áp dụng thành công giải pháp này trong quá trình giảng dạy của mình,học sinh rất thích thú tới giờ kiểm tra

4 KẾT LUẬN VÀ ĐỀ XUẤT, KIẾN NGHỊ

4.1 Kết luận

Nhằm nâng cao các giải pháp trong giảng dạy, kiểm tra đánh giá, tôi đã thựchiện cô động các mã lệnh để xây dựng một hệ thống trắc nghiệm Mà bất kỳ ngườinào cũng có thể tự xây dựng cho riêng mình một hệ thống trắc nghiệm đơn giản màhiệu quả Tạo ra môi trường kiểm tra mới mẻ và thích thú cho học sinh

4.2 Đề xuất, kiến nghị

Người sử dụng giải pháp này cần có một kiến thức cơ bản về tin học, có thể từ lứa tuổi các em học sinh THCS trở lên

36

TÀI LIỆU THAM KHẢO

Một số trang web tự học thiết kế web

https://www.w3schools.com/

https://freetuts.net/tao-template-html5-dau-tien-74.htmlhttps://vietjack.com/javascript/

Xác nhận đánh giá, xếp loại của đơn vị

Thủ trưởng đơn vị

(ký tên đóng dấu)

Long Điền, ngày 03 tháng 10 năm 2018

Tôi xin cam đoan đây là SKKN của bản thân tôi viết, không sao chép nội dung của người khác

Ký tên

Bùi Thanh Liêm

38