Giáo trình HTML5 - Bài thực hành số 7: Làm việc với những thành phần mới của HTML5_Offline Storage, Geolocation, Drag và Drop

 1
 Bài thực hành số 7 – Làm việc với những
 thành phần mới của HTML5: Offline
 Storage, Geolocation, Drag & Drop
Chú ý chung với toàn bộ các buổi lab:
 - Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay, sử dụng
 một trong các chương trình soạn thảo mã sau:
 o Notepad ++
 o E- Text Editor
Mục tiêu
Buổi thực hành số 7 giúp sinh viên làm việc được với những công việc mà HTML5 hỗ trợ:
 - Offline storage
 - Geolocation
 - Drag & drop
WEB302_ HTML5 & CSS3 Lab7
 2
Bài 1
Sinh viên tự thực hành trước các bước trong SGK với thư mục:
 - HTML5_13lessons
 - HTML5_14lessons
 - HTML5_15lessons
Nộp thư mục hoàn thiện theo tên:
 - HTML5_13lessons_done
 - HTML5_14lessons_done
 - HTML5_15lessons_done
Bắt buộc sinh viên phải làm và phải có kết quả nộp cho giảng viên theo dõi. Nếu sinh viên nào
không thực hiện, giảng viên có quyền trừ điểm vào các bài tập sau
WEB302_ HTML5 & CSS3 Lab7
 3
Bài 2
Sử dụng layout có trong thư mục TaiNguyen\Lesson02 & các hình ảnh để thực hiện dàn 1 trang
web game xếp hình theo chuẩn HTML5
Mô tả yêu cầu của game như sau:
Trên trang web bao gồm 2 vùng:
 - Vùng hiển thị hình ảnh ghép hoàn chỉnh
 - Vùng hiển thị các mảnh ghép
Người chơi có nhiệm vụ kéo thả các mảnh ghép đã được cắt ở phía dưới vào vùng hình ảnh
hoàn chỉnh sao cho đúng vị trí
Yêu cầu của người thiết kế trang web game này như sau:
 - Thực hiện dàn layout cho trang web game
 - Thiết kế game với HTML5/ CSS3:
 o Thực hiện được phương thức kéo thả hình ảnh vào vùng hiển thị hoàn chỉnh
 o Nếu người chơi chọn nhầm vị trí cho miếng ghép thì hình ảnh ghép sẽ không
 được chấp nhận hiển thị, người dùng phải lựa chọn miếng ghép khác
 o Với mỗi mảnh ghép đúng vị trí, người chơi sẽ được cộng 1 điểm, người thiết kế
 game phải có trách nhiệm hiển thị vùng tính điểm trên trang
 o Khi người chơi kéo thả đúng toàn bộ vị trí của các mảnh ghép, hiển thị thông
 báo “Chúc mừng bạn đã hoàn thành game”
WEB302_ HTML5 & CSS3 Lab7
 4
Chú ý: nếu không đủ thời gian làm trên lớp, sinh viên có thể về nhà làm & nộp sản phẩm cho
giảng viên không quá 24h
WEB302_ HTML5 & CSS3 Lab7
 5
Yêu cầu nộp bài
Cuối giờ thực hành, sinh viên tạo thư mục theo tên _Lab7, chứa tất cả
sản phẩm của những bài lab trên, nén lại thành file zip và upload lên mục nộp bài tương ứng
trên LMS.
WEB302_ HTML5 & CSS3 Lab7