1，定義一個結(jié)果的對象：

let resultObj = {
  id: 0,
  name: "",
  questions: [],
};

id，name和questions分別對應(yīng)問卷id，問卷名稱和問卷題目。

2，結(jié)果賦值

用戶點擊生成問卷按鈕時， 分別從id和name文本框中獲取值 --賦值給resultObj

    resultObj.id = +document.getElementById("qid").value.trim();
    resultObj.name = document.getElementById("qname").value.trim();

將上節(jié)課拿到的question賦值給剛剛定義的對象：

  resultObj.questions = questions;
  resultJson = JSON.stringify(resultObj);
  console.log(resultObj);
  

打印輸出結(jié)果：

json結(jié)果：

{
    "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輸出結(jié)果，格式化并打印到j(luò)son結(jié)果文本框中：

import { prettyPrintJson } from "pretty-print-json";

    document.getElementById("json-preview").innerHTML =
    prettyPrintJson.toHtml(resultObj);

結(jié)果如下圖：

4，copy-to-clipboard的使用

拷貝功能：

點擊copy json按鈕時，將jison數(shù)據(jù)拷貝到剪切板，因為拷貝的是一個字符串，而不是對象，這里需要通過將對象轉(zhuǎn)換為字符串，然后進(jìn)行copy操作：

首先定義一個字符串：

let resultJson = "";

將對象轉(zhuǎn)換為字符串，并賦值給resultJson

resultJson = JSON.stringify(resultObj);

引入copy-to-clipboard依賴：

import copy from "copy-to-clipboard";

將resultJson拷貝到剪切板：

document.getElementById("copy").onclick = () => {
  copy(resultJson);
  alert("已復(fù)制到剪貼板");
};

拷貝彈框：

5，gotpl的使用

html游覽功能
這是使用到gotpl依賴，它的作用是把一段模板用給定的數(shù)據(jù)對象渲染出來。
模板已經(jīng)提前寫好了，直接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進(jìn)行渲染模板—里面參數(shù)是前面是模板，后面是數(shù)據(jù)對象

    
    document.getElementById("html-preview").innerHTML = gotpl.render(
        tpl,
        resultObj
    );

6，最終結(jié)果展示

生成問卷游覽結(jié)果如下圖（紅框內(nèi)容）

通過這個問卷編輯工具，我們手工編輯多套題，不用一道一道錄入，就可批量完成問卷調(diào)查的設(shè)計工作。文章來源地址http://www.zghlxwxcb.cn/news/detail-410688.html

到了這里，關(guān)于仿造問卷星--開發(fā)一套調(diào)查問卷設(shè)計工具（3/3）--完整流程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！