Statement
- To access to the live survey, click on the picture above.
- To download the QEX file (inside the example directory), click here.
- Version of the ADC: 2.0.15.
This ADC presents responses in neat rectangles that are easy for respondents to click on (they can click anywhere on the rectangle). Fully mobile responsive.
This control is compatible with a single and multiple question (response block).
| Parameters | Type | Comments and/or possible value |
| General | ||
| Font Size | Number | In Pixels |
| Control Width | Number | In Percentage |
| Max Width | Number | In Pixels |
| Control Alignment | Boolean | 'Left, Center, Right' |
| Columns | Number | |
| Text Alignment | Boolean | 'Left, Center, Right' |
| Image Alignment | Boolean | 'Left, Center, Right' |
| Border Radius | Boolean | '0, 2, 5, 10, 15, 20, 25, 30' |
| Animate Responses | Boolean | 'No, Yes' |
| Animation Speed | Boolean | 'Very Fast, Fast, Medium, Slow' |
| Auto Forward | Boolean | 'No, Yes' |
| Use a selection list | Boolean | 'No, Yes' |
| Responses | ||
| Response Text Padding | String | In Pixels |
| Response Margin | Number | in Pixels |
| Response Text Line Height | Number | In Percentage |
| Response Height | Number | |
| Response Width | Number | |
| Response Colour Primary | Colour | |
| Response Colour Secondary | Colour | |
| Use a colour range | Boolean | 'No, Yes' |
| Response Colour Range Primary | Colour | |
| Response Colour Range Secondary | Colour | |
| Response Gradient Direction | Boolean | 'Left to Right, Top to Bottom' |
| Response Font Colour | Colour | |
| Response Border Colour | Colour | |
| Response Border Thickness | Number | 'None, 1px, 2px, 3px, 4px, 5px' |
| Response Border Style | Boolean | 'None, Solid, Dashed, Dotted, Double' |
| Response Drop Shadow | Boolean | 'On, Off' |
| Show Response Hover Colour | Boolean | 'No, Yes' |
| Response Hover Colour Primary | Colour | |
| Response Hover Colour Secondary | Colour | |
| Show Response Hover Font Colour | Boolean | 'No, Yes' |
| Response Hover Font Colour | Colour | |
| Show Response Hover Border | Boolean | 'No, Yes' |
| Response Hover Border Colour | Colour | |
| Response Hover Border Thickness | Number | 'None, 1px, 2px, 3px, 4px, 5px' |
| Response Hover Border Style | Boolean | 'None, Solid, Dashed, Dotted, Double' |
| Response Hover Drop Shadow | Boolean | 'On, Off' |
| Selected Response Colour Primary | Colour | |
| Selected Response Colour Secondary | Colour | |
| Selected Response Font Colour | Colour | |
| Response Border Colour | Colour | |
| Response Border Thickness | Number | 'None, 1px, 2px, 3px, 4px, 5px' |
| Response Border Style | Boolean | 'None, Solid, Dashed, Dotted, Double' |
| Selected Response Drop Shadow | Boolean | 'On, Off' |
| Non-Scaled Responses | ||
| Number of Non-Scaled Responses | Number | |
| Non-Scaled Response Colour Primary | Colour | |
| Non-Scaled Response Colour Secondary | Colour | |
| Non-Scaled Response Font Colour | Colour | |
| Non-Scaled Response Border Colour | Colour | |
| Non-Scaled Response Border Thickness | Number | 'None, 1px, 2px, 3px, 4px, 5px' |
| Non-Scaled Response Border Style | Boolean | 'Solid, Double, Dashed, Dotted, None' |
| Non-Scaled Response Drop Shadow | Boolean | ''On, Off" |
| Selected Non-Scaled Response Colour Primary | Colour | |
| Selected Non-Scaled Response Colour Secondary | Colour | |
| Selected Non-Scaled Response Font Colour | Colour | |
| Selected Non-Scaled Response Border Colour | Colour | |
| Selected Non-Scaled Response Border Thickness | Number | 'None, 1px, 2px, 3px, 4px, 5px' |
| Selected Non-Scaled Response Border Style | Boolean | 'Solid, Double, Dashed, Dotted, None' |
| Selected Non-Scaled Response Drop Shadow | Boolean | ''On, Off" |
| Images | ||
| Force Image Width | Number | In Pixels |
| Forced Image Height | Number | In Pixels |
| Force Image Size | Boolean | 'No, Force Width, Force Height, Force Both' |
Note:
If you want to change the colour of each response manually, you can use some jQuery code.
If you have a question with three responses:
Add a label on your screen at the bottom of the page and add this script.
You will need to change the #adc_1 by the id of your control and the hexadecimal values for each responses. To find the good id, you can find it in the source code of the page.
<script>
$(document).ready(function() {
// First response
$( "#adc_1 .responseItem:nth-child(1)" ).css("background","#FF0000");
$( "#adc_1 .responseItem:nth-child(1)" ).css("filter","progid:DXImageTransform.Microsoft.gradient( startColorstr=#FF0000, endColorstr=#FF0000,GradientType=0 )");
// Second response
$( "#adc_1 .responseItem:nth-child(2)" ).css("background","#00FF00");
$( "#adc_1 .responseItem:nth-child(2)" ).css("filter","progid:DXImageTransform.Microsoft.gradient( startColorstr=#00FF00, endColorstr=#00FF00,GradientType=0 )");
// Third response
$( "#adc_1 .responseItem:nth-child(3)" ).css("background","#0000FF");
$( "#adc_1 .responseItem:nth-child(3)" ).css("filter","progid:DXImageTransform.Microsoft.gradient( startColorstr=#0000FF, endColorstr=#0000FF,GradientType=0 )");
});
</script>