What's the best way to implement dynamic text on a static page?

Question

I want my blog to be more interesting by making it different every time a reader reads a post. For example, I want to tell a story using a quote from a famous person, a picture, and a situation from the real life. Say, I have 2 relevant quotes, 3 pictures, and 10 situations to use. I don’t want to use them all together, instead, I want every item to be randomly selected during the page load, this will give me 2×3×10 = 60 different variants of the page. If I had a database-backed site, I would select them parts from a DB, but I like the Middleman much and the page must be static.

What would you recommend?

Perform the randomization in client-side code instead of server-side code? — David, Dec 13 '17 at 16:15
I finally decided to have it on the server side, but without server-side code. I will put several paragraphs in the source file(s) and will choose random one during the build. So every rebuild will change the texts, while the site stays static. — Сергей Конаков, Dec 14 '17 at 13:09

score 1 · Accepted Answer · answered Dec 13 '17 at 16:23

JQuery might be the lightest weight easy solution here. You could use JavaScript to randomly choose each element and place them on the screen.

If you wanted to make sure the person had a unique message each time, you could record the selected combination in a client side cookie so on subsequent visits, your code checks the cookie to make sure that the combination is different than the previous x number of visits.

Depending on how long those 10 stories are, I would say maybe the quotes and the stories could be downloaded as a compressed JavaScript file that contains the list in a JSON. When you set the img src attribute using JQuery, it should pull the required image down from the server.

It would be a small project for me to show you all the details here but hopefully I've given you enough information to help you get started. You may have to use Google to fill in for examples of random numbers in JavaScript, using cookies with JQuery, replace image using JQuery.

Obligatory: https://meta.stackexchange.com/a/19492/148400 (The entire jQuery library is certainly not needed just to randomly select from an array or read/write cookies or local storage. It certainly *can* be used, but not necessary.) — David, Dec 13 '17 at 16:34

What's the best way to implement dynamic text on a static page?

1 Answers1