8. Những đóng góp mới của đề tài nghiên cứu
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