MADLIBS array

story in array object

by GolfGirl21

HTML

<!-- We are creating a simple user interface for a MadLibs type of game -->
<!-- First we need to create the list of words we will swap into our story -->
<!-- Then we need to create a button which will run our swap function -->
<!-- Lastly, we need a place for our story to appear on the UI -->

<div id="swapList">
    <ul>
        <li><input type="text" id="noun1" /><br>Noun</li>
        <li><input type="text" id="adjective1" /><br>Adjective</li>
        <li><input type="text" id="verb1" /><br>Verb</li>
        <li><input type="text" id="adverb1" /><br>Adverb</li>
        <li><input type="text" id="noun2" /><br>Noun</li>
        <li><input type="text" id="adjective2" /><br>Adjective</li>
        <li><input type="text" id="pluralNoun1" /><br>Plural Noun</li>
        <li><input type="text" id="pluralNoun2" /><br>Plural Noun</li>  
        <li><input type="text" id="pluralNoun3" /><br>Plural Noun</li>
        <li><input type="text" id="bodyPart1" /><br>Part Of The Body</li> 
        <li><input type="text" id="noun3" /><br>Noun</li>
        <li><input type="text" id="noun4" /><br>Noun</li>
        <li><input type="text" id="noun5" /><br>Noun</li>
        <li><input type="text" id="noun6" /><br>Noun</li>
        <li><input type="text" id="bodyPart2" /><br>Part Of The Body</li>
    </ul>
    <div id="buttonDiv">
        <button id="swapButton">Swap In Words!</button>
    </div>
</div>

<div id="story"></div>

CSS

/* Create CSS selectors that hook into the unique id's or classes in the HTML */

body {
    font-family: Impact, Charcoal, fantasy;
}

#swapList {
    float:left;
    width: 6
    60%;
}

ul {
0     list-style-type: square; 
    margin: 2px;
}

li {
    line-height: 200%;
    margin-top: 10px;
}

input[type=text] {
    border-width: 0 0 1px 0;
    border-color: #333;
    color: red;
    font-size: 12pt;
}

#buttonDiv {
    text-align: center;
}

#swapButton {
    margin-top: 30px;
    width: 200px;
}

#story {
    margin-top: 12px;
    width: 45%;
    border: 1px dashed blue;
    padding: 8px;
    float: left;
}

.replacement {
    text-decoration: underline;
    color: DarkRed;
}

JavaScript

/* This is the JavaScript for our simple MadLibs type game.
Step 1 - Create a hook to the button in the UI and add an event listener
which waits for a click event.
Step 2 - Create a function which is called swapWords(), which will insert
the words from our swap list into the story.
Step 3 - Make the updated story display in the UI. */

// Hook JavaScript into the UI button.
var swapButton = document.getElementById("swapButton");
swapButton.addEventListener("click",swapWords);

// Create a story array, which is a list of our story pieces.
var thePirateStory = [
    "Ye can always pretend to be a bloodthirsty ",  //index 0
    "NOUN1",                                        //index 1
    ", threatening everyone by waving yer ",        //index 2
    "ADJECTIVE1",                                   //index 3
    " sword in the air, but until ye learn to ",    // etc.
    "VERB1",
    " like a pirate, ye'll never be ",
    "ADVERB1",
    " accepted as an authentic ",
    "NOUN2",
    ".<br></br>",
    "So here's what ye do: Cleverly work into yer daily conversations ",
    "ADJECTIVE2",
    " pirate phrases such as AHOY THERE, ",
    "PLURALNOUN1",
    ", AVAST, YE ",
    "PLURALNOUN2",
    ", and SHIVER ME ",
    "PLURALNOUN3",
    ". Remember to drop all yer g's when ye say such words as sailin', spittin', and fightin'. This will give ye a/an ",
    "BODYPART1",
    " start to being recognized as a swashbucklin' ",
    "NOUN3",
    ".<br></br>",
    "Once ye have the lingo down pat, it helps to wear a three-cornered ",
    "NOUN4",
    " on yer head, stash a/an ",
    "NOUN5",
    " in yer pants, and keep a/an ",
    "NOUN6",
    " perched atop yer ",
    "BODYPART2",
    ". Aye, now ye be a real pirate!"
];

// Create a function which will swap words into specific places in our story
// Then display the updated story in the UI
function swapWords() {
    
    thePirateStory[1] = "<span class='replacement'>" + document.getElementById("noun1").value + "</span>";
   ...