I have done a questionnaire system for internal use in the enterprise before, because the content of the survey is different every year, so I have to re-modify the code every time, so I thought of whether I can use the program to make an automatic questionnaire generation system.
The general idea is as follows:
1> A set of web-based background questionnaire generation system, enter specific questionnaires (questions, answers, single-choice or multiple-choice, or text answer, etc.) through the web page, and the generated questionnaires are submitted to the background system in the form of json ajax , the background can use spring rest to receive the request, and then store the json string in the mango db
2> The survey participants access the questionnaire system according to the received url (the backend returns a json string, and the front end is responsible for displaying the specific survey page), participates in the specific survey, and submits the survey results, and also initiates a rest request to the background through the json string. , and then store the json string in the mango db in the background
Related technologies:
jquery,javascript,css,html
spring boot, spring restful, spring mvc
mango db
The experimental code is as follows
1> Background questionnaire generation
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 (when);
$("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',
date: date,
success: success,
dataType: 'text'
});
}
survey.css
body {
margin : 50px;
background-color : #CDBA96;
}
div {
margin : 5px;
}
.titlebox {
font-weight:bold;
}
2> The front-end survey page is generated
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;
}
}
The page effect is as follows:
