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 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 vấn đề liên quan đến giải pháp 1.3 Mục tiêu giải pháp 1.4 Cá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 phạm vi áp dụng 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 tab HTML xây dựng giao diện trắc nghiệm 2.2.3 Hướng dẫn lệnh javascript xây dựng hệ thống chấm tự động 2.2.4 Xây dựng kiểm tra trắc nghiệm HIỆU QUẢ ÁP DỤNG 3.1 Thời gian áp dụng 3.2 Hiệu đạt 3.3 Khả triển khai, áp dụng giải pháp 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 TRANG 2 3 3 4 4 13 25 35 35 36 36 36 36 36 37 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 hội nhập tồn cầu nói chung, hội nhập cơng nghiệp 4.0 lan tỏa tồn giới Việc sử dụng công cụ web tảng mẻ tương lai phát triên mạnh tảng Nhận thấy tiến giới khoa học phần mềm, đặc biệt tảng web phát triển mạnh mẽ Trong ngơn ngữ lập trình HTML ngơn ngữ xem tiên phong 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à làm giảm dung lượng cho trang web nhiều, đồng thời đáp ứng hầu hết mong đợi người dùng trình bày trang web, bên cạnh việc kết hợp với ngôn ngữ Java script ngôn ngữ lập trình mạnh trang web, đáp ứng yêu cầu người dùng từ dễ dàng đến phức tạp, ngồi ngơn ngữ Java script có khả kết hợp mạnh mẽ với ngơn ngữ lập trình khác, tạo đoạn mã dễ hiểu nhẹ nhớ Nhận thấy xu hướng 4.0 lan tỏa mạnh, muốn ứng dụng công nghệ thông tin giảng dạy để giảm gánh nặng cho người giáo viên Đặc biệt khâu kiểm tra đánh giá học sinh Người giáo viên tạo hệ thống trắc nghiệm web tự động chấm điểm làm cho học sinh cảm thấy mẽ kiểm tra, đỡ vất vả cho giáo viên khâu chấm điểm Và đặc biệt giáo viên xây dựng cho hệ thống kiểm tra trắc nghiệm mà không cần phải hiểu biết sâu tin học Chỉ cần làm theo hướng dẫn đề tài thực 1.2 Tổng quan vấn đề liên quan đến giải pháp Trong đề tài hướng dẫn tổng quan cho người: − Xây dựng hệ thống trắc nghiệm tự động ngơn ngữ lập trình HTML ngơn ngữ lập trình Java script − Hướng dẫn người cách sử dụng − Hướng dẫn người cách cài đặt phần mềm viết mã lập trình 1.3 Mục tiêu giải pháp Trong giai đoạn hội nhập công nghiệp 4.0 người giáo viên cần đẩy mạnh ứng dụng công nghệ thông tin vào giảng dạy Mục tiêu giải pháp hướng dẫn người cách xây dựng hệ thống trắc nghiệm cho riêng dễ dàng sử dụng nâng cao tay nghề giáo viên việc ứng dụng công nghệ thông tin vào giảng dạy 1.4 Căn đề xuất giải pháp 1.4.1 Cơ sở lý luận HTML chữ viết tắt cụm từ HyperText Markup Language (dịch Ngôn ngữ đánh dấu siêu văn bản) sử dụng để tạo trang web, website chứa nhiều trang trang quy tài liệu HTML Cha đẻ HTML Tim Berners-Lee, người khai sinh World Wide Web chủ tịch World Wide Web Consortium (W3C – tổ chức thiết lập chuẩn môi trường Internet) Javascript ngơn ngữ lập trình kịch dựa vào đối tượng phát triển có sẵn tự định nghĩa ra, javascript sử dụng rộng rãi ứng dụng Website Javascript hỗ trợ tất trình duyệt Firefox, Chrome, chí trình duyệt thiết bị di động có hỗ trợ Để xây dựng hệ thống trắc nghiệm tự động người sử dụng cần biết ngơn ngữ lập trình HTML Java script 1.4.2 Cơ sở thực tiễn − Xây dựng giao diện trang web ngơn ngữ lập trình HTML − Lập trình hệ thống tự động ngơn ngữ lập trình Java script − Xây dựng giao diện đẹp cần 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 tổng kết kinh nghiệm 1.6 Đối tượng phạm vi áp dụng − Đối tượng nghiên cứu: ngôn ngữ lập trình HTML Java script − Phạm vi áp dụng: học sinh, giáo viên cho người yêu thích tin học muốn xây dựng cho riêng hệ thống trắc nghiệm tự động 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 nghiên cứu học tập ngơn ngữ lập trình, tơi nhận thấy việc xây dựng phần mềm web xu hướng toàn cầu, việc sử dụng ngơn ngữ lập trình HTML Java script dễ dàng cho người học người sử dụng Chính lòng nung nấu suy nghĩ phải cố gắng thực đề tài giúp cho giáo viên người tự xây dựng hệ thống trắc nghiệm tự động chấm điểm mà không cần phải biết nhiều tin học, bỏ chi phí th mua sản phẩm, tự có thểm làm hệ thống trắc nghiệm cho riêng cho 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 bạn 64bit hay 32bit mà tải cài đặt cho phù hợp) Bước 2: Ở chọn 64bit chọn vào địa chọn Notepad++ v7.5.8 - Current Version https://notepad-plus-plus.org/download/ Bước 3: chọn vào hình download phía dưới: Bước 4: sau tải xong, tiến hành cài đặt làm theo hướng dẫn cài đặt Chương trình xuất desktop với biểu tượng sau: Và giao diên chương trình mở lên: 2.2.2 Hướng dẫn tab HTML xây dựng giao diện trắc nghiệm a Bố cục trang web: Page Title //Tiêu đề trang web This is a Heading // phần viết mã cho trang

This is a paragraph.

// tab đóng trang web Vd: mở notepad++ lên gõ đoạn mã sau Sau lưu lại đặt tên webtracnghiem.html Chạy lên được: b Tab liên kết: tab giúp thực tạo link liên kết đến trang web khác Cú pháp: link text Ví dụ: Mở trang học HTML Viết code Kết chạy trang web 10 24 Kết 2.2.4 Xây dựng kiểm tra trắc nghiệm Bước 1: bạn copy đoạn code sau vào Notepad++ để sửa 25 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 sau máy tính khơng chạy được?", "Ram", "Mainboard", "Cả A B", "C"], ["Trẻ em tuổi vào học lớp 1?", "5", "6", "7", "B"], ["Bài hát quốc ca Việt Nam 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 "+correct+" "+questions.length+" câu hỏi"; get("test_status").innerHTML = "HOÀN THÀNH BÀI KIỂM TRA"; 26 // trả kết hoàn tất kiểm tra pos = 0; correct = 0; // dừng trả kết return false; } get("test_status").innerHTML = "Câu hỏi thứ: "+(pos+1)+" "+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+""; test.innerHTML += " "+chC+""; test.innerHTML += "Quay lại"; test.innerHTML += "Câu hỏi Kết quả"; } function goBack() { pos ; renderQuestion(); } function checkAnswer(){ 27 choices = document.getElementsByName("choices"); for(var i=0; i