Using a Status Bar

A status bar may be added to all webSurvent or webCATI screens to show a respondent or interviewer how far along they are within the survey.  By default, Survent will provide a percent based on the question number the respondent or interviewer is on.  The percent displayed is controlled within the spec.

The following syntax is used to update the value on the status bar:

{!STATUS_BAR <qq/##/val=\|statusbr|> }

Status Bar Options:

  • qq – This is the default.  QQ is calculated by the current question / total # of questions and will display the percentage that the respondent or interviewer has advanced through the survey.
  • “##” – ## sets the status bar value to a specified number.  The value must be between 1-100.
  • val=\|qlabel| – Assigns a value calculated within the spec using an EXPRESSION type question.  The value must be between 1-100 and this is the best practice method if there are many rotations within the survey.

The program will update the percentage each time it sees a new STATUS_BAR “##”, “qq”, or “val=” option.

You would use the “val=\|statusbr|” to specifically set a value, if, for instance, you were in the middle of a rotation block and needed to calculate how far along you had advanced.

You can add the following to calculate the “val”:

''Set an expression to zero and put this in front of each grid or question in the rotate
{ STATUSBR: .3
!EXPRESSION,,0 }

''Increase the status bar expression by the percentage that you want for a grid or question
{ [STATUSBR] 
!EXPRESSION,,STATUSBR + 5 } 

''Pass the value to the Javascript
{!STATUSBAR val=\|STATUSBR| }

User_Setting_JQuery.JS File

The controls for the status bar are located in your user_settings_jquery.js.

A few options are available:

To enable the status bar and ticker:

var user_use_statusbar = true; //true or false
var user_use_statusticker = true; //true or false

The default images/colors of the status bar are light orange and dark orange. The status bar uses one-pixel images – you can choose from several files in the /Pixels directory, or create your own to suit your color scheme.

These can be customized by changing the following paths:

var user_statusbar_done_image = "/cfmcweb/images/Pixels/ff9966.gif";
var user_statusbar_left_image = "/cfmcweb/images/Pixels/cc6666.gif";

To control the width, height, text and alignment of the statbar:

var user_statusbar_text = "<FONT SIZE='-1' color='black'><i> Progress </i></FONT>";
var user_statusbar_width = 150;
var user_statusbar_align = "right";
var user_statusbar_thickness = 10;

The variables listed above are the default settings, and will be applied if you do not change them or do not call user_settings_jquery.js in your pagetop.tmpl. You can also use style sheet elements within your .tmpl files, to further customize the status bar table.