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

深藏阁楼爱情的钟 2023-09-25 21:46 109阅读 0赞

本章主要内容是完善index.js逻辑功能。

1，修改index.html，直接copy

html和css文件直接从源码中拷贝：

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>问卷设计工具</title>
  8.     <link rel="stylesheet" href="./index.css" />
  9.   </head>
  10.   <body class="wrapper">
  11.     <div class="row">
  12.       <div class="form">
  13.         <div class="row">
  14.           问卷ID：<br />
  15.           <input id="qid" type="text" value="1" />
  16.         </div>
  17.         <div class="row">
  18.           问卷名称：<br />
  19.           <input id="qname" type="text" value="测试问卷" />
  20.         </div>
  21.         <div class="row">
  22.           问卷题目：<br />
  23.           <textarea name="" id="text" cols="60" rows="20">
  24.   1. 题目1
  25.   选项1
  26.   选项2
  27.   选项3
  29.   2.题目2[多选题]
  30.   选项4
  31.   选项5
  32.   选项6
  34.   3.单行文本题
  35.           </textarea>
  36.         </div>
  37.         <div class="row">
  38.           <button id="btn">生成问卷</button>
  39.         </div>
  41.         <div class="row">
  42.           JSON结果：<br />
  43.           <pre class="json-preview" id="json-preview"></pre>
  44.         </div>
  45.         <div class="row">
  46.           <button id="copy">拷贝JSON内容</button>
  47.         </div>
  48.       </div>
  49.       <div class="result">
  50.         <div class="row">
  51.           问卷预览：<br />
  52.           <div class="html-preview" id="html-preview"></div>
  53.         </div>
  54.       </div>
  55.     </div>
  57.     <div class="footer">
  58.       「Powered by
  59.       <a href="https://webify.cloudbase.net/">CloudBase Webify</a>」
  60.     </div>
  61.     <script type="module" src="./index.js"></script>
  62.   </body>
  63. </html>

css

  1. .form {
  3.     float: left;
  4.     min-height: 300px;
  5.     padding: 20px;
  6.   }
  7.   .row {
  9.     clear: both;
  10.     margin: 5px 0;
  11.   }
  12.   .row::after {
  14.     content: "";
  15.     display: table;
  16.     clear: both;
  17.   }
  18.   .result {
  20.     float: left;
  21.     margin-left: 20px;
  22.   }
  23.   .question-wrap {
  25.     padding: 20px;
  26.   }
  27.   .question-wrap:hover {
  29.     background-color: #f5f5f5;
  30.   }
  31.   .label {
  33.     display: block;
  34.     margin: 5px;
  35.   }
  36.   .html-preview {
  38.     width: 500px;
  39.     box-sizing: border-box;
  40.     padding: 20px;
  41.     border: solid 1px #ccc;
  42.   }
  43.   .json-preview {
  45.     width: 500px;
  46.     height: 100px;
  47.     border: solid 1px #ccc;
  48.     overflow: scroll;
  49.   }

html结构说明：

从上到下：问卷id（输入框），问卷名称（输入框），问卷题目（文本框 存放对象数据），生成问卷（button按钮），JSON结果（文本框），拷贝JSON内容（button按钮）。

其中，用户点击 生成问卷（button按钮），右边生成一个问卷游览；并且把这套问卷的json题目展示到JSON结果文本框中，用户点击 拷贝JSON内容（button按钮），可以将JSON结果文本框中的内容拷贝到剪切板，方便粘贴到其他使用。

2，运行index后，界面如下图

在这里插入图片描述

3，在index.js中添加“生成问卷” button按钮的点击事件：

从text富文本中拿到内容并把用户输入的内容打印输出

  1. document.getElementById("btn").addEventListener("click", function () {
  4.     // 用户输入的字符串
  5.     let text = document.getElementById("text").value;
  6.     console.log(text);
  8. })

打印输出结果如下：
在这里插入图片描述

对打印输出的富文本内容进行修改

4，按空行分割题目，生成数组并打印输出：

利用正则表达式，使用string.split方法，里面传一个正则表达式，将字符串进行空行分割。
在这里插入图片描述
没有文字内容，只有空内容。

  1. //正则表达式  除了空白和换行，其他什么都没有，就是一个空行
  2. const regexQuestionSplit = /\n\s*\n/gm;
  4. document.getElementById("btn").addEventListener("click", function () {
  7.     // 用户输入的字符串
  8.     let text = document.getElementById("text").value;
  9.     console.log(text);
  11.       // 按空行分割题目
  12.   let questionArr = text.split(regexQuestionSplit);
  13.   console.log(questionArr);
  15. })

分割的输出数组结果：
在这里插入图片描述

开始对每个题目进行处理，分割每一行

  1. let questions = [];
  2.   // 开始对每个题目进行处理
  3.   questionArr.forEach((q) => {
  5.     // 分割每一行
  6.     let rows = q.split(regexQuestionRowSplit);
  7.     //console.log(JSON.stringify(rows));
  8.     // 去掉空行
  9.     rows = rows.filter((item) => item.trim() !== "");
  10.     // console.log(JSON.stringify(rows));
  11.         // 全部去掉前后空格
  12.     rows = rows.reduce((acc, cur) => {
  14.       return [...acc, cur.trim()];
  15.     }, []);
  16.     console.log(JSON.stringify(rows));
  18.   })

输出结果如下：
在这里插入图片描述

5，对填空题，单选题和多选题分别利用正则表达式来处理：

  1. import {
  2.      prettyPrintJson } from "pretty-print-json";
  3. import copy from "copy-to-clipboard";
  4. import gotpl from "gotpl";
  6. const regexQuestionSplit = /\n\s*\n/gm;
  7. const regexQuestionRowSplit = /\n/gm;
  8. const regexTitle1 = /(?<index>\d+)[.、][\s]*(?<title>[^\n]*)$/;
  9. const retexTitle2 =
  10.   /(?<index>\d+)[.、][\s]*(?<title>[^\[【]*)[\[【](?<type>\W+)[\]】]$/;
  11. let resultObj = {
  13.   id: 0,
  14.   name: "",
  15.   questions: [],
  16. };
  17. let resultJson = "";
  19. const tpl = `
  20. <div class="question">
  21.   <div class="row">
  22.     问卷ID：<%= id %>
  23.   </div>
  24.   <div class="row">
  25.     问卷名称：<%= name %>
  26.   </div>
  27.   <% for(var i=0, l=questions.length; i<l; ++i){
  28.      %>
  29.     <% var item = questions[i]; %>
  30.     <div class="question-wrap">
  31.       <div class="question-title"><%= item.id %>. <%= item.title %>【<%=item.question_type_text %>】</div>
  32.       <% if(item.question_type === 'input'){
  33.      %>
  34.         <div class="input">
  35.           <input type="text" name="<%= item.id %>" />
  36.         </div>
  37.       <% }else if(item.question_type === 'radio'){
  38.      %>
  39.         <div class="radio">
  40.           <% for(var j=0, k=item.options.length; j<k; ++j){
  41.      %>
  42.             <label class="label">
  43.               <input type="radio" name="<%= item.id %>" value="<%= item.options[j].option_id %>" />
  44.               <%= item.options[j].option_id %>.
  45.               <%= item.options[j].option_value %>
  46.             </label>
  47.           <% } %>
  48.         </div>
  49.       <% }else if(item.question_type === 'checkbox'){
  50.      %>
  51.         <div class="checkbox">
  52.           <% for(var j=0, k=item.options.length; j<k; ++j){
  53.      %>
  54.             <label class="label">
  55.               <input type="checkbox" name="<%= item.id %>" value="<%= item.options[j].option_id %>" />
  56.               <%= item.options[j].option_id %>.
  57.               <%= item.options[j].option_value %>
  58.             </label>
  59.           <% } %>
  60.         </div>
  61.       <% } %>
  62.     </div>
  63.   <% } %>
  64. </div>
  65. `;
  67. const alphabet = [
  68.   "A",
  69.   "B",
  70.   "C",
  71.   "D",
  72.   "E",
  73.   "F",
  74.   "G",
  75.   "H",
  76.   "I",
  77.   "J",
  78.   "K",
  79.   "L",
  80.   "M",
  81.   "N",
  82.   "O",
  83.   "P",
  84.   "Q",
  85.   "R",
  86.   "S",
  87.   "T",
  88.   "U",
  89.   "V",
  90.   "W",
  91.   "X",
  92.   "Y",
  93.   "Z",
  94. ];
  95. const type_map = {
  97.   填空题: "input",
  98.   单选题: "radio",
  99.   多选题: "checkbox",
  100. };
  101. function getQuestionType(questionType) {
  103.   return type_map[questionType] || "类型错误";
  104. }
  105. function formatQuestion(index, title, typeText, options = null) {
  107.   // console.log(index, title, questionType);
  108.   const questionType = getQuestionType(typeText);
  109.   let question = {
  111.     id: +index,
  112.     title: title,
  113.     question_type: questionType,
  114.     question_type_text: typeText,
  115.   };
  116.   // console.log(options);
  117.   if (options && options.length) {
  119.     let tmpOptions = [];
  120.     options.forEach((item, index) => {
  122.       tmpOptions.push({
  124.         option_id: alphabet[index],
  125.         option_value: item,
  126.       });
  127.     });
  128.     question.options = tmpOptions;
  129.   }
  130.   return question;
  131. }
  133. document.getElementById("btn").addEventListener("click", function () {
  135.   resultObj.id = +document.getElementById("qid").value.trim();
  136.   resultObj.name = document.getElementById("qname").value.trim();
  138.   // 用户输入的字符串
  139.   let text = document.getElementById("text").value;
  140.   // console.log(text);
  142.   // 按空行分割题目
  143.   let questionArr = text.split(regexQuestionSplit);
  144.   // console.log(questionArr);
  146.   let questions = [];
  147.   // 开始对每个题目进行处理
  148.   questionArr.forEach((q) => {
  150.     // 分割每一行
  151.     let rows = q.split(regexQuestionRowSplit);
  152.     // console.log(JSON.stringify(rows));
  154.     // 去掉空行
  155.     rows = rows.filter((item) => item.trim() !== "");
  156.     // console.log(JSON.stringify(rows));
  158.     // 全部去掉前后空格
  159.     rows = rows.reduce((acc, cur) => {
  161.       return [...acc, cur.trim()];
  162.     }, []);
  163.     // console.log(JSON.stringify(rows));
  165.     // 如果是单行，是填空题
  166.     if (rows.length === 1) {
  168.       if (regexTitle1.test(rows[0])) {
  170.         let matches = rows[0].match(regexTitle1);
  171.         // console.log(matches);
  172.         let {
  173.      index, title } = matches.groups;
  174.         questions.push(formatQuestion(index, title, "填空题"));
  175.       }
  176.     }
  177.     // console.log(questions);
  179.     // 多行，可能是单选或多选
  180.     if (rows.length > 1) {
  182.       // 第一行是标题，其他行是选项
  183.       let [titleRow, ...options] = rows;
  184.       // console.log("titleRow", titleRow);
  185.       // console.log("options", options);
  187.       // 先验证带题目类型的格式
  188.       if (retexTitle2.test(titleRow)) {
  190.         let matches = titleRow.match(retexTitle2);
  191.         //  console.log(matches)
  192.         let {
  193.      index, title, type } = matches.groups;
  194.         questions.push(formatQuestion(index, title, type, options));
  195.       } else if (regexTitle1.test(titleRow)) {
  197.         // 没有设置类型的，当成单选题
  198.         let matches = titleRow.match(regexTitle1);
  199.         let {
  200.      index, title } = matches.groups;
  201.         console.log(index, title, options);
  202.         questions.push(formatQuestion(index, title, "单选题", options));
  203.       }
  204.       // console.log(questions);
  205.     }
  206.   });
  208.   resultObj.questions = questions;
  209.   resultJson = JSON.stringify(resultObj);
  210.   console.log(resultObj);
  211.   document.getElementById("json-preview").innerHTML =
  212.     prettyPrintJson.toHtml(resultObj);
  214.   document.getElementById("html-preview").innerHTML = gotpl.render(
  215.     tpl,
  216.     resultObj
  217.   );
  218. });
  220. document.getElementById("copy").onclick = () => {
  222.   copy(resultJson);
  223.   alert("已复制到剪贴板");
  224. };

6，输出最终结果：

在这里插入图片描述

输出的json数据如下：

  1. [
  2.     {
  4.         "id": 1,
  5.         "title": "题目1",
  6.         "question_type": "radio",
  7.         "question_type_text": "单选题",
  8.         "options": [
  9.             {
  11.                 "option_id": "A",
  12.                 "option_value": "选项1"
  13.             },
  14.             {
  16.                 "option_id": "B",
  17.                 "option_value": "选项2"
  18.             },
  19.             {
  21.                 "option_id": "C",
  22.                 "option_value": "选项3"
  23.             }
  24.         ]
  25.     },
  26.     {
  28.         "id": 2,
  29.         "title": "题目2",
  30.         "question_type": "checkbox",
  31.         "question_type_text": "多选题",
  32.         "options": [
  33.             {
  35.                 "option_id": "A",
  36.                 "option_value": "选项4"
  37.             },
  38.             {
  40.                 "option_id": "B",
  41.                 "option_value": "选项5"
  42.             },
  43.             {
  45.                 "option_id": "C",
  46.                 "option_value": "选项6"
  47.             }
  48.         ]
  49.     },
  50.     {
  52.         "id": 3,
  53.         "title": "单行文本题",
  54.         "question_type": "input",
  55.         "question_type_text": "填空题"
  56.     },
  57.     {
  59.         "id": 4,
  60.         "title": "题目2",
  61.         "question_type": "checkbox",
  62.         "question_type_text": "多选题",
  63.         "options": [
  64.             {
  66.                 "option_id": "A",
  67.                 "option_value": "选项4"
  68.             },
  69.             {
  71.                 "option_id": "B",
  72.                 "option_value": "选项5"
  73.             },
  74.             {
  76.                 "option_id": "C",
  77.                 "option_value": "选项6"
  78.             }
  79.         ]
  80.     }
  81. ]

发表评论

表情：
评论列表 （有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HDU6344 调查问卷

    状态压缩 + 模拟 把AB串压缩成二进制，A用1表示，B用0表示。 枚举所有问题的子集，选中的问题用1表示，其余的用0表示。对于每个子集，我们去和所有问题按位与，这样对

    今天药忘吃喽~今天药忘吃喽~/ 0 赞/ 378 阅读