五種愛的語言評量表

1. 本文表單製作源自於多年前中國主日學協會主日學老師馬秀蘭傳道為教學需要邀請製作，目的是讓所有來上課學員可以直接用手機線上測驗，當下以為簡單就用EXCEL製作後，再轉換Google雲端試算表發布到網路崁入網頁即可。實則不然，原來Excel製作時必須使用巨集指令來判斷與計算分析測驗結果，但是轉換至Google的試算表時，此試算表沒有巨集指令功能，所以當時辛苦設計的Excel測驗表單，無用武之地(只能離線開啟office的EXCEL來做測驗，無法滿足手機線上開啟測驗)，故被晾在一邊。這是2017年初的事。
2. 當下只好另覓它路找尋可用的表單外掛程式或是可以直接崁入Excel的外掛程式，找是找到了，同樣無法接受有巨集指令的功能，而一些表單外掛也只是簡單的資料輸入輸出，要用於設計較複雜的計算功能就GG了！辛苦多日宣布放棄！因為一時找不到替代方案！
3. 當然任何功能只要想得出來，電腦程式就可以寫得出來，只是一些網頁表單功能+計算及分析判斷，一時之間就是寫不出來，就如設計師在設計一棟房子，可以知道使用哪些品牌種類的鋁門窗、家具及其他各式元件來組合或客製化，但你要叫他從鋁門窗的材料重新配件顏色、材質或是從新燒製磚頭或隔間材料，這就不是當下做得到的事！
4. 拜科技進步、表單設計也大躍進，近幾年一些簡單實用表單的外掛程式紛紛出籠，有WP外掛程式如：Formidable Forms、Calculated Fields Form、EZ Form Calculator、Responsive Mortgage Calculator、Cost Calculator、Cost Calculator Builder、Stylish Cost Calculator等等，或是第三方的線上表單，如：Jotform及Cognito Form、SurveyCake及Google線上表單等等，這些表單設計都是因應線上計算購物車總價、折扣或問卷調查、線上測驗及複雜計算而誕生，確實好用！
5. 而最近(2021.10)網頁設計因幫客戶客製化表單需求(匹茲堡睡眠品質量表)，超複雜邏輯判斷及數字分析，當下沒能把握達成任務，只能努力前進，有時也差點想放棄(過程有些難度與挑戰)，並極辛苦花了數週時間找到合宜外掛經多次測試後終於大功告成，當下是有多喜樂啊！故想到幾年前叫我製作的線上表單(五種愛之語)，立馬藉此表單兩天內搞定，又快又好又完全滿足需求，本文測驗表單就是這麼因緣下完工，了卻前幾年無法達成的憾事，當然過程也不容易就是！故後記紀錄相關過程與內容以助讀者利用！
6. 本表單使用第三方的Cognito Form製作，以電郵註冊申請後，即可免費使用(付費會有更多功能)。初測試進入此線上表單製作時，乍看也是功能陽春的幾個簡單一般必備表單選項功能，比同類型的線上表單Jotform少很多，要不是經由Google找尋Calculate功能，我也不知有此Cognito Form。而Jotform我已註冊使用多年，有其方便好用性，在衡量諸多可用的計算及問卷型調查等表單後，個人覺得Cognito Form能滿足個人客製化需求！當然Jotform、SurveyCake及Google線上表單都很強大，端看設計需求，各有優勢可多加嘗試運用。
7. 從wordpress.org的外掛以calculate form關鍵字找尋也可找到一堆相關外掛，當然是否合乎需求就得一一測試，我就是先從這些外掛中一一安裝及移除多次測試後，沒有符合，比較接近的有Calculated Fields Form這個外掛，但光看其後台設定與短碼畫面，又是頭大！但其下載使用者卻超過六萬人次。
8. Cognito Forms也是有在上述外掛名單中，下載安裝使用者只有5千人上下，其實安裝此外掛後才發覺，有裝與沒裝沒啥差別，因為沒有可進入設定的地方，那安裝此外掛要幹嘛？就除了在編輯器會出現圖示可以點選插入所要的表單而已！建議還是移除此外掛(難怪安裝的人不多)，惟不論裝不裝外掛，終究要進入該官網註冊使用線上表單來設定，設定好並建立(built)所需表單功能後，可以存檔並publish，再從此publish中找到可分享的連結表單網址，或可崁入的程式代碼(iframe或script)貼入網頁中即可。
9. 本表單以Cognito Form建立，使用如下圖左的表單功能(紅框部分)，每題的測驗是選擇Choice功能(下圖右)，再點選TYPE的Radio Buttons，Choice Options勾選Assign Values，為要產生測驗內容的value，用以最後計算所選的項目數量，Value值是自行設定的，可以訂定A=1、B=2….E=5，惟最後的計算就是以自行定義的Value值來判斷A有幾個？B有幾個？…E有幾個？(如下圖右藍框，藍框為表單的Calculation功能)

10. 使用此Cognito表單最關鍵的就是Calculation功能，一般簡單表單(姓名電話地址之類的)只是傳送文字數字，但要帶有計算數量或判斷大小等，就要數學公式計算了！這就是此表單Calculation的強大功能地方，所以重點就是如何設定判斷數學式了！
11. Calculation的數學計算判斷公式該如何設定，可以直接寫信問客服或查詢Cognito官網有更詳細訊息可參考！
12. 茲將本表單需用到的Calculation功能的計算判斷公式，整理如下以便其他運用參考！(而Label或Field Name為隨意自訂的中文或英文名稱，方便記憶與設定計算，非內定代稱)

說明：底下橘色代碼為Calculation的Label或Field Name，可以中文或英文，實際用於計算判斷式的代碼是Field Name，而C1A、C1E就是問題1的題目被點選的判斷式Field Name，其他還有C2至C30之判斷式未有全部列出，只列出代表；而A合計及B合計也是另一個 Calculation的Field Name，用來加總ABCDE共有幾個，而最大值MAXABCDE為計算ABCDE的最大值，即為主要愛之語的分數，而要將此最大數字轉換成文字顯示，故又再設定一個Calculation的Field Name為”主要愛之語” ；而ABCDE的選項總分數有可能相同，故此最大值若有兩個分數相同，表示你是「雙語的」（有兩種主要的愛的語言），故又再多設定雙語愛之語A、B、C、D、E，用以判斷同分情況並以文字顯示：如同分有AB兩個，則會顯示主要愛之語為”肯定的言詞+精心的時刻 “，若有同分數三個，也會顯示三個主要愛之語。

C1A
=if NO1_Value=1 then 1 else 0
C1E
=if NO1_Value=5 then 1 else 0

A合計
=C1A+C7A+C8A+C10A+C11A+C13A+C15A+C18A+C22A+C24A+C27A+C29A+C30A

B合計
=C2B+C3B+C6B+C7B+C9B+C11B+C14B+C16B+C18B+C21B+C25B+C27B

最大值
MAXABCDE
=Math.Max(A合計,Math.Max(B合計,Math.Max(C合計,Math.Max(D合計,E合計))))

主要愛之語
=if MAXABCDE=A合計 then "肯定的言詞" else (if MAXABCDE=B合計 then "精心的時刻" else (if MAXABCDE=C合計 then "接受禮物" else (if MAXABCDE=D合計 then "服務的行動" else "身體的接觸")))

雙語愛之語A
=if MAXABCDE=A合計 and MAXABCDE=B合計 then "+精心的時刻" else (if MAXABCDE=A合計 and MAXABCDE=C合計 then "+接受禮物" else (if MAXABCDE=A合計 and MAXABCDE=D合計 then "+服務的行動" else(if MAXABCDE=A合計 and MAXABCDE=E合計 then "+身體的接觸" else null)))

雙語愛之語B
=if MAXABCDE=B合計 and MAXABCDE=C合計 then "+接受禮物" else (if MAXABCDE=B合計 and MAXABCDE=D合計 then "+服務的行動" else(if MAXABCDE=B合計 and MAXABCDE=E合計 then "+身體的接觸" else null))

13. 上述Cognito表單的Calculation功能，一般設於表單最後，並設定不顯示，而計算結果要顯示，就將該Field Name插入於送出後的結果頁面，可以在Submission Settings的Confirmation Message(如下圖左)中點選右上角的插入Insert Field，則會自動列出所有先前自定的全部Field Name供使用，點選後就會自動出現在Confirmation Message內容畫面上，再於此選中的Field Name前後加入所需要的中文字句或圖片，就完成完美的結果分析報告了！

14. 最後再用CSS美化此分析報告，就正式大功告成！而由於此Cognito表單是使用線上製作，除可直接分享此表單連結分享他人外，也可將代碼崁入自己網站頁面上，本網站崁入的代碼+CSS如下(紅色代碼是複製於線上表單上列的Publish功能；藍色CSS代碼是自行參照客服提示class+自行研究等所產生)：

<div id="form5">
<script src="https://www.cognitoforms.com/f/seamless.js" data-key="fFEFSICYKkebJOU0OQiJrg" data-form="5"></script></div>
<style>
#form5 .cog-5{--highlight: #6c00b5!important;--highlight-reverse: white!important;}
#form5 .cog-confirmation__message.cog-content.cog-html.cog-input h3 img { float: left!important;}
#form5 .cog-confirmation__message.cog-content.cog-html.cog-input h2{ color: red!important;}
#form5 .cog-confirmation__message.cog-content.cog-html.cog-input h3{ font-family: Helvetica!important;}
#form5 .cog-abuse.cog-wrapper{ display: none!important;}
#form5 .cog-branding.cog-branding--minimal {display: none!important;}
</style>