QSA项目Readme文档

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

login.html中的部分

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

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

修改后的代码

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

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

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