如何将Flask Webapp实现SurveyJS构建器

时间:2019-03-27 14:48:35

标签: javascript jquery surveyjs

我需要实现一个JQuery代码片段,该代码片段为我的Flask Web应用程序提供SurveyJS的生成器,但我不知道该怎么做,甚至可能。

我已经尝试在我的代码中使用Leaflet.JS,它与JQuery一样好,但是当涉及Survey.JS时,我迷路了。我什至不知道使用webpack和实现Angular.JS代码是否更合适。

我尝试了以下example,但收到错误消息

  

TypeError:$(...)。调查不是函数`,但这意味着无法识别对象“。调查”。

我现在唯一要做的就是了解它的实现方式或找到一种输出结果的方法。

  

更新

在下面,您将找到我嵌入到HTML中的自定义调查表。问题是我想嵌入调查生成器/设计器。万一我无法嵌入SurveyJS的构建器/设计器,请请求一个替代方法,因为如前所述,我想在我的微服务中实现一个测量构建器。

<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>

1 个答案:

答案 0 :(得分:0)

因此,我正在使用不同的库,并且因为我使用的是Flask之类的框架,所以我需要一个轻量级的调查构建器,而不是诸如SurveyJS之类的东西(在我看来,它没有必要的文档来将构建器实施为基于HTML的网络框架),因此我最终使用了jQuery的Form Builder,这正是我想要的;这是简单,出色的文档和直接的嵌入方法(花了我大约50秒的时间嵌入)。