Randomized pages

  1. 2 years ago

    Am I able to make a children's book where the pages are chosen at random every time you go to the next page?

  2. Angelo S

    28 Jun 2022 Administrator
    Edited last year by Angelo S

    hello noel, you have to turn off the default navigation with arrows or swipe (basing on the output format you are using) and use a Run JavaScript action in a button to let the user change page, with simple code like this:

    const pagesCount = Object.keys(pubcoder.pages).length;
    const randomDestPage = Math.round(Math.random() * (pagesCount-1)) + 1;
    pubcoder.goToPage(randomDestPage);
  3. last year

    Angelo S

    11 Apr 2023 Administrator

    As another user just asked on support, a quickly wrote a variation on this where you can just pick a random page from a preset of pages (not from the entire book):

    const pagesToPickFrom = [2, 17, 20, 27, 35, 43, 46];
    const index = Math.round(Math.random() * (pagesToPickFrom.length-1));
    pubcoder.goToPage(pagesToPickFrom[index]);
  4. Hello Angelo! Thanks for the reply and the script :)

    I have another question please: How can I prevent a page that has already apperead to appear again?

    For example using the script above:

    const pagesToPickFrom = [2, 17, 20, 27, 35, 43, 46];

    I run it the first time and I get page 35; then in page 35 I run it again and I get page 17, but at this point if I run the script again, page 35 will be among the possible options: how can I prevent this?

    I want the pages to be random but at the same time I want the reading to move forward, not forward and backwards repeating pages that have already appeared.

    Thanks again!

  5. Angelo S

    11 Apr 2023 Administrator

    You can extract the randomly chosen item from the array, save the result in the localstorage and get the array from localstorage if there's one. Of course it gets a bit more complicated, but should be something like that (not tested):

    // First, check if there's already an array of choices stored in local storage
    var savedChoices = JSON.parse(localStorage.getItem('choices'));
    if (!savedChoices) {
        // If there's no saved array or it's empty, use the provided choices
        savedChoices = choices;
    } else if (savedChoices.length === 0) {
        console.warn("every choice has already been made!");
    } else {
        // First run, setup the array of choices
        savedChoices = [2, 17, 20, 27, 35, 43, 46];
    }
    
    // Now, choose a random value from the saved choices array
    const randomIndex = Math.random(Math.random() * (savedChoices.length-1));
    const chosenValue = savedChoices[randomIndex];
    
    // Remove the chosen value from the saved choices array
    savedChoices.splice(randomIndex, 1);
    
    // Save the updated array back to local storage
    localStorage.setItem('choices', JSON.stringify(savedChoices));
    
    // go to page!
    pubcoder.goToPage(chosenValue);
 

or Sign Up to reply!