menu search

Project Elysian

Aug 10, 2017

学校电脑课的考试方法与其他的科目不同,卷子上的题目完全由学生出。每单元结束后学生得自己想出制定数量(一般是5 - 10个)的选择题,并提交到老师的服务器上。

然而这个页面那是真的糟心,是老师好几年前手写的,遇到的问题有:

  • 每次提交后个人资料(名字,班级)并不会保存,得重新输入一遍 * 10
  • 没有过滤HTML标签。学生倒是不会无聊搞XSS,但是不小心输入个<html>整个页面就gg
  • 后端服务器是Hostinger,时不时就抽风

页面的样式问题就不多说了,几年前的页面不能要求太多,能用就行。

久而久之也领悟出了点技巧,例如提交后按返回就可以保存表单数据。


正好今年全校用上Google Apps for Education,加上 Firebase Authentication,完全可以做到一键登陆,无需再输入资料。

同时还有Firebase Database加持。当时我脑子里就想我完全可以写一个新的替代品。

说干就干,一开始用的是Firebase SDK 加上 jQuery就直接上了,但是越写问题越多:

  • 管理元素真烦,ID记不住
  • 代码又臭又长
  • 无法把页面模块化,需要在多个组件内共享数据

于是我就把目光转移到了现在火的不行的MVVM框架。我当时也没怎么想,就选择了Vue。现在认为很有可能是被V2EX上的一堆Vue吹给影响的 (

用了之后整个人都好了,终于可以不用记一堆ID了,绑定事件也只不过是给HTML标签加个:bind属性。而且还有一堆与Firebase相关的库,省了我好多时间。

也懒得自己写前端样式(脚本的逻辑就有我烦的了我怎么可能去写样式🌚),用了Vue Material这个框架,目前还没遇到什么大坑,自带的组件也满足我的需求。

目前实现的功能有:

  • 按年级 - 单元分类问题
  • 提交问题
  • 考前测试
  • 发布试卷
  • 查看自己的成绩,发布过的问题

Project Elysian

开发这个项目最让我感到欣慰的是我完全不需要兼容旧浏览器,只要Chrome桌面能用就行。

但微机室的电脑的时间都不知道为什么,全部都是错的,不是提前就是延迟。像我每天用的那台都延迟一个礼拜了。

多次反馈给老师,但都没改,理由是他们也不知道管理员密码

时间错乱带来的第一个问题就是SSL链接不成功,在开启的HSTS的网站上直接没法用了,例如Google。

再有就是内置的Chrome版本全是49。学生账号上开了自动还原,每次登陆都得重新升级。

不过这还好,Chrome 49 上访问项目并没有出现什么大的问题,就是有些我用到的CSS属性不支持,例如position:sticky

(反正明年开始人手一台Chromebook,自动升级最新版本,去你的兼容性)


用Vue重写的那个版本一开始感觉还不错,但我因为没有经验,犯了几个错:

  • 把大量数据都存放在$root
  • 模块化还不够,尤其是考试的页面,我把 [Index, InProgress, Results] 这三个视图全写一个文件里面了,完全不能看。而且,如果想要自定义每一个视图的URL…

第二个问题是最让我烦的,于是就有了重写的想法。当然也不是完全的重写,只是把一些看着不爽的地方改改。(占了大部分)

虽然我不觉得这项目会有人看,但还是给挂GitHub上了:Elysian

曾经给老师看过重写前的版本,似乎印象还挺好。但我自己觉得如果要正式投入使用还有几个问题:

  • 老师没一个会JS的
  • 我离校后,出现问题怎么办

这两个问题不解决,想上线我觉得好悬…

Comments

edit x send markdown image
paragraph comment heart