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
//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:
<!DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
//Tiêu đề một trang web
</head>
<body>
This is a Heading
// phần này viết mã chính cho trang
This is a paragraph.
</body>
</html>
// 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: <a href="url">link text</a>
Ví dụ: <a href="//www.w3schools.com/html/">Mở trang học HTML</a>
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:
<input type="radio" name="gender" value="male" checked> 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
<form>
<input type="radio" name="gender" value="male" checked> Tin học
<input type="radio" name="gender" value="female"> Tiếng Anh
<input type="radio" name="gender" value="other"> Môn khác
</form>
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
//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”
<script>
document.getElementById("demo").innerHTML = "Chào các bạn!";
</script>
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 += "<input type='radio' name='choices' value='A'>
"+chA+"
";
test.innerHTML += "<input type='radio' name='choices' value='B'>
"+chB+"
";
test.innerHTML += "<input type='radio' name='choices' value='C'>
"+chC+"
";
test.innerHTML += "<button title='checkAnswer()'>Submit
Answer</button>";
• 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; i
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.
<!DOCTYPE html>
<html lang="en">
17
<head>
<meta
charset="utf-8"/>
<title> Hệ Thống Trắc Nghiệm</title>
<style>
div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; backgroundcolor:#E5FCE3; width:50%;}
</style>
<script type="text/javascript">
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
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"]
];
function get(x){
return document.getElementById(x);
}
function renderQuestion(){
test = get("test");
18
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;
}
get("test_status").innerHTML = "Câu hỏi thứ: "+(pos+1)+" trong
"+questions.length + " câu hỏi";
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "
"+question+"
";test.innerHTML += "<input type='radio' name='choices' value='A'>
"+chA+"
";
test.innerHTML += "<input type='radio' name='choices' value='B'>
"+chB+"
";
test.innerHTML += "<input type='radio' name='choices' value='C'>
"+chC+"
";
test.innerHTML += "<button title='checkAnswer()'>Câu hỏi tiếp
theo</button>";
}
function checkAnswer(){
19
choices = document.getElementsByName("choices");
for(var i=0; i
choice = choices[i].value;
}
}
if(choice == questions[pos][4]){
correct++;
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>
</head>
<body>
CHÀO MỪNG BẠN ĐẾN VỚI THỬ THÁCH CỦA CHÚNG TÔI </H2>
<div id="test"></div>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
25