localStorage
Hi
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:
main.html
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<!--call load function when widget tapped by user-->
<body onload="load()">
<!--page heading-->
<h1>Custom Widget</h1>
<!--paragraph break-->
</p>
<!--first question's text-->
<p>Q1 - Describe what is meant by a <i>real number</i> in Computer Science.</p>
<!--next line-->
</br>
<!--first question's control, repeated below-->
<textarea id="q1" rows="5" cols="125"></textarea>
</br>
<p>Q2 - Who was Lord Byron's mathematician daughter?</p>
</br>
<textarea id="q2" rows="5" cols="125"></textarea>
</br>
<p>Q3 - Name the twelfth element in the periodic table.</p>
</br>
<input type="text" id="q3" cols="125"/>
</p>
<!--save button-->
<input type="submit" value="Save" width="100" onclick = "save()"/>
</body>
</html>-->
writeInBoxes.js
<script>
//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;
}
</script>
widgetStyles.css
/* 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!
Thanks
Jenny
iBooks Author 2.0-OTHER, OS X Mountain Lion (10.8.2), HTML5 widget creation for IBA
