When it comes to interactive ideas for your ebook, sky's the limit. You may come up with an interaction idea no one has thought of. The interactive components provided by Kotobee Author are the standard set of tools that are required most of the time. It may happen that you need a certain type of interactivity that does not fall under the existing ones, nor you would like to display in a window, as done by widgets. This is when you will need to take things under your own hands, and develop the custom interaction yourself. Kotobee Author provides you with a few tools to customize your interactivity, and ebook content in general.


Editing the source 


By clicking on the Source Mode button at the bottom right of the screen, you are given the complete HTML source of your current chapter which you may edit freely. You may find HTML code on the web for interactive components you would like to use. You can simply paste it in the source editor. One example of this is Sketchfab, an online library of contributed 3D models. They provide an embed code (basically an iframe), to display and interact with any 3D model from their library into your web page. 



Chapter CSS and Global CSS


By clicking on the Chapter CSS or Global CSS button at the bottom right of the screen, you may add your own custom styles that are accessed by your chapter. The difference between each is that the global CSS will allow these styles to be accessible by other chapters too. This is a quick way to impose a certain formatting on certain elements, such as headings or paragraphs. As far as interaction is concerned, CSS3 supports various interactions, transitions, and animations. If used wisely, this can give a very appealing result.



Chapter JS and Global JS


By clicking on the Global JS button at the bottom right of the screen, you may add your own Javascript code that is accessible either in the current selected chapter, or throughout all the chapters of the book. That's when the doors really open. Although this requires some Javascript coding experience, you can achieve any kind of interaction here. Along with events inserted through source mode, you can have any element respond by calling a Javascript function you have defined. As a scenario of how Javascript may be useful, imagine a children storybook where the child may enter his name in a textfield in the first page, and throughout the story finds his name used in place of the hero's name. Again, sky's the limit!


The code editor for HTML, JS, and CSS provide keyboard shortcuts, color hinting, and code completions to assist you with the coding.



For more flexibility in creating HTML, JS, and CSS files, please refer to the article: Using the File Manager.



Controlling the Reader through an API


A way to extend interactivity for your ebook is by using the javascript API to send basic commands to Kotobee Reader. This feature is available only when exporting a web ebook. The normal process is to upload all your web ebook files to a directory, and have that directory be the destination for accessing the ebook. To use the javascript API, you will instead upload the web ebook files to a different (hidden) directory, and refer to the ebook in your webpage using an iframe tag. Now from the same page you will be able to send commands to the ebook. The list of possible commands are as follows.


next Go to the next chapter
prev Go to the previous chapter
notebook Open the user's notebook
goto:x Jump to a certain chapter, indicated by the number: x


The command will be issued as an iframe post message (i.e. postMessage). For a comprehensive example of issuing a comand to jump to chapter 4, see the following:

 

<script>
        function action() {
            var book = document.getElementById("book");
            book.contentWindow.postMessage("goto:4", "*");
        }
</script>

<iframe id="book" width="100%" height="100%" src="ebook/index.html"></iframe>
<button  onclick="action()">Go to chapter 4</button>