Guide to: The Graphical Editor

The Graphical Editor allows you to create a job - Title, Instructions, Insert Your Data, and generate Questions without typing any code.

There are three different components of the Graphical Editor:

  1. Title
  2. Content - Show data and add questions
  3. Instructions


Layout of the Graphical Editor


Enter the title of your job in this field.


There are two main types of elements in this section, Data and Questions.

Data refers to any data uploaded into the job or information needed for the contributors to reference when answering the questions in the job.

Questions (a.k.a. CML elements) can be multiple choice, checkboxes, textboxes, etc.


Show Data

To show source data in the job:

  • Select the "Add" button at the top
  • Select "Your data" from the dropdown list. A menu sidebar will appear on the right side of the page
  • Once selected, all column headers from your data will be shown – add them to your job by selecting them
  • Determine the format of how the data is shown by selecting the column's checkbox. To select the "Display Type" click on the small arrow next to the checkbox. You have these options of display types:
    • Text: plain text format
    • Link: data is a hyperlink and will be show in the job as such
    • Image: data is a link to an image and will be show in the job as such
    • Video: data is a link to a video and will be shown in the job as such
  • Click "Add Data" when finished

You can also format and edit the look of the content by selecting the "Edit" button in the top right corner of the content box.

A text editor toolbar will appear once the "Edit" button is selected.


Add Question

To add a question in the job:

  • Select the "Add" button at the top
  • Select "Question" from the dropdown list. A menu sidebar will appear on the right side of the page
  • Once selected, a list of all possible CML elements will be shown - you will be able to customize the question after selecting one
  • Depending on the CML element, the following fields will need to be updated:
    • Question Text: The text of your question
    • Options - Label: The text of the answer to the question
    • Options - Value: The answer value of the answer to the question
    • Default: The answer is selected by default
    • An answer is required: Yes - The question must be answered before submitting work, No - The question does not need to be answered before submitting work
    • Additional Options:
      • Tips/Hints: Additional instructions/notes for the question
      • Results Header: Reference name for the question in the results (column header name)
  • Click "Add Question" once all changes have been made


Response Validation

The response validation field will appear when you are creating a Text Box (Single Line) or Website (URL) question in the job. This field will allow you to include a specific text validator that will require inputs to be in a particular format.

CrowdFlower offers number, text, web, and address validators. To learn more about the different types of validators, please read our Guide to Validators article.



If there are questions created prior to the question you are adding, there is an option to add conditional logic. Conditional logic is used to show certain information depending on a previous answer in the same form.

To add conditional logic to a question:

  1. Select "Add Trigger" to begin the process
  2. Select a question to trigger logic: This is the name of the question
  3. Show this when: Select "Is" for when the indicated answer option should be selected or "Is not" when everything else but the indicated answer option is selected. The dropdown field below contains all possible answer options to the selected question. Select a specific answer from this list to reference the condition for the current question to appear on


Clean Output

For free response fields, or text boxes, CrowdFlower offers the ability to normalize inputs by either adjusting input capitalization or trimming input spacing.

Take a look at the clean output validators section of our validators article for more information.



Enter the instructions of your job in this field. Use the Instructions Template to help you write the best instructions possible.

Just like the data content editor, there is a text editor for the instructions for easy formatting and styling. The following functions are available in the text editor:

  • Styling
    • Bold
    • Italicize
    • Underline
    • Color (Background/Text)
  • Formatting
    • Text formatting
    • Alignment
    • Numbered list
    • Bulleted list
  • Media
    • Hyperlink
    • Image upload/link
    • Video upload/link
  • Table Creation
  • Undo
  • Redo
  • HTML Code Editor View



Code Editor

If you would like to view the CML code for the job, you can click on the "View Code Editor" link at the bottom of the Graphical Editor page for a more in-depth look into the job.

You can implement custom CSS and JavaScript in the Code Editor. Take a look at the guide to the Code Editor here.

Was this article helpful?
1 out of 1 found this helpful

Have more questions? Submit a request
Powered by Zendesk