Real Time Coding Editor
Motivation
In classroom environments, students are frequently organized into groups to support collaboration.
This is
typical in programming classes for small group projects, peer reviews, or discussions on coding
problems.
However, there are various criteria for grouping students, such as coding performance, code structure,
or
previous group interactions. We need to comprehend the interplay between these dynamics and the
outcomes
of the learning sessions. Additionally, we must explore how to support these groups to enhance the
effectiveness of their discussions, making them more meaningful and fulfilling for the students.
Problem Solving
Through reading relevant papers about real time coding design, I learnt that task distribution and
efficient discussion
are two key problems students may have during team working process. Comparing with traditional VCS
system, students prefer
to use real time editor to cooperate with others.
My design focuses on two points: making task visualization and distribution more efficient and
connecting discussion with the real time editor or the specific code.
Here is my first draft.
My idea is using annotation attached to some lines of code blocks to connect comments with specific
code. However if the source
code has been modified, this design will cause a lot of mess and if there are thousands of comments on
this code file, how to
arrange such interface can be a big problem.
So I improve my idea using a VCS manage system to solve this mess, using a VCS system to manage the
discussion and code versions.
And I make my task distribution idea more specifically.
However, my sketches will hit scalability issue. imagine if this is a classroom setting where the
instructor has the main codebase and they invite 100 students to participate
in writing a specific function. This tiny interface can not manage such situation. After a long time
of brainstorming and reading relevant materials, I finally come
with the idea that can perfectly handle such problems and I beautify the whole interfaces to make it
more simple and easy-understanding.
Final Prototype
Overview
To solve the problem that my previous idea could not afford too many people to edit and discuss the
same code block, I decided to make the
discussion board to be a new page instead of a chat box attached to the code. But the main editor is
still a real-time editor that can allow
multiple users to edit together.
For this image, on the top is the main editor and you can select the codes and make it to be a
discussion issue block, which means you have problems or something to chat with your teammates. so you
lock this area and others can not edit it until this issue is solved. The red block on the editor
means
there is a discussion issue related to this code and you can click the red block to access to the
discussion detailed page.
Discussion Board Overview
This is a new page that shows the discussion board, and it shows all the discussion issues
related to the editor, you can also add an issue at this page by selecting the relative code lines.
This one is the detailed page where when you click one of the issues, you can see the detailed
discussions, the original problems and replies, each one is bound to one of the code versions shown
below. The code block on the right side is related to the real-time editor. However, it is not a
real-time editor, you can click the code verison in the version list to see different code versions
provided by different people related to this discussion, or add a new version and edit yourself. Every
code version can only be edited by one person who generates it, and if you are not finishing your
code, it will not be shown in the list. The original version is the code selected by the issue owner.
And if other members have other ideas that want to help him, he can edit the code from any existing
versions in the version list. To test different versions in the main editor, I design a button on the
version list to select which version you want to be shown in the main real-time editor, and then you
can test this version in your project. Only one code version will be shown in the main editor.
In the above version 1, I design all the code versions to be flat, and if you want to edit based on
others code version just click the Edit button and it will generate a new version for you to edit. So
if 100 people are participating in this discussion and they all want to change the code, there will be
100 new versions and they can edit separately.
In this version all the code versions are connected and can be shown by a version graph. When you try
to edit the code and click the Edit button, the VCS system will generate a new version using a hash
number as its commit tag, and this new version will be a node added on the version graph. Also when
you do not click the upload button, others will not see your version in the list.
When the discussion is done, the issue owner can close the discussion and select one of the code
versions in the list to be shown in the main editor. And then this code area will be unlocked,
allowing users to edit. This "lock" just means that other users in the real-time editor can not edit
it, otherwise it would be conflicts.
Task Distribution
The task distribution part is not about solving the scale-up problem, I just refresh it to be more
nice-looking and easier to show your project status.
Close Project