Learn Javascript Lesson 7a : Integrated Count Down

As a follow up to the excellent javascript ‘Count Down’ example, I wanted to show you how to extend this functionality such that the ‘Count down’ is fully automated and doesn’t require either:

  • Specific references to the the variable name, and
  • Specific reference to the maximum number of characters declared in the variable

Assuming you have the Lesson 7 example working, these are the general next steps required:

  1. Move the mrData tags and HTML code specific to the ‘Count down’ functionality into a Question sub-template, along with additional mrData tags for automation
  2. Move the core javascript code into an external file (.js) and reference that external file from the new Question sub-template
  3. Modify the metadata file so that the variable in question references the new Question sub-template

Let’s take a look at each step in turn

Creating a Question sub Template

A  sub-template is a HTML file that is ‘inserted’ into the main HTML template when requested by the survey. In our case we will be creating a Question sub template that is unique code for that question only. Other examples of sub-templates include Error, Banners, Grid and Navigation.

The beauty of sub-templates is that they enable you to maintain a single or top level design template and then just modify specific content when necessary.

The first rule of a sub-template is that is must contain opening and closing tag as the first and last lines in the file respectively.

Step 1. Create a new text file and insert the following code:


Step 2. Add the following content within the mrSubTemplate tags:-






Characters Remaining

Let’s break down some of the code:

  • The first four lines are identical to the Lesson 7 syntax
  • The code within the tags accomplish two things. The first line contains the mrData element tag
    .

    This tag will be replaced by the Maximum value of the variable when the HTML page is rendered – in our example this happens to be 100. So, the initial value of our characters box will be set to this value. The second line loads the function ‘Setup’ before the page is rendered and passes in two parameters. The first –

    document.mrForm.

    – is the text variable object, and the second the maximum value of the variable (as described earlier)

Save the file as a html file – in our case we’ll call this ‘count_SubTemplate.html’ – in the same directory as the metadata.

Creating an external javascript file

Our external javascript file will contain the referenced setup function and additional functions. To create this file with the appropriate code, follow the steps below:

Step 1. Create a new text file and enter in the following syntax:

function Setup(Q,max) {

if(Q.value != null) {Q.onkeypress = function() { return MaxLength(this, max-1);}}

if(Q.value != null) {Q.onkeyup = function() { len_display(Q,max,'long_len');}}

                      } 

function MaxLength(Object, MaxLen) {   

return (Object.value.length <=(MaxLen));

                                   }

function len_display(Object,MaxLen,element) {  

 var len_remain = MaxLen-Object.value.length; 

 if(len_remain >=0){ document.getElementById(element).value=len_remain; }
}

Let’s break down this code:

  • The bulk of the functionality has already been covered in Lesson 7, however the modifications for this lesson are the two additional parameters that are being passed into the function – namely Q,max. If you remember from the javascript code in the sub-template the first parameter is our survey variable object (referenced in the function as Q) and the second parameter the maximum value of this survey variable (referenced in the function as max)
  • The only other modifications necessary were to replace the specific variable name and maximum values from Lesson 7 with our dynamic parameters Q and max

Save this file with a .js extension – in our case this will be called ‘count.js’ – in the same directory as the metadata.

To reference this file in the sub template, follow the steps below:

  • Re-open the sub-template file
  • Move to the first line after the tag and enter the following syntax:           
     // Script
  • Save the sub-template file – in the same directory as the metadata

Note: The mrRef tag is a means of referencing external files in your survey template i.e. images, movies and in this case javascript.

Modifying the metadata

The last stage is to modify the metadata such that the variable that requires the Count Down javascript functionality points to our newly created sub-template.

You can create the reference in either the routing or in the metadata.

Routing option

add the line

.QuestionTemplate = ".html"

BEFORE the variable is asked, where is the variable name and the name of the sub-template. In our example this would be: 

Q1.QuestionTemplate = "Count_SubTemplate.html"

OR

Metadata option

modify the text variable to include the style reference

templates(Question=".html")

BEFORE data type i.e. text, so in our example this would be:

Q1 "Comments" templates( Question = "Count_SubTemplate.html" )    text [1..100];

Note: It is assumed that the variable used is asked in the routing section

Debug the survey and the javascript functionality will adjust for variable name and maximum text restriction.

Remember that with this type of solution you can:-

  1. Use any main HTML template to drive the style or ‘look and feel’ of the survey
  2. You can use this on any text variable with any text restriction, merely by pointing to the question sub-template

For anyone interested I hope to use this finished example as part of the Wizards training course at the SPSS Directions Conference 2009 – for more details see the ‘ PASW Data Collection Wizard Creation and Deployment’  link in the ‘Post – Conference Courses’ section of the following link: http://www.spss.com/spssdirections/na/training.htm

3 thoughts on “Learn Javascript Lesson 7a : Integrated Count Down”

  1. A quick update to this based on some changes I made recently:-

    1) The Countdown input box, should probably include the disabled property, so that the user cannot modify it i.e.

    <input type="text" id="long_len" value="0" disabled="disabled" style="width: 30px" />

    2) When looking to integrate this with a wizard solution, I had to change the Window.onload method to deal with an IE issue to:-

    window.onload = function() {Setup(document.mrForm.<mrData QuestionElement="Parameter" Type="FullQuestionName"/>,<mrData QuestionElement="Parameter" Type="Max"/>);};
  2. A quick up date for anyone using the count down, should a user have the option to come back to the page, you need to change the question template code to adjust for the current length of the text entry:

    document.getElementById(“myCounter”).innerHTML = – document.mrForm..value.length

    note I use a Span not an input box to display the count down so i use innerHTML not value to set the countdown

Leave a Comment

%d bloggers like this: