Randomizer

Custom code
1

Randomizer is a script which picks a piece to display out of an array of content. Using it might turn a static website into an interactive plaything—just like in our Oracle Cards project.

Setting up a randomizer in your project should take about an hour—just follow the steps from this Help article.
New-custom-code-4
Have you used a randomizer in one of your projects? We need to see that!

2 Likes
2

Hello!
I would like to use the randomizer code but I cannot find a way to make it work.
I paste the ID at the right place but it is not working. A part of the code is commented ( using // ) , I noticed.

Can you explain a bit more in detail how to implement the code?

3

Hello i have been trying to make it work for 2 days now.

Do we need to have a certain set up on the button for the shuffle to work ?

4

No need for special set up on the button. The most critical aspect is to include the widget ID twice on the provided code example.

5

I’m running into the same issue as @Cyrill_Durigon .

After adding in the widget ID on the two assigned locations, I cannot get the button to function. I reread the instructions multiple times and am certain I have followed them correctly. Yet for some reason the button remains unclickable and the randomizer function doesn’t work.

Any help would be appreciated, thanks in advance!

Here is the code I put in the Before section. My button ID is “62e9823a0cf69f00305a4f9b”

<script>
let buttons;
   let pages = [];
   const randomInteger = (min, max) => {
     let rand = min + Math.random() * (max + 1 - min);
     return Math.floor(rand);
    }
   const getRandomPageNum = () => {
       let pageNum;
       for(let attempts = 10; attempts > 0; attempts--) {
         const randomPageIndex = randomInteger(1, pages.length);
           if (pages[randomPageIndex] && pages[randomPageIndex] !== window.RM.viewerRouter.mag.currentPage.num) {
             pageNum = pages[randomPageIndex];
               break;
            }
           if (attempts === 1 && !pageNum && pages[randomPageIndex]) {
             pageNum = pages[randomPageIndex];
         }
        }
       return pageNum;
    };
    let timerId = setInterval(() => {
     buttons = document.querySelectorAll('.center-page .rmwidget[data-id="62e9823a0cf69f00305a4f9b"]');
        if (buttons && buttons.length) {
         clearInterval(timerId);
           initPages();
         onButtonFound();
        }
    }, 200);
   const initPages = () => {
      pages = (window.ServerData.mags.mag.pages || []).map(page => page.num);
    };
   const onButtonFound = () => {
       for (let button of buttons) {
         button.addEventListener('click', onClick);
        }
    };
   const onClick = () => {
     const pageNum = getRandomPageNum();
       console.log(pageNum);
       if (pageNum) {
          window.RM.viewerRouter.mag.showPage(pageNum, { animation: false });
        }
       let timerId = setInterval(() => {
         const newButtons = document.querySelectorAll('.center-page .rmwidget[data-id="62e9823a0cf69f00305a4f9b"]');
           if (newButtons && newButtons.length) {
              clearInterval(timerId);
              buttons = newButtons;
              onButtonFound();
            }
        }, 200);
//        setTimeout(() => {
//           for (let button of buttons) {
//               button.removeEventListener('click', onClick);
//           }
//           buttons = document.querySelectorAll('.rmwidget[data-id="62e9823a0cf69f00305a4f9b"]');
//           if (buttons && buttons.length) {
//               onButtonFound();
//           }
//         }, 250);
    };
</script>
6

I have discovered the problem: the custom code for the Randomizer only works when you publish your project and open it. It does not work in preview mode, so people using a free plan cannot view it and have to upgrade.

7

Hi, How would you get the randomizer to ignore certain pages? So if you had an ‘index’ page not included in the shuffle but the button is stuck to all pages?

Thanks