Sharecode Programming Editor

We began our research by studying the existing teaching methodologies of learning a programming language or a skill. As a result, we explored various research papers, articles, and journals regarding programming education. Considering the project's time and scope, we decided to focus only on undergraduate students in a classroom setting.

Our research found that about 9.8% of undergraduate students in computer science or programming majors drop-out before finishing their course. We learned that many online tutorials help understand the basics but do not provide the practical knowledge required to code a solution. Also, other resources such as Stackoverflow, Github, etc. are not beginner-friendly. As a result, we conducted user research that helps newcomers learn a programming language effectively.

To understand more about the teaching techniques, areas of improvement in undergraduate programming education, we interviewed 12 students, two professors, and a Teaching Assistant. We tried to understand the fundamental problems of a programming class and why some students donot score high enough in the assignments to pass the course. Some of the insights and comments from the interviewees are listed below.

• 01

  Peer-to-peer programming

  "I have trouble translating the theory and class exercises we learn to actual code. I can do better if I have some help."

  "My friend helps me with the assignments all the time. He usually points me into the direction I should be going."

• 02

  Overall performance report

  "I want to see the students’ performance to the rubric level. This can help me create a proper plan of action."

  "Having a higher level view of the grades of overall class can help me understand where they need my help the most."

• 03

  Sharing code with other students

  "If I am not with my friend, I send him my entire code and he runs it in his system to see what’s wrong. This takes time."

  "I usually wait until TA hours to get a review. That is the only time I can get someone to take a look at my assignment."

• 04

  Code history

  "If I can see the all the steps the student has taken in writing that piece of code, I can understand where they had trouble."

  "Many students don’t understand the rubric. Every time I release grades, they come and ask me where they lost points."

• 05

  Alternate code

  "In the beginning, students usually do not write efficient code. They need practice and help to get better at coding."

  "I always provide solution code after every assignment. Using that, students understand an alternate way of solving the problem."

Using the Affinity Diagramming technique, we organized all the information collected from interviews and literature review to create patterns and insights as below

• Peer-to-peer collaboration among students can significantly smoothen the learning curve of a programming language.
• Usually, students like to help each other in finishing assignments, rather than going to professor or Teaching Assistant.
• Students have difficulty in transforming their theoretical knowledge to practical solution.
• Each student is unique and the problems they face are also unique.
• Professors sometimes have difficulty in understanding the exact problem faced by a student to offer relevant help.
• Feedback on the assignments are usually generic to the whole assignment, rather than specific to a piece of code.
• In order to become proficient in a programming concept or language, the student need to know different ways of solving a particular problem.
• Instructors need to know the performance of students to the rubric level to provide proper support to the students.

Along with the analysis, we also performed a secondary research on our problem statement. We tried to understand what solutions are present in the market, which solve programming students' problems. We went through some research papers and articles to gather data that we felt would be relevant to our project. One of the research articles which played a crucial role in our project is here.

Based on the user research we conducted, we created three personas we thought would represent our target users as shown below.

Using the personas and the insights we derived, we brainstormed numerous ideas that we thought would address our problem space. We then started filtering them based on technical, economic, and social feasibility. We combined the best part of some ideas so that they serve the purpose of helping students and instructors in a programming class. We tested and analyzed many ideas to decide on the final design solution.

Our final design solution was to build a code editor for students and instructors of an undergraduate programming class. This editor allow students to write and share their code with other students who are the reviewers. The reviewers then comment on the student's code with the help of their code history. When students share their coding assignments with instructors, they receive grades and comments in the editor.

This code editor was incorporated as an extension of Canvas, which is a Learning Management System (LMS) that most of the universities in the United States use. Since Canvas provides APIs to build third-party extensions, we were sure about our design solution's feasibility.

After brainstorming and deciding on the final idea, we were skeptical of whether implementing code history can help reviewers understand where a student has difficulty coding. So, I put my Javascript coding skills into use and created a small mockup. I tested it with six students and found that code history can help reviewers provide proper guidance and comments. Below is the code I wrote for the mock up.

                            
function debounce(cb, interval, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
        timeout = null;
        if (!immediate) cb.apply(context, args);
        };          
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, interval);
        if (callNow) cb.apply(context, args);
    };
};

function keyPressCallback() {
    var target = document.getElementById('target');
    var input = document.getElementById('input');
    var para = document.createElement("P");               
    para.innerHTML = input.value; 
    target.appendChild(para);    
}

document.getElementById('input').onkeypress = debounce(keyPressCallback, 500);
                            
                        

After the feasibility testing, we created storyboards to get a better idea of the solution and to fill any gaps we find. They are as below

1. A student getting help from his classmates

• 

  Student wants to improve his knowledge in coding

• 

  Student finds the code too difficult to write

• 

  Student invites his friend for help

• 

  The student's friend suggests him to share his code for review

• 

  The student's friend is effectively able to guide him

• 

  Student's doubts have been cleared and he feels that he learnt something useful.

2. Student and Instructor working together to resolve doubts

• 

  The professor receives an email from the student, asking him a doubt

• 

  The professor wants the student to share the code via the collaborative platform to help the student with the code.

• 

  The professor receives an email from the student with the link to work collaboratively.

• 

  The professor helps the student with his code.

• 

  The professor is happy to have helped the student to complete his assignment, which would help him get better grades.

3. Student sharing code context with the instructor

• 

  Professor is grading his students' work and came across a student's work which is not up to the mark

• 

  Student has a hard time understanding how to code and have difficulties in assignment work

• 

  Student meets his instructor to get some help from him to better his grades

• 

  Student is talking to his classmate regarding his problem and he is suggesting a solution to his problem

• 

  Student started using the new editor for his assignment

• 

  Student meets his Instructor to understand where he is going wrong while writing the code.

4. Professor finds it easy to understand where exactly student is facing trouble.

• 

  Professor is looking at student's code history and making sense of his thought process

• 

  Student received a detailed feedback on his past assignment from his professor

• 

  Professor understood his students' problem and trying to figure out a solution

After storyboarding, we started sketching our design solution on paper. After multiple iterations the prototypes are as below.

• 

  Login Screen for Teachers and Students

• 

  Student Portal Landing Page with Code Editor

• 

  Grouping of code blocks to access features

• 

  Options to Add Context or view Code Edits

• 

  Adding Context, Rationale behind the code

• 

  Sharing for collaboration or Code review

• 

  Viewing Code Edit history made in the code block

• 

  Overall Code Edit of the project

• 

  Instructor's grading portal

• 

  Rubric grading against the relevant code block

• 

  Feedback / Alternative code suggestion

After creating paper prototypes, we began evaluation right away. We used techniques such as Cognitive Walkthrough and Heuristic Analysis to evaluate the usability of our paper prototype. Based on the results of the evaluation, we made changes and iterated them. Most of the changes we made are of changing the layout of the editor and not the functionality of them.

We used Figma for designing high-fidelity screens and also for prototyping. In this stage, there were several iterations of the screens based on the aestheics and usability. Below are final screens we designed.

• 

  Instructor's sign in

• 

  Student's sign in

• 

  Instructor's dashboard

• 

  Student's dashboard

• 

  Instructor viewing a student's code

• 

  Student viewing their code

• 

  Instructor highlighting a code block for options

• 

  Student sharing thier code with others

• 

  Student highlighting a code block for options

• 

  Reviewer highlighting a code block to see code history

• 

  Reviewer highlighting a code block to add comments

• 

  Instructor highlighting a code block and adding grade

• 

  Student viewing grade/rubric for a code block

• 

  Students viewing all the comments

After creating high-fidelity prototypes, we began working on usability testing. Six users and three user experience designers participated in our usability testing and evaluation sessions. We created three tasks with the editor and performed think-aloud usability evaluations with the users. Later, we asked the participants to fill a post-task questionnaire to understand their experience.