Creating Drag and Drop Questions in SurveyWriter
SurveyWriter provides the ability to create visually dynamic drag and drop questions in which the respondent makes selections by dragging the desired answer onto a rating scale or numeric ranking. SurveyWriter's interactive drag and drop feature is available in the following questions:
In SurveyWriter's drag and drop interface, the drop objects correspond to the rows in a conventional row question. The drop targets correspond to the columns. This scenario is reversed for column questions. In a ranking question, when a respondent drags a drop object onto target object one, it's similar to manually typing a 1 in a ranking box in a specific row. In a row question, when a respondent drags a drop object onto a target object, it's similar to clicking the option in a specific row. The data appears in the data set the same way.
The basic sequence involved in a drag-and-drop task for the respondent includes:
This
document is divided into the following sections:
Before
You Begin
Create Drag and Drop Questions
Moving Objects Around in the Drag
and Drop Interface
Create Drag and Drop Questions
To create a drag and drop question, use the following steps:
For a row or column question, set up your rows and columns as usual.
For a numeric or ranking question, set up your rows as usual. Set up one column using :*: as the delimiter between your column labels. All column labels must appear on the same line:
The Drag and Drop window consists of the following areas:
Labels that you enter in the row of a numeric, row, or ranking question appear in this list. Labels entered in the columns of a column question appear as well. To set the parameters for individual objects, left click on a row. The settings for that object appear, and you can change them as needed. After you make the changes, click on the setting label to have it take effect. For example, to change the width, enter a new number for the width and click Width: to have it take effect.
Note: These are the settings for
individual drop objects only. You will typically set defaults
for all objects using the Click to set defaults button in
the Drop Object pane discussed below. See Drop Object
for a discussion of the available settings.
To set the parameters for all objects, change the value entered for a parameter under the heading Drop Object. After you make the changes, click on the setting label, Width:, for example, to have the new setting take effect.
The settings available include:
Drop Object Settings | (Follows CSS standards) |
Width: | Width of your text or image object in pixels, e.g., 150px. If your object is an image, make sure that these settings correspond to actual image width. |
Height: | Height of your text or image object in pixels, e.g., 50px. If your object is an image, make sure that these settings correspond to actual image height. |
First Position Left: | Number of pixels away from the left-side of the page, e.g., 2px. The default parameter moves all images. |
Position Top: | Number of pixels from the top of the page, e.g., 10px. |
Border: | Border format including color, thickness, and line style, e.g., #bdb76b 2px solid. Set border to 0 for no border. |
BG Color: | Background color of a text object, e.g., darkkhaki. If needed, click Survey Options > Fonts for the colors available. Hexadecimal color values are acceptable. #ffffff is similar to entering white. |
Font Color: | Font color of a text object, e.g., black. |
Font: | Font style selected for text object, e.g., 10pt arial. If needed, click Survey Options > Fonts for the styles available. |
Label Left: | Labels are positioned for the object based on their width, height, and alignment. Label left moves the label away from the starting point to the right based on the number of pixels entered here. Use negative numbers to move left. |
Label Top: | Labels are aligned middle initially. Label top moves the label up from its starting point based on the number of pixels entered here. Use negative numbers to move down. |
Label Align: | Sets label alignment: left, right, center. |
DD objects per row: | Number of drop objects in each row of the drag and drop question. For example, if you have 10 objects, and set your DD objects per row to 5, SurveyWriter places 2 rows of 5 objects. |
Labels that you enter in the column of a numeric, row, or ranking question appear in this list. Labels entered in the rows of a column question appear as well. To set the parameters for individual objects, left click on a row. The settings for that object appear, and you can change them as needed. After you make the changes, click on the setting label to have it take effect. For example, to change the width, enter a new number for the width and click Width: to have it take effect. Two parameters, value and n drops, appear only in the individual object settings.
Note: These are the settings for individual target objects only. You will typically set defaults for all objects using the Click to set defaults button in the Target Object pane discussed below. See Target Object for a discussion of the available settings.
To set the parameters for all Target objects, change the value entered for a parameter under the heading Target Object. After you make the changes, click on the setting label, Width:, for example, to have the new setting take effect.
The settings available include:
Target Object Settings | (Follows CSS standards) |
Width: | Width of your text or image object in pixels, e.g., 150px. If your object is an image, make sure that these settings correspond to actual image width. |
Height: | Height of your text or image object in pixels, e.g., 50px. If your object is an image, make sure that these settings correspond to actual image height. |
First Position Left: | Number of pixels away from the left-side of the page, e.g., 2px. The default parameter moves all images. |
Position Top: | Number of pixels from the top of the page, e.g., 10px. |
Border: | Border thickness, e.g., 2px. Set border to 0 for no border. |
BG Color: | Background color of a text object, e.g., darkkhaki. If needed, click Survey Options > Fonts for the colors available. Hexadecimal color values are acceptable. #ffffff is similar to entering white. |
Font Color: | Font color of a text object, e.g., black. |
Font: | Font style selected for text object, e.g., 10pt arial. If needed, click Survey Options > Fonts for the styles available. |
Label Left: | Labels for the object are positioned for the object based on their width, height, and alignment. Label left moves the label away from the starting point to the right based on the number of pixels entered here. Negative numbers are permitted. |
Label Top: | Labels are aligned middle initially. Label top moves the label up from its starting point based on the number of pixels entered here. Negative numbers are permitted. |
Value: | This parameter can be changed for individual target objects only. The value is the answer code you entered for this object through Set Answer Options > Build Answer. |
n Drops: | This parameter can be changed for individual target objects only. This number sets the number of times a respondent may drag and object onto this target. For example, if you only want the respondent to drag an object once onto this target, set the n Drops parameters to 1. |
Label Align: | Sets label alignment: left, right, center. |
Target per row: | Number of target objects in each row of the drag and drop question. For example, if you have 10 objects, and set your Target per row to 5, SurveyWriter places 2 rows of 5 objects. |
Drop Left Offset: | Number of pixels to offset the drop objects when a respondent places them on a target object. Drop left moves the object away right from its starting point based on the number of pixels entered here. Negative numbers are permitted. |
Drop Top Offset: | Number of pixels to offset the drop objects when a respondent places them on a target object. Drop top moves the object down from its starting point based on the number of pixels entered here. Negative numbers are permitted. |
Visibility Time: | Length of time in seconds that you see a drop object after you place it on a target object. Negative 1, -1, keeps the object visible. If you set the visibility to 3, SurveyWriter hides the drop object after 3 seconds. All information is recorded as usual regardless of the visibility time. |
Error Timeout: | Length of time in seconds that you see a system message if a respondent makes an error. For example, if you set the maximum number of answers to 3 and the respondent drags 4 objects onto the targets, SurveyWriter displays an error message. This message is shown for the length of time entered for the Error Timeout. |
Opacity: | Changes the opacity of an image after the respondent clicks it. Settings range from 0 to 100, with 100 indicating no effect on the image and 0 showing 100% through the image to the background color. |
Moving Objects in the Drag and Drop Interface
Initially all objects are aligned from left to right. Click and drag these items to position them as desired. Both drop and target objects are labeled as such and numbered according to how the row and column labels were set up initially. You can also set the drop and target objects in orderly rows using the DD objects per row and Target per row parameters.