Browse by Chapters

Browse by Chapters

Summary This article describes how to implement the "browse by chapter" function available in Askia Design's Web screens.
Applies to askiadesign
Written for Scriptwriters and Survey Authors
Keywords browsebychapters; chapter; design; askiadesign ; script

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 Design 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.


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 {
#askia-chapters.default .askia-chapter {
#askia-chapters.default .askia-chapter, #askia-chapters.default .askia-chapter-progress {
} #askia-chapters.default .askia-chapter-progress {
border:1px solid #a1a7ad;
#askia-chapters.default .askia-chapter-progress div {
} #navigationChapter {
margin: 0 auto;
padding: 5px 0 5px 10px;
border-radius: 3px;
background: rgb(108, 108, 108);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(108, 108, 108)), color-stop(100%, rgb(68, 68, 68)));
background: -webkit-linear-gradient(top, rgb(108, 108, 108) 0%, rgb(68, 68, 68) 100%);
background: linear-gradient(top, #6c6c6c 0%, #444444 100%);
-webkit-box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
-moz-box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
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;
-webkit-box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
-moz-box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
background: rgb(124, 124, 124);
background: -moz-linear-gradient(top, #7c7c7c 0%, #444444 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(124, 124, 124)), color-stop(100%, rgb(68, 68, 68)));
background: -webkit-linear-gradient(top, rgb(124, 124, 124) 0%, rgb(68, 68, 68) 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;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
.default#askia-chapters li {
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:


$("#navigationCursor").html(" +  ");
} else {
$("#navigationCursor").html(" -  ");
} }); $("#askia-chapters").on("click","li",function() {


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. 

Have more questions? Submit a request


  • Avatar
    Ali Helmi

    Thank you so much Dear Jordan Grindle, this option is very helpful and you have explained it to be implemented easily. :D

    Edited by Ali Helmi