intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Sáng kiến kinh nghiệm: 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

Chia sẻ: Bcom Bui | Ngày: | Loại File: DOC | Số trang:40

225
lượt xem
19
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Sáng kiến kinh nghiệm với mục tiêu: 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. Để nắm chi tiết nội dung nghiên cứu mời các bạn cùng tham khảo.

Chủ đề:
Lưu

Nội dung Text: Sáng kiến kinh nghiệm: 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 TRANG 1. CƠ SỞ ĐỀ XUẤT GIẢI PHÁP 2 1.1. Sự cần thiết hình thành giải pháp 2 1.2. Tổng quan các vấn đề liên quan đến giải pháp 2 1.3. Mục tiêu của giải pháp 3 1.4. Các căn cứ đề xuất giải pháp 3 1.4.1. Cơ sở lý luận 3 1.4.2. Cơ sở thực tiễn 3 1.5. Phương pháp nghiên cứu 3 1.6. Đối tượng và phạm vi áp dụng 4 2. QUÁ TRÌNH HÌNH THÀNH VÀ NỘI DUNG GIẢI PHÁP 4 2.1 . Quá trình hình thành giải pháp 4 2.2. Nội dung giải pháp 4 2.2.1. Hướng dẫn cài đặt phần mềm Notepad++ để viết mã lập  4 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  7 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  13 chấm tự động 2.2.4. Xây dựng một bài kiểm tra trắc nghiệm 25 3. HIỆU QUẢ ÁP DỤNG 35 3.1. Thời gian áp dụng 35 3.2. Hiệu quả đạt được 36 3.3. Khả năng triển khai, áp dụng các giải pháp 36 4. KẾT LUẬN VÀ ĐỀ XUẤT, KIẾN NGHỊ 36 4.1. Kết luận 36 4.2. Đề xuất, kiến nghị 36 *Tài liệu tham khảo 37 1 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: 2 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 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 3 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ự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 4 ( tùy theo windows của bạn là 64bit hay 32bit mà tải bản cài đặt cho phù hợp) 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/ 5 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 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 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 11 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õ 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 13 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ả:  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+"

"; 16   // the += appends to the data we started on the line above   test.innerHTML += "  "+chA+"
";   test.innerHTML += "  "+chB+"
";   test.innerHTML += "  "+chC+"

"; test.innerHTML += "Submit  Answer"; 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  Hệ Thống Trắc Nghiệm 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){ 18   return document.getElementById(x); } 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;   }   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 += "  "+chA+"
";   test.innerHTML += "  "+chB+"
"; 19   test.innerHTML += "  "+chC+"

";   test.innerHTML += "Câu hỏi tiếp  theo"; } function checkAnswer(){      choices = document.getElementsByName("choices");   for(var i=0; i 20

 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 21 22 Ví dụ ta chạy chương trình với chọn đáp án sai 23 24 Kết quả 25 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  Hệ Thống Trắc Nghiệm 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"], 26   ["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");   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]; 27   chC = questions[pos][3];   test.innerHTML = "

"+question+"

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

";   test.innerHTML += "Quay lại";   test.innerHTML += "Câu hỏi tiếp theo ­  Kết quả";   } function goBack() {    pos­­;  renderQuestion(); } function checkAnswer(){      choices = document.getElementsByName("choices");   for(var i=0; i

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

Bước 2: bạn tiến hành nhập câu hỏi var questions = [   ["Bộ nhớ RAM và ROM là bộ nhớ gì?", "Secondary memory", "Receive  memory", "Primary memory", "C"],   ["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",  "C"],   ["Hex là hệ đếm:", "Hệ nhị phân ", "Hệ bát phân", "Hệ thập lục phân",  "B"], 29   ["Hệ thống các chương trình đảm nhận chức năng làm môi trường trung  gian giữa người sử dụng và phần cứng của máy tính được gọi là:", "Phần  mềm", "hệ điều hành", "Các loại trình dịch trung gian", "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"] ]; Bước 3: sửa tiêu đề kiểm tra

 **********ĐỀ KIỂM TRA 15 PHÚT********** 

 Sau khi kết thúc bài kiểm tra kết quả sẽ hiển thị ra số câu bạn đúng,  tương đương với số điểm bạn đạt được 

30 Kết quả đạt được: 31 32 33 34 35 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ống trắ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ục họ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"] 36 // 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ực hiệ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àm việ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ắc nghiệ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ành  cô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ểm tra 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ệc họ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ực  hiệ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ười nào cũng có thể  tự  xây dựng cho riêng mình một hệ  thống trắc nghiệm   37 đơ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. 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.html https://vietjack.com/javascript/ 38 Xác nhận đánh giá, xếp loại của đơn  Long Điền, ngày 03 tháng 10 năm 2018 vị 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 ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ Thủ trưởng đơn vị (ký tên đóng dấu) 39 40
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
3=>0