記一次問卷調查需求

前言

最近pm問我能不能作相似於騰訊問卷星同樣的問卷調查功能？就是pc端這邊配置問卷，app用戶填寫，填寫完保存能夠查看本身的問卷信息。一開始本着本身的職業操守說：我先看看騰訊問卷星是怎麼實現的，到時再給你答覆。研究了一下感受能作。就答應下來了。過幾天設計稿下來了就開始動手作了。幸不辱命結果仍是作出來了。話很少說，先看看效果吧。

1：pc問卷配置頁

初版咱們的問卷配置頁只有單選題，多選題和填空題。目前是左邊點擊一下題目類型，右邊頁面就會生成對應的體型。大概配置頁面以下：

簡單說一下各類題型

• 填空題（其實頁面和邏輯比較簡單，我就一筆帶過了）

• 單選題（單選題也就多了個選項說明和分數，以及操做按鈕換位置或者刪除當前選項）

• 多選題 （基本跟單選同樣 不過用戶能夠選擇多個選項）

2：pc問卷配置頁特殊跳轉問題

目前咱們支持3種跳轉方式來知足不一樣用戶的需求，跳轉指定頁和按選項跳轉頁面以及定製方案（爲特殊用戶提供定製方案從而推銷本身的產品，固然這種是要另外收錢的）

目前問卷調查配置頁已完成，用戶能夠根據本身的要求來配置問卷。配置好問卷以後，用戶能夠在app來做答完成問卷。

app問卷

pc配置頁出來以後 app填寫，大概頁面以下。

遇到的問題

在作沒有特殊跳轉的問卷時候，寫的一路順風，但作特殊頁面調整的時候，當時卡住了，好比說用戶從第三頁跳到第六頁，我怎麼讓Ta從第六頁回到第三頁而不是第五頁，由於我這一開始是根據下標去判斷是問卷的第幾頁的。當時糾結了一下，後來用一個數組記錄了下標，經過上一步下一步去維護這個像棧同樣的數組。
上一步下一步的相關代碼：

if(step === 1) {
          for (let question of this.currentPage && this.currentPage.questionList) {
            let flag = false
            let isRequired = false
            if (question.optionList) {
              for (let optionItem of question.optionList) {
                if (optionItem.checked) {
                  flag = true
                }
                if (optionItem.ifRequired) {
                  isRequired = true
                }
              }
            }
            if (!question.optionId && !flag && isRequired) {
              Toast.start({
                info: '請填完全部的選項',
                type: 'error',
                time: 1500
              })
              return false
            }
          }
          if (this.currentSteps === this.MaxPageCount || this.currentPage.pageRedirectType === 'CUSTOM_CONTENT') {
            this.save()
            return false
          }
          if (this.currentPage.pageRedirectType === 'CUSTOM_OPTION') {
            for (let [index, pageItem] of this.questionPageList.entries()) {
              if (this.pageId === pageItem.pageId) {
                this.currentSteps = index
                return false
              }
            }
          }
          if(this.currentPage.pageRedirectType === 'CUSTOM_PAGE') {
            for (let [index, pageItem] of this.questionPageList.entries()) {
              if (this.currentPage.pageRedirectPageId === pageItem.pageId) {
                this.currentSteps = index
                return false
              }
            }
          }
          this.currentSteps = this.currentSteps + 1
        } else {
          this.stepsArr = this.stepsArr.slice(0, -1)
          this.currentSteps = this.stepsArr.pop()
        }

總結

這個問卷需求作下來，其實有一些本身沒有考慮好。當初技術討論的時候，咱們leader問我問卷是一頁一頁提交仍是一塊兒提交，當時腦子瓦特了沒考慮那麼多，就選了一塊兒提交。畢業也有一年了，但願本身不要盲目自信，多總結經驗，多沉澱本身的技術。多向大佬學習。另外碼字不容易，但願你們點個贊。前端路漫漫，與君共勉之。