Question Steps
Collect General Info

User can select from buttons as their answers. Question steps are ideal for questions with a small handful of answer options that require more context than can fit on something like a card or list item.

"type": "questions"

{
  "steps": {
    "question": {
      "title": "A question component",
      "type": "questions",
      "inquiries": [
        {
          "title": "Question 1",
          "description": "High humidity most of the year"
        },
        {
          "title": "Question 2",
          "description": "In a major city surrounded with air pollution"
        },
        { "title": "Question 3", "description": "High winds" }
      ],
      "responses": [
        {
          "title": "Response 1",
          "value": "Response 1"
        },
        {
          "title": "Response 2",
          "value": "Response 2"
        }
      ]
    }
  }
}

Skip Steps

Setting can_skip to true allows the user to skip the step which can help reduce drop off.

Schema Overview

type required	string Value: "questions"
	Array of objects (QuestionsInquiry)
	Array of objects (QuestionsResponse)
dialogue_title	string The dialogue title is the instructions or question text content for a given step.
dialogue_instructions	string The dialogue title is the instructions or question text content for a given step.
title	string The title of the step which is the first text content on the top of the step view. The title should describe the current step in a short and concise way.
can_skip	boolean When set to false the step is required to be answered before moving on to the next step. When set to true the user can skip answering the step.
class	string Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.
layout	string (AppState.ILayout) Enum: "cards" "list" There are two available layouts for single select steps; cards and list. The cards layout consists of selectable retangular cards that are displayed in a single row grid format. Navigating between card options is handled by a horizontal carousel. Cards contain text and/or images. The list layout is a list of selectable items with a vertical scroll. List items may also contain text and/or images. The list layout is better suited for smaller images such as icons while the cards layout is better suited to larger images.

{"questions_step": {"title": "This is a Question Step",
"dialogue_title": "It's used to provide more context to users",
"type": "questions",
"inquiries": [{"title": "This is a Title",
"description": "This is a description"
},
{"title": "Question Steps Offer Longer Explanations",
"description": "Question steps allow you to provided textual explainations for better informed user selections."
},
{"title": "Action Oriented Button Responses",
"description": "Question steps include buttons with text for a more action oriented response."
}
],
"responses": [{"title": "Go Back",
"value": "Looks Great!"
},
{"title": "See All Step Types",
"value": "All Types"
}
]
}
}

Full Schema

Loading ....

Example

type required	string Value: "questions"
	Array of objects (QuestionsInquiry)
	Array of objects (QuestionsResponse)
dialogue_title	string The dialogue title is the instructions or question text content for a given step.
dialogue_instructions	string The dialogue title is the instructions or question text content for a given step.
title	string The title of the step which is the first text content on the top of the step view. The title should describe the current step in a short and concise way.
can_skip	boolean When set to false the step is required to be answered before moving on to the next step. When set to true the user can skip answering the step.
class	string Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.
layout	string (AppState.ILayout) Enum: "cards" "list" There are two available layouts for single select steps; cards and list. The cards layout consists of selectable retangular cards that are displayed in a single row grid format. Navigating between card options is handled by a horizontal carousel. Cards contain text and/or images. The list layout is a list of selectable items with a vertical scroll. List items may also contain text and/or images. The list layout is better suited for smaller images such as icons while the cards layout is better suited to larger images.

{"questions_step": {"title": "This is a Question Step",
"dialogue_title": "It's used to provide more context to users",
"type": "questions",
"inquiries": [{"title": "This is a Title",
"description": "This is a description"
},
{"title": "Question Steps Offer Longer Explanations",
"description": "Question steps allow you to provided textual explainations for better informed user selections."
},
{"title": "Action Oriented Button Responses",
"description": "Question steps include buttons with text for a more action oriented response."
}
],
"responses": [{"title": "Go Back",
"value": "Looks Great!"
},
{"title": "See All Step Types",
"value": "All Types"
}
]
}
}

Question Steps Collect General Info

Schema Overview​

Full Schema​

Example​

Question Steps
Collect General Info

Schema Overview

Full Schema

Example