Follow

Guide to: The Code Editor

Use the Code Editor to build custom jobs with HTML, CSS, Javascript, and Crowdflower’s handy markup language for forms, CML.

Note: Switching back to the Graphical Editor once you have saved custom code in the Code Editor is disallowed - you must work solely from the Code Editor once you have opted to customize a job. Legacy jobs with custom code that is not readable by the Graphical Editor will not be able to access that interface either.

 

Fig. 1: Code Editor

 

Title

Enter the title of your job in this field.


 

CML Field

Use the CML field to customize what contributors see, how they submit data, and how that data is stored after they complete an assignment. HTML can also be used in this field. For more information on CML, visit the CML Article.

 


 

Tips and Tricks in the Editor

We've implemented the Ace Code Editor into our platform, and have included a few features that will help you while you create your job. Take a look at our list of tips here and a list of keyboard shortcuts for the Ace Code Editor on their Github page here.

 

CML Reference

On the right hand side of the page, between the Instructions and CML fields, is the ‘CML Reference’ button. Use this button to view all CML form elements and insert an example form element into your CML wherever you have your cursor.


Insert Data

Next to the CML Reference button is the ‘Insert Data’ button. Use this button to quickly see the column headers of your source data and insert liquid variables into your CML.


 

Instructions

Enter the instructions for your job in this field. Use the Instructions Template to help you write the best instructions possible. The instructions displayed below were created using the Instructions editor. You may also copy and paste HTML code or Markdown in the "Show HTML" section of the Instructions editor.

 

CSS Field

At the bottom of the CML field, click the ‘Show Custom CSS/JS’ link to access the CSS field. This field will allow you to add custom styling to your assignments.


 

 

JavaScript Field

At the bottom of the CML field, click the ‘Show Custom CSS/JS’ link to access the JavaScript field. This field allows you to add any custom JavaScript you need to your form.


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


Have more questions? Submit a request
Powered by Zendesk