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

blogzhoubo

浏览: 214052 次
性别:
来自: 大连

最近访客更多访客>>

chinaylong

gxwgbl

andew377

hanjun0612

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

Java编程
json
jquery
javascript

jquery json spring restful mango db ajax

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

大体的思路如下:

1>一套基于web的后台问卷生成系统,通过web页面录入具体的调查问卷(问题,答案,单选还是多选,还是文字回答等等),生成的问卷以json的方式ajax提交给后台系统,后台可以利用spring rest的方式接收request,然后将json串存入mango db

2>调查参与者根据收到的url,访问调查问卷系统(后台返回json串,前端负责显示具体的调查页面),参与具体的调查,并提交调查结果,同样也是通过json串向后台发起rest请求,然后后台将json串存入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;
    }
}

页面效果如下: