Context Actions in Element Titles


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

//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",
            "showOtherItem": 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.onGetQuestionTitleActions.add((_, opt) => {
    opt.titleActions = [
        {
            title: 'More info',
            innerCss: 'btn-more-info',
            action: () => {
                showDescription(opt.question);
            },
        },
    ];
});

survey.onGetPageTitleActions.add((_, opt) => {
    opt.titleActions = [
        {
            title: 'More Info',
            innerCss: 'btn-more-info',
            action: () => {
                showDescription(opt.page);
            },
        },
    ];
});
        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Context Actions in Element Titles, jQuery Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.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>

.btn-more-info {
    color: rgb(26, 179, 148);
    background: rgba(0, 0, 0, 0);
    border: none;
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
    outline: none;
    padding: 8px 24px;
    text-align: left;
    border-radius: 100px;
}

.btn-more-info:hover {
    background-color: rgb(26, 179, 148);
    color: rgb(255, 255, 255);
}
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

The Survey object (the SurveModel class) implements a set of title-action events allowing you to add context actions to titles of survey elements.

API demonstrated in the example:

Related API:

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.