3 Replies Latest reply: Dec 2, 2012 2:55 PM by gadgetgurl42
gadgetgurl42 Level 2 (175 points)



I've been trying to create a custom HTML widget for iBooks Author. First attempt at this. It's designed to ask the reader a few questions and provide spaces for them to write answers. It seems to work initially, but when I switch to two or more pages away from the widget, or interact with say a review widget, the answers are lost.


How can I get my widget to retain answers at all times?


My code is split across 3 files - main.html, widgetStyles.css and writeInBoxes.js


My code is here:













          <meta http-equiv="content-type" content="text/html; charset=utf-8">


          <!--ensure widget opens in full screen and pinch zoom disabled-->

          <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">


          <title>Custom widget for user input</title>


          <!--makes a web app (Safari browser??) run in full-screen, mobile app-->

          <meta name="apple-mobile-web-app-capable" content="yes"/>


          <!--stylesheet linked to web page-->

          <link rel="stylesheet" type="text/css" href="widgetStyles.css" />


          <!--javascript actions linked to web page-->

          <script type="text/javascript" src="writeInBoxes.js"></script>






<!--call load function when widget tapped by user-->

<body onload="load()">



          <!--page heading-->

          <h1>Custom Widget</h1>


          <!--paragraph break-->



          <!--first question's text-->

          <p>Q1 - Describe what is meant by a <i>real number</i> in Computer Science.</p>

          <!--next line-->



          <!--first question's control, repeated below-->

          <textarea id="q1" rows="5" cols="125"></textarea>



          <p>Q2 - Who was Lord Byron's mathematician daughter?</p>


          <textarea id="q2" rows="5" cols="125"></textarea>


          <p>Q3 - Name the twelfth element in the periodic table.</p>


          <input type="text" id="q3" cols="125"/>



          <!--save button-->

          <input type="submit" value="Save" width="100" onclick = "save()"/>











          //save responses to iPad/iBook

          function save() {


                    //assign user input to respective variables

                    var question1 = document.getElementById('q1').value;

                    var question2 = document.getElementById('q2').value;

                    var question3 = document.getElementById('q3').value;


                    //variable data sent to HTML5's localStorage API

                    localStorage.setItem('text', question1);

                    localStorage.setItem('text', question2);

                    localStorage.setItem('text', question3);




          //display previously stored responses in respective controls

          function load() {


                    //populate variables with data previously saved

                    var q1Stored = localStorage.getItem('text');

                    var q2Stored = localStorage.getItem('text');

                    var q3Stored = localStorage.getItem('text');


                    //assign saved data to correct controls

                    if(q1stored) {

                              document.getElementById('q1').value = q1Stored;


                              if(q2Stored) {

                              document.getElementById('q2').value = q2Stored;


                              if(q3Stored) {

                              document.getElementById('q3').value = q3Stored;







/* Main heading */

h1 {


          font-size: 30px;

          font-weight: solid;

          color: green;

          text-align: center;

          border-bottom-style: solid;

          border-width: 2px;




/* Question text */

p {

          font-family: Verdana, Arial, sans-serif;

          font-size: 20px;

          text-align: left;



Any help would be greatly appreciated!




iBooks Author 2.0, OS X Mountain Lion (10.8.2), HTML5 widget creation for IBA
  • tk0us Level 2 (265 points)

    Your js


    use an input such as


    function getAnswer()      {

    q1 = prompt("Describe a real number");




    function saveData()     {

    localStorage.q1Answer = q1;



    then you can grab your saved data with something like


    var q1Ans = localStorage.getItem('q1Answer');


    hope this helps and if you need more help, let me know...

  • Thomas_101 Level 1 (25 points)



    As tk0us said localStorage is the solution to this. I noticed in your code you keep re-assigning to the 'text' variable in localStorage. Think of localStorage as an object that can only store strings. Each time you assign to the text variable you override what you had in there last. You could do...


    localStorage.setItem('text1', question1);

    localStorage['text2'] = question2;

    localStorage['text3'] = question3;


    (Note the two ways I interfaced with localStorage. Both are valid. I normally use my second approach as it's less to type but feel free to use whichever ;-) ).


    var q1Stored = localStorage.getItem('text1');

    var q2Stored = localStorage['text2'];

    var q3Stored = localStorage['text3'];


    (Again notice the two different methods I used)


    If there are no more bugs this should work. I hope this helps .


    I wrote a blog article about localStorage and some things to take note of in iBooks Author a few weeks ago. It goes a little bit more in depth than I have here, it might be helpful. http://blog.bookry.com/?p=350.


  • gadgetgurl42 Level 2 (175 points)

    Hi Thomas_101


    Yes, I was using the 'text' variable incorrectly as you mention. It works perfectly now. Thanks for your help!