Cart Buy Licenses Contact Integrate into App Docs Support Login/Register
v 1.8.47
v 1.8.47
Overview Examples Docs Source Download

Custom Navigation

Example of creating a navigation using images and customized buttons



                        
        
            Survey.StylesManager.applyTheme("default");
        

function doOnCurrentPageChanged(survey) {
    var prev = document
        .getElementById('surveyPrev');

    if(prev)
        prev.style.display = (!survey.isFirstPage
            ? "inline"
            : "none");
    
    var next = document
        .getElementById('surveyNext');
    if(next)
        next.style.display = (!survey.isLastPage
            ? "inline"
            : "none");

    //var complete = document
    //    .getElementById('surveyComplete');
    //complete && complete.style
    //    .display = (survey.isLastPage
    //        ? "inline"
    //        : "none");
}

            
                var json = {
  "title": "Software developer survey.",
  "showNavigationButtons": "none",
  "pages": [
    {
      "title": "What operating system do you use?",
      "questions": [
        {
          "type": "checkbox",
          "name": "opSystem",
          "title": "OS",
          "hasOther": true,
          "isRequired": true,
          "choices": [ "Windows", "Linux", "Macintosh OSX" ]
        }
      ]
    },
    {
      "title": "What language(s) are you currently using?",
      "questions": [
        {
          "type": "checkbox",
          "name": "langs",
          "title": "Please select from the list",
          "colCount": 4,
          "isRequired": true,
          "choices": [
            "Javascript",
            "Java",
            "Python",
            "CSS",
            "PHP",
            "Ruby",
            "C++",
            "C",
            "Shell",
            "C#",
            "Objective-C",
            "R",
            "VimL",
            "Go",
            "Perl",
            "CoffeeScript",
            "TeX",
            "Swift",
            "Scala",
            "Emacs Lisp",
            "Haskell",
            "Lua",
            "Clojure",
            "Matlab",
            "Arduino",
            "Makefile",
            "Groovy",
            "Puppet",
            "Rust",
            "PowerShell"
          ]
        }
      ]
    },
    {
      "title": "Please enter your name and e-mail",
      "questions": [
        {
          "type": "text",
          "name": "name",
          "title": "Name:"
        },
        {
          "type": "text",
          "name": "email",
          "title": "Your e-mail"
        }
      ]
    }
  ]
};

                window.survey = new Survey.Model(json);
            
        
            survey.onComplete.add(function(result) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.data, null, 3);
            });
        
survey.showTitle = false;
survey.onCurrentPageChanged.add(doOnCurrentPageChanged);
            
                survey.render("surveyElement");
            
doOnCurrentPageChanged(survey);
survey.showTitle = false;

survey.onComplete.add(function(survey) {
    document.getElementsByClassName("navigation-bar")[0].style.display = "none";
});
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of creating a navigation using images and customized buttons, Knockoutjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
<script src="/DevBuilds/survey-knockout/survey.ko.min.js"></script>
    <link href="/DevBuilds/survey-knockout/survey.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>
<hr />
<div class="navigation-bar">
    <a id="surveyPrev" href="#" onclick="survey.prevPage();" style="float: left;"></a>
    <a id="surveyNext" href="#" onclick="survey.nextPage();" style="float: right;"></a>
    <center><a id="surveyComplete" href="#" onclick="survey.completeLastPage();">Complete</a></center>
</div>
</body>
</html>

#surveyPrev, #surveyNext, #surveyComplete {
    color: #1ab394;
}

#surveyPrev {
    background-image: url(/Content/Examples/prev.png);
    display: inline-block;
    width: 80px;
    height: 90px;
}

#surveyNext {
    background-image: url(/Content/Examples/next.png);
    display: inline-block;
    width: 80px;
    height: 90px;
}

#surveyComplete {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 50%;
    background-color: lightgray;
}

.navigation-bar {
    padding: 1em;
}

Use onCurrentPageChanged event to update it after the current page is changed.

If you use knockout, please use onRedered event to initialized your custom navigation elements.

survey.onCurrentPageChanged.add(function (sender, options) {
    var survey = sender;
    var oldCurrentPage = options.oldCurrentPage;
    var newCurrentPage = options.newCurrentPage;
    //Your code
});
//Requires for knockout platoform only
survey.onRendered.add(function (sender) {
    var survey = sender;
    //Your code
});

settings

Get/set the current page No:

from 0 to visible page count - 1.
survey.currentPageNo = yourValue;

Page Prev Text:

survey.pagePrevText = yourValue;
survey.render();

survey.pageNextText = yourValue;
survey.render();

survey.completeText = yourValue;
survey.render();

survey.showNavigationButtons = yourValue;
survey.render();