Learn JavaScript Lesson 5 : Categorical OnCLick()

This is the fith article in our series on JavaScript. In this article we will explore how to get some JavaScript to run when we click on a response to a single or multiple response question.

The first thing we need to do is to design our question and template file. So create an MDD file in Professional and add the following code.

Metadata(en-AU, Question, label)
Q1 "Select an item" categorical [1]
    {
A,B,C,D,E,F,G
    };
End Metadata

and then the routing

Routing(Web)
Q1.LayoutTemplate = "Click.html"
Q1.Ask()

Then create an HTML file and add the following

<html>
<head><title>Click</title></head>
  <mrPage IncludeElementIDs = "true" ></mrPage>
<body>
<mrData />
<mrNavBar />
</body>
</html>

After you have run and checked it all works we are ready to proceed to the next step. View the source of your page , as we did in lesson 4 of this series and make sure you know the ID of the categorical question responses. You will notice that we have the following ID’s to use. “_Q0_C0,_Q0_C1,_Q0_C2,_Q0_C3,_Q0_C4,_Q0_C5,_Q0_C6” Now that we have these we need to add a function to our page and get it to be called when the page loads. add the following code to your template,

<script type="text/javascript">
// <![CDATA[
function CLICK()   {   alert('Loaded');   }
// ]]>
</script>

Save and run the page, what we expect to happen is an alert box popup on your screen to show you that the function has been run when your html page was loaded. If this does not happen then you have something wrong in the JavaScript. As mentioned before when we use templates in Data Collection Server all out questions get added to a form so the next bit of code that we should add is to check that the form exists. To do this , modify your CLICK code to look like this.

<script type="text/javascript">
// <![CDATA[
function CLICK()   {    
if(document.mrForm != null)    {    alert('Loaded');    } 
  }
// ]]>
</script>

Now, if we have typed it correctly we should only get the alert page if the template holds a form called mrForm in it. To test this you can just double click on the template in windows explorer and when you browser fires up and you have gotten past any active document warning messages you will not see an alert window. If however you run the template with your survey then you will see the alert. Now all we need to do is to connect to the responses themselves. To do this we can use the following code to attach a function to the onclick of each response.

document.mrForm.[Item ID].onclick = function() { "DO SOMETHING" }

So this code says, in the form mrForm look for the item with the following ID and add a function to the onclick event of the item. Our code in our function would look like so,

 
<script type="text/javascript">
// <![CDATA[
function CLICK()   {    if(document.mrForm != null)    {    
document.mrForm._Q0_C0.onclick = function() {alert('A');} 
document.mrForm._Q0_C1.onclick = function() {alert('B');}  
document.mrForm._Q0_C2.onclick = function() {alert('C');}  
document.mrForm._Q0_C3.onclick = function() {alert('D');}  
document.mrForm._Q0_C4.onclick = function() {alert('E');}   
document.mrForm._Q0_C5.onclick = function() {alert('F');}   
document.mrForm._Q0_C6.onclick = function() {alert('G');}  
}   }
// ]]></script>

Once entered correctly into our template we can run the survey and see that every time we click on a response we see an alert window pop up telling us with response we clicked on. And there you have it, you now know how to attach functions to your responses. In the next article we will show you how to you can take this a little further.

7 thoughts on “Learn JavaScript Lesson 5 : Categorical OnCLick()”

  1. How to store order of click in multiple response and populate another question with same categorical list in the same order of selection in previous question.
    i.e
    Q1″Question 1″categorical[1..]{ A,B,C,D,E}; Q2″ second question”categorical[1..]{ A,B,C,D,E};
    If i select in order C,E A then Q2.categories.filter=Q1, but must appear as C,E,A order

    • what you need to do is have a hidden text box of the screen that records when a response is clicked. I will try and do a post for you tomorrow. Watch this space

      Doug

Leave a Comment

%d bloggers like this: