<!DOCTYPE html>
<html>
    <head>
        <title>Use options to customize the Survey Editor, Survey Builder Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
        <script src="https://surveyjs.azureedge.net/1.0.41/survey.ko.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
        <!-- Uncomment to enable Select2 <script src="https://unpkg.com/jquery"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> -->
        <link href="https://surveyjs.azureedge.net/1.0.41/surveyeditor.css" type="text/css" rel="stylesheet"/>
        <script src="https://surveyjs.azureedge.net/1.0.41/surveyeditor.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="./index.css">

    </head>
    <body>
        <div id="surveyContainer">
            <div id="editorElement"></div>
        </div>

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

    </body>
</html>
//add property into checkbox, dropdown and radiogroup
Survey.JsonObject.metaData.addProperty("selectbase", {
  name: "imageUrl"
});

function afterRenderQuestion(survey, options) {
  if (!options.question.imageUrl)
    return;

  //Add an image;
  var image = document.createElement("img");
  image.src = options.question.imageUrl;
  //set other properties here
  var header = options
    .htmlElement
    .querySelector("h5");
  var parent = header.parentElement;
  parent.insertBefore(image, header);
}

editor = new SurveyEditor.SurveyEditor();
editor.onDesignerSurveyCreated.add(function(sender, options) {
  options.survey.onAfterRenderQuestion.add(afterRenderQuestion);
});
editor.onTestSurveyCreated.add(function(sender, options) {
  options.survey.onAfterRenderQuestion.add(afterRenderQuestion);
});
editor.render("editorElement");
editor.text = JSON.stringify({
  "pages": [{
    "name": "page1",
    "elements": [{
      "type": "checkbox",
      "name": "know_bird",
      "title": "Do you know this bird?",
      "choices": [
        "Yes",
        "No"
      ],
      "imageUrl": "https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=125&w=210"
    }]
  }]
});