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]!

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
/////////////////////////////////////////////////////

     
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)
    CopyArray = mainCopy.split(wordRegEx)
    AnswerArray = new Array()

    var holderCell   = $("<div/>")
        
    for (x in WordArray) {

        var Text     = WordArray[x].replace(/\[|\]/g, "")
        var Name     = "F" + x
    
        var label    = $("<label/>" ,{for:Name, text:Text})
        var textArea = $("<input/>" ,{id:Name, type:"text"})
        var holder   = $("<div/>"   ,{class:'wordBox'})
    
        $(holder).append(label).append(textArea)  
        $(holderCell).append(holder)
    
        AnswerArray.push(textArea)
    }
    
    var Table    = formTable()
    var Row      = formRow("Enter Words:", "Fill the text boxes with corrisponding word", holderCell)
    var Button   =...