Begin single-question samples

Hide | Show those damn horizontal rulers

This is where the error markup needs to render even if it comes through the DOM. My input can take three classNames to change widths f_basic_text: Plain Text

---

Only use this method f_basic_text: Year (yyyy)

---

Some helpful tip f_basic_checkbox: Yes, this is code for a single checkbox (not a group)

---

This isn't exactly where the error should appear but markup is serialized correctly. Mike will make my heights do that cool thing basecamp's textareas do. f_basic_textarea: Plain Textarea

---

f_basic_radioSet: Plain Radio Set This is set to "short" width via class name on the UL tag. Note the wrap.

• Value
• Even better value
• Everyone loves Macasek Everyone lovesMacasek or do they loves Macasek Everyone Idont know Everyone loves MacasekEveryone oves Macasek Nobody loves Juhan Everyoneloves Macasek

---

.fset4: Quarter Picker Why won't my onclick function work (to set class name to qpickeractive?) This would be a tip

2007

• Q1
• Q2
• Q3
• Q4

2008

• Q1
• Q2
• Q3
• Q4

2009

• Q1
• Q2
• Q3
• Q4

---

.fset6: Good or Bad Picker This would be a tip

Mexican food 7 days a week

• +
• -

Rum and cereal for breakfast days a week

• +
• -

Baked Alaska for dessert every weekend

• +
• -

---

f_basic_radioSet: Plain checkbox list Same code for checkboxes

• No idea
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• There is a space in front of the word "there"
  Here's a branch

---

.fset1: Big checkbox list Same code for checkboxes. fieldset takes class of .fset1

• No idea
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• No idea
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• No idea
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• There is a space in front of the word "there"
• There is a space in front of the word "there"

---

This is where the error markup needs to render even if it comes through the DOM. My select can take three classNames to change widths f_basic_select: Plain [No selection] No comments here Blah man Mai Tai Sidecar Between the Sheets Okonkulukooler Bad Babysitter

---

use this pulldown if the Month is the only part of the date being specified. f_basic_select: Month of your birth [No selection] January February March April May June July August September October November December

---

.fset2: Likert, big: Your approximate tiki-ness

I am clueless about tiki
I know the difference between falernum and orgeat
I own an ice crusher but still serve my Mai-Tais in non old-fashioned glasses
I don't even go out to Mass. tiki joints because my home bar is better
I have seen every WAITIKI show , own every book by Beach Bum Berry, and my entire home is filled with carvings

---

.fset2: Likert, small: Your approximate tiki-ness

Strongly disagree
Somewhat disagree
Neutral
Agree
Strongly agree

Begin Fieldsets (multi-question groups)

12.1.3 STP Survey Sample Something

An uber blob of text about all the questions about to be asked in 12.1.3 section.An uber blob of text about all the questions about to be asked in 12.1.3 section. An uber blob of text about all the questions about to be asked in 12.1.3 section. An uber blob of text about all the questions about to be asked in 12.1.3 section. An uber blob of text about all the questions about to be asked in 12.1.3 section.

12.1.3.1 Here is a legend for the first date/textarea fieldset

Help with this section

Quite a description of 12.1.3.1 stuff. Oh my gosh this is WAY longer than we thought it was going to be. So, we let people but a control/toggle on this bad boy. Some people like LOTS of text on the screen.Oh my gosh this is WAY longer than we thought it was going to be. So, we let people but a control/toggle on this bad boy. Some people like LOTS of text on the screen.Oh my gosh this is WAY longer than we thought it was going to be. So, we let people but a control/toggle on this bad boy. Some people like LOTS of text on the screen.Oh my gosh this is WAY longer than we thought it was going to be. So, we let people but a control/toggle on this bad boy. Some people like LOTS of text on the screen.

Whats this a new paragraph you say? Hell yes. A second paragraphy mr. o'neill. We planned it that way - you can add any number of chunks of markup in this fancy pants div.

Way outta control now. THREE PARAGRAPHS Of help text? Must be a government project.

Date, e.g. 23 Sep 08

First drink came from Beach Bum Berry's book, "Sippin Safari." We made Zombies (The 1934 version not the 1950 one) , Rain Killers, the Big Bambook, and the Kon Tiki Mai Tai (totally different ingredients than the classic Don Mai Tai but same taste, ironically!) Description

12.1.3.2 Here is a legend for the second date/textarea group

Quite a description of 12.1.3.2 stuff. Oh my gosh this is WAY longer than we thought it was going to be. So, we let people but a control/toggle on this bad boy. Some people like LOTS of text on the screen.Oh my gosh this is WAY longer than we thought it was going to be. So, we let people but a control/toggle on this bad boy. Some people like LOTS of text on the screen.Oh my gosh this is WAY longer than we thought it was going to be. So, we let people but a control/toggle on this bad boy. Some people like LOTS of text on the screen.Oh my gosh this is WAY longer than we thought it was going to be. So, we let people but a control/toggle on this bad boy. Some people like LOTS of text on the screen.

Whats this a new paragraph you say? Hell yes. A second paragraphy mr. o'neill. We planned it that way - you can add any number of chunks of markup in this fancy pants div.

Way outta control now. THREE PARAGRAPHS Of help text? Must be a government project.

Date, e.g. 23 Sep 08

Copy answer from previous question

Description

Enter another book

12.1.3.3 Here is a legend for the third date/textarea group

Quite a description of 12.1.3.3 stuff.

Last read date, e.g. 23 Sep 08

Description

---

Name Fieldsets currently allow formtips at the fieldset level, not field level

Title

First

Last

Suffix

Address

Street Address

Address Line 2

City

State / Province / Region

Postal / Zip Code

Afghanistan Albania Algeria Andorra Antigua and Barbuda Argentina Armenia Australia Austria Azerbaijan Zimbabwe Country

Practice1

Practice2

Practice3

W. Is this issue associated with a program? A child input field for the first question should show below the dropdown (onclick) but it's broken Crap, you forgot to fill out the dropdown. If this error message gets too long, becuz it is positioned, it will overlap the box below.

• Yes, it belongs to the program
  [No selection] ABC Radar Program Program name
  Escalate this issue [No selection] Medium-high level High up level Level
• No individual program. It's associated only with a group.
  [No selection] 554th ELSG Group Group

---

Z. Radio sets with children questions (could be hidden by default). A really helpful tip started here.

• These children shown by default
  1st branch 1st branch, q2

  2nd branch
• Does nothing
• Hidden children
  1st branch: 1st branch, q2:

  2nd branch:

---

Radio set with branch beneath one of the choices (broken, 10/18) A really helpful tip started here.

• Yes, click me to let me enter a description
  Just try to write an answer that is not error prone. i dare you. Description
• No
• Blah
• Yikes

---

Simple, 2-question fieldset: Radios and Textarea A really helpful tip started here.

• Juhan, the width of this radio set needs to be fixed to SOME value - it cannot change per question.
• No
• Blah
• Yikes

Just try to write an answer that is not error prone. i dare you. Description

---

.fset5 Preferred contact method for the following days of the week A really helpful tip started here. Because it's helpful, sometimes it is a little bit longer Mr. Sonin.

Mondays	Email	Phone	Can-on-string	Fax
Tuesdays	Email	Phone	Can-on-string	Fax
Wednesdays	Email	Phone	Can-on-string	Fax

---

.fset5 Same example, with 6 columns of choices and table now has class of fw_l A really helpful tip started here. Because it's helpful, sometimes it is a little bit longer Mr. Sonin.

Mondays	Email is often the fastest way to ask	Phone	Can-on-string	Fax	Yell super loudly because sometimes a question choice is long	Handwritten letter
Tuesdays	Email is often the fastest way to ask	Phone	Can-on-string	Fax	Yell super loudly because sometimes a question choice is long	Handwritten letter
Wednesdays	Email is often the fastest way to ask	Phone	Can-on-string	Fax	Yell super loudly because sometimes a question choice is long	Handwritten letter

---

.fset5 Add a row of headers to the standard matrix question. A really helpful tip started here. Because it's helpful, sometimes it is a little bit longer Mr. Sonin.

	10 Category buster. One of the top 3 restaurants I have ever eaten at.	9 Kiler - well above places I normally call "great." I rarely find places this good.	8 Extremely good - this place would rank in ther top 10 places I eat. A place to take guests when the they visit town.	7 Excellent, definitely above "good" but I didn't walk out counting the days until my next return.	6 Category buster. One of the top 3 restaurants I have ever eaten at.	5 Category buster. One of the top 3 restaurants I have ever eaten at.
Food at the Kowloon?
...at Bali Hai?
...at Mon Kau?

UI Spec

div.fieldset (1-quest. containers)

1. 1 input, 1 label
2. uses similar visual styles to that of the fieldset
3. Basic question types get a class of f_basic_radioSet, f_basic_text, f_basic_textarea, f_basic_select

fieldset (multi-question containers)

1. May or may not have a class name. Classnames for fieldset would map to the question builder anmes probably (e.g. fieldset.eyeColorPicker)
2. Provide the basic shell/container (think: div) for a set of questions or a single question
3. Always have a legend element.
4. 19 Oct: May have 1 div.fieldsetDescription after the legend
5. May be displayed off INLINE (style="display:none") if they are conditionally dependent on another questions answer.
6. Contain questions and could contain entire child fieldsets.

XHTML input elements summary

1. Every form element input type (incl. textarea, radio etc.) requires at least one className of field. This is to enable the highlighting of the parent fieldset (if we use the Wufoo model for highlighting). TBD if radios/checks need the class of field
2. All input types will probably frequently contain a class which will set the elements width and horizontal margin. See positioning section.

General form positioning methodology

1. Every input/label pair or radio/checkset, each of which is contained by a div or span and is floated by default. These elements may or may not have classNames.
2. Layout: if you do nothing, by default you would get chunks of questions running horizontally until they fill up the parent column. Their widths will be calculated based on the intrinsic html width of the form element (e.g. cols or size attributes). However, a class name can be added to any form input or other markup element to change its inherent width. (These may be applicable to containing divs and spans as well (TBD). Right now, the running ones are here (fw = formWidth)
   1. .fw_s = 1/3 * width(.fw_l)
   2. .fw_m = 1/2 * width(.fw_l)
   3. .fw_ml = 2/3 * width(.fw_l)
   4. .fw_l
3. Stacking: vertical layouts (no side by side questions) are achieved by using clear rules in the CSS for that particular fieldset or question type. For example, if we have :
<fieldset class="responsibilityCheck">
<div class="f_datePicker"></div>
<div class="f_basic_textarea"></div>
</div>
...then normally the datepicker and textarea would be side by side if the column-width allowed them to be. However, we might use .responsibilityCheck div {clear:both} to make the questions stack vertically .

Text artifacts

1. 18 Oct: legend - describes a set of input/label pairs or a set of fieldsets
2. 19 Oct: .fieldsetDescription - longer, prose description to accompany the legend
3. span.fieldError will contain error-handling at a field-level of specificity. Positioning of this balloon will be based on Nosal's JS work ;-) The markup/content for the error must render inside the label element (see question 3. on this page.). Events that generate an error need to also move the cursor (e.g. location.hash('error_question1b')) to the right place.
4. New order: the span.fieldError should now come before the span.formTip
5. span.formTip - this, like the span.fieldError, also needs to render inside the label element. Another container element, span.cont_tips encapsulates both of these elements and is a child of label.
6. span.cont_tips - these can be placed inside label or legend
7. 18 Oct: Input masks (span.mask) are optional. We will include the mask as part of the regular label text.
8. Prefill triggers (p.preFillTrigger) will contain a checkbox input and label. probably will live immediately prior to a textarea and will take contents from one textarea and prefill them into another question.
9. Duplicate-this-question triggers (p.duplicateQuestion) TBD. probably will live immediately prior to a textarea and will take contents from one textarea and prefill them into another question. Will live at the end of a question-containing div
10. 23 OCt: For accessibility reasons, occasionally an input's title attr. will need to be filled out in order to maintain label/input integrity. See .fset5, the large matrix questions example. Whlie I used a shorthand title, it would be acceptable to repeat the entire contents of the thead's th value in the title attribute.