Idea Generator, Part II

This is the second of a planned three-part tutorial for making something similar to the Plot Ideas generator.

The first part contains a content template and initial replacement lists. An idea is generated and published when the page loads.

This second part describes how to put a button or link on the idea-generator page that, when clicked, generates another idea and publishes it.

The third part is intended to show how you can allow the user to provide their own lists of items for the idea generator to use.

This part II relies on the software provided with Idea Generator, Part I, which should be reviewed before implementing this part.

The entire purpose of the idea generator is to stimulate creativity when seeing familiar items in odd or unexpected combinations.

The writing of the third part will be started as soon as this one is finished. Other articles may be published before the third part is available. When part III is ready, it will be the Possibilities newsletter article for that week.

In the bordered paragraph below is a live-generated idea using the software presented in the Idea Generator, Part I article. If you decide to implement this, you will need that software — as is or customized with your own words/phrases for use when generating the ideas.

For another generated idea, either click this link or .

Note: The generated idea will not always be different than the previously generated idea. The software does not remember what the previous idea was — it just goes ahead and generates one.

Implementing Part II

The first step is to install the PHP software found at Idea Generator, Part I, if you have not already done so. Make a note of the URL of the installed IdeaGenerator.php software.

Now there are three steps for the web page where the generated ideas will be published.

1. Insert a div into the source code of the web page. This div will receive the generated idea from the IdeaGenerator.php software.

   Here is the div used as an example on this page.

   <div id="generated-idea" style="border:3px solid #ccc; padding:.25em 1em; border-radius:2em; text-align:center;"></div>
   

   Note the generated-idea id value. That id value will be used to customize the JavaScript. See next step.

   The div may be styled as you wish.

2. Next, insert the JavaScript into your web page. The JavaScript contains the Ajax code to obtain an idea from the IdeaGenerator.php software. Customization notes follow.

   <script type="text/javascript">
   function GetAnotherGeneratedIdea()
   {
      /* Customization section. */
   
      // Specify the relative URL of IdeaGenerator.php
      var url = "/ideas/IdeaGenerator.php";
   
      // Specify the id value of the div or other HTML container to publish the generated idea.
      var id = "generated-idea";
   
      /* End of customization. */
      var http = new XMLHttpRequest();
      if(! http) { alert("Unable to connect to the software."); return; }
      http.onreadystatechange = function()
      { 
         if(http.readyState == 4 && http.status == 200)
         {
            document.getElementById(id).innerHTML = http.responseText;
         }
      }
      http.open("GET",url,true);
      http.send();
   }
   GetAnotherGeneratedIdea();
   </script>
   

   Customization notes —

   There are two customizations in the customization area of the above source code.

   1. Replace /ideas/IdeaGenerator.php with the relative URL of IdeaGenerator.php installed on your domain.

      A relative URL is the absolute URL minus the leading http(s):// and domain name. As an example, the relative URL of https://example.com/ideas/IdeaGenerator.php is /ideas/IdeaGenerator.php

   2. If your div id value for publishing the generated idea is not generated-idea then replace generated-idea in the JavaScript with the correct id value.

   When customized, the JavaScript may be placed anywhere in the source code of the web page that is below the div placed to publish the generated idea from the IdeaGenerator.php software. (The reason for somewhere below that div is because the JavaScript will generate an idea as soon as it is loaded.) Putting the JavaScript near the bottom of the source code, immediately above the closing </body> tag would work.

3. Third, put an idea generation link and/or button on the web page. There is no limit how many you may place on your page.

   Here is code for a link.

   <a href="javascript:GetAnotherGeneratedIdea()">click this link</a>
   

   Change the link text as you wish. Or replace the text with an image.

   Here is code for a button.

   <input type="button" value="tap this button" onclick="GetAnotherGeneratedIdea()">
   

   Change the button text as you wish.

   The above link and button, when tapped, publish a newly-generated idea.

When your page is loaded into a browser, the JavaScript inserts a pseudo-randomly generated idea into the div prepared for it. New ideas are generated and published with subsequent taps on the link or button published for that purpose.

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

Will Bontrager