今天教大家用中繼器做一個知識競賽/答題app的原型，該原型使用方便簡單，制作完成后，所有交互都已經(jīng)設(shè)定好，您只需要在中繼器中導(dǎo)入問題、答案、每題的分?jǐn)?shù)即可完成！

1. 效果展示

在線演示地址：http://cloud.axureshop.com/l2jd3n/#g=1&p=%E7%9F%A5%E8%AF%86%E7%AB%9E%E8%B5%9B

2. 功能介紹

（1）回答正確：回答正確時，顯示答案顯示綠色，自動得分

（2）回答錯誤：回答錯誤時，選擇答案顯示紅色，然后在顯示正確的綠色答案，不得分

（3）超時：右上角有倒計時，超時沒作答，自動顯示對和錯誤的答案，本題不得分

（4）自動記分：記錄每一題的得分，每一題分?jǐn)?shù)可以在中繼器內(nèi)設(shè)置

（5）自動評星：滿分5星，80-99%4星，60-79%三星，40-59%二星，20-39%一星，0-19%沒星。上面分?jǐn)?shù)指的是百分比分?jǐn)?shù)，即得分/總分

（6）再來一局：可刷新重新完成

（7）返回：關(guān)閉該頁面

使用方法：

在內(nèi)容中繼器內(nèi)，填寫問題、答案和每一題的得分即可！其他效果預(yù)覽時自動實現(xiàn)

question：填寫問題

answerA-D：填寫ABCD的答案

right-answer：填寫哪一個是正確答案（ABCD）

goal：該題的得分

3. 制作方法

3.1 制作手機外框

可以在網(wǎng)上手機外框的素材，如下圖所示：

3.2 中繼器內(nèi)制作

3.2.1 中繼器表格制作

如下圖所示，總共7列：

question：問題

answerA-D：ABCD的答案

right-answer：哪一個是正確答案,填寫ABCD

gaol：如果答對了，每題得分多少

3.2.2 中繼器內(nèi)原件

一個題目文本框、4個答案的按鈕，如下圖所示拜訪即可。

3.2.3 中繼器交互設(shè)計

中繼器每項加載的時候，設(shè)置題目文本框的文本=question.text，answerA-D：ABCD的文本=answerA-D.text。

中繼器內(nèi)多頁顯示，每頁顯示一條。

3.2.4 答案按鈕交互

4個答案的按鈕可以根據(jù)自己的喜好制作。交互樣式中設(shè)置選中顯示綠色，禁用顯示紅色。

鼠標(biāo)單擊時：做判斷，如果正確答案和點擊的答案一致，選中該答案按鈕，如果不一致，禁用該答案按鈕。

3.3 評分制作

在手機做一個文本框，用來記錄分?jǐn)?shù)，默認(rèn)為0，在上面答案按鈕鼠標(biāo)單擊時，如果答案正確，設(shè)置該文本框的分?jǐn)?shù)的值=該文本框的分?jǐn)?shù)的值+goal的值。

3.4 彈窗

按自己喜好做一個彈窗，然后在上面答案按鈕鼠標(biāo)單擊時加一個事件，如果該行時中繼器最后一行，顯示彈窗，并且讓彈窗里的分?jǐn)?shù)=上面記錄分?jǐn)?shù)的文本。

這樣就制作完成了，以后使用，僅需簡單填寫中繼器的內(nèi)容，即可自動生成，所以強烈推薦給各位使用。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議