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;
}

Thank you for your response, Angelo, and for the example. Does this mean that you need to write a script for every variable that changes? For instance, if I have 10 objects that need to be dragged to specific locations, would I need a separate script for each?
Is there no way to simply save the state of the page and, upon returning, reload that state?
The reason I’m asking is that we’re considering creating an educational eBook for a museum with a variety of interactive elements: drag-and-drop, input fields, true/false questions, and so on. The idea is that kids should be able to return and pick up right where they left off.
I’m not very familiar with JavaScript, so I’m looking for the simplest and most generic solution for this.
Thank you for your work!
Nicole

Thank you for asking this question Nicole. The response Angelo provided has given me hope for a current project as well. I would be very interested in a simple solution with regards to saving page states. Nothing of value to add related to a solution, but thought I would chime in on the conversation just to add one more person that would greatly benefit from a more in-depth example or guidance on how drag and drop states can be saved and returned to.

Thanks to everyone!