8. Những đóng góp mới của đề tài nghiên cứu
2.2. Những định hướng khi thiết kế ebook
2.2.1. Mục đích thiết kế ebook
Ebook được thiết kế với mục đích cung cấp một công cụ hỗ trợ đắc lực cho hoạt động rèn luyện kĩ năng giải bài tập môn hoá học của HS THPT và tự học, từ đó nâng cao hiệu quả học tập. Ebook được biên soạn chi tiết, thiết kế sinh động góp phần khơi dậy hứng thú học tập, lòng ham hiểu biết, khám phá tri thức ở HS. Ebook cũng có thể được sử dụng như một tài liệu tham khảo, tra cứu hoặc dùng để phối hợp với các PPDH truyền thống làm tăng hiệu quả của quá trình dạy học.
2.2.2. Nguyên tắc thiết kế về cấu trúc
- Khoa học, rõ ràng, chặt chẽ, thống nhất, bố cục hợp lí, đơn giản.
- Cấu trúc của nội dung phải được phân rõ phần, mục, ý…để thuận tiện tìm kiếm trong quá trình sử dụng.
2.2.3. Nguyên tắc thiết kế về nội dung
- Kiến thức đầy đủ, chính xác, khoa học, rõ trọng tâm, bám sát SGK.
58
- Phần hướng dẫn giải chi tiết, khoa học, dễ hiểu giúp HS nắm bắt được bài tập.
- Củng cố kiến thức từng bài giúp HS có thể nắm vững ngay kiến thức.
- Tăng số lượng hình ảnh, mô phỏng, phim thí nghiệm … để làm ebook thêm trực quan, sinh động, hấp dẫn.
- Bổ sung các công cụ hỗ trợ gắn liền với bài học giúp HS dễ vận dụng.
2.2.4. Nguyên tắc thiết kế về hình thức
- Giao diện đẹp, đơn giản, hiện đại, thân thiện.
- Tránh lạm dụng nhiều đồ họa, hiệu ứng gây phân tán tư tưởng, thiếu tập trung của người học.
2.2.5. Nguyên tắc thiết kế về tính năng sử dụng
- Các bài tập được phân thành các dạng kèm theo các cách giải và bài tập minh họa để HS dễ theo dõi.
- HS dễ dàng kiểm tra các đáp án khi làm bài tập.
- Phù hợp trình độ học tập, trình độ vi tính của HS.
- Tạo điều kiện thuận lợi nhất cho HS tự nghiên cứu.
- Dễ thao tác, truy cập ngay vào mục cần thiết.
- Dễ sử dụng trên các thiết bị điện tử.
2.3. Quy trình thiết kế ebook hỗ trợ hs giải bthh 10 nâng cao
2.3.1. Xác định mục tiêu, đối tượng sử dụng và công cụ thiết kế ebook
- Xác định mục tiêu cần đạt được về nội dung và hình thức của ebook.
- Xác định đối tượng sử dụng, thời điểm sử dụng trong quá trình dạy học.
- Xác định các tài nguyên cần thiết phải có dùng làm tài liệu tham khảo quan trọng khi biên soạn ebook như: SGK, SBT, sách GV, đề thi, sách tham khảo,...
- Xác định công cụ để thực hiện ebook.
Đây là bước quan trọng nhất trong quá trình thiết kế ebook, nó có tác dụng định hướng, đặt nền móng cho công việc tiếp theo. Định hướng đúng sẽ không làm lệch hướng nghiên cứu, nền móng vững chắc giúp cho việc phát triển các chủ đề của ebook được thực hiện một cách suôn sẻ, đa dạng, làm tăng thêm hiệu quả sử dụng cho sản phẩm.
59
2.3.2. Xây dựng nội dung
- Xây dựng phần mục tiêu, kiến thức chuẩn bị của chương, của từng bài học.
- Thiết kế phần tóm tắt lý thuyết và các dạng bài tập mẫu.
- Thiết kế phần bài tập tự luận và bài tập trắc nghiệm (mỗi bài tập đều có lời giải chi tiết, dễ hiểu).
- Bổ sung thêm nguồn tư liệu đọc thêm (gồm các hình ảnh và phim về các thí nghiệm hóa học liên quan đến nội dung chính của ebook) để tăng tính sinh động, hấp dẫn cho ebook.
- Bổ sung thêm công cụ học tập để giúp học sinh dễ dàng tự học (bảng hệ thống tuần hoàn các nguyên tố hóa học và phần mềm cân bằng phương trình hóa học).
2.3.3. Thiết kế ebook
Đầu tiên, ebook được đặt bố cục gồm 3 thành phần: “Tiêu đề”, “Mục lục”, “Nội dung”.
"Mục lục" và "Tiêu đề" được thiết kế cố định tại vị trí chọn trước.
Lần đầu sử dụng, ebook sẽ hiện bảng yêu cầu nhập tên người sử dụng. Nhằm tạo cảm giác thân thiện hơn, qua đó người dùng sẽ cảm thấy thích thú hơn khi học bằng ebook thay vì sự bình thường khi tiếp xúc với các nội dung dạng văn bản thuần túy – không có sự tương tác – không thân thiện.
Hình 2.1. Trang yêu cầu nhập tên người dùng của ebook
HTML5 có một tính năng rất đặc biệt, cho phép lưu trữ dữ liệu tại thiết bị gọi là WebStorage. Qua các hàm localStorage.setItem('tên biến',giá trị) để gán giá trị cho một biến, localStorage.getItem('tên biến') để lấy giá trị của biến và localStorage.removeItem('tên biến') để xóa giá trị của biến.
Ứng dụng tính năng đó một cách sáng tạo, ebook cho phép người dùng nhập tên và lưu lại trên hệ thống. Các tiến trình của người dùng sẽ theo đó được lưu lại. Có thể thay đổi
60
người dùng bằng cách nhấp chuột vào tên người dùng trên thanh "Tiêu đề", chọn "Người dùng khác".
Phương pháp ghi nhớ người dùng bằng WebStorage:
Hình 2.2. Kiểm tra sự tồn tại của người dùng và hàm nhập người dùng
Hình 2.3. Hàm xóa người dùng hiện tại
Nội dung sẽ là một khung trống, dữ liệu được đổ vào bằng các yêu cầu mỗi khi nhấp chuột vào các thẻ nội dung tại "Mục lục".
Dữ liệu được tạo từ Microsoft Word Office, lưu lại dưới dạng *.docx và sử dụng All Office Converter Platinum để chuyển sang dạng ảnh. Sở dĩ chọn kiểu dữ liệu là ảnh cho việc thể hiện dữ liệu vì điều đó sẽ hỗ trợ việc đổ dữ liệu theo cấu trúc một cách dễ dàng, dễ quản lý các ký hiệu hóa học hơn. Qua đó, độ phức tạp của việc thiết kế được giảm đi một cách đáng kể.
Hàm loadPage(ID) sẽ được gọi với tham số ID được truyền từ thẻ nội dung đã chọn. Hàm loadPage có nhiệm vụ đổ dữ liệu từ tệp tin mang ID tương ứng. Ảnh bên dưới thể hiện thuật toán đổ dữ liệu và các chuyển động ẩn/hiện tạo hiệu ứng chuyển đổi cho nội dung.
61
Hình 2.4.Hàm đổ dữ liệu vào khung nội dung bằng Javascript
Để tạo "Mục lục" và các thẻ nội dung bên trong, sử dụng HTML và các thuộc tính onclick="loadPage(id)" để truyền id cho hàm loadPage.
Mã nguồn:
<!-- start: Main Menu -->
<div id="nav-menu-id" class="span2 main-menu-span" style="background:url(img/dbg.jpg) repeat top left;height:100000px;">
<div class="nav-collapse sidebar-nav" >
<ul class="nav nav-tabs nav-stacked main- menu" >
<li id="li0"><a
onclick="loadPage(0);" href="#"><i class="icon-home icon-white"></i><span class="hidden-tablet"> Trang chủ</span></a></li>
<li id="li1">
<a class="dropmenu" href="#"><i class="fa-icon-folder-close-alt"></i><span class="hidden-tablet"> Phản ứng hóa học</span></a>
<ul>
<li id="li6" ><a onclick="loadPage(6);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Tóm tắt lý thuyết</span></a></li>
<li id="li7"><a onclick="loadPage(7);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Các dạng bài tập</span></a></li>
<li id="li8"><a onclick="loadPage(8);" class="submenu" href="#"><i class="fa-icon-file-
62
<li id="li9"><a onclick="loadPage(9);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Bài tập trắc nghiệm</span></a></li> </ul>
</li>
<li id="li2">
<a class="dropmenu" href="#"><i class="fa-icon-folder-close-alt"></i><span class="hidden-tablet"> Nhóm Halogen</span></a>
<ul>
<li id="li10"><a onclick="loadPage(10);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Tóm tắt lý thuyết</span></a></li>
<li id="li11"><a onclick="loadPage(11);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Các dạng bài tập</span></a></li>
<li id="li12"><a onclick="loadPage(12);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Bài tập tự luận</span></a></li>
<li id="li13"><a onclick="loadPage(13);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Bài tập trắc nghiệm</span></a></li> </ul>
</li>
<li id="li3">
<a class="dropmenu" href="#"><i class="fa-icon-folder-close-alt"></i><span class="hidden-tablet"> Nhóm Oxi</span></a>
<ul>
<li id="li14"><a onclick="loadPage(14);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Tóm tắt lý thuyết</span></a></li>
<li id="li15"><a onclick="loadPage(15);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Các dạng bài tập</span></a></li>
<li id="li16"><a onclick="loadPage(16);" class="submenu" href="#"><i class="fa-icon-file-
alt"></i><span class="hidden-tablet"> Bài tập tự luận</span></a></li>
<li id="li17"><a onclick="loadPage(17);" class="submenu" href="#"><i class="fa-icon-file-
63
</ul> </li>
<li id="li4"><a href="#" onclick="loadPage(4);"><i class="icon-calendar icon-white"></i><span class="hidden-tablet"> Đề kiểm tra tham khảo</span></a></li>
<li id="li5"><a
onclick="loadPage(5);" href="#"><i class="icon-th icon-white"></i><span class="hidden-tablet"> Tư liệu</span></a></li>
<li id="li18"><a href="#" onclick="loadPage(18);"><i class="icon-calendar icon-white"></i><span class="hidden-tablet"> Công cụ</span></a></li>
</ul>
<audio id="clicked" style="display:none" controls preload="auto"><source src="sound/Click.ogg" type="audio/ogg" /></audio>
<audio id="dropdown" style="display:none" controls preload="auto"><source src="sound/Dropdown.ogg" type="audio/ogg" /></audio>
</div><!--/.well --> </div><!--/span-->
<!-- end: Main Menu -->
2 thẻ <audio> ở cuối mã nguồn là các phần tử phát âm thanh khi nhấp chuột vào các thẻ. Được điều khiển bởi JQuery:
if (!$(this).hasClass('dropmenu')){
document.getElementById('clicked').play(); }
Các âm thanh được phát khi rê chuột là các phần tử âm thanh được gắn theo mỗi thẻ <li> nhờ javascript, cũng được phát qua điều khiển bởi JQuery tương tự như 2 thẻ <audio> ở trên:
64
Hình 2.5. Chèn thẻ <audio> cho mỗi phần tử <li>
Tiến trình sử dụng được lưu lại cũng nhờ tính năng WebStorage của HTML5 như trang yêu cầu đăng nhập khi lần đầu sử dụng. Mỗi khi loadPage được gọi, biến 'current_page' trong localStorage được thay đổi theo tham số ID mà loadPage đã xử lý. Khi đó, mỗi khi ebook được tắt đi mở lại, loadPage sẽ tự động tải với tham số truyền vào là giá trị của 'current_page' trong localStorage.
Hình 2.6. Xác định các dữ liệu được lưu trên máy và phục hồi trạng thái
Tương tự, trạng thái "active" hay không có "active" của các thẻ cũng dựa vào 'current_page' mà được xử lý khi ebook được tải lại.
Các thẻ nội dung là chương bài học, sẽ có các thẻ con. Các thẻ con sẽ được hiển thị khi click vào thẻ mẹ chứa nó. Nhờ các hàm của JQuery, các thẻ được ẩn/hiện mượt mà, tạo cảm giác thân thiện và dễ chịu cho người dùng.
Cũng giống như cách thiết kế của "Tiêu đề", bảng Cài đặt được thiết kế cố định tại góc phải dưới,có thể ẩn/hiện bằng JQuery khi nhấp chuột vào.
$("#controlpanel").click(function(){ $("#ctrl_pn").slideToggle(); });
65
Hai nút tùy chọn được thiết kế đẹp mắt, hiệu ứng chuyển ảnh mượt mà nhờ JQuery. Thực chất là một thẻ <input> của HTML, nhờ CSS và Javascript mà chúng có hình dạng đẹp mắt. Kết hợp với thư viện JQuery kiểm tra trạng thái dữ liệu của <input> để thay đổi cài đặt Ebook, phong cách giao diện Ebook càng tăng vẻ hiện đại hơn.
Hình 2.7. Hàm Ẩn/Hiện Mục lục
2.3.4. Chạy thử sản phẩm
- Ebook thiết kế xong được ghi vào đĩa CD hoặc chép vào USB, chạy thử, chỉnh sửa lỗi sai.
- Thu thập số lượng HS và GV để in sao đĩa CD hoặc chép vào USB.
2.3.5. Hoàn thiện ebook
- Tổng hợp các phiếu nhận xét của GV và HS về ebook để đánh giá hiệu quả sử dụng của ebook.
- Rút ra bài học kinh nghiệm để sử dụng ebook có hiệu quả.
- Hoàn thiện ebook.
2.4. Cấu trúc và nội dung của ebook hỗ trợ hs giải bthh 10 nâng cao 2.4.1. Giới thiệu tổng quan về ebook 2.4.1. Giới thiệu tổng quan về ebook
66
Hình 2.8. Cấu trúc của ebook hỗ trợ học sinh giải BTHH 10 NC
2.4.1.2. Nội dung của ebook
Ebook được thiết kế gồm:
• Giao diện chính:
Hình 2.9. Giao diện chính của ebook
(tên người đăng nhập hiện ở góc phải phía trên giao diện chính)
- Trong giao diện chính, gồm hai phần là “Giới thiệu” và “Liên hệ” + Phần “Giới thiệu”: gồm lời mở đầu về ebook.
67
Hình 2.10. Phần “Giới thiệu”
+ Phần “Liên hệ”: gồm những thông tin về tác giả mà người dùng có thể liên
lạc.
Hình 2.11. Phần “Liên hệ”
- Ở phía trên giao diện gồm thanh tiêu đề chứa tên ebook, tên người dùng đăng nhập vào.
Hình 2.12. Thanh tiêu đề
- Ở bên trái là bảng mục lục gồm các thẻ liên kết như: “Trang chủ”, “Phản ứng hóa học”, “Nhóm Halogen”, “Nhóm Oxi”, “Đề kiểm tra tham khảo”, “Tư liệu”, “Công cụ”.
68
Hình 2.13. Bảng mục lục trên giao diện ebook
Thanh tiêu đề và bảng mục lục sẽ được thiết kế luôn ở vị trí cố định của màn hình, không bị mất đi khi người dùng cuộn trang trong lúc sử dụng.
- Ở giữa : hiển thị nội dung được chọn từ bảng mục lục.
Hình 2.14. Phần nội dung được đổ dữ liệu khi chọn thẻ từ mục lục
- Ở góc phải dưới là phần cài đặt gồm tùy chọn ẩn/hiện bảng mục lục, bật/tắt âm thanh.
69
- Khi người dùng nhấp chuột vào các thẻ liên kết sẽ có âm thanh phát ra, người dùng có thể tùy ý chỉnh âm lượng trong phần cài đặt.
Hình 2.15. Bảng "Cài đặt" ở trạng thái ẩn và hiện
- Tiến trình sử dụng của người dùng sẽ được lưu lại, tức trang cuối cùng mà người
dùng đã xem sẽ được hiển thị trong lần sử dụng tiếp theo.
• Thẻ “Phản ứng hóa học”, “Nhóm Halogen”, “Nhóm Oxi” được thiết kế giống nhau về cấu trúc. Tức trong mỗi thẻ gồm 4 thẻ con đó là “ Tóm tắt lý thuyết ”, “ Các dạng bài tập”, “ Bài tập tự luận”, “Bài tập trắc nghiệm”.
Hình 2.16. Các thẻ con trong mỗi thẻ chính
• Thẻ “Tóm tắt lý thuyết ”: có nội dung gồm các kiến thức lý thuyết trọng tâm của từng chương được tóm tắt ngắn gọn để HS dễ dàng ôn lại lý thuyết khi làm bài tập.
70
Hình 2.17. Thẻ “Tóm tắt lý thuyết” của “Nhóm Halogen”
• Thẻ “Các dạng bài tập”: có nội dung gồm các dạng bài tập điển hình và phương pháp giải để HS có thể dễ dàng tham khảo.
Hình 2.18. Thẻ “Các dạng bài tập” của “Nhóm Halogen”
• Thẻ “Bài tập tự luận”: gồm các bài tập tự luận theo từng chương có đáp án chi tiết để học sinh có thể đối chiếu kết quả sau khi làm xong. Trong mỗi bài tập, phần đáp án sẽ được thiết kế giấu đi, khi người dùng nhấp vào khu vực trên mỗi bài tập thì đáp án sẽ xuất hiện ra và có thể đóng lại bằng cách nhấp chuột tương tự.
71
Hình 2.19. Trang bài tập tự luận
Hình 2.20. Hiển thị bài giải khi nhấp chuột vào đề bài
• Thẻ “Bài tập trắc nghiệm”: gồm các câu hỏi trắc nghiệm theo từng chương, có các đáp án A, B, C, D để người dùng có thể trực tiếp tương tác trên ebook. Có thể kiểm tra đáp án sau khi làm xong.
72
Hình 2.21. Thẻ “Bài tập trắc nghiệm”
Nếu người dùng nhấp vào nút “Kiểm tra bài” thì sẽ biết được số câu làm đúng, số câu làm sai.
Hình 2.22. Hiển thị số câu làm đúng và sai
Ngoài ra, với những câu hỏi khó, có phần hướng dẫn giải chi tiết để người dùng dễ dàng tham khảo bằng cách nhấp vào nút “Hướng dẫn”.
73
Hình 2.23. Phần “Hướng dẫn” trong thẻ “Bài tập trắc nghiệm”
• Thẻ “Đề kiểm tra tham khảo”: gồm các đề kiểm tra được soạn và sưu tầm để người dùng sử dụng kiểm tra đánh giá kiến thức của mình.
Hình 2.24. Thư viện đề trong thẻ “Đề kiểm tra tham khảo”
74
Hình 2.25. Đề kiểm tra trong thẻ “Đề kiểm tra tham khảo”
Hình 2.26. Đáp án đề kiểm tra trong thẻ “Đề kiểm tra tham khảo”
• Thẻ “Tư liệu”: gồm các hình về đơn chất hay hợp chất, các phim minh họa cho tính chất hóa học, điều chế về các đơn chất và hợp chất trong mỗi chương.
75
Hình 2.27. Thẻ “Tư liệu”
• Thẻ “Công cụ”:
o Bảng hệ thống tuần hoàn các nguyên tố hóa học: được thiết kế đẹp mắt, với