Picking a Random html page from an Array but each page only once (Plus first two and last two pages should be same all the time)

user_16463001 0
Viewed 64

I am creating a Html survey with multiple pages.

I want to have the first and last two pages in the same order for all users.

But I want to have middle pages random.

Here is my code which works and creates random pages however, it does not load pages and show them as text.

let randomlinks = [href = 'Task1A.html', href = 'Task1B.html', href = 'Task1C.html', href = 'Task1D.html',
  href = 'Task2A.html', href = 'Task2B.html', href = 'Task2C.html', href = 'Task2D.html',
  href = 'Task3A.html', href = 'Task3B.html', href = 'Task3C.html', href = 'Task3D.html',
  href = 'Task4A.html', href = 'Task4B.html', href = 'Task4C.html', href = 'Task4D.html'
]

let getRandomPage = function*(array) {
  let clone = [...array]
  let getIndex = function(arr) {
    return Math.floor(Math.random() * arr.length)
  }
  while (clone.length !== 0) yield clone.splice(getIndex(clone), 1).pop();
 
 return window.location = 'Final.html'
};


let randoms = getRandomPage(randomlinks);

const logRandom = () => {
  let val = randoms.next().value;
  if (val !== undefined) document.querySelector('html').textContent = val;
};
   

const load = () => {
  document.getElementById('random').addEventListener('click', logRandom);
  
}
document.addEventListener('DOMContentLoaded', load)
<button type="submit" id="random" class="btn"><a  >Next </a></button>

enter image description here

Also, this code worked and loaded pages however it was an infinite loop and I want to have each page once.

let randomlinks = [href = 'Task1A.html', href = 'Task1B.html', href = 'Task1C.html', href = 'Task1D.html',
  href = 'Task2A.html', href = 'Task2B.html', href = 'Task2C.html', href = 'Task2D.html',
  href = 'Task3A.html', href = 'Task3B.html', href = 'Task3C.html', href = 'Task3D.html',
  href = 'Task4A.html', href = 'Task4B.html', href = 'Task4C.html', href = 'Task4D.html'
]

function randomlink() {
  window.location = randomlinks[Math.floor(Math.random() * randomlinks.length)]

}
<button type="submit" id="submit" class="btn"><a onClick='randomlink()' >Next </a></button>

html javascript
1 Answers

I think what you want is to shuffle the pages first while retaining the first and last page. The function shuffle below will do that for you. unshift will add the first page while push will add the last page.

function shuffle(array) {
  var currentIndex = array.length,
    randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }

  return array;
}

let randomlinks = [
  href = 'Task1A.html', href = 'Task1B.html', href = 'Task1C.html', href = 'Task1D.html',
  href = 'Task2A.html', href = 'Task2B.html', href = 'Task2C.html', href = 'Task2D.html',
  href = 'Task3A.html', href = 'Task3B.html', href = 'Task3C.html', href = 'Task3D.html',
  href = 'Task4A.html', href = 'Task4B.html', href = 'Task4C.html', href = 'Task4D.html'
];

shuffle(randomlinks);
console.log('shuffled', randomlinks);

//add first page
randomlinks.unshift('FirstPage.html');
//add last page
randomlinks.push('LastPage.html');

console.log('final', randomlinks);

function nextPage() {
  let cont = document.getElementById('test');
  cont && (cont.innerText = randomlinks.shift() || "No More")
}
<button id="random" class="btn" onclick="nextPage()">Next</button>
<h1 id="test">Welcome</h1>

EDIT:

Since you wanted to be able to redirect to the next page on click, obviously you'd need to store the shuffled items (randomlinks) into something which can be accessed by all your pages. You can either save it into a database or something. Maybe sessionStorage? It's up to you.

user_72912400
Related