Textfield to use in iBooks

(Andreas) #1


is there a way to use Hype to create a textfield where i can type in my own text into a iBooks and the text will be saved?

We like to go away from PPT to use in our course and use iBooks because of all the animation we can do inside. But we miss a textfield to type in.

Thanx a lot

(๐•„๐•š๐•”๐•™๐•’๐•–๐• ๐”พ๐•’๐•ฃ๐• ๐•—๐•’๐•๐• ) #2

You could try local storage to store the data and a field in Hype. Using a JavaScript event, a variable can be updated whenever the value in a field is changed.

Help needed: Want to the user to input his name and then show that text on other scene
(Andreas) #3

Thanx for your answer.

I will see if i can find some sample code.
By my self i donโ€™t know how java is working.

Thanx Andreas

(๐•„๐•š๐•”๐•™๐•’๐•–๐• ๐”พ๐•’๐•ฃ๐• ๐•—๐•’๐•๐• ) #4

If you combine the โ€œLightboxโ€ exampleโ€ฆ

document.addEventListener("input", rgb);

โ€ฆwith the โ€œSavingโ€ example (Bounce Example)โ€ฆ

localStorage.high = window.score;โ€‹

โ€ฆfrom โ€œA Book About Hypeโ€, you can see how itโ€™s done. Actually, the book even uses these examples. The High Score is saved in the โ€œBounceโ€ example and the RGB color in the โ€œLightboxโ€ example uses data from an HTML input.

Basically, youโ€™d change the names. โ€œrgbโ€ is the element ID. โ€œwindow.scoreโ€ is the JavaScript attribute value being saved to the localStorage. โ€œhighโ€ is just a short name I gave to it to represent the โ€œHigh Scoreโ€.

(Andreas) #5

Shame on me i have the book right in front of me. :flushed:

(Andreas) #6

Will it be saved even after closing the book iBooks?
As soon as i close and reopen the book my text ist gone.

But may its my fault. :wink:


You would need your script to also look and see if the localstorage value exists, and then place it within the input field if it does.

Thereโ€™s a few events here which may be helpful:

And hereโ€™s an actual example of local storage in action in a Widget:

(Andreas) #8

Thanx, i will work on this next week. :wink: