Create the views for a survey

[jonathan-beebe]

Here's a rough idea of what we'll probably need:

SurveyView: A controller-view for the collection of survey items

SurveyItemView: A wrapper, mediating between the parent survey and the form fields within.

Item views grouping the various form fields and labels, each making a type of survey input. This could be as simple as the following, configurable via the data model we pass in:

<div>
  <label>{label}</header>
  <textarea ... ></textarea>
</div>

[jonathan-beebe]

I've just pushed a rough idea for the survey views. Not having the router in place or a store to retrieve that data, I just hacked some mock data into the app view for now.

The basic structure of the survey is:

<App>
  <SurveyPage>
    <SurveyView />

      <SurveyItemView>
        <div>
          <label>...</label>
          <input ... />
        </div>
      </SurveyItemView>

      <SurveyItemView>
        <div>
          <label>...</label>
          <select ... />
        </div>
      </SurveyItemView>

      <!-- more SurveyItemViews as needed -->

      <button>Submit</button>
    <SurveyView />
  </SurveyPage>
</App>

• We will need to create custom components for each type of survey question to be rendered in the SurveyItemView.
• User changes within a SurveyItemView propagate up to the SurveyView where they would be aggregated into the survey data object to be submitted when the user completes the survey.
• I'm not sure how we want to test our view components — I just used React.addons.TestUtils for now. @tommyh — would you us to use jasmine-react?

Thoughts? I know it's rough, but I wanted to get the ball rolling...

[jonathan-beebe]

Trying to brainstorm all the possible survey questions we want to support. If you have any you want to add, or feel any of these are unnecessary, please leave a comment :)

Question Types

• Boolean — Yes/No, Agree/Disagree (allow them to specify each label)
• Select one from choices
• Select multiple from choices
• On a scale of 1-10, with labels for left, middle, right. Examples
  • Strongly agree -- Agree -- Disagree
  • Extremely Satisfied -- Satisfied -- Extremely Dissatisfied
• Short Text Answer
• Essay/Long Text Answer

[karlmikko]

Multiple choice - other with short text answer?

[hojberg]

I think we can get away with just a few different types, its only an example app after all :) The ones you list sound good to me, maybe merging short and long text answers

[jonathan-beebe]

That's good. Maybe we only have one text answer that uses @brigand's Restricted Textbox.

[jonathan-beebe]

Maybe, just to keep it simple, we go with 3:

• Boolean — Yes/No, Agree/Disagree (allow them to specify each label)
• Select one from choices
• Long Text via Restricted Textbox

If we have time we can add more.

[hojberg]

+1 for those

[karlmikko]

good plan @somethingkindawierd +1

[karlmikko]

Was thinking last night (yes it did hurt). The Yes/No could be a wrapper around the multiple choice module. As yes/no is multiple choice with two options only. And potentially different css.

[jonathan-beebe]

Yeah, I realized that too. I'm going to wrap up the survey views today and was thinking of making the change you suggested.