答題測(cè)試的H5作為不少商家活動(dòng)的首選類(lèi)型，需求自然就很大。學(xué)員們需要知道的是，答題測(cè)試按功能層面又分為根據(jù)趣味測(cè)試、問(wèn)卷調(diào)查兩大類(lèi)型。
- 趣味測(cè)試H5：根據(jù)得分獲得不同結(jié)果，用戶(hù)活動(dòng)營(yíng)銷(xiāo)
- 問(wèn)卷調(diào)查H5：統(tǒng)計(jì)答題人的選項(xiàng)/得分，用于數(shù)據(jù)收集
本期教程主要是向大家介紹一種簡(jiǎn)單的【趣味測(cè)試H5】的教程。
我們使用的H5工具為意派Epub360
教程里用到的主要的組件是圖片按鈕組件、測(cè)試題組件和參數(shù)變量組件。希望學(xué)員們通過(guò)本篇教程都能掌握這幾個(gè)組件使用方法并能獨(dú)立制作出來(lái)。
測(cè)試題組件作用：與圖片按鈕組合完成用戶(hù)選中時(shí)單選的狀態(tài)圖片按鈕組件作用：與測(cè)試題組件組合完成用戶(hù)選中時(shí)單選的狀態(tài)參數(shù)變量組件作用：統(tǒng)計(jì)用戶(hù)每題的得分并求和，可作不同得分顯示不同元素的觸發(fā)
在開(kāi)始之前，老樣子，我們先預(yù)覽一下本期的教程的案例效果
（不能放二維碼，所以這里放一個(gè)GIF演示）
教程開(kāi)始之前，我們先介紹一下使用的主要測(cè)試題組件和它的能力：
喏，它長(zhǎng)這樣，測(cè)試題組件可以添加多個(gè)圖片按鈕作為選項(xiàng)
- 可實(shí)現(xiàn)單選的效果，如多選可不綁定測(cè)試題組件
- 可單獨(dú)設(shè)置每個(gè)選項(xiàng)的得分，也可以設(shè)置ABCD選項(xiàng)內(nèi)容，可配合數(shù)據(jù)庫(kù)收集用戶(hù)選擇的選項(xiàng)情況
- 可設(shè)置正確答案選項(xiàng)
- 可設(shè)置當(dāng)用戶(hù)選擇正確/錯(cuò)誤選項(xiàng)觸發(fā)事件，比如播放正確的音效和圖片等可設(shè)置選擇結(jié)束時(shí)觸發(fā)事件，比如我們常用選擇結(jié)束時(shí)加分還是減分，或者跳轉(zhuǎn)到下一頁(yè)。
下面我們就開(kāi)始教學(xué)吧，很詳細(xì)，相信您看完都能做出來(lái)。
1.第一頁(yè)是一個(gè)輸入用戶(hù)姓名的頁(yè)面，我們新建一個(gè)頁(yè)面，添加高級(jí)組件-高級(jí)表單里的“輸入框組件”，再添加一個(gè)全局變量和開(kāi)始測(cè)試的圖片按鈕，將全局變量命名為“姓名變量”，調(diào)整類(lèi)型為“文本”，圖片按鈕上設(shè)置點(diǎn)擊時(shí)“設(shè)置參數(shù)值”和“跳轉(zhuǎn)頁(yè)面”，設(shè)置參數(shù)值為全局變量=輸入框，跳轉(zhuǎn)頁(yè)面為下一頁(yè)，詳細(xì)面板見(jiàn)下；
注：第二頁(yè)是答題頁(yè)分為5個(gè)步驟講解（2-6步）
2.第二頁(yè)為答題頁(yè)，我們?cè)谧髠?cè)頁(yè)面面板處右擊再新建一個(gè)空白頁(yè)面，需要添加圖片按鈕，我們選中按鈕的時(shí)候可以使用鍵盤(pán)上control+C+V的方式復(fù)制其余的三個(gè)按鈕，點(diǎn)選圖片按鈕右側(cè)面板上傳替換自己的選中和未選中的圖片；
3.圖片按鈕的初始狀態(tài)和激活狀態(tài)圖片替換好后，我們?cè)诠ぞ邫谏系母呒?jí)組件-交互組件下面添加測(cè)試題組件，接著我們可以添加“題目圖片”和“確定按鈕圖片”到畫(huà)布上；
4.我們點(diǎn)選左側(cè)邏輯小面板的“測(cè)試題組件”，在右側(cè)面板添加四個(gè)圖片按鈕為選項(xiàng)并設(shè)置為每個(gè)選項(xiàng)設(shè)置分值（比如選項(xiàng)C是對(duì)的，我們給選項(xiàng)C為1，其余設(shè)置為0），接著設(shè)置其中一個(gè)為“正確答案”，觸發(fā)器上設(shè)置選擇結(jié)束后觸發(fā)“顯示元素”，這里顯示的是下面那個(gè)“確定”圖片元素（它需要初始隱藏，第六步有說(shuō)明）；
5.我們點(diǎn)擊左上角的頁(yè)面層級(jí)，切換到Masterpge里，在上方工具欄高級(jí)組件-邏輯組件里面找到“參數(shù)變量”，選擇添加到畫(huà)布上，給這個(gè)變量命名為“總分”，并設(shè)置為等待觸發(fā)，點(diǎn)擊小“+”號(hào)，添加三個(gè)觸發(fā)條件，我這里添加的是總分≤2，3≥總分≥4，總分≥5三個(gè)觸發(fā)條件；
6.我們點(diǎn)擊左上角的頁(yè)面層級(jí)，切換到頁(yè)面里，點(diǎn)選“確定”圖片元素，右側(cè)面板勾選“初始隱藏”，觸發(fā)器上設(shè)置點(diǎn)擊“設(shè)置參數(shù)值”和“跳轉(zhuǎn)頁(yè)面”（注意順序，跳轉(zhuǎn)頁(yè)面一定要在最后一步執(zhí)行，上面的觸發(fā)事件才不會(huì)失效），設(shè)置參數(shù)值和跳轉(zhuǎn)頁(yè)面的詳細(xì)設(shè)置面板見(jiàn)下圖；
7.我們按照第二步到第六步的方法，接著制作剩下的四個(gè)頁(yè)面
8.新建一頁(yè)作為結(jié)果頁(yè)，我們把成績(jī)單圖片元素添加到畫(huà)布上，接著添加一個(gè)段落文本組件，命名為姓名。在這頁(yè)的頁(yè)面觸發(fā)器上設(shè)置切換到當(dāng)前頁(yè)時(shí)設(shè)置參數(shù)值和執(zhí)行參數(shù)判斷，把姓名的全局變量賦值給用來(lái)顯示姓名的段落文本，執(zhí)行參數(shù)判斷上執(zhí)行的是Masterpage上總分的判斷；
9.測(cè)試題案例大體上做好了，我們可以預(yù)覽下看看。
當(dāng)然，這里只是一種思路。有的項(xiàng)目不同得分不同結(jié)果的視覺(jué)上相差很大，這樣的話我們可以采用多個(gè)結(jié)果頁(yè)，比如總分參數(shù)≤2時(shí)跳轉(zhuǎn)結(jié)果1頁(yè)面，3≤總分參數(shù)≤4跳轉(zhuǎn)結(jié)果2頁(yè)面，總分參數(shù)≥5時(shí)跳轉(zhuǎn)跳轉(zhuǎn)結(jié)果3頁(yè)面這樣的邏輯方式實(shí)現(xiàn)，另外，執(zhí)行參數(shù)判斷的觸發(fā)也不應(yīng)該在結(jié)果頁(yè)觸發(fā)，而是應(yīng)該在上一頁(yè)的“確定按鈕”上去設(shè)置。
注意事項(xiàng)：
1.按鈕上點(diǎn)擊跳轉(zhuǎn)頁(yè)面觸發(fā)應(yīng)該設(shè)置在最后，因?yàn)樘D(zhuǎn)頁(yè)面后面的觸發(fā)動(dòng)作可能會(huì)失效；
2.如果結(jié)果需要顯示得分，可以把masterpage上總分參數(shù)賦值給一個(gè)段落文本來(lái)顯示；
3.輸入框?yàn)閷?zhuān)業(yè)版功能，體驗(yàn)版可用段落可編輯的方式替換；
好了，本期的測(cè)試題教程就到這里了，更多教程可以到意派Epub360教程中心查看。