Axure 实现问卷调查（带计时器功能）

工具：Axure 8

步骤：

1. 拖出一个动态面板

1.1 方法：

1）拖出一个矩形，右键转换为动态面板

2）直接找到动态面板，鼠标左键按住拖出即可，并为动态面板赋值ac

1.2 双击动态面板，进入state1

添加一个按钮 button，一个矩形，并在按钮中写入开始答题，返回 index

可以看到如下：

2.创建问题中继器和答案中继器

2.1 搭建内容

左键拖出中继器即可，并分别为中继器命名qt（问题question的缩写，也可以根据自己喜好来命名），da(答案)
（1）对于qt

双击中继器，可以看到左上角有一个矩形，先不管。
点击空白可以看到右边栏检视为中继器，点击属性，直接在中继器中添加列和行。
下图中
3每项加载时这个先不管，因为我之前已经弄好了这个，所以有许多配置事件，这会在之后讲解。
4id（列名）
5qut（列名，表示个种问题）
这里说一下，中继器是数组存储数据的。（我其实也不太了解）
6把勾去掉
下图中
2“隐藏”这个是把中继器内容隐藏起来，可以试试效果。
3是多页显示，每页显示一个问题。

(2)对于da
双击中继器，同样看到一个矩形，这里删除这个矩形，并拖进来一个单选按钮，放在左上角，并给单选按钮取个名字，鼠标点击单选按钮，可以在右边栏看到检视为单选按钮，我这里取名 da_danxuan

下图中
3 先不看，
4 id表是每个题号，在之后的每页显示问题和答案时关联问题和答案。
一个问题总不能显示所有问题的答案，对吧。这个在之后讲。
注意：一个问题几个答案，那么就应该有几行，看图中问题1有5个选项，就应该有5行，id都相同，其中dax这列不同。
5 dax是一个问题的各种答案
6 xfen表示每个答案对应的分数

2.2 如果没有隐藏中继器的话，可以看到中继器qt中显示1，而da中显示多行单选按钮（大致相符就行，因为我也是回想的），怎么回事？因为没有给中继器内容赋值。

下图
1.回到qt中继器
2.点击属性
3点击每项加载（应该有默认的），
4设置文本
5配置动作，为qt中的矩形（就是双击中继器之后左上角的矩形，我命名为wt）
6设置文本内容为 [[Item.qut]]，其中qut为中继器问题这一列的名字。这个动作是把中继器这一列给选出并写在矩形中（因为一页显示，所以只展示一个问题）

2. 下图
1来到da中继器
2属性
3双击每项加载时转到左边弹出框
4设置文本
5.设置值为[[Item.dax]]
啊，忘了设置数字了！！！没事，和上面差不多。
然后多了个if 语句，这是这个Case是否运行的条件，点击编辑条件，选择元件可见就出来了。

2.3为动态面板 ac 中的矩形（开始答题）添加条件

这里添加筛选，随便去个名，[[Item.id==‘1’]]是指答案中继器id为1这些行，也就是问题1的答案。

上面设置panel为。。。这个是设置计时器用的。与这里无关。

3. 下一题这个按钮，当前得分面板

点击下一题能够选择下一个问题和对应答案。
同样拖出一个按钮并写上下一题，为之取名 nt

拖出一个动态面板，取名defen
双击进入state1, 添加一个矩形并写入得分：，添加另一个矩形并取名 fen
点击项目，全局变量，点击 + 添加一个全局变量 temp_fen，删掉默认全局变量，为temp_fen 赋上默认值0
回到da中继器，双击进入，回到单选按钮
为单选按钮添加事件，设置 temp_fen的值为每个选项的分数，为什么选择选中改变时？悟。这样每次选中时就能得到选项分数。
为 nt 添加条件
添加条件：当问题的页数小于14（我的问题数14个），temp_fen ！=-1用来判断是否点击了选项，因为我的问题答案分数都大于等于0
其中pageIndex是当前为多少页

然后设置得分动态面板（defen）中的fen这个矩形显示当前分数，
值为[[Target.text+temp_fen]]，意思是之前得到的分数和选项的分数之和

设置点击下一题就使得问题显示下一个。

移除da中继器所有的筛选，记得在之前有过添加筛选 [[Item.id==‘1’]]用来设置答案id为1的这个。
现在比如我们要显示第二个问题就不能是这个筛选了。

添加筛选。
之前移除了筛选，那么显示答案就会一股脑显示出来，这肯定不行。

当已经到最后一个问题时

这里全局变量已经没有用了，因为时最后一个问题，之后就没有答案选项了。
这里把ping（这是评论，应该在之前设置的，这里因为之前自己弄好了，就待会再设置吧，设置完了再来这里配置动作）

当然，最后一个题，按钮里面的文字应该为完成。

4.设置评论动态面板

同样拖进一个动态面板，取名ping,双击添加state，你有几种评论就几个state，把每个state分别取名0，60，80，100表示0-60，60-80，80-100，100以上。

点击动态面板，添加动作，四个类似。

如果设置了隐藏，就得再一些地方把他显示出来。比如我把评论隐藏起来，然后再nt（下一题按钮）最后一题做完就显示出来。
这些自己完全有能力弄出来，就不细讲了。

5.设置一个轮播图（完全可以不需要）

再 index 页面，拖进一个动态面板，取名title，添加几个state，每一个state中拖进一个图片，点击图片就会要你导入图片，选中要导入得即可。
然后再回到 index，点击空白处。
设置页面载入时动作。

6. 计时器

拖进一个动态面板，取名panel，设置两个state，用于状态转换，
拖进两个矩形，分别取名minute,second，用于显示分，秒
添加全局变量timer,用于计时，默认值为0
添加全局变量pingfen, 默认值为0
点击panel，添加“状态改变时”动作。
我的想法：在问题回答完计时，回答完后计时器停止，所以添加了一个全局变量，pingfen, 默认值为0，当点击nt（此时内容为完成）后pingfen=1
用来判断是否使计时器停止。
其中问题是否回答完：用 qt.pageIndex来判断。
设置秒值为：[[timer%60]] 秒
设置分值：用时[[Math.floor(timer/60)]]分
其中 Math.floor()函数为向下取整函数
然后，设置timer+1
最后，设置当问题回答完毕之后计时器停止
这里，minute改了一点，用时改成了共用时
timer没了加1
在 nt 添加动作

下载地址

GitHub

欢迎积分下载