Image Picker Custom Widget for plaform jQuery, SurveyJS Library Example

<!DOCTYPE html>
<html>
<head>
    <title>Image Picker Custom Widget for plaform jQuery, SurveyJS Library Example</title>
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://surveyjs.azureedge.net/0.12.26/survey.jquery.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.0/image-picker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.0/image-picker.css" />

</head>
<body>
    <div id="surveyElement">
</div>
<div id="surveyResult"></div>

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

</body>
</html>

Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
Survey.JsonObject.metaData.addProperty("dropdown", {name: "renderAs", default: "standard", choices: ["standard", "imagepicker"]});
    
var widget = {
    name: "imagepicker",
    isFit : function(question) { return question["renderAs"] === 'imagepicker'; },
    isDefaultRender: true,
    afterRender: function(question, el) {
    
        var $el = $(el).find("select");
    
        var options = $el.find('option');
        for (var i=1; i<options.length; i++) {
            $(options[i]).data("imgSrc", options[i].text);
            options[i].selected = question.value == options[i].value;
        }
        $el.imagepicker({
            hide_select : true,
            show_label  : false,
            selected: function(opts) {
                question.value = opts.picker.select[0].value;
            }
        })
    }
    
    
        ,
        willUnmount: function(question, el) {
            var $el = $(el).find("select");
            $el.data('picker').destroy();
        } 
    

}

Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);



window.survey = new Survey.Model({
        "pages": [
            {
                "elements": [
                    {
                        "type": "dropdown",
                        "name": "hair-type",
                        "title": "Select the image that looks most like your waves?",
                        "choicesByUrl": {
                            "url": "https://devacul-sct.herokuapp.com/api/v1/search/hair-type",
                            "valueName": "permalink",
                            "titleName": "image"
                        },
                        "renderAs": "imagepicker"
                    }
                ],
                "title": "Select the image that looks most like your curls"
            },
            {
                "elements": [
                    {
                        "type": "dropdown",
                        "name": "hair-description",
                        "title": "How would you describe your hairs?",
                        "choicesByUrl": {
                            "url": "https://devacul-sct.herokuapp.com/api/v1/search/hair-description",
                            "valueName": "permalink",
                            "titleName": "image"
                        },
                        "renderAs": "imagepicker"
                    }
                ]
            },
            {
                "elements": [
                    {
                        "type": "dropdown",
                        "name": "hair-density",
                        "title": "What is your hair density?",
                        "choicesByUrl": {
                            "url": "https://devacul-sct.herokuapp.com/api/v1/search/hair-density",
                            "valueName": "permalink",
                            "titleName": "image"
                        },
                        "renderAs": "imagepicker"
                    }
                ]
            }
        ],
        "showProgressBar": "top",
        "showQuestionNumbers": "off"
    });
survey.onComplete.add(function(result) {
    document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});

survey.currentPageNo = 1;
$("#surveyElement").Survey({ 
    model: survey 
});

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}
.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}
.panel-footer {
    padding: 0 15px;
    border:none;
    text-align: right;
    background-color: #fff;
}