Cart Licenses Contact Support Online Creator Login/Register
Try
Free
v 1.9.37

Custom Render of Survey Elements


                        
        
            Survey.StylesManager.applyTheme("modern");
        

//Add a custom 'popupdescription' property to questions of all types and to pages
Survey.Serializer.addProperty("question", "popupdescription:text");
Survey.Serializer.addProperty("page", "popupdescription:text");
function showDescription(element) {
    document.getElementById("questionDescriptionText").innerHTML = element.popupdescription;
    $("#questionDescriptionPopup").modal();
}


                
                    var json = { 
    title: "Software developer survey.", 
    pages: [
      {
        "title": "What operating system do you use?",
        "popupdescription": "Select the operating system you are currently using.",
        "elements": [
          {
            "type": "checkbox",
            "name": "opSystem",
            "title": "OS",
            "hasOther": true,
            "isRequired": true,
            "popupdescription": "If you do not use any of the listed operating system, please select 'others' and type your operating system name.",
            "choices": [ "Windows", "Linux", "Macintosh OSX" ]
          }
        ]
      },
      {
        "title": "What language(s) are you currently using?",
        "popupdescription": "Select all programming languages you have been using for the last six months.",
        "elements": [
          {
            "type": "checkbox",
            "name": "langs",
            "title": "Please select from the list",
            "popupdescription": "Select all programming languages you have been using for the last six months.",
            "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",
        "popupdescription": "We will not share this information with any third-party organization.",
        "elements": [
          {
            "type": "text",
            "name": "name",
            "title": "Name:",
            "popupdescription": "Please, type your name as 'Given Name' 'Family Name'."
          },
          {
            "type": "text",
            "name": "email",
            "title": "Your e-mail",
            "popupdescription": "Please, make sure you do not misspell your e-mail."
          }
        ]
      }]
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
survey.onAfterRenderQuestion.add(function(survey, options){
    //Do nothing if a question contains no description to show in a modal popup
    if(!options.question.popupdescription) return;
    //Create a 'More Info' button to invoke a modal popup
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "btn btn-info btn-xs";

    btn.style.position = "absolute";
    btn.style.marginLeft = "20px"

    btn.innerHTML = "More Info";
    var question = options.question;
    btn.onclick = function() { showDescription(question); }
    //Insert the created 'More Info' button into the rendered question's header
    var header = options.htmlElement.querySelector("h5");
    if(!header) header = options.htmlElement;
    var span = document.createElement("span");
    span.innerHTML = "  ";
    header.appendChild(span);
    header.appendChild(btn);
});

survey.onAfterRenderPage.add(function(survey, options){
    //Do nothing if a page contains no description to show in a modal popup
    if(!options.page.popupdescription) return;
    //Create a 'More Info' button to invoke a modal popup
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "btn btn-info btn-xs";

    btn.style.position = "absolute";
    btn.style.marginLeft = "20px"

    btn.innerHTML = "More Info";
    btn.onclick = function() { showDescription(survey.currentPage); }
    //Insert the created 'More Info' button into the rendered page's header
    var header = options.htmlElement.querySelector("h4");
    var span = document.createElement("span");
    span.innerHTML = "  ";
    header.appendChild(span);
    header.appendChild(btn);
});            
                survey.render("surveyElement");
            

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Render of Survey Elements, Knockoutjs Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin: 0">
    
<!-- Modal -->
<div id="questionDescriptionPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <!-- An element that displays a survey element's 'popupdescription' property value-->
                <p><div id="questionDescriptionText"></div></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

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

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

The Survey object (the SurveModel class) implements a set of after-render events allowing you to customize the appearance and functionality of survey elements.

API demonstrated in the example:

Related API:

Dismiss

Tell us what you think

Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.

We'd really appreciate your feedback.

Approximate time to complete: 2 min.

Start the survey