In Fall of 2016, the city of Los Angeles held a 2-week “Innovate LA” event intended to celebrate innovation and creativity within the LA region. Dozens of organizations around Los Angeles held events during Innovate LA to showcase and provide resources for making, invention, and application development. As part of this event, the library at California State University, Northridge developed and hosted two weeks of coding challenges, designed to introduce novice coders to basic development using existing tutorials. Coders were rewarded with digital badges distributed by the application Credly.
The primary organization of the events came out of the library’s Creative Media Studio, a space designed to facilitate audio and video production as well as experimentation with emerging technologies such as 3D printing and virtual reality. Users can use computers and recording equipment in the space, and can check out media production devices, such as camcorders, green screens, GoPros, and more. Our aim was to provide a fun, very low-stress way to learn about coding, provide time for new coders to get hands-on help with coding tutorials, and generally celebrate how coding can be fun. While anyone was welcome to join, our marketing efforts specifically focused on students, with coding challenges distributed daily throughout the Innovate LA period through Facebook.
The Challenges
The coding challenges were sourced from existing coding tutorial sites such as Free Code Camp, Learn Ruby and Codecademy. We wanted to offer a mix of front-end and server side coding challenges, starting with HTML, CSS and JavaScript and ramping up to PHP, Python, and Ruby. We tested out several free tutorials and chose tutorials that had the most straightforward instructions that provided immediate feedback about incorrect code. We also tried to keep the interfaces consistent, using Free Code Camp most frequently so participants could get used to the interface and focus on coding rather than the tutorial mechanism itself.
Here’s a list of the challenges and their corresponding badges earned:
Note the final three challenges – editing a Wikipedia page, creating a 3D model, and experimenting with Google Cardboard or other virtual reality (VR) goggles are not coding challenges, but we wanted to use the opportunity to promote some of the other services the Creative Media Studio provides. Conveniently, the library was hosting a Wikipedia Edit-A-Thon during the same period as the coding challenges, so it made sense to leverage both of those events as part of our Innovate LA programming.
The coding challenges and instructions were distributed via Facebook, and we also held “office hours” (complete with snacks) in one of the library’s computer labs to provide assistance with completing the challenges. The office hours were mostly informal, with two library staff members available to walk users through completing and submitting the challenges. One special office hours was planned, bringing in a guest professor from our Cinema and Television Arts program to help users with a web-based game making tutorial he had designed. This partnership was very successful, and that particular office hour session had the most attendance of any we offered. In future iterations of this event, more advance planning would enable us to partner with additional faculty members and feature tutorials they already use effectively with students in their curriculum.
Credly
We needed a way to both accept submissions documenting completion of coding challenges and a way to award digital badges. Originally we had investigated potentially distributing digital badges through our campus learning management system, as some learning management systems like Moodle are capable of awarding digital badges. There were a couple of problems with this – 1) we wanted the event to be open to anyone, including members of the community who wouldn’t have access to the learning management system, and 2), the digital badge capability hadn’t been activated in our campus’ instance of Moodle. Another route we considered taking was accepting submissions for completed challenges was through the university’s Portfolium application, which has a fairly robust ability to accept submissions for completed work, but again, wouldn’t facilitate anyone from outside of the university participating. Credly seemed like an easy, efficient way to both accept submissions and award badges that could also be embedded in 3rd party applications, such as LinkedIN. Since we hosted the competition in 2016, the capability to integrate Credly badges in Portfolium has been made available.
Credly enables you to either design your badges using Credly’s Badge Builder or upload your own badge designs. Luckily, we had access to amazing student designers Katie Pappace, Rose Rieux, and Eva Cohen, who custom-created our badges using Adobe Illustrator. A Credly account for the library’s Creative Media Studio was created to issue the badges, and Credly “Credits” were defined using the custom-created badge designs for each of the coding skills for which we wanted to award badges.
When a credit is designed in Credly and you enable the credit to allow others to claim the credit, you have several options. You can require a claim code, which requires users to submit a code in order to claim the credit. Claim codes are useful if you want to award badges not based on evidence (like file submission) but are awarding badges based on participation or attendance at an event at which you distribute the claim code to attendees. When claim codes are required, you can also set approval of submissions to be automatic, so that anyone with a claim code automatically receives their badge. We didn’t require a claim code, and instead required evidence to be submitted.
When requiring evidence, you can configure which what types of evidence are appropriate to receive the badge. Choices for evidence submission include a URL, a document (Word, text, or PDF), image, audio file, video file, or just an open text submission. As users were completing code challenges, we asked for screenshots (images) as evidence of completion for most challenges. We reviewed all submissions to ensure the submission was correct, but by requiring screenshots, we could easily see whether or not the tutorial itself had “passed” the code submission.
Awards
Credly gives the ability of easily counting the number of badges earned by each of the participants. From those numbers, we were able to determine the top badge earners and award them prizes. All participants, even the ones with a single badge, were awarded buttons of each of their earned badges. In addition to the virtual and physical badges, participants with the greatest number of earned badges were rewarded with prizes. The top five prizes were awarded with gift cards and the grand prize winner also got a 3D printed trophy designed with Tinkercad and their photo as a Lithopane incorporated into the trophy. A low stakes award ceremony was held for all contestants and winners. Top awards were high commodity and it was a good opportunity for students to meet others interested in coding and STEM.
Lessons Learned
Our first attempt at hosting coding challenges in the library taught us a few things. First, taking a screenshot is definitely not a skill most participants started out with – the majority of initial questions we received from participants were not related to coding, but rather involved how to take a screenshot of their completed code to submit to Credly. For future events, we’ll definitely make sure to include step-by-step instructions for taking screenshots on both PC and Mac with each challenge, or consider an alternative method of collecting submissions (e.g., copying and pasting code as a text submission into Credly). It’s still important to not assume that copying and pasting text from a screen is a skill that all participants will have.
As noted above, planning ahead would enable us to more effectively reach out and partner with faculty, and possibly coordinate coding challenges with curriculum. A few months before the coding challenges, we did reach out to computer science faculty, cinema and television arts faculty, and other faculty who teach curriculum involving code, but if we had reached out much earlier (e.g., the semester before) we likely would have been able to garner more faculty involvement. Faculty schedules are so jam-packed and often set that way so far in advance, at least six months of advance notice is definitely appreciated.
Only about 10% of coding challenge participants came to coding office hours regularly, but that enabled us to provide tailored, one-on-one assistance to our novice coders. A good portion of understanding how to get started with coding and application development is not related to syntax, but involves larger questions about how applications work: if I wanted to make a website, where would my code go? How does a URL figure out where my website code is? How does a browser understand and render code? What’s the difference between JavaScript (client-side code) and PHP (server-side code), and why are they different? These were the types of questions we really enjoyed answering with participants during office hours. Having fewer, more targeted office hours — where open questions are certainly encouraged, but where participants know the office hours are focused on particular topics — makes attending the office hours more worthwhile, and I think gives novice coders the language to ask questions they may not know they have.
One small bit of feedback that was personally rewarding for the authors: at one of our office hours, a young woman came up to us and asked us if we were the planners of the coding challenges. When we said yes, she told how excited she was (and a bit surprised) to see women involved with coding and development. She asked us several questions about our jobs and how we got involved with careers relating to technology. That interaction indicated to us that future outreach could potentially focus on promoting coding to women specifically, or hosting coding office hours to enable mentoring for women coders on campus, modeling (or joining up with) Women Who Code networks.
If you’re interested in hosting support for coding activities or challenges in your library, a great resource to get started with is Hour of Code, which promotes holding one-hour introductions to coding and computer science particularly during Computer Science Education Week. Hour of Code provides tutorials, resources for hosts, promotional materials and more. This year, Hour of Code week / Computer Science Education Week will be December 4-10 2017, so start planning now!