Working in the Editor

Published: Monday, December 16th, 2013 by Chris Zieba


The editor is used to create the front end viewer for clients. It is here where you build the dynamic forms used to gather the answer set from your end-user.

The editor is split into three panes. The left side is a list of all the questions in the interview so far. As you add more questions, this list will update itself accordingly. You can order this list using the Edit drop down item in the menu.

The middle view of the manager is the graphical display of the interview. Since interviews can contain complex branching logic, it is easier to visual the flow of the interview using a top down design.

The far left window of the editor is used as a thumbnail preview for the questions, when you click on a graphical node. It is also used as the debug window when you run the interview in preview mode.


The menu bar is dynamic depending on which state the editor is in.

Graph

When the editor is in graphing mode, the options to preview the interview, zoom the graph, and add/delete/clone questions become available.

Question

When the editor is in question mode, the option to preview the interview, starting from the current question is available.

Preview

When the editor is in preview mode, the option to edit the current question in the viewer is available. You can exit preview mode anytime by clicking the close icon in the top right window of the viewer.

When clicking on a graph node (question) the thumbnail appears in the right pane for quick viewing.


Double clicking on a question will open the question, and set the editor to question mode. You can edit a question, and all of it's properties here.


The learn more tab is used to insert general information about the question, which the end-user can quickly glance at.


The fields tab is where all the form elements are added. The options are:

Each field type comes with validation properties that can be used to validate the information you collect from clients.


There are three types of buttons that can be used in an interview.


The advanced tabs allow you to write custom logic in javaScript to control the flow of the interview. For example, you can set variables, or add a condition that goes to a question if a user is under 16, and a different question if the user is over 16.


The interview can be previewed at any time, and the debug window becomes available to track the progress.


This completes the basics for working in the editor. To see all the functions that are available to use in the questions, please see the documentation.