Are you familiar with debate? If you are not familiar with it, have you always seen it? We want to talk about the future of debating.
“Future” might be just as true now. Debate is one of many offline activities that cannot take place while the epidemic is still unfolding. But some have moved the scene from offline to online.
As one of the three finalists of the 2019 RTC Creative Programming Challenge, the “Debating Bamboo” team has implemented a fully functional debating system that can time, debate online, judge video comments, and count votes. And it has been used in many debating contests. So we asked “Bamboo of Debate” to share the original intention of the work and the realization of its core functions:
Project introduction
In order to solve the traditional debate competition UI ugliness, each system is separated from each other, all kinds of offline hosting costs and other problems, specially developed this system. The system consists of:
- Customizable event timer
- The schedule, judges and debaters manage the backstage
- Schedule view and paperless submission of scores small procedures
- Post-match instant point-to-point feedback system for personal performance
- Video conferencing portion of remote adjudication
Project beginner’s mind
As a college student, we often hold various debate competitions in universities, but there are five long-term problems in the current debate competitions, as shown in figure: image.png
- Schedule viewing is not intuitive
- The timer is simple and ugly
- Counting votes is cumbersome and environmentally unfriendly
- Difficulty in obtaining data from the recovery disk
- Quality referees are scarce
In addition to the above question, in fact, we also found that the debate is very limited to the limits of the site, even if two of the same school debate team to solve application problems such as the classroom, invited the judges, publicity to attract the audience, not to mention if the two schools, two cities, and even to have a match between the two country’s debate team. Therefore, I was also thinking about whether the whole debate competition could be moved to online. I happened to come into contact with the Hackathon contest of Agora, and learned that SDK has a free quota of 10,000 minutes per month. I also saw the rich language framework and SDK integrated documents supported by Agora, so I decided to participate in the competition and make a work to help solve related problems. Improve your skill level.
Solve the schedule viewing is not intuitive
Presentation has always been a problem. In traditional events, the schedule display is usually presented in the form of sending PDF. When the participants and spectators want to check the schedule, they often need to [open QQ-> enter the event group -> click the group file -> open PDF-> manually find the schedule corresponding to the date].
Even with these steps, the agenda file is often a PDF with small font size, complex information, and unintuitive. Finding an agenda is cumbersome and uncomfortable. In order to let the participants and spectators more intuitive to see the schedule, especially in the small program set up this page.
The data storage uses the cloud development of wechat, and designs the background page of the Web side, and uses the API provided by wechat to unify the data of the small program side and the Web side to add the schedule in the Web side.
Web side data sending part of the code:
//./web/admin-battle-add.php // here calls my own WeChat cloud development simple SDK, can be found in the source code./web part /lib/WeChat. Detailed information can be found in the detailed introduction later in this article.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]); }Copy the codeSmall program part of the code:
/ /. / small program part/Bam1 / client/SRC/pages/schedule/schedule. JscomponentWillMount () {
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
})
...
}
Copy the codeRemark:
-
Small Program,. / Wechat Mini Program/Bam1 / client/SRC/pages/schedule/schedule. This part js code is mainly call WeChat cloud development of related function to obtain the game ID list.
-
In this file,. / Wechat Mini Program/Bam1 / client/SRC/components/battle raged. Js is each calendar card components. Get the data in the Battle Component by passing in the ID parameter through the Schedule file.
-
There is an irrational way to get data. I later thought that after capturing all the data at once on the main screen, rendering it to the Battle Component would give better performance. But time was limited, so it was not revised.
Solve the timer simple and ugly
Secondly, the aesthetic problem of the timer, the traditional timer as shown in the figure:
Obviously, this kind of timer runs counter to any modern design thinking and is completely unaesthetic. I asked a friend to design a timer page for me, and realized its function using HTML + JavaScript. The timer is shown as follows:
The main implementation of JS is in./web/admin-battle-add.php
The timer mainly realizes the following functions:
- Name and picture of debater
- Keyboard control
- The custom link uses HTML development, it has higher cross-platform capabilities than exe.
Solve the problem of counting votes
At the same time, in response to the trend of paperless, I also designed a paperless score submission judge system. Another benefit is that it avoids manual calculation of the score and prevents the appearance of human error + wait to calculate the score. Files in:. / Wechat Mini Program/Bam1 / client/SRC/pages/user/judge. Js
The referee interface is synchronized with the timer.
Taro. SetStorageSync () is also used to save data to temporary data after each write. Similarly, when all the writing is completed, it will be submitted to the server using wechat cloud development.
$obj = $wx->databaseQuery("db.collection(\"battle-judge-point-conclude\").where({env:\"{$GLOBALS["env"]}\",battleId:\"{$bid}\",judgeId:\"{$r["judgeId"]}\"}).get()");
Copy the codeRecovery data access is easier
The individual debate enhancement system is another bright spot of this system. In traditional competitions, debaters’ performance can only be measured by winning or losing. It is difficult to quantify a standard, which often slows down the improvement of individuals.
But in the most popular three-round voting system, there is one round, points, in which the judges award points based on performance. In traditional competitions, this score is often not reported back to the debaters because of the statistical difficulties. This is a waste of a very important resource. Therefore, this system uses the scores of judges on the cloud to implement the scores of each debater to each debater, which can intuitively quantify the level of debaters and provide help for the further improvement of debaters.
Referee remote video
Finally, there is a general problem in the debate competition at present: lack of high-quality referee resources. It is not that there are very few high quality judges, but the high cost of food, accommodation and transportation often bring great economic difficulties to the organizing committee of the debate. Therefore, a remote video adjudication system is developed by using the VIDEO conference SDK provided by Agora.
In the early stage of development, there was not much actual demand for video calls. The free time provided by Sonnet for developers (10,000 minutes per month) provided great convenience for my development as a college student. At the same time, the convenient SDK and documentation of Sonnet enabled me to quickly connect the service to the existing system, and the overall development experience was very good. Thanks to the excellent service of Sonnet, the stability of video conferencing is very high in several tests, which fully meets the requirements of use.
Live text:
$("#send").click(function () {
if(channel === null) {
showOnP("Unjoined channel, please log in.")
return;
}
channel.sendMessage({ text: $("#text").val() }).then(() => {
showOnP("Live send:"+ $("#text").val()); }). Catch (error => {showOnP()"Live send failed:"+ $("#text").val()); ShowOnP (error) /* Handling logic for channel message sending failure */}); }) client.on('ChannelMessage', ({text}, senderId) => {// text is the received channel message text, senderId is the sender's User ID console.log(text); /* showOnP("The broadcast server received a message:"+text+", Announcer:+senderId);
});
Copy the codeAccess to RTC video Channel:
rtc.client.init(option.appID, function () {
console.log("init success");
rtc.client.join(option.token ? option.token : null, option.channel, option.uid ? +option.uid : null, function (uid) {
Toast.notice("join channel: " + option.channel + " success, uid: " + uid);
console.log("join channel: " + option.channel + " success, uid: " + uid);
rtc.joined = true;
rtc.params.uid = uid;
// create local stream
rtc.localStream = AgoraRTC.createStream({
streamID: rtc.params.uid,
audio: true,
video: true,
screen: false,
microphoneId: option.microphoneId,
cameraId: option.cameraId
})
// init local stream
rtc.localStream.init(function () {
console.log("init local stream success");
// play stream with html element id "local_stream"
rtc.localStream.play("local_stream")
// publish local stream
publish(rtc);
}, function (err) {
Toast.error("stream init failed, please open console see more detail")
console.error("init local stream failed ", err); })},function(err) {
Toast.error("client join failed, please open console see more detail")
console.error("client join failed", err)
})
}, (err) => {
Toast.error("client init failed, please open console see more detail")
console.error(err);
});
}
Copy the codeIn addition, in addition to the part shown above, the system also has complete data entry (competition information entry), debater information and judge information entry system. I won’t show you much here. At present, the system has been applied to the actual environment for many times, supporting the development of many debate events. Welcome to use it, and welcome to participate in the development and maintenance of the project.
Involving technology
-
Small program: Taro, wechat cloud development
-
Webpage: Material Pro(Style), PHP, Agora SDK
Open Source and more
- Author Yu Zhuohao: I am a freshman in Chongqing University. I like to learn new technology and write about my favorite small projects whenever I feel like it. I hope I can learn some useful knowledge in my limited time
- Personal Github: github.com/pkmq24
- Open source: github.com/AgoraIO-Com…
RTC 2020 Programming Challenge Spring is open for registration! This competition from March 10 to April 21 for registration, team and development, April 22 to April 24 to submit works, April 25 award evaluation, the whole online. This competition has prepared a rich prize, and the winners will have a chance to enter the fast track of Agora. Please sign up!