1，定义一个结果的对象：
let resultObj = {id: 0,name: "",questions: [],
};
id，name和questions分别对应问卷id，问卷名称和问卷题目。
2，结果赋值
用户点击生成问卷按钮时， 分别从id和name文本框中获取值 --赋值给resultObj
resultObj.id = +document.getElementById("qid").value.trim();resultObj.name = document.getElementById("qname").value.trim();
将上节课拿到的question赋值给刚刚定义的对象：
resultObj.questions = questions;resultJson = JSON.stringify(resultObj);console.log(resultObj);打印输出结果：
json结果：
{"id": 1,"name": "测试问卷","questions": [{"id": 1,"title": "题目1","question_type": "radio","question_type_text": "单选题","options": [{"option_id": "A","option_value": "选项1"},{"option_id": "B","option_value": "选项2"},{"option_id": "C","option_value": "选项3"}]},{"id": 2,"title": "题目2","question_type": "checkbox","question_type_text": "多选题","options": [{"option_id": "A","option_value": "选项4"},{"option_id": "B","option_value": "选项5"},{"option_id": "C","option_value": "选项6"}]},{"id": 3,"title": "单行文本题","question_type": "input","question_type_text": "填空题"}]
}
3，pretty-print-json的使用
引入pretty-print-json，将上述json输出结果，格式化并打印到json结果文本框中：
import { prettyPrintJson } from "pretty-print-json";
document.getElementById("json-preview").innerHTML =prettyPrintJson.toHtml(resultObj);
结果如下图：
4，copy-to-clipboard的使用
拷贝功能：
点击copy json按钮时，将jison数据拷贝到剪切板，因为拷贝的是一个字符串，而不是对象，这里需要通过将对象转换为字符串，然后进行copy操作：
首先定义一个字符串：
let resultJson = "";
将对象转换为字符串，并赋值给resultJson
resultJson = JSON.stringify(resultObj);
引入copy-to-clipboard依赖：
import copy from "copy-to-clipboard";
将resultJson拷贝到剪切板：
document.getElementById("copy").onclick = () => {copy(resultJson);alert("已复制到剪贴板");
};
拷贝弹框：
5，gotpl的使用
html游览功能
这是使用到gotpl依赖，它的作用是把一段模板用给定的数据对象渲染出来。
模板已经提前写好了，直接copy拿走：
//模板
const tpl = `
<div class="question"><div class="row">问卷ID：<%= id %></div><div class="row">问卷名称：<%= name %></div><% for(var i=0, l=questions.length; i<l; ++i){ %><% var item = questions[i]; %><div class="question-wrap"><div class="question-title"><%= item.id %>. <%= item.title %>【<%=item.question_type_text %>】</div><% if(item.question_type === 'input'){ %><div class="input"><input type="text" name="<%= item.id %>" /></div><% }else if(item.question_type === 'radio'){ %><div class="radio"><% for(var j=0, k=item.options.length; j<k; ++j){ %><label class="label"><input type="radio" name="<%= item.id %>" value="<%= item.options[j].option_id %>" /><%= item.options[j].option_id %>.<%= item.options[j].option_value %></label><% } %></div><% }else if(item.question_type === 'checkbox'){ %><div class="checkbox"><% for(var j=0, k=item.options.length; j<k; ++j){ %><label class="label"><input type="checkbox" name="<%= item.id %>" value="<%= item.options[j].option_id %>" /><%= item.options[j].option_id %>.<%= item.options[j].option_value %></label><% } %></div><% } %></div><% } %>
</div>
`;
引入gotpl依赖：
import gotpl from "gotpl";
利用gotpl进行渲染模板—里面参数是前面是模板，后面是数据对象
document.getElementById("html-preview").innerHTML = gotpl.render(tpl,resultObj);
6，最终结果展示
生成问卷游览结果如下图（红框内容）
通过这个问卷编辑工具，我们手工编辑多套题，不用一道一道录入，就可批量完成问卷调查的设计工作。
