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

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）自動記分：記錄每一題的得分，每一題分數可以在中繼器內設置

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

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

（7）返回：關閉該頁面

使用方法：

在內容中繼器內，填寫問題、答案和每一題的得分即可！其他效果預覽時自動實現

question：填寫問題

answerA-D：填寫ABCD的答案

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

goal：該題的得分

3. 制作方法

3.1 制作手機外框

可以在網上手機外框的素材，如下圖所示：

3.2 中繼器內制作

3.2.1 中繼器表格制作

如下圖所示，總共7列：

question：問題

answerA-D：ABCD的答案

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

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

3.2.2 中繼器內原件

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

3.2.3 中繼器交互設計

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

中繼器內多頁顯示，每頁顯示一條。

3.2.4 答案按鈕交互

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

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

3.3 評分制作

在手機做一個文本框，用來記錄分數，默認為0，在上面答案按鈕鼠標單擊時，如果答案正確，設置該文本框的分數的值=該文本框的分數的值+goal的值。

3.4 彈窗

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

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

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議