How Code School Verifies Student Submissions

in Development

Just a few weeks ago, Code School released our latest CSS3 animations tutorial, Adventures in Web Animations it’s a great way to learn the the core concepts you’ll need to design with movement in mind. Working with Alyssa, the charismatic teacher you’ll see in the videos, we created some fun challenges that students could try out in the browser, allowing them to immediately see what their code would look like moving on the page.

While Alyssa focused on the content, Jordan focused on the front-end, and Olivia focused on the design, I was focused on making an exciting and fun course to play through that would inspire people to use what they learned to create something outside of Code School. But in order to do this, we had to solve a few issues that could distract users during the learning experience and help them concentrate throughout the course, so anyone can achieve their coding goals. So today I’m going to dive into how I accomplished this goal, and set up verification for student submissions in our newest course.

Verifying CSS

All code verification for this course happens on the client side. This means we write a lot of JavaScript to test that everything is working like you’d expect it to. For this course, that meant quite a bit of digging into what CSS was written and what styles were applied to the page.

getComputedStyle

The getComputedStyle method is one of the most useful tools that’s actually usable in all browsers. It allows you to pass in a DOM element and get back an object that’s a snapshot of all of that element’s styles. This is a core tool we use to check that a student applied a specific style — here’s an example of how this could work:

var btn = document.getElementById('buy-now'),
    styles = getComputedStyle(btn);

At this point, the styles variable will contain every CSS property possible, although some of them might be empty or the browser defaults. You can even pass a pseudo selector to getComputedStyle if you want to see the styles in a different state!

styles = getComputedStyle(btn, ':hover');

CSSOM

Another tool we lean on heavily is CSSOM, a killer CSS parser that allows us to treat the CSS code submitted as a JavaScript object. We have been using CSSOM for a long time, and courses as far back as Journey Into Mobile rely on it to evaluate code.

For example, in the very first challenge of Adventures in Web Animations, we show how to animate the color of a button. We’re able to verify this one using getComputedStyle, but let’s look at how to do it:

var syles = ".btn { background-color: #00A0D6; color: #FFF; transition: all 0.4s; }"
var rules = CSSOM.parse(styles).cssRules;

If you’re curious what the output of this is, check it out in the CSSOM Sandbox. Each selector in your CSS will be another item in the cssRules array — this makes it shockingly easy to tell exactly what a student typed. We can even use this to give feedback if they declare a CSS selector that is wrong, but that we think they might do.

CSSLint

“Linting” is an odd word, but one that’s come to be very useful in multiple languages. A Linter is a program that you can run your code through and it will give some kind of analysis without actually running it. This is generally “status analysis,” or giving a result without actually running the code.

We used CSSLint in this course, which gives some very detailed feedback to a student. What’s even better is that CSSLint allows you to define additional rules. We added a few of these to provide better error messages to students.

For example, if you submitted the following code and got a parse error, you might end up shaking your head.

a {
  transition: opacity 1s, top 0.5s;
  transform: translateY(10px), translateX(10px);
}

Did you see the issue? If not, I’m with you. The declaration for transitions has a comma between them, but the declaration for transforms does not. If you submitted this code in the course, you’d get a much nicer error:

It looks like there’s a syntax error in your CSS: It looks like your transform statement for selector ‘a’ has an invalid comma. Unlike transitions, you do not need a comma between transforms.

Helping people stay on track is our goal!

Vendor Prefixes

Although all current browsers support animations, they don’t all work the same. We touch on this briefly in the course, but the solution to this is “vendor prefixes.” Occasionally you might see something like this:

@keyframes fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

.animate--fade-in {
  -webkit-animation: fade-in 1s;
  animation: fade-in 1s;
}

This is a super simple animation to fade an element in. Just give it the animation–fade-in class and it will fade in! Unfortunately, we had to duplicate the animation line with -webkit-animation: fade-in 1s; because Safari 8, the most used version of Safari, does not support animations without this prefix.

Pre-processors

There are a number ways around this. If you’re using Sass or a CSS pre-processor, you can configure your build step to add these prefixes. For this course, though, we didn’t want students to need to know Sass, and we didn’t want them to write a ton of vendor-specific code that they couldn’t see in their browser.

Autoprefixer

The workaround for this is that in the sandbox, when you’re seeing a preview of the CSS you wrote, it’s being run through A utoprefixer, a drop-in script that allows you to pass a string containing your CSS to Autoprefixer. And this means you’ll get back the same CSS with vendor prefixes added in! This small change allows a student in any browser to have the same experience learning the basics of CSS animations without having to spend too much time worrying about the world of vendor prefixes.

Give It a Shot

Want to try your hand at CSS animations? I’d encourage you to give the course a try! The first level is free, and provides a good overview of how CSS animations work. I know after spending some time with this course, I ended up using CSS animations left and right in my own personal projects — it’s a shockingly easy way to improve a site, and a useful skill to know. Let us know your thoughts on web animations, and how you like to use them in your own projects, in the comments below!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Adam Fortuna

Adam works on courses at Code School, usually jumping between JavaScript and Ruby. When not looking for new ways to teach topics, he spends his days playing board games and listening to way too many SciFi audiobooks.

Might We Suggest