How can I shuffle a list weekly and have it consistent across all devices?

Question

I want to create a HTML list that will shuffle itself once a week and anybody who accesses the website will view the same shuffled list. The shuffling JavaScript is identical to the highest upvoted question on the matter so I will refrain from posting that here.

The problem with this, is that the shuffled list is inconsistent across devices. I had attempted to set a timer to control when the script activates, as you can view here:

var ul = document.querySelector("ul"), // get the list
    temp = ul.cloneNode(true); // clone the list

// shuffle the cloned list (better performance)
for (var i = temp.children.length + 1; i--; )
temp.appendChild(temp.children[Math.random() * i |0] );

var weekInMilliseconds = 60*1000; // == 604800000 ms
var lastInfo = parseInt(localStorage.getItem('info'), 10); // either NaN or timestamp

if(isNaN(lastInfo))
    lastInfo = 0; // 1970, mind you

// if last info showed earlier than one week ago:
if(lastInfo < (Date.now() - weekInMilliseconds)){
    localStorage.setItem('info',Date.now()); // set info date now
    ul.parentNode.replaceChild(temp, ul); // copy shuffled back to 'ul' // display your information
}

My problems with this were that, again the list wasn't consistent, and, though it did successfully stop the script from activating until sufficient time had passed, since there was no actual alteration to the HTML, if there was a refresh before the interval the page would just load with the default, unshuffled, list order, as written in the original HTML.

I'm quite new to web design so I'm unsure what to try next and and my browsing of W3 has been unfruitful. Any help would be appreciated, thanks!

Shuffling randomly will be inconsistent since it's different each time. You either need to shuffle consistently or store the new order on your backend. — mykaf, Mar 23 '22 at 14:37
I would suggest using seed for shuffling, you could for an example use timestamp of start of a week. Here is a thread, that you may want to check https://stackoverflow.com/questions/16801687/javascript-random-ordering-with-seed — Komiii, Mar 23 '22 at 14:43
@user1599011 I did think storing the new order on my backend would be the most obvious solution, but I couldn't seem to figure out how beyond doing a shuffle and then inputting the new order manually. I have a solution that works well for now but if you could point me in the direction of a solution for automatically storing something on my backend and inputting it on to the site it might be helpful in the future. Thanks for the help. — Nikhil Patel, Mar 23 '22 at 15:41
After you shuffle, do an ajax call to your backend and update. Then pull the order from the backend when you load the screen. — mykaf, Mar 23 '22 at 16:15

stacj · Accepted Answer · 2022-03-24T10:26:52.650

So shuffling randomly will be inconsistent since it's differs each time you reload the page. To shuffle consistently you can try to create a pseudo random shuffle logic - so avoid using Math.random() here.

Explanation

We need to create a seed, in this case we are calulating the calendar week index and concatting this particular number with the current year to avoid repeating the same shuffle behaviour every year.

const seed = Math.ceil((new Date().getDay() + 1 + Math.floor((new Date() - new Date(new Date().getFullYear(), 0, 1)) / (24 * 60 * 60 * 1000))) / 7) + new Date().getFullYear();

or smaller:

const seed = Math.ceil(((new Date() - new Date(new Date().getFullYear(), 0, 1)) / 86400000 + new Date(new Date().getFullYear(), 0, 1).getDay() + 1) / 7);

We need a "Random"-generator like this simple method:

const getRandom = () => {
  const val = seed / (2 ** 32);
  seed = (1664525 * seed + 1013904223) % (2 ** 32);
  return val;
}

Now we can start shuffeling the entries of our list using the linked answer to this question:

for (var i = list.children.length; i >= 0; i--)
  list.appendChild(list.children[getRandom() * i | 0]);

Snippet

Take a look at this working snippet, note that the order of the list will change every week:

// create seed that changes every new week and will not repeat since we concat it with the current year
let seed = Math.ceil(((new Date() - new Date(new Date().getFullYear(), 0, 1)) / 86400000 + new Date(new Date().getFullYear(), 0, 1).getDay() + 1) / 7);

// create pseudo random numbers
const getRandom = () => {
  const val = seed / (2 ** 32);
  seed = (1664525 * seed + 1013904223) % (2 ** 32);
  return val;
}

// pseudo shuffel list
const list = document.querySelector('ol');
for (let i = list.children.length; i >= 0; i--)
  list.appendChild(list.children[getRandom() * i | 0]);

<ol>
  <li>Al Pacino</li>
  <li>Bill Gates</li>
  <li>Carsten Stahl</li>
  <li>David Beckham</li>
  <li>Elon Musk</li>
  <li>Frank Ocean</li>
</ol>

Thanks, this makes sense, at least in theory, to me and it works great! Can I just ask, am I right in think in thinking I could get a shorter seed generation time just for testing purposes by changing the millisecond calculation: (24 * 60 * 60 * 1000) to a smaller number or would I need to make further modifications? — Nikhil Patel, Mar 23 '22 at 15:35

How can I shuffle a list weekly and have it consistent across all devices?

1 Answers1

Explanation

Snippet