Edit

Design Task

The Design tab provides the means to edit task structure, description, look and feel, and answers.

The Main Panel (left side of the tab) is composed of a WYSIWYG editor. The Side Panel (the right panel) is reserved for adding and configuring a relevant task section.

Task data and design

Task design schema

The following image displays the Task Designer sections.

To edit the task design, do as follows.

1. Place cursor into the target Section by clicking inside it (Title, Instructions, Question, or Answer).
2. Perform an action (from Main Panel or Side Panel). See the list of available actions in the table below.
3. To check the updated task design, click on the Preview button.
4. (optional) Save the task.

Section	Main Panel Actions	Side Panel Actions	Common/ per Record*
Title	type Rich Text	help text (no actions)	common
Instructions	type Rich Text show, hide Instructions show, hide Tests	add/edit, delete, reorder Instructions add/edit, delete, reorder Tests add/edit, delete, reorder FAQs	common
Question	type Rich Text type Data Elements ${question.data['element name']} delete Data Elements	insert Data Elements	Text – common Data Elements – per Record
Answer	(no actions)	add/edit, delete, reorder Answers add/edit, delete, reorder Sub Answers	Answer Types – common Answers – per Record

* The last column indicates whether the section content is common for all records in the task or the section content is unique per record.

• Try not to copy and paste formatted text directly from MS Word or other advanced text editors, because these insertions can significantly increase the task size and slow down its loading. If you want to copy and paste text, do it from simple text editors (NotePad++, Sublime Text) and format it in WorkFusion.
• The Task Design Schema can significantly vary depending on the Operation selected. Possible variations are as follows:
  • section order changed
  • some sections missing
  • new sections created
  • styles changed

To modify styles and sections, see the Manual Tasks topic.

WYSIWYG editor

You can use the WYSIWYG editor (TinyMCE) to format text, insert links, images, tables, lists into Instructions or Question sections.

tip

See a detailed editor description here:

• https://pub_demo.s3.amazonaws.com/tinymce_help/tinyMceHelp.html
• har_editorhelp.pdf

Insert images

1. Place the cursor where you want the image to go.

   

2. Click the Insert/Edit Image. An Image dialog pops up.

   

3. To choose an image location, use one of the following options:

   1. Paste a link to your image into the Image URL field, for example: https://yourserver.domain/images/your_image.jpeg.
   2. If your input file contains a column with image URLs, enter the appropriate Data Element into the Image URL field, for example: ${question.data['img_url']}
   3. To upload an image file from your local PC, click on the icon to the right of the Image URL field. Click on the Choose File button and then the Upload button. Finally, select the uploaded image from the gallery.

4. After uploading image or entering the image URL, you can edit the image formatting on the Appearance tab.

Code Editor

By default, the WYSIWYG editor is presented in the Task Designer mode which allows you to easily format all aspects of your question including links and images. Switching to the Code Editor mode allows you to edit the underlying source code (Javascript, HTML, CSS, and FreeMarker) used in rendering the information.

Preview

Once input data has been uploaded, you can preview how it will appear to workers via clicking the Preview button in the top right corner.

See an example of Task Preview below.

To switch among previews for different task records, use side arrow buttons or bottom navigation controls.

Save

Note that a task is not created until the first saving. When you finish with task design, click on the Save button.

tip

While designing a new task, press Save after each new element is added. Mind that tasks are NOT saved automatically.

Save as Operation

To make the current task re-usable, you can create an Operation out of this task by clicking on the Save as Operation button. For more details, refer to Task Operation.

When you finished the task design, click on the Next button in the bottom right corner or select the Run tab.