Fortune Cookies

Fortune cookies on web pages have more versatility then physical fortune cookies. Here are a few possibilities.

1. The way for a site user to obtain a fortune cookie may be obfuscated. The cookie may be presented when the site user does a certain action, perhaps tapping a special unmarked icon or scrolling the page.

2. The fortune cookie can be presented when the page is first loaded. Or only when the person loads a second page.

3. The timing for presenting the web page cookie can imitate a physical fortune cookie — a fortune cookie for completing a purchase or for subscribing to a newsletter (as examples).

The fortune cookie content is not required to be a prediction or saying, which is often the case for physical fortune cookies. It can be pretty much anything you wish.

1. A fortunate discount on merchandise the site user was buying anyway.

2. An inspirational verse.

3. A coupon code for a product.

4. A gift.

5. A random link to a related website.

6. An ad for something related to the web page subject that feels special to the site visitor.

It is a way to offer fun information to your site visitors.

This article has code for presenting a fortune cookie when the site user taps on something. It also has the PHP software and JavaScript code to deliver the fortune cookie. And, further, it has a live fortune cookie that uses the same code the article presents.

To install this fortune cookie functionality, you need these four things:

1. The PHP script — The PHP script has one place to customize, where you specify the fortune cookies.

   The script needs to be uploaded to your domain's server. This needs to be done only once. The PHP script can then be accessed from any web page on your domain.

2. The Ajax JavaScript —

   The Ajax JavaScript has one place to customize, the URL of the PHP script you uploaded to your server.

   On the web pages that will have a fortune cookie, the JavaScript may be published in the web page source code or pulled in from a file on your server.

3. The div to hold the fortune cookie — This div will contain the fortune cookie when the link (see the next list item) is tapped. The div must have an id value.

4. The fortune cookie link — The link calls the JavaScript function with the id value of the div.

Each of the above will be presented in their order.

But first, here is a live implementation using the very code you'll find below.

Tap for a fortune cookie.

The fortune cookie link may be obfuscated if it suits your purpose. An example of obfuscation is making a fortune cookie link using a transparent image located immediately after the last sentence of your article.

The PHP script

Upload the following source code to your server. Name the file fortunecookie.php or other *.php file name you prefer. There is one optional customization, addressed below the source code.

<?php
/*
Fortune Cookie
Version 1.0
August 21, 2021
Will Bontrager Software LLC
https://www.willmaster.com/
*/

/* The only customization. */
// Specify each fortune cookie in the area between the lines containing "FORTUNES".
// Cookies may be multi-line so long as the cookie itself does not have a blank line.
// Put at least one blank line between fortune cookies.
$FORTUNECOOKIES = <<<FORTUNES
Look for an unadvertised gift when you order.

Life is pleasant if you let it be.

Let form spam be a thing of the past. Use the  
<a href="https://spamfreeform.com">spam free form</a>.

You will meet someone to do business with.
FORTUNES;
/* End of customizations */

$ArrayOfFortuneCookies = preg_split('/[\r\n][\r\n]+/',trim($FORTUNECOOKIES));
$CookieSelection = mt_rand(0,count($ArrayOfFortuneCookies)-1);
echo $ArrayOfFortuneCookies[$CookieSelection];
exit;
?>

Optional customization —

The customization is where you specify fortune cookie content that fortunecookie.php will select from. (Selection is pseudo-random.) If you do not change this, the fortune cookie selection will be the same as the example at this website.

The fortune cookie selections are colored blue in the above source code. You may replace one or more of the selections, remove selections, and/or add selections.

The fortune cookie content may be coded with HTML markup. They may have one or more lines, but not a blank line. Blank lines are used to separate the individual selections.

That's all for the customizations.

The Ajax JavaScript

The Ajax JavaScript may be published in the web page source code or pulled in from a file on your server. Each page that has fortune cookie functionality must have access to the JavaScript.

Here is the JavaScript source code. A customization note follows.

<script type="text/javascript">
function GetFortuneCookie(id)
{
   var uri = "/php/fortunecookie.php";
   var http = new XMLHttpRequest();
   if(! http) { alert('Unable to connect with '+uri); return; }
   http.onreadystatechange = function()
   { 
      if(http.readyState == 4 && http.status == 200) 
      { document.getElementById(id).innerHTML = http.responseText; }
   }
   http.open("GET",uri,true);
   http.send();
}
</script>

Customization —

The Ajax JavaScript has one place to customize, the URL of the PHP script you uploaded to your server. Replace /php/fortunecookie.php with the fortunecookie.php URI.

Ajax is domain and protocol sensitive. Therefore, specify the URI instead of the URL. If your PHP script's URL is https://example.com/php/fortunecookie.php then remove the domain and protocol and specify only the URI, /php/fortunecookie.php

The div to hold the fortune cookie

This div will contain the fortune cookie when the link (see the next list item) is tapped. The div must have an id value.

Put the div where you want the fortune cookie to show up. You can style it however you wish, even to removing the borders and padding. But the div must have an id value.

Here is the source code of the div used in the live example on this page.

<div id="the-fortune-cookie-id-value" 
     style="border:2px solid #ccc; border-radius:1em; padding:1em;">
(fortune cookie will appear here.)
</div>

Note that "(fortune cookie will appear here.)" is optional.

The the-fortune-cookie-id-value id value will be used in the fortune cookie link.

The fortune cookie link

Here is the fortune cookie link source code.

<a href="javascript:GetFortuneCookie('the-fortune-cookie-id-value')">
Tap for a fortune cookie.
</a>

The link calls the Ajax JavaScript GetFortuneCookie() function with the fortune cookie div id value the-fortune-cookie-id-value as a parameter.

Putting it All Together

The fortunecookie.php PHP script needs to be on your domain's server. Then, for every page that will have the fortune cookie functionality:

1. Make the Ajax JavaScript accessible either in the source code on the page or the JavaScript pulled in from an external file.

2. The page contains a div to put the fortune cookie content into.

3. The page has a link to tap (or other method you may devise) that calls the Ajax JavaScript with the fortune cookie div id value. The Ajax JavaScript gets a fortune cookie from the fortunecookie.php PHP script and inserts it into the div.

You now have a fortune cookie functionality for your web page.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager