之前做过企业内部用的调查问卷系统,因为每一年的调查内容都有差异,所以每次都要重新修改代码,所以想到了能否用程序做一个自动问卷生成系统.
大体的思路如下:
1>一套基于web的后台问卷生成系统,通过web页面录入具体的调查问卷(问题,答案,单选还是多选,还是文字回答等等),生成的问卷以json的方式ajax提交给后台系统,后台可以利用spring rest的方式接收request,然后将json串存入mango db
2>调查参与者根据收到的url,访问调查问卷系统(后台返回json串,前端负责显示具体的调查页面),参与具体的调查,并提交调查结果,同样也是通过json串向后台发起rest请求,然后后台将json串存入mango db
相关技术:
jquery,javascript,css,html
spring boot, spring restful, spring mvc
mango db
试验性代码如下
1>后台调查问卷生成
survey.html
<html> <head> <title>Create Survey</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="application/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="application/javascript" src="js/survey.js"></script> <link rel="stylesheet" href="css/survey.css" /> </head> <body> <form> <div class="titlebox">Give a title to your survey</div> <div> <textarea name="title" id="title" placeholder="Survey Title" rows="3" cols="40"></textarea> </div> <div> <textarea name="question" id="question" placeholder="Question 1" rows="3" cols="40"></textarea> </div> <div> <div> <input type="text" name="answer" id="answer" placeholder="Answer 1" size="50" /> </div> <div class="autoadd"> <input type="text" name="answer" id="answer" placeholder="Answer 2" size="50" /> </div> </div> </form> <input type="button" id="addquestion" name="addquestion" value="Add Question" /> <input type="button" id="submit" name="submit" value="Create Survey" /> </body> </html>
survey.js
$.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; function addanswer(){ if(typeof($(this).next().html()) != "undefined") { return; } var answerNo = $(this).parent().find("input").length + 1; var answer = "<div class=\"autoadd\"><input type=\"text\" name=\"answer\" \ id=\"answer\" placeholder=\"Answer " + answerNo + "\" size=\"50\" /></div>"; $(this).after(answer); alert(answer); setautoadd(); } function createsurvey(){ alert($("#title").val()); $("form").each(function(){ $(this).find("#title").val($("#title").val()); var jsonuserinfo = $(this).serializeObject(); alert(jsonuserinfo); alert(JSON.stringify(jsonuserinfo)); doAjax(JSON.stringify(jsonuserinfo)); }); } function setautoadd() { $(".autoadd").bind("paste keypress", addanswer); } function setevent() { $("#submit").click(createsurvey); $("#addquestion").click(function(){ var qNo = $("form").length + 1; alert("qNo:" + qNo); var quan = "<form> \ <div style=\"display:none\"> \ <textarea name=\"title\" id=\"title\" placeholder=\"Survey Title\" rows=\"3\" cols=\"40\"></textarea> \ </div> \ <div> \ <textarea name=\"question\" id=\"question\" placeholder=\"Question " + qNo + "\" rows=\"3\" cols=\"40\"></textarea> \ </div> \ <div> \ <div> \ <input type=\"text\" name=\"answer\" id=\"answer\" placeholder=\"Answer 1\" size=\"50\" /> \ </div> \ <div class=\"autoadd\"> \ <input type=\"text\" name=\"answer\" id=\"answer\" placeholder=\"Answer 2\" size=\"50\" /> \ </div> \ </div> \ </form>"; alert(quan); $("form").last().after(quan); setautoadd(); }); } $(document).ready(function(){ setautoadd(); setevent(); }); function success(data, textStatus, jqXHR){ alert("success" + data); } function doAjax(data){ var url = 'http://localhost:8080/greeting'; alert("data:" + data); $.ajax({ type: 'post', url: url, contentType:'application/json;charset=UTF-8', data: data, success: success, dataType: 'text' }); }
survey.css
body { margin : 50px; background-color : #CDBA96; } div { margin : 5px; } .titlebox { font-weight:bold; }
2>前台调查页面生成
surveysheet.html
<html> <head> <title>Survey Sheet</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="application/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="application/javascript" src="js/surveysheet.js"></script> <link rel="stylesheet" href="css/surveysheet.css" /> </head> <body> <form> <div id="sheet"> </div> </form> <input type="button" id="submit" name="submit" value="Submit Survey" /> </body>
surveysheet.js
function submitsurvey() { } $(document).ready(function(){ $("#submit").click(submitsurvey); alert("ready"); var jsonStr = '[{\ "title" : "survey",\ "question_no" : "1",\ "question" : "which fruit do you like?",\ "answer" : ["apple","orange","banana"],\ "answer_type" : "single"\ },\ {\ "title" : "survey",\ "question_no" : "2",\ "question" : "which color do you like?",\ "answer" : ["yellow","red","green"],\ "answer_type" : "free"\ }]'; alert(jsonStr); var jsonObj = $.parseJSON(jsonStr); //alert(jsonObj); var sheetStr = ''; $.each(jsonObj, function(i,value){ if(i == 0){ sheetStr += "<div>" + value.title + "</div>"; } sheetStr += "<div>" + value.question_no + ". " + value.question + "</div>" $.each(value.answer, function(k,v){ if(value.answer_type == "single"){ sheetStr += "<div><input type=\"radio\" name=\"answer\" value=\"" + k + "\">" + v + "</input></div>"; } else { sheetStr += "<div><input type=\"checkbox\" name=\"answer\" value=\"" + k + "\">" + v + "</input></div>"; } }); }); alert(sheetStr); $("#sheet").html(sheetStr); });
App.java
package prd.survey; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; /** * Hello world! * */ @SpringBootApplication public class App { public static void main( String[] args ) { SpringApplication.run(App.class, args); } }
SurveyController.java
package prd.survey; import java.util.concurrent.atomic.AtomicLong; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; @RestController public class SurveyController { private static final String template = "Hello, %s!"; private final AtomicLong counter = new AtomicLong(); @RequestMapping(value="/greeting", method = RequestMethod.POST,consumes = "application/json") public Greeting greeting(@RequestBody String body) { System.out.println("body:" + body); return new Greeting(counter.incrementAndGet(), String.format(template, "John")); } }
Greeting.java
package prd.survey; public class Greeting { private final long id; private final String content; public Greeting(long id, String content) { this.id = id; this.content = content; } public long getId() { return id; } public String getContent() { return content; } }
页面效果如下:
相关推荐
用 excel VBA实现的调查问卷生成器,谢谢设计者
能够动态生成题目和选项,并完成选项的统计
根据自己想要生成的问卷类型进行自动生成问卷(主要是选择题和简答题) d.用户对题库进行补充,方便问卷的题目多样化 e.用户与用户之间通过留言板交流,用户与管理员通过联系我们交流 2.服务端(网页形式) a....
网上问卷调查系统生成器的使用与设计文档 周刊上下的
Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。该内容实现左边拖拽单选,多选,下拉等组件,右边设置组件的标题,限制等,从而实现调查问卷。
可以生成随机问卷,用于问卷调查,随机生成,随机答案。
利用asp开发,自行设置问卷标题和题目,每次建立完成后,进行生成,即可投入使用。
IT系统调研问卷报告,对于不同IT系统之间都有明确的调研题目和问卷方法
于是调查问卷自动生成系统就诞生了,它可以帮你:自动生成调查问卷随机生成选项统计选项数据(票数及百分比)支持题目依赖选项(比如如果第3题选了C,则需要答第4题,否
项目管理调查问卷,非常好,对于我们确认需求很有帮助!
问卷调查系统源码.7z
调查问卷网页+基于PDF表单的调查问卷系统的设计与实现论文
工程项目管理调查问卷.doc
摩托车市场调查问卷——摩托车消费者调查甄别问卷.doc
ThinkPHP微信考试答题问卷调查问卷系统源码 程序以thinkphp为内核开发的微信问卷后台 管理系统,学生考试答题系统,调查问卷系统 安装说明: 1、导入com.sql 2、修改数据库配置: ApplicationCommonConfconfig.php 3...
OQSS通用在线问卷调查生成器 用途 问卷调查或调查问卷生成及数据分析、信息收集,调研工具
问卷调查-问卷调查系统-问卷调查系统源码-问卷调查管理系统-问卷调查管理系统java代码-问卷调查系统设计与实现-基于ssm的问卷调查系统-基于Web的问卷调查系统设计与实现-问卷调查网站-问卷调查网站代码-问卷调查平台...
基于本体的问卷辅助生成系统,陈恒,刘绍华,随着语义网技术的发展,大量的结构化数据被发布,谷歌在此基础上提出了
jsp+ssh+mysql 实现的问卷调查系统源码
高校教师思想政治工作调查问卷.doc