JavaScript Storyteller Part B

Correct your story's pronouns

Recall the code for the gender selection dropdown list in your input form. (Yours may vary.)

<select name="genderlist" size="1" id="genderlist">
    <option value="Male">man</option>
    <option value="Female">woman</option>
    <option value="Person">person</option>
    <option value="People">some people</option>
</select>

Declaration Section
Recall how programmers place variable declarations at the top of the script section or the beginning of a function to make them easy to find?. We can make it even clearer by labelling the section ourselves with a comment like the one shown in this code.
In JavaScript, a collection, or list, of items is called an Array. Create an array of pronouns for each gender.
Create pronoun arrays for each gender on your form.

Paste these arrays in the declaration section at the beginning of the header script.

var MalePronouns = new Array ("he","his","him","man","men");
var FemalePronouns = new Array ("she","her","her","woman","women");
var PersonPronouns = new Array ("one","one's","one","person","persons");
var PeoplePronouns = new Array ("they","their","them","people","people");

var gender;

You will need one array for each possible choice in your dropdown box. You may not need as many choices of pronouns, possessives, and nouns as shown here. Customize the arrays to match the needs of your story, making sure each array has the same number of items and that they are in the same order. JavaScript can track the position in the array of each item.

It's easiest to visualize in a table:

Arrays	Array Indexes and Elements
Arrays	[0]	[1]	[2]	[3]	[4]
MalePronouns	he	his	him	man	men
FemalePronouns	she	her	her	woman	women
PersonPronouns	one	one's	one	person	persons
PeoplePronouns	they	their	them	people	people

Next we will build a conditional to select the correct pronouns based on the user's selection.

Array Origin
The first index, or origin, is always 0 in an array in JavaScript.

A Trick: Assigning an Array to a Variable
Assigning an array copies it and all of its elements to the variable. The variable also becomes an array and can be referenced like the original array.
When the conditional is true because we found a match for the user's selection, we copy that gender pronoun array to the variable gender. Gender always holds the pronouns needed for the story.

For instance, if the user selected Male, you can get the proper pronoun by using

gender[0] for he

gender[1] for his

gender[2] for him

gender[3] for man

gender[4] for men

Copy and paste this code into the newStory function after the values are retrieved in the declaration section—with getElementById. Replace genderlist with whatever you called your dropdown list.

if (genderlist == 'Male')       //test
{
    gender = MalePronouns; // if true, assign this array to gender
}
else if (genderlist == 'Female')
{
    gender = FemalePronouns;
}
else if (genderlist == 'Person')
{
    gender = PersonPronouns;
}
else
{
    gender = PeoplePronouns;
}
Look through your story to find all words that show gender and replace them with gender[0], gender[1], gender[2], gender[3], or gender[4]. For instance, for his, her, one's, and their, replace with gender[1].

story += 'busy making a <span class="highlight">' +fruit+ '</span> pie. <span class="highlight">' +fruit+ '</span> was ' +gender[1]+ 'favorite fruit,';
Save the file and preview in Firefox. Fill out your form, select a gender, and click the Create Story button. Do all of your gender pronouns change to match the selection in the dropdown box? Try another gender selection and click the Create Story button again. Do the gender pronouns change as they should?

6. Go to the Catalyst WebQ and answer Questions 11 and 12.

Now that you have added the gender conditionals, it's time to add the caps function...