仿造问卷星--开发一套调查问卷设计工具（3/3）--完整流程

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，最终结果展示

生成问卷游览结果如下图（红框内容）
在这里插入图片描述
通过这个问卷编辑工具，我们手工编辑多套题，不用一道一道录入，就可批量完成问卷调查的设计工作。