Loading 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)

I am creating a Html survey with multiple pages. (INDIVIDUAL HTML PAGES LIKE page1.html, page2.html etc.)

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" >Next </button>

With this code, pages upload but they repeat in an infinite loop.

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)]

}

I want to stress that each page is separate I do not have a single HTML file. I HAVE multiple HTML files that I want to load randomly each time I press next button.

Anyone can help me with this? Thank you.

I didn’t look at your code but are you sure you need them as pages? Can you not dynamically update the DOM instead? If you need help with that you can search for DOM manipulation and get articles and tutorials.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.