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

0
43
lượt xem
5
download

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ô tả tài liệu
  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

  1. 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
  2. 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
  3. 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
  4. 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
  5. ( 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
  6. 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
  7. 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
  8. Sau đó lưu lại và đặt tên webtracnghiem.html 8
  9. Chạy lên được: 9
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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” document.getElementById("demo").innerHTML = "Chào các bạn!"; Kết quả:  Web 14
  15. 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
  16.   ["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
  17.   // 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
  18.  Hệ Thống Trắc Nghiệm div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background­ color:#E5FCE3; width:50%;} 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
  19.   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
  20.   test.innerHTML += "  "+chC+"";   test.innerHTML += "Câu hỏi tiếp  theo"; } function checkAnswer(){      choices = document.getElementsByName("choices");   for(var i=0; i

CÓ THỂ BẠN MUỐN DOWNLOAD

Đồng bộ tài khoản