How to implement SurveyJS builder to my Flask webapp

Question

I need to implement a JQuery snippet that provides SurveyJS's builder to my Flask webapp but I don't know how to do that or if it is even possible.

I have tried using Leaflet.JS to my code and it works as well as JQuery but when it comes to Survey.JS I'm lost. I don't even know if it is more appropriate to use webpack and implement Angular.JS code.

I have tried the following example but I get an error saying

TypeError: $(...).Survey is not a function` but that means that the object ".Survey" is not recognized.

The only thing that I want to do right now is to understand how it is implemented or to find a way to output some results.

UPDATE

Below you will find a custom questionnaire that I embedded to my HTML. Problem is that I want to embed the survey builder/designer. In case I cannot embed SurveyJS's builder/designer I kindly request an alternative, because, as I mentioned before, I want to implement a survey builder to my microservice.

<link href="https://surveyjs.azureedge.net/1.0.75/survey.css" type="text/css" rel="stylesheet" />
<script src="https://surveyjs.azureedge.net/1.0.75/survey.jquery.min.js"></script>
<div id="surveyContainer"></div>
<script>
  var surveyJSON = {pages:[{name:"page1",elements:[{type:"checkbox",name:"question2",choices:["item1","item2","item3"]},{type:"dropdown",name:"question3",choices:["item1","item2","item3"]},{type:"imagepicker",name:"question4",choices:[{value:"lion",imageLink:"https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"},{value:"giraffe",imageLink:"https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"},{value:"panda",imageLink:"https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"},{value:"camel",imageLink:"https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"}]}]}]}

  function sendDataToServer(survey) {
      //send Ajax request to your web server.
      alert("The results are:" + JSON.stringify(survey.data));
  }

  var survey = new Survey.Model(surveyJSON);
  $("#surveyContainer").Survey({
      model: survey,
      onComplete: sendDataToServer
});</script>

Can you provide your minimal code sample (https://stackoverflow.com/help/mcve) illustrating the issue? — TSV, Mar 28 '19 at 10:55
Yes I have. I will add the a snippet to my answer later today. As soon as I understand how code pen works. — Adam Jones, Mar 29 '19 at 13:29

score 0 · Answer 1 · answered Mar 28 '19 at 15:39

So, I was playing around with diffrent libraries and because I am using frameworks like Flask, I needed a lightweight survey builder and not something like SurveyJS (which in my opinion doesn't have the necessary docs to implement the builder to any HTML based webframework) and so I ended up using jQuery's Form Builder which is exactly what I wanted; it's easy, great documentation and a straight-forward embedding method (took me about 50 seconds to embed it).

How to implement SurveyJS builder to my Flask webapp

1 Answers1