Contents | Start | End | Previous: Chapter 19: Creating Fixed Layout Books | Next: Chapter 21: Making Your Books Accessible
This chapter describes the facilities available in Jutoh for adding interactivity to ebooks. You will need to have JavaScript skills to make use of these features, and currently not many ebook platforms support JavaScript.
Jutoh supports interactivity in Epub 3 books via form objects that you can insert into your document without writing HTML, and the ability to add JavaScript code via the document properties. The form objects have identifiers and callbacks which provide the links to the JavaScript code.
These are examples of interactive content you might have in your book:
a multiple choice quiz;
a calculator illustrating scientific principles;
an animation demonstrating an important point in the text;
retrieval of up-to-date information from a remote database.
Epub 3 supports HTML5 and JavaScript; currently only Apple Books and some Epub 3 readers such as AZARDI and Readium support a decent subset of Epub 3. The Kindle platform doesn’t yet allow arbitrary JavaScript, but is sure to in the future.
Jutoh Plus users can also edit multiple JavaScript files within Jutoh and control the HTML for a document more fully.
Via the Object Palette, Jutoh supports the following objects that you can use to input or display data:
button: a button you can use to submit form data or take some other action.
canvas: an area for drawing graphics.
form: wrap your form objects in a form tag in order to submit data to a JavaScript event handler or remote server (if permitted). Using a form is not necessary for interactivity.
input: this implements many types of input field depending on the value of its Input type attribute.
meter: a gauge control for representing an amount.
output: a place for output, where you can specify which input objects contribute to the output.
progress: a progress bar.
select: a control that gives the user a choice of values.
textarea: a text field.
The screenshot below shows some of the available controls, taken from the Epub 3 sample project:
A selection of form objects
The form objects aren’t ‘live’ within Jutoh but give a rough representation of their eventual appearance given their current attribute settings.
Click on an object to edit its attributes. Where appropriate, you can edit visual attributes such as the object’s size, margins and so on via the pages in the Object Properties dialog. Attributes edited in this way will be generated ‘inline’ in the style attribute, so you can instead specify a Jutoh style (or alternatively a CSS class) that will apply to the object.
The most interesting attributes are in the Advanced page of the dialog; here you can edit object-specific properties such as List options, and specify JavaScript event handlers such as for onclick.
It is beyond the scope of this manual to give a tutorial on JavaScript and HTML5, but briefly, you can add identifiers and event handlers to your form objects, and then write JavaScript to handle the events, writing results to controls such as ‘output’ or simply to a paragraph or span in the document.
JavaScript code can be defined inline within the JavaScript tab of the document properties dialog, or in Jutoh Plus it can be specified as a resource created as a code document.
You can test your code by compiling with the HTML configuration, with the Epub version configuration option set to 3. Launch 
will show the HTML in the default web browser.
Or, you can use the command Book | Preview Section (Alt+/), which will show only the current section in the web browser: this is good for quickly testing changes.
You can search online for Epub 3/JavaScript examples and tutorials. The supplied project “Epub 3 Sample” has very simple JavaScript code that outputs the identifier of the clicked form object, using the onclick event handler.
We’ve seen how advanced properties in Jutoh objects, plus the ability to include JavaScript files and code, can let you make pages interactive for those platforms that support it. In the next chapter, we describe how you can add extra structure to make your Epub 3 books easier for disabled readers to navigate.
Contents | Start | End | Previous: Chapter 19: Creating Fixed Layout Books | Next: Chapter 21: Making Your Books Accessible