MadLibs Engine

Basic user interface to create a MadLib. Write a story and put the part of speech that you want be blank in brackets. Example: A boy named [Boy's Name] ate [Food] and it make him [Verb]!

by Katarina Countiss

HTML

<script src="http://www.vagrantradio.com/demos/ckeditor/ckeditor/ckeditor.js"></script>

CSS

/*******************************
* Google Fonts
*******************************/
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);

body{
 font-family: 'Source Sans Pro', sans-serif;
 padding:10px;   
}
/*******************************
* Table CSS
*******************************/
.myTable {
    width: 100%;
    display: table;
    border: 1px solid black;
    background-color:#f2f2f2;
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fcfcfc), to(#bfbfbf), color-stop(3%, #f7f7f7), color-stop(12%, #f2f2f2), color-stop(90%, #d9d9d9));
    background-image: -webkit-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
    background-image: -moz-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
    background-image: -o-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
    background-image: -ms-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
    background-image: linear-gradient(to bottom, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
    box-shadow: 0 1px 5px rgba(0,0,0,0.75);
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: auto;
}
.myRow {
    display: table-row;
}
.myCell {
    display:table-cell;
    vertical-align:top;
    padding: 5px;
}

.myCell:first-child {
    width:100px;
    text-align: right;
    padding-right: 20px;
}

.myCell button {
    padding: 10px;
    width: 100%;
}

/*******************************
* Table CSS
*******************************/
.small{
    color:#333;
    display:block;
    font-size:10px;
    font-weight:normal;
    text-align:right;
}

textarea{
  font-family: 'Source Sans Pro', sans-serif;
  width: 100%;
  height: 100%;
}

/*******************************
* WordBox Style
*******************************/
.wordBox{
    width: 33%;
   ...

JavaScript

/////////////////////////////////////////////////////
// Variables
/////////////////////////////////////////////////////
var defaultCopy = "My core skill sets are [core-skill-set-1] and [core-skill-set-2]. I'm endlessly [adjective-describing-self] and all my friends, family, and colleagues look to me for answers on [topic-1] and sometimes [topic-2]. As I've always been exceptionally passionate about [passion], I'm looking to [verb] focused on [specific-noun-phrase] so that I can [lofty-goal]."
var wordRegEx   = /\[\s*[^\]]*]/g
var CopyArray   = new Array()
var AnswerArray = new Array()
var Complete    = false

/////////////////////////////////////////////////////
//  Create HTML form element functions
/////////////////////////////////////////////////////
function formTable(){
    return $("<div/>",{class:"myTable"})
}
     
function formRow(sectionTitle, subTitle, htmlElement) {
    var Row       = $("<div/>"  ,{class:'myRow'})
    var Cell1     = $("<div/>"  ,{class:'myCell', text: sectionTitle})
    var LabelSpan = $("<span/>" ,{class:'small' , text: subTitle})
    var Cell2     = $("<div/>"  ,{class:'myCell'})
    $(Cell1).append(LabelSpan)
    $(Cell2).append(htmlElement)
    $(Row).append(Cell1).append(Cell2)        
    return Row 
}
    
function formButton(passedText, passedFunction){    
    var Row   = $("<div/>"    ,{class:'myRow'})
    var Cell1 = $("<div/>"    ,{class:'myCell'})
    var Cell2 = $("<div/>"    ,{class:'myCell'})
    var BTN   = $("<button/>" ,{type:"button", text:passedText})
    $(Cell2).append(BTN)
    $(Row).append(Cell1).append(Cell2)
    $(BTN).click(passedFunction)
    return Row
}
    
/////////////////////////////////////////////////////
// Button functions
/////////////////////////////////////////////////////
    
// Finds words in brackets and then makes input feilds for them.    
function makeImputs() {
    
    Complete = false

    var mainCopy = $("#madCopy").val()

    var WordArray = mainCopy.match(wordRegEx)
   ...