A Web System for Business & Economics Competitions

In the Christmas of 2022, the leader of the Business Practice Club, BPC, one of the largest business & economics clubs in our school contacted me. They said they wanted a website system for their competitions.

Initially, I thought it was a simple static website to display content, it wasn't. Instead, I was tasked to create a website handles user registration of the competition and the “team up”.

Registration and Teams

Registration was simple enough, just a email verification and password. The hardest part was making the teams. My solution was that, if Tom and Tony wants to form a team. Tom can create a new team, it comes with a team code (starting from #1000). If Tom wants Tony to join, Tony must enter that team code, and wait for approval. Tom can decide whether Tony can join the team or not, this way we can prevent people from randomly entering teams.

It looks something like this (the competition is called “Teenspiration”). It is in Chinese, but still, one can tell the team number if #1023, and Jingcheng is in the team. Below the dash line, Annie is requesting to join the team, where I can press the gold button to accept and the other to decline. The last big button is the one to disband your team, in the case you've created a team in mistake.

This is how it looks on the other side (Annie's perspective). I am sending my request to #1023. I can choose to cancel it, or create my own team instead (which also cancels the request).

The Quiz

For the next part, I was tasked to create an online Quiz, which consists of multiple choice and typed questions. Each team member would conduct it individually. BPC told me I need not to prevent cheating (which I really can't). But I could make it slightly more difficult, by shuffling the questions! Each person would be taking the questions in a random order, thus making it difficult to ask “Hey what's the answer for Q.24?”

It looks something like this, do not ask me because I did not choose economics.

Of course, there needs to be a way for the questions to be cataloged. As typical programmers do, I requested it to be delivered in a json format. It looks like this:

Of course, this was the final Json. The initial version I received was filled with missing commas and quotations - which I had to fix manually. I really wish I knew chatGPT existed at the time.

The Marking

Of course, when the users submit their answers, it needs to be marked. With MCQs it's easy enough to be automated, but for typed responses, how would you do it?

I ended up devising this UI, it looks very overwhelming but is actually simple enough. Y stands for correct, N stands for incorrect. You might be wondering, what is the ? symbol for questions 26-29? Well, they are the typed response questions. A examiner (BPC club member with sufficient permissions) can view this sheet, click on the ? mark, view the typed response and determine if the answer is right or wrong.ge

The Result

It was relieving to me that we experienced no issues with this website, and the competition was carried out successfully.

Another club, the SFC (SCIE Finance Club) reached out to me and requested a similar platform. What I did can be summed up by the gif below: