Hi, I have a question.

I am creating an interactive EPUB book for the iPad and would like to know if it’s possible to save the interactive state between pages.

For example, if a reader completes a drag-and-drop activity and then turns to another page, everything resets when they return. Is there a way to preserve the state so that the activity doesn’t restart?

Alternatively, how would you suggest solving this issue to allow the reader to retain their progress or results? Can this data be saved within the downloaded book itself or somewhere on the iPad?

Thank you in advance for your help!
Nicole

Hi Angelo,
thanks for anwering. It's reassuring to hear that it works in principle. I'm not that good with Javascript. Is there an example that i could use as a guide?
Thank you
Nicole

Hello Angelo,
I’m currently facing the following issue: all my attempts have failed so far. I managed to save the page, but this caused the interactivity to stop working across the site. It only functions properly within Pubcoder and not in EPUB3 format.

Do you know of any Pubcoder projects using EPUB3 where the current state of the page can be saved, allowing the user to resume working on it upon returning? Is there someone I could reach out to for guidance? I need to determine whether this is feasible with Pubcoder, as we are currently evaluating tools, and Pubcoder is one of the options being considered.
Thanks in advance

The following script works to remember input-fields, but it doesnt work for the drag and drop/klickable stuff.
Anybody an idea whats wrong?

// Eindeutigen Schlüssel für die aktuelle Seite definieren
let pageId = 'YourSiteName'; 
// Ersetze durch die spezifische Seiten-ID 
let pageKey = `pageState_${pageId}`; 

// Funktion, die den Seiteninhalt speichert
function savePageState() {
  let pageContent = document.body.innerHTML;
  localStorage.setItem(pageKey, pageContent);
  console.log('Seite gespeichert'); // Für Debugging
}

// Event-Listener für alle Änderungen an der Seite hinzufügen
document.body.addEventListener('input', savePageState); // Für Eingaben
document.body.addEventListener('click', savePageState); // Für Klicks


// Abholen und Wiederherstellen des Inhalts
let savedContent = localStorage.getItem(pageKey);
if (savedContent) {
  document.body.innerHTML = savedContent;
}