MadLib Writer’s Prompt

Let’s write some Javascript to generate a writer’s prompt from a list of nouns, verbs, adjectives, and adverbs, etc.

First, we’ll add some loading code. This code gets invoked two ways: first, we run it when the window is finished loading, so we get can update the DOM and give the user something to look at. We’ll also add a button to generate a new MadLib on demand.

window.onload = generate_prompt();

This is our workhorse right here, but it’s pretty simple. We have a bunch of arrays and we’re going to pick from them a random element and add it to the string.

function generate_prompt() {
	
     prompt_string = adjective1[random_0_to(adjective1.length)] + " " + 
          media[random_0_to(media.length)] + " " + 
          adjective2[random_0_to(adjective2.length)] + " " + 
          noun[random_0_to(noun.length)] + " " +
          action[random_0_to(action.length)] + " " +
          venue[random_0_to(venue.length)] + " ";
	
	if (random_0_to(10) == 0)
		prompt_string += ", in Latin."
		else  
		prompt_string += "."

	display_prompt(prompt_string);		
	}

Here are some sample arrays to get you going. You can add as many elements as you’d like to the arrays, just make sure they’re all separated by a comma.

var prompt_string = ""

var adjective1 = [
	"A gripping",
	"a frivolous"
]

var media = [
	"novel starring",
	"short story about"
]

var adjective2 = [
	"an anxious",
	"a pretentious"
]
var noun = [
	"duck",
	"bunny"
]

var action = [
	"dancing",
	"flying"
]

var venue = [
	"on the moon",
	"in my imagination"
]

We’re going to need a function to generate those random numbers.

function random_0_to(n) {
	return Math.floor(Math.random() * n);
	}

And lastly, a function to update the DOM.

function display_prompt(s) {
	document.getElementById("prompt").innerHTML = s;
	}

Cool, all done with the .js file.

This is from the HTML file that I use here at www.floatingpoint.pub. It defines the area in the DOM where the prompt gets updated by the display_prompt(s) function and contains a little self-contained javascript to update the prompt when someone clicks the (new) link.

		<p class=prompt><strong>PROMPT:</strong>
		<a id="prompt"></a>
		<a href="javascript:generate_prompt()" style="text-decoration:none !important;">(new)</a>
		</p>

That’s it! Have fun with it and be sure to email me to show off how you’ve used it to do something really cool on your own.

Published by J. Wilder

My friends call me Jonnie. You can too.