Download example QEX here

Sometimes, especially with a particularly large project, it becomes a necessity for survey programmers to be able to jump around the survey for testing purposes.
This functionality utilizes the "askia-chapters" class to designate Chapters created within AskiaDesign as points of reference the respondent can jump back and forth to.

It should be noted as a word of caution that jumping back and forth around a survey can cause routing to behave erratically.

Survey Layout

The "askia-chapters" class specifically points to the chapters created in your survey. Therefore, it is important to ensure that all questions you wish to be able to be "jumped" to are properly indented within it's respective chapter:

Please note that it is not possible to make this function point to specific questions. The class only takes the chapter at the root level of the survey. However, there is a way to "cheat" the function by having the question you wish to designate indented to a chapter that has "Pause During Data Entry" un-ticked. This will produce the same effect. Beware of using this too much, as it can cause the survey to become cluttered.

Implementation

Placing this functionality into your survey is a simple process. Inside your Internet Options screen, navigate to the Header/Footer tab. There, you will paste the following code in this location in the "Head" dialogue box:

#askia-chapters.default, #askia-chapters.default li {
 list-style-type:none;
 padding:0;
 margin:0;
 clear:both;
 }
 #askia-chapters.default .askia-chapter {
 margin-bottom:5px;
 }
 #askia-chapters.default .askia-chapter, #askia-chapters.default .askia-chapter-progress {
 float:left;
 }

#askia-chapters.default .askia-chapter-progress {
 position:relative;
 top:6px;
 margin-left:15px;
 border:1px solid #a1a7ad;
 width:50px;
 height:10px;
 }
 #askia-chapters.default .askia-chapter-progress div {
 background:#07F307;
 height:100%;
 }

#navigationChapter {
 margin: 0 auto;
 padding: 5px 0 5px 10px;
 border-radius: 3px;
 background: rgb(108, 108, 108);
 background: linear-gradient(top, #6c6c6c 0%, #444444 100%);
 box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
 border: 1px solid rgb(0, 0, 0);
 text-shadow: 0px -1px 0px rgb(0, 0, 0);
 color: rgb(221, 221, 221);
 /*font-weight: bold;*/
 transition: all ease-in-out .1s;
 }
 #navigationChapter:hover {
 color: #FFFFFF;
 text-decoration: none;
 box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
 background: rgb(124, 124, 124);
 background: linear-gradient(top, #7c7c7c 0%, #444444 100%);
 cursor: pointer;
 }

#navigationCursor {
 color: #FFFFFF;
 }
.select:hover {
 cursor: pointer;
 }
.default#askia-chapters {
 background-color: #ffffff;
 border-top: 1px solid transparent;
 border-right: 1px solid #a1a7ad;
 border-bottom: 1px solid #a1a7ad;
 border-left: 1px solid #a1a7ad;
 border-bottom-right-radius: 2px;
 border-bottom-left-radius: 2px;
 }
 .default#askia-chapters li {
 font-size:0.9em;
 height: 22px;
 line-height: 22px;
 padding: 5px 5px 0 20px;
 border-bottom: 1px solid #a1a7ad;
 transition: all ease-in-out .1s;
 }
 .default#askia-chapters li:hover {
 background-color: #f7f7f7;
 cursor: pointer;
 }
 .askia-chapter {
 width: 175px;
 }
 .default#askia-chapters .askia-chapter-progress {
 top: 3px;
 }

The next bit of code needed for this function will be implemented in the "Footer" dialogue box under the same tab:

$("#askia-chapters").hide();
$("#navigationChapter").click(function(){
 
 if($("#askia-chapters").is(":visible")){
 $("#askia-chapters").hide("fast");
 $("#navigationCursor").html(" +  ");
 } else {
 $("#askia-chapters").show("fast");
 $("#navigationCursor").html(" -  ");
 }

});
$("#askia-chapters").on("click","li",function() {
 $(this).find(".askia-chapter").click();
 });

Finally, the last code needed to be inserted will be under the "Contents" tab, in the "Before Content" box:

<div id="navigationChapter"><span id="navigationCursor" style="font-size: 1.2em;font-weight: bold;">&nbsp;+&nbsp;&nbsp;</span>Browse by Chapter</div><ul id="askia-chapters" ></ul>

Once all these settings have been altered you should finally see the function appear when you test your survey in Web mode:

The code provided can also be altered by a survey programmer with a working knowledge of HTML/JavaScript to further customize the function to suit the client's needs. 

Attached to this article is a Demo QEX file with this function successfully implemented. 

Askia Design Page specifics

By default, the Browse by Chapter functionality works only when using the 'Legacy' Internet Template Setting. When you switch to an ADP, you will quickly notice the function no longer works correctly. 

Here is a solution to include ADP functionality.

Specifically, this JavaScript:

$(function() {
    $("#askia-chapters").undelegate(".askia-chapter", "click");
    AskiaScript.gotoChapter = function(e) {
        e.stopImmediatePropagation(),
        e.preventDefault();
        var chapter, index = parseInt($(this).attr("id").replace(/askia\-chapter\-/gi, ""), 10);
        return !isNaN(index) && index >= 0 && index < AskiaScript.chapters.length && (chapter = AskiaScript.chapters[index],
        $("input[name=Action]").val("GoTo"),
        $("form[name=FormAskia]").append('<input type="hidden" name="shortcut" />'),
        $("input[name=Position]").remove(),
        $("input[name=shortcut]").val(chapter.shortcut),
        $("input[name=Next]").click()),
        !1
    };
    $("#askia-chapters").delegate(".askia-chapter", "click", AskiaScript.gotoChapter);
});

This needs to be inserted into the Footer section of the HTML document.

We did add a new section within all of the ADPs a while ago called "Additional HTML for Foot section", which is where you'll need to insert this code:

​

Steps to implement:

1) Copy/Paste the above JavaScript into a static .js file.
2) Add this static .js file as a resource within the QEX.
3) Reference that static .js file as a script from within the "Additional HTML for Foot section". For example:

<script src="??ResPath??BrowseByChapter_Footer.js"></script>​

This will allow you to continue using the Browse by Chapters function while using ADP Templates.