Creating Overlays in ActiveTextbook
In this post we will be exploring media overlays and how to add them to your books. Overlays are interactive elements that can be added to the content; these interactive elements can be videos, images, text, attachments, quizzes, links, audio clips, and interactive widgets.
There are two ways of adding overlays to books. The first method is to highlight the text you want to add an overlay to. After making your text selection, a context menu will appear. At this point you can click “Create Overlay.”
Clicking “Create Overlay” will open a new window that will allow you to select from a variety of overlays that can be created.
The other method of adding overlays is to click on “Create Overlay/View Overlay List” on the left side bar and insert a box around the text or paragraph where you want add an interactive element.
After selecting the overlay zone a new window will immediately open where you can choose the type of media overlay.
Now let’s explore how to add different types of media overlays in more detail.
Text
The Text overlay allows you to type in or paste text that will be shown in a pop-up window after a Reader clicks on the overlay zone. In this window, you can type in the title and the body of the text you want to add.
You can edit the appearance of the text overlay by clicking on “Overlay appearance” on the top right corner of the window. In this tab you can change the Fill colour, Opacity, Background colour, thickness, and Style of the overlays. You can also choose to add a background image to your overlay.
After editing the appearance, you can click on the “Create” button on the bottom right corner. The Text overlay is now created; by holding your cursor on the area where you just added the text, you can see what type of an overlay is in that location, and you can view the overlay by simply clicking on the text.
Hyperink
Hyperlink overlay allows you to add a link to a web-site or a page in the Book that will be activated after a Reader clicks on the overlay zone. The web-site will be open in a new tab in the same browser window. The page in the Book will be open is the same tab.
If you want to add a link to your book, simply highlight the relevant text, click on “Create overlay” and choose “Link” from the list of overlays. In the new window, you can either insert an URL which directs the reader to an external page, or link the highlighted text to another page in the book.
Image
Image overlay allows you to add a picture that will be displayed after a Reader clicks on the overlay zone. The picture can be displayed either in a pop-up window, or in a new tab of the same browser window if the tick-box “Open in a new window instead” is checked. You can upload a picture from your computer or select from a list of images you have previously uploaded.
If you want the image to be shown on the page in addition to opening in a new window, click on the “Create Overlay” button on the left sidebar menu and create an overlay by inserting a box anywhere in the page.
After choosing “Image” from the list of overlays, go to the “overlay appearance” tab and click on “choose image”. In the newly opened window you can select the image and click on “Done”. Now you can see the picture in the overlay zone.
By clicking in the image overlay, the picture will be shown in a new window.
Video
This media overlay allows you to add a YouTube video or a local video file that will be played in a pop-up window after a Reader clicks on the overlay zone.
If you want to add a YouTube video, simply click on the “YouTube” icon, and paste the URL of the YouTube video you want to add. Type in the title for your video and click on the “create” button. You have now embedded a YouTube video in the text and can view it in a pop up window by clicking on the overlay zone.
If you want to add a local video file, select “video” from the list of media overlays, and upload your video or choose from videos that have been uploaded previously. Your video will pop up in a new window and will be shown in a similar manner to a YouTube video.
Audio
The Audio overlay allows you to add an audio file that will be played in a separate window after a Reader clicks on the overlay zone. To create this type of overlay, select “Audio” from the list of media overlays, upload an audio file from your computer, type in a title for the file, and click on the “Create” button.
Your audio clip will be played in a new pop up window after clicking on the media overlay zone.
Widget
Interactive widgets allow you to upload HTML codes that will run in a pop-up window after a Reader clicks on the overlay zone. If the tick-box “Open in a new window instead” is checked it will run in a new tab of the same browser window. The interactive widgets can be complex quizzes, galleries, etc.
To add an interactive widget to your book, select “Widget” from the list of media overlays. You can click on the “Widget code” tab and paste in your html code.
You also have the option of adding media to your widget. To do this, click on “Add Media Item”; here you can paste a URL, upload your own file, or select from media files that have been uploaded previously.
Attachment
This overlay allows you to attach a file that will be downloaded to the computer after a Reader clicks on the overlay zone. To add an attachment, select the “attachment” overlay from the list of media overlays. In the new window, you can upload different files such as assignments, documents, images, video clips, and audio clips. You can also select from the media items that you have uploaded previously.
After creating an attachment overlay, readers can download it to their computers by simply clicking on the overlay zone.
Quiz
This overlay starts Quiz wizard that helps to create interactive questions that will be shown after a Reader clicks on the overlay zone. To find out how to create a quiz in ActiveTextbook please refer to: http://blogs.datalogics.com/2016/02/16/creating-a-quiz-in-active-textbook/
Thank you for taking the time to read this blog. Please feel free to comment or ask questions on the content.