图书馆入馆考试自动答题(2012)

今年课业很闲,在新生群里认识了很多学弟学妹,其中不乏对技术很有兴趣的同学。于是打算找几个志同道合的一起做些小项目。

正好他们军训过后要参加图书馆入馆培训,培训之后需要参加一个在线测试,分数高于80分的才可以从图书馆借阅书籍。于是我把去年写的代码翻了出来,重新运行了一下,发现很多题目已经过期了,正确率已经不足40%。这是一个不错的信号——就拿这个小项目动手吧。

这次的目标是制作一个可以自动完成入馆考试的脚本,并提供一个网页供他人使用。

技术分析

图书馆通识测验地址 – http://210.34.218.48/exam/ (公网访问出奇的慢)

这是一个基于 asp.net 的在线测试系统,题目类型有:单选题、多选题以及判断题。最坑爹的地方在于——完全是用 .net 那套 updatePanel (Ajax) 来响应操作。每次点击一个选项,都要 ajax 通讯一次,把整个题目信息更新一遍。对于公网用户,平均响应速度几乎超过1s~幸好我是忠实的教育网用户。

对付网页版的在线测试,直接用 greasemonkey 脚本最方便了(但只支持firefox和chrome)。考虑到跨浏览器支持,还是决定采用比较小众的 js 注入法——通过浏览器书签(或地址栏)将外部脚本注入到当前页面。其余的所有操作就由 js 控制页面元素来完成。

iframe 的妙用

还有一个问题就是在线测试的不同题型分布在不同页面。当完成一种题型后切换到另一个页面,之前注入的 js 脚本就没了,需要重新注入一次。这大大加重了用户的操作负担,而且在使用教程上也不容易解释。后来想到一个取巧的方法,就是将被注入的页面自嵌到 iframe 里,通过控制 iframe 到实现自动页面切换:

/* 把网页放到浮动框架中 */
document.write('<iframe id="iframe" name="content" src="'+location.href+'" style="width:100%;"></iframe>');
/* 响应页面载入事件 */
frame.onload = function(){ /* do_something(); */ }
/* 跳转页面 */
function redirect(url){ frame.src = url; }
/* 得到页面信息 */
content.location.href;

注意到这里使用了 id=”frame” 和 name=”content” 。经过测试发现,通过 id 获取到的是 iframe 元素本身,可以响应各种事件,如 onload ;而通过 name 获取到的是 iframe 的内容——一个 window 对象,包含了被嵌入网页的所有信息。这样一来,就可以通过 iframe 做任何事情了。不过由于安全沙箱的限制,通常只允许对相同域名下的网页进行操作。但本例是通过 js 注入,所以安全沙箱也无法阻档,hah。

其实只要两行代码,就可以防止网页被嵌到框架里:可以参考阮一峰老师的这篇博客《防止网页被嵌入框架的代码》,如果管理员加了这个脚本的话,我就只能老老实实地分次 js 注入了。

updated 2012-09-26:经过测试确认 IE系列的浏览器不能响应通过这种形式创建的iframe的各种事件。

可行性分析得到的结果令我满意,接下来的工作就是收集题库了。由于这个测试系统允许无限次答题,并且每次答题结束后都会公布答案信息(其实只要直接访问测试结果的页面就行了)。所以只要多试几次,就能拼凑出大部分题目了。在这里感谢12级物联网专业的林智同学帮我整理了题库。

晚上花了两个多小时和林同学结对编程,终于把基本的功能实现了,录了一段视频让大家偿偿鲜,接下来将近一步完善并修复一些 bug,最后制作并发布一个公测页面。敬请期待 :)

[vsw id=”http://player.youku.com/player.php/sid/XNDU0MzI3MDI0/v.swf” source=”youku” width=”480″ height=”400″ autoplay=”no”]

updated 2012-09-26:

以上是使用定时器控制的答题情况。在实际使用中会出现很多问题,尤其是在宽带访问出现 ajax 更新延时,正确率严重下滑!于是我考虑能否通过响应 ajax 回调事件来进行答题控制。

updatePanel 之迷

由于对 Asp.Net 比较不熟悉,于是直接在 chrome 开发人员工具下跟踪调试了一个下午才找到用于响应事件的代码——Sys.WebForms.PageRequestManager 类,其中有两个方法 add_endRequest() 和 remove_endRequest() 可以自定义ajax请求结束时的回调函数。

Sys.WebForms.PageRequestManager.getInstance()
.add_endRequest(callback);]

但是通过 iframe 操作 add_endRequest() 时不知何时种原因 chrome 出现了异常:

iframe.Sys.WebForms.PageRequestManager.getInstance()
.add_endRequest(callback);

RangeError: Maximum call stack size exceeded

为了解决这个问题,我改用直接操作事件列表的方式来处理这个方法:

iframe.Sys.WebForms.PageRequestManager.getInstance()
._get_eventHandlerList()
._getEvent("endRequest", true)
.push(handler);

这样一来就可以知道答题操作后结果返回的确切时间了,在回调函数里决定接下来做什么就可以了。以下是效果预览:

[vsw id=”http://player.youku.com/player.php/sid/XNDU0Njc3NTY0/v.swf” source=”youku” width=”480″ height=”400″ autoplay=”no”]

跨浏览器支持

在 chrome 中,直接使用对象的 name 或者 id 即可以获取到对象;而在 firefox 中则建议使用 w3c 标准的 document.getElementById() 来获取对象,甚至没有提供使用 name 来获取对象的api,只有 document.getElementsByName() 获得对象数组。

为了快速移植脚本使其适应其它浏览器,我写了一个简单的 function 来获取对象。需要引用对象的话,将 iframe[“name_or_id_for_element”] 统一改成 getFrameElement(iframe, “name_or_id_for_element”); 即可:

function getFrameElement(frame, name_or_id){
 var element = frame.document.getElementById(name_or_id);
 if(!element)
  element = frame.document.getElementsByName(name_or_id)[0];
 return element;
}

现在脚本已经能很顺利地在 chrome/firefox/opera/safari 执行了。而 IE 则不能很好地处理 iframe 对象,所以暂时不考虑 IE 的自动答题脚本。这里提供了一个半自动版的演示,需要多次 js 注入:

[vsw id=”http://player.youku.com/player.php/sid/XNDU1MDA1ODcy/v.swf” source=”youku” width=”480″ height=”400″ autoplay=”no”]

另外,IE6 甚至没有提供 Array.indexOf() 方法,需要自己实现:

if(!Array.prototype.indexOf){
 Array.prototype.indexOf = function(val){
  var value = this;
  for(var i =0; i < value.length; i++){
   if(value[i] == val) return i;
  }
  return -1;
 };
}

接下来将着手开始制作公测页面,我考虑在网页上加入 kill ie6 代码:

Let’s Kill IE6 – https://code.google.com/p/letskillie6/

敬请期待~

updated 2012-09-27:

厦图答题神器公测地址已发布:http://xujc.sinaapp.com/library/ 欢迎同学进行测试 :)

[vsw id=”http://player.youku.com/player.php/sid/XNDU1MjEyMzQw/v.swf” source=”youku” width=”480″ height=”400″ autoplay=”no”]

图书馆入馆考试自动答题(2012)》上有2条评论

评论已关闭。