html page at a specific place in an array

Question

I am working on this project that I have with multiple HTML pages that are kept in an array. Each time the user finishes his task on one page then array shuffles itself and loads the remaining HTML pages in and display for the user.

var getPages = localStorage.getItem("htmlPages");

if (document.title === "INDEX" || !getPages) {
  var htmlPages = [
    "page1.html",
    "page2.html",
    "page3.html",
    "page4.html",
    "page5.html",
    "page6.html",
    "page7.html",
    "page8.html",
    "page9.html",
    "page10.html"
  ];
  console.log('initializing html pages BEGIN');
  var jsonhtmlPages = JSON.stringify(htmlPages);
  window.localStorage.setItem("htmlPages", jsonhtmlPages);
  console.log('initializing html pages END');
} else {
  console.log('filling html pages');
  var htmlPages = JSON.parse(getPages);
}

function RandomPages() {
  shuffle(htmlPages);
  if (htmlPages.length > 0) {
    window.location.href = htmlPages[0];
  } else {
    console.log("tasks completed");
    alert('ALL PAGES ARE DONE');
  }
  console.log(htmlPages.shift());
  console.log(htmlPages);
  var jsonPool = JSON.stringify(htmlPages);
  window.localStorage.setItem("htmlPages", jsonPool);
  console.log(htmlPages);
}

This above works fine, but now I want to add a break.html page after every 3 pages that have been visited by the user. I used

htmlPages.splice(3, 0, "Break.html");

but this is not the right solution or if it is then where to add it? coz the array shuffles and the break.html wouldn't keep its place. Any help would be appreciated, thanks

Answer 1

I would increment a counter every call of RandomPages , like pageViews++ . This should be defined outside of the RandomPages method so it doesn't get reset every call.

Then before you check if (htmlPages.length > 0) I would add another check for

if (pageViews % 3 === 0) { 
  /* show break page and return/don't execute the next if check */ 
}