今天教大家用中繼器做一個(gè)知識(shí)競(jìng)賽/答題app的原型，該原型使用方便簡(jiǎn)單，制作完成后，所有交互都已經(jīng)設(shè)定好，您只需要在中繼器中導(dǎo)入問(wèn)題、答案、每題的分?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）回答正確：回答正確時(shí)，顯示答案顯示綠色，自動(dòng)得分

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

（3）超時(shí)：右上角有倒計(jì)時(shí)，超時(shí)沒(méi)作答，自動(dòng)顯示對(duì)和錯(cuò)誤的答案，本題不得分

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

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

（6）再來(lái)一局：可刷新重新完成

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

使用方法：

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

question：填寫問(wèn)題

answerA-D：填寫ABCD的答案

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

goal：該題的得分

3. 制作方法

3.1 制作手機(jī)外框

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

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

3.2.1 中繼器表格制作

如下圖所示，總共7列：

question：?jiǎn)栴}

answerA-D：ABCD的答案

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

gaol：如果答對(duì)了，每題得分多少

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

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

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

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

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

3.2.4 答案按鈕交互

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

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

3.3 評(píng)分制作

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

3.4 彈窗

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

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

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

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