调查问卷动态生成的一点探索

阅读更多

之前做过企业内部用的调查问卷系统,因为每一年的调查内容都有差异,所以每次都要重新修改代码,所以想到了能否用程序做一个自动问卷生成系统.

 

大体的思路如下:

 

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

 

	
	
		
	
	
	





  	
Give a title to your survey
	

		
	

	

		
	
  
	
	

		

			
		
		
		

			
		
	
  

 

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 = "
";
	
	$(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 = "
 \
			
 \
				 \
			
 \
			
 \
				 \
			
 \
			
 \
				
 \
					 \
				
 \
				
 \
					 \
				
 \
			
 \
			
";
		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

 

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 += "
" + value.title + "
";
		}
		sheetStr += "
" + value.question_no + ". " + value.question + "
"
		
		$.each(value.answer, function(k,v){
			if(value.answer_type == "single"){
				sheetStr += "
" + v + "
";
			} else {
				sheetStr += "
" + v + "
";
			}
		});
		
	});
	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;
    }
}

 

 

 

页面效果如下:

 

 

 

 

• 
• 大小: 82 KB

• 
• 大小: 81.2 KB

• 查看图片附件