Build story forms

No. If you create only one eliciting question, NarraFirma will show it (without choices) on the story form above the text box for the story. If you have no eliciting questions at all (usually because you imported your data), NarraFirma will assign the question "What happened?" as the eliciting question for every story (and you can ignore it).

There are several places on a story form where you can specify messages to participants. All of these places have defaults (shown below in bold), so you don't need to customize them; but you can. Here are some ways to phrase these messages.

Please choose a question to which you would like to respond. Some other ideas are:

• Which of these questions would you like to answer?
• Choose a question that appeals to you.
• Which of these questions connects best to your experiences?
• Pick the question you like best.
• But don't say:
  • Choose the question that best fits your story. (This implies that they already "have" a story, and only one story, to tell.)
  • You must choose one of these questions. (Doesn't invite; is not conversational.)
  • Choose the best question for your experiences. (Asking people to rank questions may cause them to think that you will be ranking their story. You can use the word "best," but use it to describe connection or fit, not quality. Never even hint that quality is what you are looking for.)
  • Do any of these questions relate to your experiences? (Sometimes the answer will just be "no".)

Please enter your response in the box below. Some other ideas are:

• Please answer the question you chose here.
• You can type your answer here.
• Tell us what happened here. What do you remember?
• But don't say:
  • Answer the question to the best of your ability. (It sounds like an interrogation.)
  • Explain what happened here. (You'll only get dry facts if you ask that way.)
  • Give us your story here. (It makes their story into a thing, not a conversation.)

Please give your story a name. Some other ideas are:

• What name would you like to give this story?
• If you were to give this story a name, what would it be?
• How would you like to refer to this story?
• But don't say:
  • Give your story a title. (The word "title" is performative, and it makes people worry that their story will not be good enough. The word "name" puts less pressure on the teller.)
  • If your story was in a newspaper, what headline would it have? (If these are personal stories, people will not want to visualize them being in a newspaper. Also, asking people to write a headline makes the story seem like you want it to be exciting or sensational.)
  • Give us a way to refer to your story. (It makes the story seem like a thing.)

Would you like to tell another story? Some other ideas are:

• Is there any other experience you would like to tell us about?
• Would you like to tell us about something else that happened?
• Does this story remind you of another experience you'd like to tell us about?
• Is there another experience you can recall that you think would be helpful for our project?
• But don't say:
  • Do you have any other stories to tell? (It makes people feel that you are taking things from them, not talking to them.)
  • Think of another story you can give us. (Same problem: it makes the story seem like a thing being taken from people.)
  • Is there anything else you'd like to tell us? (There is no reference to stories or experiences here. People will expect to have a chance to type in opinions or something. You can give them such a chance, but you should use a non-story-eliciting question to do it.)

Yes, I'd like to tell another story. This is the text on the button people push to tell another story. Some other ideas are:

• Yes
• I would like to tell another story
• I remember another time I could tell you about
• I would like to tell about another experience
• But don't say:
  • I have another story (Anything you can "have" is a thing. This should be a conversation.)
  • I have more to say (They might not realize you want them to tell another story.)

Preview your story form and use your browser to inspect any element of the page you want to change. (The usual way to do this is to right-click on a word or area and choose "Inspect" or "Inspect Element" from the popup menu that appears. If you don't see a popup menu or an "Inspect" menu item, look up how to inspect a web page element in the browser you are using. Sometimes you need to turn on "developer" mode to inspect page elements.)

When you have successfully inspected the page element you want to change, you should see its CSS class. Most of the classes start with "narrafirma-".

Next go to the "custom CSS" field for your story form and write a class selector (label) and declaration (set of formatting lines) for that class. For example, if you wanted to change the introductory text of your story form to appear in blue, you would write a CSS statement like this:

.narrafirma-survey-start-text {
    color: blue;
}



Then preview the form again to see your change. (Don't reload the preview page; you have to click the "Preview" button again.)

Notes on custom CSS

• The CSS you enter affects the survey's appearance when you preview it and when a participant sees it (using the URL you give them). It is not used when you enter a story on the "Enter or import stories" page (because that form is a popup dialog, not a separate web page). If you need to change how the story entry dialog appears, you will need to change the CSS files distributed with NarraFirma.
• If you don't know how to use CSS, look through one of the many excellent tutorials on the web.
• In addition to classes, some survey elements have numbered IDs. Be careful using these, because the numbers will change if you move the questions around. But you can set styles on particular elements (using the ID selector with #) after you are sure your question order will not change.
• If you don't want people to see a particular element of the form (like say the number on sliders), you can use Custom CSS to set the display tag to "none" (display: none) for that class or ID, and it won't appear on the page.

We have tested three aspects of accessibility in NarraFirma's survey forms: scaling, keyboard access, and contrast.

Scaling. Participants can scale up all elements of the survey form using the Zoom function (usually Control- or Command- plus) on any modern browser.

Keyboard access. Each element of the survey can be accessed without a mouse by using the Tab key to move between elements. Slider values can be changed using the left and right arrow keys.

There is one slightly out-of-the-way interaction that you might want to tell your participants about. To the right of each slider there is a little number that shows the chosen value. The number is invisible until the participant has chosen an initial value for the slider.

When you click (with a mouse) on that little number, a popup dialog appears on which you can type in a new number. This is to help people set a specific number even if the slider is tiny on their (possibly tiny) screen. Participants who are using a keyboard cannot click on that little number, but they can Tab to it and press Enter to get the same popup dialog.

Also note that participants who are using (at least some versions of) Safari must turn on tabbing between items in the Preferences window.

Contrast. The default colors in the NarraFirma survey meet WCAG AAA standards for accessible text. If you like, however, you can change the colors in your survey to make it more readable (or just nicer looking). As of version 1.4.2, NarraFirma uses CSS variables to make it easier to set the colors of the various areas on the survey page. To override the default colors, copy and paste the following "root" element into the "custom CSS" field, then change the hex color values.

:root {
	--color-background-question-odd-story: #e1ebff; 
	--color-background-question-even-story: #e9f7ea; 
	--color-background-tell-another-story: #faf1d9;
	--color-background-question-participant: #faf1d9;

	--color-button-remove-story: #646262;
	--color-button-remove-story-text: white;
	--color-button-tell-another-story: #fde5a1;
	--color-button-tell-another-story-text: black;
	--color-button-submit-survey: #2c2cbd;
	--color-button-submit-survey-text: white;
}

You can of course leave out any lines that define colors you don't want to override.

You can read all about importing data in our Guide to importing data.

Here are some excerpts from Working with Stories Simplified that can help you design story forms.