Scroll

Statement

Statement

Follow
Summary This article give you access to the Statement adc 2.0 Javascript control. You also got access to a live example, qex file example and details of the parameters available for this control.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords adc; adc2; javascript; jquery; control; design; askiadesign


  • To access to the live survey, click on the picture above.
  • To download the qex file, click here
  • To download the ADC control, click here
  • To download the previous version (1.0.14) of this ADC control, click here
  • Version of the adc: 1.0.15

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 Color Primary Colour  
Response Color Secondary Colour  
Use a color range Boolean 'No, Yes'
Response Color Range Primary Colour  
Response Color Range Secondary Colour  
Response Gradient Direction Boolean 'Left to Right, Top to Bottom'
Response Font Color Colour  
Response Border Color 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 Color Boolean 'No, Yes'
Response Hover Color Primary Colour  
Response Hover Color Secondary Colour  
Show Response Hover Font Color Boolean 'No, Yes'
Response Hover Font Color Colour  
Show Response Hover Border Boolean 'No, Yes'
Response Hover Border Color 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 Color Primary Colour  
Selected Response Color Secondary Colour  
Selected Response Font Color Colour  
Response Border Color 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 Booean 'Solid, Double, Dashed, Dotted, None'
Non-Scaled Response Drop Shadow Booean ''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 color 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>
Have more questions? Submit a request

Comments