Register

Custom Branching in ViewletBuilder7

General Tips & Tricks
Site Admin
User avatar
Posts: 223
Joined: Fri May 26, 2006 1:51 pm
Location: Rochester, NY

Custom Branching in ViewletBuilder7

Postby Andrew » Thu Feb 16, 2012 3:55 pm

This article describes how to add custom branching in ViewletBuilder7 and ViewletQuiz4 using JavaScript. The Viewlet's flash file sits in a web page. The Viewlet can communicate with the JavaScript interperter in the browser and vice versa. This allows a user to intercept values from the Viewlet in JavaScript process them and then callback into the Viewlet. So for example you could have the JavaScript process answered questions and then based on the user's responses go to a different slide within the Viewlet. This is what we refer to as Custom Branching.

HTML Frame Update

The first step is to add the method getCurrentResponseArray() to your HTML Frame. There is a preconfigured one named "CustomBranching.qframe" attached to the Zip file in this post. But you can also do it manually as follows.

Select the HMTL Frame section in Project Properties.
Modify Edit the file named “$VIEWLET_NAME$_viewlet_swf.html” as shown below.

HtmlFrame.png


Paste the following code just above the </head> tag

Code: Select all
<script language="javascript" type="text/javascript">
<!--
function getCurrentResponseArray() {
var flashObject = eval("window.document.$VIEWLET_NAME$");
var response = flashObject.viewletGetVariable("CURRENT_RESPONSE_VALUE");
var responses = response.replace(/\{/g,"").split("}");
var array = new Array();
for(var i = 0; i < responses.length-1; i++) {
var d = responses[i].split(";");
array.push({"type":d[0], "id":d[1], "answer":d[2], "correct":d[3]});
}
return array;
}
-->
</script>


The getCurrentResponseArray() function fetches the details of the currently answered question from the Viewlet and formats it into an easy to use array. Each entry in the array corresponds to one of the user's answer. So for example, likert and multiple choice questions would have multiple entries in this array. Short answers would have a single entry.

Each answer is an object with 4 values.

    id - the unique id of choice
    type - The type of choice, for example "radiobutton","checkbox", “rating”, “textfield” etc.
    answer - The users answer, for fill in the blanks this would be text they provided.
    correct - For quizzes this value would represent if this choice was answered correctly or not.

You can use this function as follows:

Code: Select all
var responses = getCurrentResponseArray();
responses[0].id // The id of the radio button selected in row 1
responses[1].id // The id of the radio button selected in row 2


So for example if your question looked like this:

IDs.png


The answers could be checked with the following code.

Code: Select all
if(responses[0].id == 106) {
   // do something
}

if(responses[1].id == 114) {
  // do something
}


Based on these responses you can branch to different slides.

Get Choice IDs

Each element in a quiz is assigned a unique ID. In the previous section they were displayed in RED. When you write your JavaScript you need to know the ids of the choices so that you can determine what the user selected. To find out the ID's we've created a macro named OutputQuestionIds.groovy which will display them to the ViewletBuilder7 or ViewletQuiz4 Output Tab. This macro is included in ViewletBuilder 7.2.0, its also included with the Zip file in this post.

To run the macro select “Load Macro” from the from the ViewletBuilder7 “Edit” menu. This can be used for any Question type. For a Likert it will look something like this.

Likert - Start Time: 0 - Survey Question - Reanswerable: false
Radio Button:
"Proficiency" - ("Strongly Disagree" - ID: 105) - ("Disagree" - ID: 106) - ("Undecided" - ID: 107) - ("Agree" - ID: 108) - ("Strongly Agree" - ID: 109)
"Politness" - ("Strongly Disagree" - ID: 111) - ("Disagree" - ID: 112) - ("Undecided" - ID: 113) - ("Agree" - ID: 114) - ("Strongly Agree" - ID: 115)

This allows you to quickly get the ID for each possible selection in the Likert.

Add Branching Logic to ViewletBuilder

The final step is to add a JavaScript action to the slide from which you want to branch. Lets suppose that if the user answered “Disagree” or “Strongly Disagree” for either “Proficiency” or “Politness” you wanted to take them to a slide where they could provide more details about why they are unhappy. You should replace the “Play Viewlet” action in the “OnComplete” event with a “JavaScript” action as follows.

JavaScriptAction.PNG


Since this JavaScript action is in the “OnComplete” event, it will only be run when the user completes the survey question. Be sure that you place the action here, rather than in the submit button's OnClick event.

Here's the JavaScript you should add (comments are not required)

Code: Select all
// Get a reference to the Viewlet
var flashObject = eval("window.document." + $VIEWLET_NAME$);

// Get the users response. This call requires that the
// getCurrentResponseArray() method has been added to the HTMLFrame
// Each item in the array is an object with the following 4 attributes:
// id, type, answer, correct
var responses = getCurrentResponseArray();
var proficiency = responses[0];
var politness = responses[1];

// If they disagree or strongly disagree go to slide 2 to get
// more details, else go to slide 3
if(proficiency.id == 105 || proficiency.id == 106 ||
 politness.id == 111 || politness.id == 112)
    flashObject.viewletGotoSlide(2);
else
    flashObject.viewletGotoSlide(3);


Besides viewletGotoSlide there are number functions you can call which is documented in our FAQ's.
http://www.qarbon.com/faqs/viewletbuild ... tionscript

Sample projects named "CustomBranchingProject.qvp" and "CustomBranchingProject.vie" are included in the attached zip file for you to look at in ViewletBuilder and ViewletQuiz.

More Advanced Example
You can also do more complicated branching using these techniques. For example suppose you wanted to branch based on the results from 2 slides.

So for example suppose Slide 1 has the question True / False question: "Are you over the age 25"
And Slide 2 had the the True / False question: "Are you Male or Female?"

After the 2nd question was answered you wanted to branch to one of 4 slides.

Slide 3: You are a young woman.
Slide 4: You are a mature woman.
Slide 5: You are a young man.
Slide 6: You are a mature man.

You can use a JavaScript action on Slide 1 to store the answer to a global variable
And then check that variable in a JavaScript action on Slide 2.

The JavaScript on slide 1 would look like this:

Code: Select all
// Store answerAge to a global variable
answerAge = getCurrentResponseArray();


All this does is store the answer into a global variable "answerAge" its global because it isn't preceded with the "var" keyword.

The JavaScript Action should be added to the OnComplete Event as before, except you should keep the "Play Viewlet" action, since you want to continue on.

Then the JavaScript on slide 2 would look like this:
Code: Select all
var flashObject = eval("window.document." + $VIEWLET_NAME$);

// Over 25 = 14, Under = 16 | Male = 22, Female = 24
var answerGender = getCurrentResponseArray();

if(answerAge[0].id == 14)  {
    if(answerGender[0].id == 22) {
        // Mature Male
        flashObject.viewletGotoSlide(6);
    }
    else {
        // Mature Female
        flashObject.viewletGotoSlide(4);
    }
}
else {
    if(answerGender[0].id == 22) {
        // Young Male
        flashObject.viewletGotoSlide(5);
    }
    else {
        // Young Female
        flashObject.viewletGotoSlide(3);
    }
}


In this case, the JavaScript action should be added to the OnComplete event of the 2nd slide. Also the "Play Viewlet" action should be removed, since we'll be jumping to a new slide with the viewletGotoSlide action instead.

Sample surveys that implement this are included in the attached zip named "AgeGenderSurvey.qvp" and "AgeGenderSurvey.vie" for ViewletBuilder and ViewletQuiz.
Attachments
CustomBranching.zip
(103.84 KiB) Downloaded 368 times
Andrew Branch

Site Admin
User avatar
Posts: 223
Joined: Fri May 26, 2006 1:51 pm
Location: Rochester, NY

Re: Custom Branching in ViewletBuilder7

Postby Andrew » Mon Nov 19, 2012 7:44 am

For comboboxes you'll need to look at the answer field because there is a single id for the combobox. The answer is a number starting with 1. So if the user selected the 2nd choice the answer would be "2". The numbers have quotes around the number so it looks like this "1". This means your if statement would need to look like this:

Code: Select all
if(responses[0].answer == '"1"')
   alert("1st choice selected");

else if(responses[0].answer == '"2"')
   alert("2nd choice selected");

else if(responses[0].answer == '"3"')
   alert("3rd choice selected");
Andrew Branch

Return to FAQs - ViewletBuilder 7.x

Who is online

Users browsing this forum: No registered users and 1 guest