I. Project Overview Autistic individuals in the United States of America face significant challenges in the workplace due to social difficulties, resulting in an unemployment rate of over 80%. Despite their strong affinity for computer science, basic programming skills alone do not prepare them for a successful career in the software development industry. There is currently a lack of coding camps that address the communication, social interaction, and team-working skills necessary for autistic students to thrive in the tech industry. The EdASE's Computer Game Coding Camp (CGCC) for Autism is a summer program that addresses this issue by providing high school students and rising seniors on the autism spectrum with exposure to high-level video game development and networking opportunities with peers. Through this program, students learn essential processes of software development, game development, interpersonal communication, collaboration, and ultimately, create their own video game from scratch. To enhance the program's effectiveness, we have designed and developed a new synchronous co-editing collaboration station based on Scratch. This collaboration station provides students with the opportunity to work together in real-time with their peers and mentors, encouraging collaboration, communication, and teamwork skills, which are essential for success in the tech industry. The Scratch programming language is beginner-friendly and allows students to focus on developing their creativity and problem-solving skills without getting overwhelmed by complex syntax or programming concepts. 4 II. Research Overview Collaborative coding environments are crucial for fostering the skills of neurodivergent young programmers. Neurotypical students and neurodivergent individuals have different learning styles, and the coaching style needs to adapt to suit each student's needs. This is especially important for autistic individuals, who may struggle to understand why non- autistic collaborators behave the way they do. However, their tendency to excel at detail- oriented work and focus on their passion are often under appreciated by their coaches. To make the most of the unique strengths of neurodivergent individuals, it is important to create an inclusive environment that recognizes their pain points. This can be achieved by teaching collaboration skills in coding, promoting co-editing, and encouraging many forms of communication. Inclusive design is also critical in considering the needs of neurodivergent individuals. Fostering a collaborative coding environment that recognizes the unique learning styles and strengths of neurodivergent young programmers can promote their success in the field. Providing opportunities for collaboration, inclusive design, and real-time support can help them overcome challenges and build their confidence in coding. 6 III. Problem Space 1. Gradual Collaboration Collaboration is an essential skill for anyone entering the field of computer science or software development, and it is particularly important for neurodivergent students. For neurodivergent students, this is especially important because they may struggle with social interaction or perspective-taking, making it harder for them to learn these skills on their own. Collaborative coding environments can provide a safe space for neurodivergent students to work together and develop their collaboration skills. They may have unique strengths and interests that can complement each other in collaborative coding projects. Many autistic students are new to collaboration and will struggle to work together as they learn these new working skills. With gradual collaboration, our design will enable autistic students to work together, but initially, work apart and only come together when they have a task they want to work on with others on their teams. 8 Student Collaborating on coding projects can present several challenges for neurodivergent students. One issue that can arise is the possibility of multiple students attempting to work on the same block of code at the same time. When this happens, one student's work may be overwritten. In addition to potential conflicts with overlapping code blocks, students may also have difficulty keeping track of their cursors on the same page. It can be easy to get lost in a sea of code, particularly when several students are working together. This can cause students to become disoriented and lose their place in the code. Furthermore, students collaborating on coding projects may be unaware that their work in one part of the code can affect another student's work in a different part of the code. This lack of awareness can lead to further conflicts and confusion, particularly if students are not communicating effectively with each other. Another challenge of collaborative coding projects is the inconvenience of copying code from one place to another. If students are required to work separately and then merge their code together later, they may have to spend time copying and pasting code between different documents or files. This can be time-consuming and frustrating, particularly if mistakes are made in the copying process. Finally, the sudden appearance of another student in their workspace can startle students who are deeply focused on their coding tasks. This can be particularly disruptive for neurodivergent students who may struggle with changes to their routine or unexpected interruptions. 2. Co-editing 9 3. Awareness of others’ action Effective collaborative coding requires individuals to be aware of each other's actions, which is especially crucial in the process involving multiple students working together on the same game. Collaborative coding introduces several challenges that we intend to address with out design 8 when changes are made by one person without informing others, such as removing/ adding/modifying a block, another member might unknowingly work on top of the modified block or lose track of the previous progress. This can lead to conflicts in collaboration and increase the amount of time and effort needed to debug the program Autistic individuals have often been marginalized into working by themselves because others perceive them as anti-social, even though they are not. They often lack experience working with others and have not developed coping skills to handle the distractions of working alongside others.; When multiple individuals are working on the same code block simultaneously, it can lead to conflicts in actions, such as two people attempting to grab the same block. This can result in errors in the system, as it may not be able to decide who’s action should be executed first. The design solution should consider establishing an order for accessing the code block in a coediting mode. In such cases, providing the ability to see the actions of others and giving real time feedback on each other’s process will allow live update of changes and can foster more effective communication. 10 Teaching autistic student collaboration skill is a main goal of the camp. In the past, teaching was mainly conducted via zoom through a flipped classroom approach, which wasn’t great since it didn’t allow for real time support. Our goal this year is to enable teachers to provide immediate help and support to students while monitoring their progress. We aim to give teachers more flexibility and ease in tracking and evaluating student performance. However, we understand that this must be achieved in a way that does not create distractions or make students feel overwhelmed. Therefore, we will need to carefully consider how to enable teachers to follow along with students' progress and offer support effectively. 11 Teacher IV. Design Justification 13 Student 1. Gradual Collaboration Our summer camp program has taken a giant leap towards enhancing students' collaborative learning experience with the introduction of a revolutionary feature, the 'scene' function. Unlike past programs where students were unable to work together, this new feature assigns each student to a specific scene upon joining the game, where they can freely copy and paste code from one another's space to build their game. This unique feature not only provides students with their own independent workspace but also fosters a collaborative learning environment. To ensure a seamless transition when students request access to another student's space, we have incorporated a 10-second delay message to be displayed on the other person's screen, reminding them of the new participant. Once they join the space, they will be able to view live coding from other students, which encourages teamwork, skill- sharing, and a dynamic learning environment. This is especially helpful for autistic student because it would give them more time to mentally adjust before other students join in. One of the issues that arise when working with autistic people in a collaborative coding environment is that they may not have much experience expressing their thought process out loud, which can lead to misunderstandings with their teammates about their coding intentions. Co-editing allows students to take code apart, merge it with others, and transfer it between scenes, creating new opportunities for creative collaboration and innovation. Additionally, the ability to run and debug code together facilitates efficient error identification and correction. Our coediting feature has the potential to transform the way students collaborate on coding projects. With a chat function to enable effective communication and conflict resolution, students can work together seamlessly, regardless of their geographical location. In the future, our platform will take into the account of latency and skew, enabling students to work together efficiently and productively. The future plan will be explained in the last section of the report. Collaborative coding is also possible with our coediting feature, allowing students to write code together and code together in a shared environment. With support from teachers for students with different coding skill levels, our platform fosters a collaborative learning environment that enables everyone to work together and learn from each other. 14 2. Co-editing The main design question we have proposed is: How to maximize real time collaboration while minimizing distraction and conflict? Before creating the design implications, it’s important to consider establishing an awareness spectrum that includes three types of co-editing: coediting on the same block, different blocks but same stack, and different stacks. In the context of our design, a stack is a set of blocks that executes in sequence. The awareness spectrum (see below) would be designed to make students aware of each other's actions differently based on the type of co-editing being performed. For instance, if two students are editing the same stack of code, they would already have more awareness of each other's actions compared to building separate stacks on different parts of the canvas. In the latter scenario, additional effort would be required to keep both students updated on each other's progress. This could be achieved through a non- distracting mode of communication, such as a subtle visual cue or sound (elaborated in design walkthrough) pushing real time update of the other person’s action. The design solution should consider incorporating such multi-modality awareness to ensure that students are made aware of their teammates' actions even if they are not looking at the screen. editing the same block Conflict in operation HIGH LOW Impact on the sprite character LOW HIGH Ease of immediate awarness HIGH LOW editing the same stack editing in the same view port 15 3. Awareness of others’ actions In order to improve visibility of other's status in a collaborative coding environment, we have implemented a cursor appearance feature which displays the name of the student along with their cursor movement. This gives a live update of when someone is dragging a block around the student. However, we acknowledge that this feature may create certain concerns with distractibility, especially when multiple cursors are moving around on the screen. We plan to explore the possibility of implementing a blurred out cursor or decreasing the speed of cursor movement in future camps. This will allow students to have an awareness of others' actions without it becoming a distraction from their own work. Another feature we have implemented is "locking", which allows a student to edit a section of code without interference from others. When a student is editing a stack of code, the entire stack becomes greyed out on the screens of other students, preventing them from editing it. When a stack of code is locked, students cannot see any immediate changes, which gives them a certain degree of awareness while not pushing for second- by-second updates. While this feature provides students with flexibility in editing their own code, we recognize that there may be further refinement needed. In the future, we plan to explore the possibility of breaking down the different modes of locking, such as locking a single block versus locking an entire stack of code, as well as how multiple users can interact with locked sections of code simultaneously. When co-editing the same block, some students may experience temporary disconnection or lagging due to a slower network. We have designed a feature that allows students to view the past history of the block they are working on, which enables a student who has missed any changes to quickly catch up on what they have missed. They can review any changes that have been made in their absence. 16 This year, we have implemented an entirely new teacher’s flow, which includes creating new games and teams, as well as giving access to students' scenes. One of the key benefits of the new design implication is the teacher's ability to see all student scenes at the same time. This facilitates better teaching, as teachers can jump in to offer help immediately when needed. Additionally, teachers can keep track of what students are doing, which is crucial when autistic students may become distracted and lose focus. Live monitoring also enables teachers to follow students' progress without interrupting their coding process, ensuring that they can offer timely and effective support. 17 Teacher V. Walk-through of Use Cases Enter ID* Password* Sign In 19 Student View 1. Sign up Prior to the commencement of the program, the students will receive their unique login credentials, comprising their Student ID and password, via their registered email address. Student Homepage My project Past projects Space Invader Teammates on this project John Doe Project 1 last edited on 7/14/23 last edited on 7/14/23 last edited on 7/14/23 last edited on 7/14/23 last edited on 7/14/23 Stacey L Project 2 Project 4 Project 3 Project 5 Lucy W Project 1 last edited on 7/16/23 Project 2 Project 4 Project 3 Project 5 John Doe John Doe Stacey Lewis Stacey Lewis Lucy Chen Lucy Chen Chris Lee Chris Lee Other projects from the class John Doe John Doe John Doe Stacey Lewis Stacey Lewis Stacey Lewis Lucy Chen Lucy Chen Lucy Chen Chris Lee Chris Lee Chris Lee Sort by: Date Launch Project EdASE T he student ho m e p a g e w ill include a set o f no v el f eatures ai m ed at enhancin g the user e xp erience o f the students T he p rinci p al f unctionality o f the inter f ace co mp rises a p ro j ect dashboard , f eaturin g the latest edited p ro j ect dis p layed at the to p o f the p a g e Students can readily launch the current p ro j ect they are w or k in g on , v ie w their current tea mm ates , and trac k the last o p en date o f the p ro j ect I n addition , a p ast p ro j ect g allery w ill be a v ailable , enablin g students to bro w se their p re v ious p ro j ects in chronolo g ical order , w ith the m ost recent p ro j ect located at the f ront o f the g allery T he current online status o f the tea m m e m bers is indicated by g reen and g rey dots , w here g reen dots si g ni f y online status and g rey dots denote o ffl ine status B y clic k in g on the ti m er icon , a list o f p ast students w ho p re v iously w or k ed on the p ro j ect is dis p layed , thereby p ro v idin g students w ith additional conte x t re g ardin g the p ro j ect ' s history 2 0 The program's homepage comprises a Launch Project button that, upon selection, directs the user to the project interface. This interface, akin to Scratch's current layout, features newly designed scenes. The EdASE icon, located on the interface, enables users to navigate back to the project homepage. Each student has an independent canvas to develop their code, referred to as a "scene." Scenes are composed of the following elements: a scene number and the student's initials displayed in the header section, characters/sprites, and a scene/ background. The scene that the student is currently working on is highlighted in blue at the top of the interface. Furthermore, the scene interface displays an Add New Sprite icon and an Add New Scene icon, which exclusively appear in the scene that the student is actively working on. Scene 1 Scene 2 Scene 3 Cat Cat Scene 1 Scene 1 Scene 1 WJ Dog VL VL Dinosaur AB EdASE Add a scene 21 ec Work Space The following scenarios show what different interactions look like: EdASE Wendy Ju is joining in 10 seconds Scene 3 Scene 1 Scene 1 Scene 1 VL Dinosaur AB Add a scene Scene 2 Scene 1 WJ Dog VL Cat Scene 1 Scene 2 Scene 3 Cat Scene 1 Scene 1 Scene 1 WJ Dog VL VL Dinosaur AB Add a scene Cat Cat Scene 4 Scene 1 Scene 2 Cat Scene 1 Scene 1 WJ Dog VL Add a scene Sprite 1 i. ii. iii. iv. 22