Nội dung Image Hotspots

Bước 1: Chọn Chức Năng "Image hotspots"

Trong danh sách các loại bài tập, Thầy/Cô tìm và chọn "Image Hotspots".

Khi Thầy/Cô đã chọn chức năng "Image Hotspots", trình biên tập sẽ hiển thị như sau:

Bước 2: Nhập Tiêu Đề

• Thầy/Cô sẽ nhập tiêu đề của bài tập. Đây chỉ là phần dùng để tìm kiếm, báo cáo và thông tin bản quyền.

• Ví dụ: “Các loại quả mọng”

Bước 3: Chọn ảnh nền

• Thầy/Cô nhấn vào nút “Thêm” để tải hình ảnh lên. Hình ảnh này sẽ được sử dụng làm hình nền cho bài tập.

• Ví dụ sau khi tải ảnh lên như hình dưới đây:

Bước 4: Nhập tên của hình nền

Phần này không bắt buộc nhập, thầy/cô có thể bỏ qua.

• Nếu nhập thì Thầy/Cô sẽ nhập tên cho hình ảnh nền để hỗ trợ các công nghệ trợ giúp và trường hợp hình ảnh không tải lên xem được.

• Ví dụ: "Hình ảnh các loại quả mọng"

Bước 5: Chọn Biểu Tượng và Màu Sắc Cho Hotspot

Đầu tiên, chúng ta sẽ giới thiệu về Hotspot

Hotspot là gì?

• Hotspot là các điểm tương tác trên hình ảnh, khi người dùng nhấn vào sẽ hiện ra thông tin bổ sung (văn bản, hình ảnh, video).

Để tạo Hotspot thì cần chọn biểu tượng và màu sắc cho Hotspot:

• Hotspot Icon (Biểu tượng Hotspot): Thầy/Cô có thể chọn từ danh sách biểu tượng định sẵn hoặc tải lên biểu tượng tùy chỉnh.

• Hotspot Color (Màu sắc Hotspot): Chọn màu nền cho các điểm nóng bằng cách nhập mã màu hexadecimal hoặc chọn từ bảng màu.

Để thực hiện chọn Hotspot icon, Thầy/Cô thao tác nhấn vào nút hiện danh sách ở mục Hotspot icon. Giao diện sẽ hiện ra 2 sự lựa chọn là Predefined icon và Upload image

5.1 Chọn Predefined icon

Chọn biểu tượng từ danh sách định sẵn:

• Nhấn vào nút hiện danh sách ở mục Hotspot icon.

• Giao diện sẽ hiện ra hai lựa chọn: Predefined icon và Upload image.

• Chọn Predefined icon: Thầy/Cô có thể chọn biểu tượng cho hotspot bằng cách nhấn vào danh sách Predefined icon.

Hình ảnh minh họa bên dưới: Danh sách các biểu tượng có sẵn.

Tiếp theo đến là chọn màu nền cho hotspot:

Chọn màu nền cho Hotspot:

• Thầy/Cô có thể kéo thả và chọn trực tiếp màu trên bảng màu hoặc nhập mã màu vào ô bên dưới.

• Ví dụ: Chọn màu tím với mã #981d99.

5.2 Chọn Upload icon

Tải lên biểu tượng tùy chỉnh:

• Nếu Thầy/Cô muốn dùng biểu tượng khác, có thể chọn "Upload image" trong danh sách Hotspot Icon và tải ảnh lên.

• Lưu ý: Bước này sẽ không cần chọn màu ở mục Hotspot color.

Giao diện của Upload icon:

• Hình ảnh minh họa: Giao diện của việc tải lên biểu tượng tùy chỉnh.

Bước 6: Thêm Hotspot

Mở Đầu

Phần thêm Hotspot này gồm 3 phần chính:

1. Vị trí Hotspot (Hotspot position): Chọn vị trí trên hình ảnh để đặt Hotspot.

2. Tiêu đề (Header): Nhập tiêu đề cho Hotspot, hiển thị khi người dùng nhấn vào.

3. Nội dung Hotspot (Popup content): Thêm nội dung chi tiết cho Hotspot, có thể là văn bản, hình ảnh hoặc video.

Hướng Dẫn Chi Tiết

6.1 Phần Hotspot position (Vị trí Hotspot)

• Chọn vị trí xuất hiện Hotspot: Thầy/Cô nhấn vào hình ảnh thu nhỏ để đặt Hotspot. Khi Thầy/Cô nhấn vào hình ảnh, một vòng tròn xanh lá cây sẽ xuất hiện để chỉ vị trí của Hotspot mới. Thầy/Cô có thể thay đổi vị trí của Hotspot bằng cách nhấn vào một nơi khác trên hình ảnh.

• Mục "Cover entire background image" (Phủ toàn bộ hình ảnh nền). Đây là mục tùy chọn (không bắt buộc chọn). Nếu chọn tùy chọn này, khi người dùng nhấn vào Hotspot, nội dung bật lên sẽ phủ toàn bộ hình ảnh nền.

6.2 Header (Tiêu đề)

• Nhập tiêu đề: Nhập tiêu đề cho Hotspot vào ô "Header". Tiêu đề này sẽ được hiển thị khi người dùng nhấn vào nút Hotspot. Tiêu đề giúp mô tả ngắn gọn nội dung của Hotspot.

• Ví dụ: Nếu Hotspot là hình ảnh quả dâu tây, Thầy/Cô có thể nhập "Dâu tây" vào ô tiêu đề.

6.3 Popup content (Nội dung hiển thị lên)

1. Chọn loại nội dung: Thầy/Cô có thể chọn loại nội dung bật lên từ danh sách thả xuống "Content Item". Nội dung có thể là văn bản (text), hình ảnh (image), audio hoặc video.

2. Thêm nội dung: Nhấn nút "Thêm item" để thêm nội dung bật lên. Thầy/Cô có thể thêm bao nhiêu nội dung tùy thích. Các thanh cuộn sẽ xuất hiện nếu lượng văn bản không thể hiển thị trong hình ảnh.

3. • Ví dụ: Dâu tây là loại quả duy nhất có hạt ở bên ngoài và được cho là có khả năng tăng cường miễn dịch.

   • Nội dung hình ảnh hoặc video: Chọn tùy chọn tương ứng từ danh sách thả xuống và tải lên hình ảnh hoặc video mô tả thêm cho Hotspot.

4. Nút "Thêm HOTSPOT":

5. • Sau khi nhập đầy đủ thông tin cho Hotspot, Thầy/Cô nhấn nút "Thêm HOTSPOT" để thêm Hotspot vào hình ảnh. Thầy/Cô có thể lặp lại các bước trên để thêm nhiều Hotspot khác nhau trên cùng một hình ảnh.

6. Tùy chọn "Disable scaling" (giữ nguyên kích thước hình ảnh):

7. • Nếu chọn tùy chọn này, hình ảnh nền sẽ không được thay đổi kích thước khi hiển thị trên các thiết bị khác nhau. Điều này hữu ích nếu Thầy/Cô muốn giữ nguyên tỷ lệ và kích thước của hình ảnh nền.

Tóm Tắt

• Chọn vị trí Hotspot: Nhấn vào hình ảnh để đặt Hotspot.

• Nhập tiêu đề: Nhập tiêu đề cho Hotspot vào ô "Header".

• Thêm nội dung bật lên: Chọn loại nội dung và nhập thông tin chi tiết.

• Thêm Hotspot: Nhấn nút "Thêm HOTSPOT" để thêm Hotspot vào hình ảnh.

Bước 7: Hoàn Tất và Lưu Bài Tập

1. Nhấn nút "Thêm hotspot" để thêm các Hotspot khác theo cách tương tự.

2. Sau khi thêm các điểm nóng, nhấn "Lưu" để hoàn tất bài tập.

3. Bài tập sẽ được lưu vào danh sách nội dung của Thầy/Cô và sẵn sàng để cho học sinh làm bài.

Kết quả sau các thao tác

Khi nhấn vào thì sẽ hiển thị nội dung của Hotspot: