Giving readers control: Storing personalized messages with Localstorage

Exporting & Previewing iBooks
1

I’m a language teacher using iBooks on iPads for classes. I’ve done a lot of animations but now I’m wondering how far student input can change things in their books.

I’ve been studying and trying things out but can’t get there - I know the solution will probably be Javascript and JQuery, but don’t know how to do it.

So I’d really appreciate any help with setting up the following as it I think it would give a framework for a load of other things:

  1. Student types name into a textArea, “Hi [name]” appears on the screen (part of the screen design rather than an alert).
  2. The name is saved in localStorage so when they open the book again later, the personalised message is still there. (I have the javascript for recalling input into a textArea).
  3. Another widget on a different page accesses the same data e.g. “Hi [name], in this task…”

Am I overestimating the potential of this set? I’m thinking that it might be possible with some work for a ‘Preferences’ widget to set the font and colour of all other widgets, or completion of one widget opening new parts in another, or Badges being awarded within books.

And if this is cloud-cuckoo stuff, please let me know! I really appreciate any help or hints with any of the steps.

Cheers,

Allie.

2

Not cloud-cuckoo at all. Quite straight forward using Javascript.

Give me 2 secs and I’ll knock an example together for you. You will have to adapt the techniques into your own project

@allie Here you go inputName.hype.zip (23.2 KB)

The first scene is for the input of the name. The function check_name() does a quick check to see if there is a variable stored and if there is then to go straight to scene2 where there is a symbol (so that you can replicate on any future scenes) to display the name. (initialise() function)

2 Likes
3

Wow! That works perfectly. I’m looking forward to playing around with different inputs and outputs.

I added a reset button with:

 localStorage.removeItem('name');	
 hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionCrossfade, 0.5)

…and copied the output box to another widget: exactly what I needed, individual input in one widget influencing the widgets in the rest of the book.

Thanks DBear - you’ve moved me forward and taught me a lot!