Textfield to use in iBooks

eastmac · June 17, 2016, 11:26am

Hi,

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
Andreas

Photics · June 18, 2016, 12:23am

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.

eastmac · June 19, 2016, 10:50am

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

Photics · June 19, 2016, 3:39pm

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".

eastmac · June 19, 2016, 4:42pm

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

eastmac · June 22, 2016, 11:21am

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.

Daniel · June 22, 2016, 3:02pm

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:

github.com

widged/iBook-widgets/blob/master/widgets/localStorage.wdgt/main.html#L45-L58


      
          	<script language="javascript" type="text/javascript">
          		var $input = $("input#studentName");
          
          		if(localStorage.studentName) {
          			$('span#lastSaved').html('(last saved: ' + localStorage.studentName + ")")
          		}
          
          		$('#btn-save').click(function () {
          		 var studentName =  $input.val();
          		 localStorage.studentName=studentName;
          		 localStorage.completedActivity1=true;
          		});
          
          	</script>

eastmac · June 24, 2016, 8:44pm

Thanx, i will work on this next week.