作品简述

为解决传统辩论赛UI丑、各系统相互割裂的问题,特开发此系统。
该套系统完全体包括:

  • 可定制的赛事计时器
  • 赛程、评委和辩手 管理后台
  • 赛程查看和无纸化提交分数的小程序
  • 赛后即时点对点反馈个人表现的辩力提升系统
  • 远程裁决的视频会议部分

系统一览

详细介绍

在当前的辩论赛事中,长期存在着五大问题,即如图:

五大问题
五大问题
  • 日程查看不直观
  • 计时器简陋不美观
  • 统计票数麻烦且不环保
  • 复盘数据获取困难
  • 优质裁判资源稀少

日程查看不直观

日程展示一直是个问题。

传统赛事中,日程展示通常都是以发送pdf的形式呈现,当参赛人员和观赛人员想要查看日程时,往往需要[打开QQ->进入赛事群->点开群文件->打开PDF->人工寻找对应日期的日程]

就算完成了上述步骤,日程文件往往也是一个字号小、信息繁复、不直观的PDF文件。寻找一个日程很麻烦且不适。

为了让参赛人员和观赛人员更直观的看到日程,特在小程序内设置此页面。

日程展示
日程展示

数据储存使用了微信的云开发。并设计了web端的后台页面,利用微信提供的API进行小程序端和web端的数据统一来在web端添加日程。

web端数据发送部分代码:

由于我只是一名大一的学生,不可避免的,我的代码会有大量不完整、不安全、不成熟的部分出现,还请各位见谅,本文中主要聊聊创意与简单实现。欢迎指正我代码中的问题,感谢各位谅解。

1
2
3
4
5
6
7
8
9
10
//./web部分/admin-battle-add.php
else if($motion=="addBattle"){
$title = $_POST["title"];
$loc = $_POST["loc"];
$time = $_POST["time"];
$teamClaimId = $_POST["teamClaimId"];
$teamCounterClaimId = $_POST["teamCounterClaimId"];
$res = $wx->databaseAdd("db.collection(\"battle\").add({data:{env:\"{$GLOBALS["env"]}\",title:\"{$title}\",status:\"0\",loc:\"{$loc}\",time:\"{$time}\",data:{teamClaim:{Id:\"{$teamClaimId}\",point:\"\"},teamCounterClaim:{Id:\"{$teamCounterClaimId}\",point:\"\"}}}})");
redirect("./admin-battle-query.php?id=".$res["id_list"][0]);
}

这里调用了我自己写的微信云开发简易SDK,可以在源码中./web部分/lib/WeChat.php找到。具体信息可以在本文后部分具体介绍中找到。

小程序部分代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//./小程序部分/Bam1/client/src/pages/schedule/schedule.js
componentWillMount () {
let {env} = this.$router.params;
Taro.setNavigationBarTitle({title:this.$router.params.cName});
Taro.setStorageSync("env",env);
let p = this;
let skpD = 0;
Taro.cloud.database({env:"factory-1"}).collection("other").where({
env: Taro.getStorageSync("env"),
isSkpD : true
}).get({
success: res1 => {
skpD = res1.data[0].skpD;
Taro.cloud.database({env:"factory-1"}).collection("battle").where({env: Taro.getStorageSync("env")}).skip(skpD).limit(12).get({
success:function (res) {
let idL = p.state.idList;
res.data.map((item,index)=>{
idL.push(item._id);
});
p.setState({
idList: idL
})
...
}

小程序部分,./小程序部分/Bam1/client/src/pages/schedule/schedule.js这部分代码主要是调用微信云开发的相关函数获取比赛ID列表。

在这个文件外,./小程序部分/Bam1/client/src/components/battle/battle.js是每一个日程card的组件。通过schedule文件向内传入id参数,在battle component内获取数据。

注意:这里存在一个并不合理的获取数据方式。我后来思考,在主界面一次性获取所有数据后,将数据交由battle component渲染应该可以得到更高的性能。但是当时时间有限,就没有修改。

计时器简陋不美观

其次,计时器的不美观问题,传统计时器如图:

传统计时器
传统计时器

显然,这种计时器与任何现代的设计思维都背道而驰,完全无美感可言。故,我找朋友糜雨曦糜老板为我设计了计时器的页面,并利用html+javascript实现其功能。计时器展示如图:

计时器展示
计时器展示
计时器图片展示
计时器图片展示

js的主要实现部分在./web部分/admin-battle-add.php
该计时器主要实现了如下功能:

  • 辩手姓名、图片展示
  • 键盘操控
  • 自定义环节

由于使用html开发,它有相比exe的更高跨平台能力。

使用方法

空格:暂停当前发言(自由辩中会自动切换)
回车:停止当前计时(自由辩中不会切换)
:上一阶段 (键盘左箭头键)
:下一阶段(键盘右箭头键)
1:展示一分钟倒计时提示音
2:展示半分钟倒计时提示音
3:展示时间到提示音

自定义环节

我在这部分功能里加入了自定义环节的功能。

1
3,,,0,;0,C1,,240,申论;1,CC2,C1,150,质询;0,CC1,,240,申论;1,C3,CC1,150,质询;0,C2,,180,申论;1,CC3,C2,150,质询;0,CC2,,180,申论;1,C1,CC2,150,质询;0,C3,,180,申论;1,CC1,C3,150,质询;0,CC3,,180,申论;1,C2,CC3,150,质询;0,C4,,120,小结;0,CC4,,120,小结;2,,,240,自由辩论;0,CC4,,210,结辩;0,C4,,210,结辩;

我在计时器和评委打分环节使用同一套自定义环节字符串,这样就可以有效地自定义环节。
ps 我后来也写了一份自定义环节生成器。

统计票数麻烦且不环保

同时,响应无纸化潮流,我还设计了无纸化提交分数的裁判系统。它的另一个好处是避免了人工计算分数,防止人为误差的出现+计算分数的等待。
文件在./小程序部分/Bam1/client/src/pages/user/judge.js

小程序裁判入口
小程序裁判入口

裁判界面的环节是与计时器同步的。
裁判界面
裁判界面

这里为了防止数据丢失,还使用Taro.setStorageSync(),在每一次写完数据后,将数据存入临时数据。同样,当全部写入完毕,再使用微信云开发提交到服务器。
分数实时回传
分数实时回传

1
$obj = $wx->databaseQuery("db.collection(\"battle-judge-point-conclude\").where({env:\"{$GLOBALS["env"]}\",battleId:\"{$bid}\",judgeId:\"{$r["judgeId"]}\"}).get()");

复盘数据获取困难

个人辩力提升系统也是本系统的另一个亮点。在传统赛事中,辩手对自己的表现只能以输赢来衡量,很难量化出一个标准,往往会拖慢对个人的提升。
但是在最普遍的三轮投票制中,有一轮即分数票,评委会根据选手的表现给出对应的分数。在传统赛事里,因为统计麻烦,所以往往不会将这个分数反馈给辩手。这浪费了一个很重要的资源。
所以此系统利用评委在云上的分数,将每个辩手的分数落实到每个辩手身上,这样可以直观量化出辩手的水平,为辩手的进一步提升提供帮助。

个人辩力提升系统
个人辩力提升系统

优质裁判资源稀少

最后,目前在辩论赛上普遍存在一个问题:缺少优质裁判资源。
倒不是说优质裁判特别特别少,而是请优质裁判所需要的高昂的食宿、交通费用往往给辩论组委会带来很大的经济困难。
故利用Agora声网公司提供的视频会议SDK开发了远程视频裁决系统。
在前期开发中,其实并没有非常多的实际视频通话使用需求,声网提供的免费时长为我,一个学生的开发提供了很大便利。同时,声网便利的SDK使我很快就将服务接入了已有系统,整体开发体验非常好。
得益于声网的优质服务,在几次测试中,视频会议的稳定性非常之高,完全满足了使用需求。

远程视频裁决系统
远程视频裁决系统

此外,在上述展示出来的部分外,该系统还有完备的数据录入(指赛事信息录入),辩手信息和裁判信息录入系统。在这里不多展示。

项目成员

于卓浩

id puluter, pkmq24
https://github.com/pkmq24
重庆大学计算机系大一学生。
进行了全部程序代码书写,计时器外的页面设计。

糜雨曦

计时器页面设计。

所使用的库&开发技术

  • 小程序: Taro, 微信云开发
  • 网页端: Material Pro(样式), PHP, Agora视频通话

开源链接

https://github.com/AgoraIO-Community/2019-Hackathon-Works-Online-Debate