Randomize between spoke pages

Question

Hello!
I am working on a selective exposure study in SoSci based on https://github.com/joon-e/OSEM.
However, I am struggling with randomizing the order of the following spoke pages:

`

        <img src="1.png">
        <div class="spoke-headline osemClickable">Spoke Link 1</div>
        <div class="spoke-text">This is a spoke link. Only the headline is clickable. </div>
    </div>
    <div data-osem-spoke="2" class="spoke-box osemSpoke">
        <img class="osemClickable" src="2.png">
        <div class="spoke-headline osemClickable">Spoke Link 2</div>
        <div class="spoke-text">This is also a spoke link. Both image and headline are clickable.</div>
    </div>
    <div data-osem-spoke="3" class="spoke-box osemSpoke">
        <img src="3.png">
        <div class="spoke-headline">Spoke Link 3</div>
        <div class="spoke-text">This is the third spoke link. Only the following text is clickable: <span class="osemClickable">read on</span></div>`

I don't understand how should I include the PHP code to randomize based on these instructions: https://github.com/joon-e/OSEM/wiki/Rotating-and-randomized-hub-pages

I don't really know how to code so I could really really use some help.
Thank you!!

Answer 1

One option would be to put the HTML code into an array, such as ...

$options = [
    '<div data-osem-spoke="2" class="spoke-box osemSpoke">
        <img src="1.png">
        <div class="spoke-headline osemClickable">Spoke Link 1</div>
        <div class="spoke-text">This is a spoke link. Only the headline is clickable. </div>
    </div>',
   '<div data-osem-spoke="2" class="spoke-box osemSpoke">
        <img class="osemClickable" src="2.png">
        <div class="spoke-headline osemClickable">Spoke Link 2</div>
        <div class="spoke-text">This is also a spoke link. Both image and headline are clickable.</div>
    </div>',
    '<div data-osem-spoke="3" class="spoke-box osemSpoke">
        <img src="3.png">
        <div class="spoke-headline">Spoke Link 3</div>
        <div class="spoke-text">This is the third spoke link. Only the following text is clickable: <span class="osemClickable">read on</span></div>
    </div>'
];

Mind that the three parts are separate strings.

Then you can shuffle this array, or use a random generator to do so.

shuffle($options);

Finally, you can write them in the suffled order.

foreach ($options as $option) {
    html($option);
}

For other options, please ask on the OSEM GitHub site.