Readme文档
选用的技术及页面流程
选用的技术：
基础知识:HTML+CSS+JavaScript
UI设计:Semantic-UI Semantic UI 官方网站
界面逻辑:jQuery jQuery教程
文件读写、计时器:NodeJS NodeJS文档
xlsx文件读写:SheetJS的js-xlsx库 js-xlsx的Github地址
App框架:nwjs nwjs文档
如果需要大幅度更改程序的话，建议深入学习HTML+CSS+JavaScript和jQuery这两部分，推荐使用Brackets(开源、免费、是原来Adobe的项目，质量过硬，最重要的是好看)进行代码编辑
页面流程：
所有的界面用html实现，整个程序的流程可以概括为
index.html-->login.html-->welcome.html-->question.html-->end.html
即：首页-->信息采集界面-->测试前的界面-->选择选项界面-->测试结束界面
另外从首页可以进入批处理程序界面index.html-->batch.html
界面与界面之间的通信都是通过global中保存的内容进行。
如何在页面内增添其他想要采集的信息
以增添“测试者编号”为例：
打开源文件中的login.html文件，定位到<body></body>标签之间（页面显示的内容都在此定义）
[注]图中的<!-- -->标签中的灰色代码都是注释，不会对界面起作用
可以看到“姓名”、“性别”等已经设置好的代码，现在需要生成一个测试者编号的输入框，跟姓名的代码完全一样，只需要将label标签中的“姓名”改成“测试者编号即可”,现在代码变成了这样：
修改后再次打开程序，可以看到“测试者编号”输入框已经出现了~是不是很方便呀~
现在输入框虽然加上了，但是还是徒有其表，因为它根本没法保存数据，保存数据需要修改页面内的JavaScript代码（简称JS）。简单来说，html代码（<body>标签中的内容）就是来画界面的，而JS代码（<script>标签中的内容）是用来为界面添加功能的。
上述代码中的global.name是一个全局变量，用于保存姓名信息，其他的变量以此类推。以global开头的变量能够在页面跳转之后保持内容，我采取的策略是在login界面中保存用户输入的基本信息，在end界面将基本信息写入文件中。
下面我们来修改一下保存信息的代码，将新添加的“测试者编号”也保存到global中。
保存内容的语句格式为global.name=$("#name").val();等号的含义是“赋值”，即将右边的内容保存在左边的内容中。$("#name").val()是jQuery选择器的写法，含义是选取id为name的html控件的内容。
观察刚刚我们复制的“姓名”输入框的代码，其中就有id="name"。那么“测试者编号”这个输入框的id就不能为name，我们将它更改为id="id"。
然后在JS代码中输入一行global.id=$("#id").val();就可以将“测试者编号”输入框中的内容保存在global.id中了，如何知道是否保存成功了呢？可以在后面加上一个语句alert(global.id)，alert函数的功能很简单，就是弹出一个对话框，将括号里的内容显示在对话框中，最终修改后的代码是这样的：
运行程序，输入信息，点击开始答题：
注意，正式的程序中就不能出现很多alert()函数了，否则每个输入的内容都让用户点一遍“确认”会让用户累死的。我们可以在alert语句前加上//，表示这条语句已被注释，不会执行。
下面介绍如何在end界面将内容写入到文件中。
打开end.html文件的源代码，找到<script>标签中的WriteInfo函数，这个函数就是用来将内容写入到文件中的。
最终的结果是保存为JSON格式，我们只需要在var json={}的花括号内加入一个id:global.id即可
再次运行程序，完成答题过程，然后查看新生成的文件。
可以看到最后保存的信息中已经有了测试者编号的信息了。
在批处理程序中增加信息
刚刚在结果文件中写入了测试者编号，但是批处理程序还没法读取这个内容，我们需要修改batch.html中的内容
“process”是批处理按钮的id，这段代码就是按下批处理按钮触发的操作，我们将它修改为：
运行批处理程序，点开生成的out.xlsx文件，发现测试者编号已经加入
调整界面
调整选项图片大小
修改question.html中的JS代码，110行var style="height:300px";
修改数字300，重新启动程序，就可以看到图片的大小改变。为了正确显示比较长的图片，我们把图片的个数设置为适应窗口的大小，通过修改图片大小就可以实现一行显示4个、3个、2个等不同个数的图片。
我在最新的程序版本(1.1.0,在package.json文件中的"version"属性中可以看到)中加入了问题界面的刷新按钮。如下图所示
点击此按钮就会重新刷新这道问题，可以很方便的看到图片和字号调整的结果，如果出现了图片没有加载出来的情况也可以重新载入。
刷新按钮的原理很简单，就是一个指向自身界面的链接（做成了按钮的形状而已）
问题区字号调整
修改question.html界面中的第23行
将font-size:25px修改为其他不同的值，重新启动程序，即可看到效果。
修改窗口大小
窗口大小在nwjs的配置文件package.json中描述，我们打开package.json
可以看到"window"属性中有三个子属性"title","width","height"，它们分别决定了标题、窗口宽度和窗口高度。"main"属性指明程序运行后先显示哪个界面，其他的可以调整的属性请参考Manifest Format --NW.js
我们将width改为600,重新运行程序，发现窗口变成了正方形。
附录
