Warning: This is an advanced feature that if not executed properly can result in errors in design, data collection, and analysis. It requires careful, manual checking of Free Format HTML syntax.
Introduction
Some researchers may encounter situations in which they need to customize the look and layout of their MaxDiff or MPC exercises beyond that which is provided by the MaxDiff templates. The instructions provided here will help you customize the look of your MaxDiff exercise.
To implement your own question format, you'll use the Free Format question type. You'll insert a Free Format question directly above each standard MaxDiff question. Within these Free Format questions, you'll be able to display the items to be asked in each MaxDiff question (according to the experimental plan) in most any way you desire. Then, you'll use a special programming instruction to suppress the standard MaxDiff questions so they do not display.
Designing/Programming the Questionnaire
1.Create a MaxDiff exercise.
Create a MaxDiff exercise the standard way by entering items, generating a design, and adding the MaxDiff questions within the questionnaire.
2.Create a Free Format question.
To create a custom MaxDiff question add a new Free Format question above your first MaxDiff question (on the same page). Name the question something similar to "FFMD1". The "1" at the end of the question ties this Free Format question to the first MaxDiff question, for example "MaxDiffExerciseName_1".
NOTE: We suggest creating just one Free Format question now. Once you get it working you can then copy and paste the Free Format question multiple times so that you eventually will have a Free Format question for each MaxDiff question.
To create the custom HTML we suggest you start from a standard MaxDiff question and copy the relevant source HTML (using the View Source function in your browser) for that layout as produced by Lighthouse Studio (this is a good starting point, but you will need to remove some things, such as hidden fields calculating pagetimes, etc. in order for it to work properly).
Here is some example HTML that you can use as a starting point:
<table class="inner_table" width="100%">
<tr>
<td class="best_header" width="15%">
Best
</td>
<td class="items_header" width="70%">
</td>
<td class="worst_header" width="15%">
Worst
</td>
</tr>
<tr>
<td class="best_input_cell alt_color1 input_cell clickable">
Best radio button here
</td>
<td class="item_text_cell alt_color1" width="70%">
<div class="item_text">Item 1 here</div>
</td>
<td class="worst_input_cell alt_color1 input_cell clickable">
Worst radio button here
</td>
</tr>
<tr>
<td class="best_input_cell alt_color2 input_cell clickable">
Best radio button here
</td>
<td class="item_text_cell alt_color2" width="70%">
<div class="item_text">Item 2 here</div>
</td>
<td class="worst_input_cell alt_color2 input_cell clickable">
Worst radio button here
</td>
</tr>
</table>
3.Define Free Format Variables
Create Free Format variables for the "best" and "worst" responses. Variables for "best" must end with "_b". Variables for "worst" must end with "_w". For example add the following "radio" variables for the first Free Format question "FFMD1":
FFMD1_b
FFMD1_w
4.Insert Sawtooth Script.
To display the item text (the text or graphic you specified) for each item in the MaxDiff exercise you will need to use Sawtooth Script. Use the following function to return the text for each item in the MaxDiff design:
[%MaxDiffDesignLabel(ExerciseName_Question#, Position#) %]
Next to each item you will need to display a radio button for best and one for worst. The values for these radio buttons must match the item displayed. To do that use the following Sawtooth Script:
[%MaxDiffDesignValue(ExerciseName_Question#, Position#)%]
See the example below.
<tr>
<td class="best_input_cell alt_color1 input_cell clickable">
[%RadioSelect(FFMD1_b, MaxDiffDesignValue(MaxDiff_1, 1))%]
</td>
<td class="item_text_cell alt_color1" width="70%">
<div class="item_text">
[%MaxDiffDesignLabel(MaxDiff_1, 1) %]
</div>
</td>
<td class="worst_input_cell alt_color1 input_cell clickable">
[%RadioSelect(FFMD1_w, MaxDiffDesignValue(MaxDiff_1, 1))%]
</td>
</tr>
<tr>
<td class="best_input_cell alt_color2 input_cell clickable">
[%RadioSelect(FFMD1_b, MaxDiffDesignValue(MaxDiff_1, 2))%]
</td>
<td class="item_text_cell alt_color2" width="70%">
<div class="item_text">
[%MaxDiffDesignLabel(MaxDiff_1, 2) %]
</div>
</td>
<td class="worst_input_cell alt_color2 input_cell clickable">
[%RadioSelect(FFMD1_w, MaxDiffDesignValue(MaxDiff_1, 2))%]
</td>
</tr>
The Sawtooth Script RadioSelect is used in the example above to create a radio button. If graphical radio buttons are turned on then graphical radio buttons will be displayed. "FFMD1" above refers to the current Free Format question. "MaxDiff_1" above refers to the first regular MaxDiff question.
After you are finished test your work to ensure that the items in your Free Format question are coming up correctly. Test the survey locally (Test | Test Survey). You should be able to compare the items being shown with the regular MaxDiff question on the same page. The items for the standard MaxDiff question and the items for the custom MaxDiff question should match.
5.Anchored Scaling Dual-Response (Optional)
First, make sure you have specified that you wish to use Anchored Scaling in the regular MaxDiff question. Add another "radio" variable within your Free Format question that ends with "_anchor" (FFMD1_anchor). Make sure to use the value 1 for "all", 2 for "some", and 3 for "none". Here is an example of the HTML you would include:
<table>
<tr class="clickable">
<td class="input_cell">
[%RadioSelect(FFMD1_anchor, 1)%]
</td>
<td class="option_cell">
<div class="options">
<label for="FFMD1_anchor_1">All</label>
</div>
</td>
</tr>
<tr class="clickable">
<td class="input_cell">
[%RadioSelect(FFMD1_anchor, 2)%]
</td>
<td class="option_cell">
<div class="options">
<label for="FFMD1_anchor_2">Some</label>
</div>
</td>
</tr>
<tr class="clickable">
<td class="input_cell">
[%RadioSelect(FFMD1_anchor, 3)%]
</td>
<td class="option_cell">
<div class="options">
<label for="FFMD1_anchor_3">None</label>
</div>
</td>
</tr>
</table>
6.Suppress the regular MaxDiff questions.
Next you need to hide the regular MaxDiff questions. You don't actually delete them from the questionnaire. We have created a fast way to toggle them to a suppressed mode. To suppress the regular MaxDiff questions, add the following HTML comment to the Header 1 field of your MaxDiff questions:
<!--
SSI_Comment: CUSTOM_MAXDIFF_DESIGN
Free_Format_Base_Name: FFMD
Verification: ON
-->
Including the above text in Header 1 of a regular MaxDiff question will cause it not to display on the page. It will also cause your Free Format MaxDiff question to be verified the same way as the regular MaxDiff questions (require answers, item cannot be selected as best and worst etc.). Finally it will copy the respondent answers given to your Free Format question to the regular MaxDiff database variables. This allows you to perform analysis as if the regular MaxDiff questions were seen.
7.Test saving data.
Test run the survey again, this time making sure that your answers are being recorded properly both in the Free Format question and in the regular MaxDiff question. You need to verify the final data record to ensure that the answers correspond to what you selected.
8.Copy and Paste.
Once you are confident that your first Free Format custom MaxDiff question is displaying correctly, verifying correctly, and saving correctly, copy and paste the question multiple times so that there is one per regular MaxDiff question. Make sure to change the HTML references from "FFMD1" to "FFMD2" and from "MaxDiff_1" to "MaxDiff_2", etc. Finally test again verifying that all of the questions are working properly. You might choose to turn the MaxDiff questions back on to verify that all of your custom questions are displaying correctly as compared to the actual tasks (see step #4 above).
We strongly encourage you to test your custom MaxDiff questionnaire thoroughly all the way through to analysis.