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>标签之间（页面显示的内容都在此定义）

login.html中的<body>部分

[注]图中的标签中的灰色代码都是注释，不会对界面起作用

可以看到“姓名”、“性别”等已经设置好的代码，现在需要生成一个测试者编号的输入框，跟姓名的代码完全一样，只需要将label标签中的“姓名”改成“测试者编号即可”,现在代码变成了这样：

修改后的代码

修改后再次打开程序，可以看到“测试者编号”输入框已经出现了~是不是很方便呀~

添加“测试者编号”输入框后的界面

现在输入框虽然加上了，但是还是徒有其表，因为它根本没法保存数据，保存数据需要修改页面内的JavaScript代码（简称JS）。简单来说，html代码（<body>标签中的内容）就是来画界面的，而JS代码（<script>标签中的内容）是用来为界面添加功能的。

JS代码中保存数据的函数

上述代码中的global.name是一个全局变量，用于保存姓名信息，其他的变量以此类推。以global开头的变量能够在页面跳转之后保持内容，我采取的策略是在login界面中保存用户输入的基本信息，在end界面将基本信息写入文件中。

下面我们来修改一下保存信息的代码，将新添加的“测试者编号”也保存到global中。

保存内容的语句格式为global.name=$("#name").val();等号的含义是“赋值”，即将右边的内容保存在左边的内容中。$("#name").val()是jQuery选择器的写法，含义是选取id为name的html控件的内容。

观察刚刚我们复制的“姓名”输入框的代码，其中就有id="name"。那么“测试者编号”这个输入框的id就不能为name，我们将它更改为id="id"。

更改后的html代码

然后在JS代码中输入一行global.id=$("#id").val();就可以将“测试者编号”输入框中的内容保存在global.id中了，如何知道是否保存成功了呢？可以在后面加上一个语句alert(global.id)，alert函数的功能很简单，就是弹出一个对话框，将括号里的内容显示在对话框中，最终修改后的代码是这样的：