关于通过js实现试卷或作业的展示的思路

关于通过js实现试卷或作业的展示的思路

月光魔力鸭

2018-12-10 19:17 阅读 1083 喜欢 0 逻辑思路

最近有项目在处理作业方面的业务,这里简单记录下相关的一些思路,用于以后再遇到这样的问题可以找到方案。

需求

需求其实很简单,作业用于家庭作业,然后需要在web端将作业设置好,然后排版进行打印。

题目类型

类型目前只有一些简单的:单选、多选、判断、填空、问答、组合题目。 当然,单选、多选、判断都可以统称选择题,填空、问答可以称为问答题,至于组合题目则是前面几种的组合。

可能需要处理的问题

由于需要将作业打在A4纸上,所以需要对题目进行一些排版,起码要好看对吧,然后可能还需要一些设置,比如是一列的,还是两列的,是涂学号还是二维码,字体的大小,那么就延伸出更多的功能。

在排版上的处理,可以参考之前发布的jquery.print web打印jquery插件 这篇文章,里面主要讲的就是如何对页面进行一个A4排版的实现。

二维码还要考虑到如果打印后,再次打印,那么二维码还需要替换成新的,所以数据库要记录下序号,用于下次打印使用。

关于二维码的实现,这里就不讲了,比较简单,直接放个最终的代码看下就好。

String rst = "";
System.out.println(rst);

ByteArrayOutputStream os = new ByteArrayOutputStream();
Hashtable<EncodeHintType,Object> hints = new Hashtable();
hints.put(EncodeHintType.CHARACTER_SET,"utf-8");//字符编码utf8
hints.put(EncodeHintType.ERROR_CORRECTION,ErrorCorrectionLevel.M);//纠错等级:中级
hints.put(EncodeHintType.MARGIN,1);//图片边距
QRCodeWriter writer = new QRCodeWriter();
BitMatrix bitMatrix = writer.encode(content, BarcodeFormat.QR_CODE, 320, 320,hints);
BufferedImage bufferedImage = MatrixToImageWriter.toBufferedImage(bitMatrix);
ImageIO.write(bufferedImage,"png",response.getOutputStream());
response.getOutputStream().flush();

关于截图的问题,其实也算是另外的一个问题了。因为排版后还需要在移动端展示,做适配又很麻烦,直接用截图简单省事。 至于实现的话,可以参考HTML中dom转成图片进行存储这篇文章就可以啦。

这个问题,其实属于阅卷方面的问题,需要提供给阅卷端一个试卷上所有信息的位置和分布,用于阅卷端进行截图识别。

在目前的功能中,排版调整比较简单,只能针对问答相关的题目进行处理,可能出现的需求就是,问答题目可能需要的空白都不一样,甚至有可能跨页,所以提供了一个添加答题区域以及对答题区域进行拖动来扩展高度的小功能。

由于题目在创建的时候都是使用富文本来处理的,所以每个人添加的题目样式可能都不一样,在预览页面/打印页面,还需要对所有的富文本进行样式重置。当然,这个实现比较简单,不过要考虑多个方面而已。

结束。

以上大体上就是在作业预览过程中的思路实现。


顺便这里提一个小工具的实现,关于向富文本中添加字符串.

转载请注明出处: https://chrunlee.cn/article/js-homework-think.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
关于自动签到,之前也有过,感觉写过好多次了,有可能也重复了,不过这次是通过puppeteer来实现的,相对于之前的phantomjs 或 casperjs 或 request 等最起码会更简单些,也不用安装这么多稀奇古怪的东西。
新高考改革早已成大趋势,对于广大考生家长和考生来说,赋分一直难以理解,不理解赋分规则,为什么要赋分? 为此,百年育才莱西校区特对赋分进行介绍,供参考
最近在做在线阅卷相关的功能,根据一些常见的场景进行一些功能和业务分割理解,便于后续实现对应的功能。
各位同学下载软件后,如何操作?如何找到dat文件?如何使用?又有哪些注意事项呢? 这里会为大家一一道来。 微信dat怎么解码?手机内微信的文件越来越多怎么清理呢?哪些dat文件是有用的呢?在线dat转码帮你处理。
chrome css 下的 media=print 下的调试小技巧
虽说docker已经大名鼎鼎,但在之前一直都未上手使用过,即便是前一阵子想挂下京东的京豆(使用docker)也给耽搁了,一直的感觉就是这货应该跟vm没啥区别吧,应该就是更方便更好用更适合开发者。
最近入手一台小主机,把自己剩余的硬盘都加上去了,想着做个私有云..使用了owncloud,类似的文章很多,不过各有各的坑,当然我这个也肯定有坑,主要是各自的环境还不一样。