Creating a Custom Problem Type for edX

As part of my coursework, I’m writing a new problem type for edX using JavaScript.  This job presented a new problem to me, too; I’ve only been coding for about 3 months.  Here’s an update on some of my progress:

I knew that I’d be using JavaScript–that’s the language that edX uses for many of its problem types (like multiple choice, short-answer, etc)–so I first completed the JavaScript, HTML/CSS and jQuery courses on Codecademy.  That gave me a basic understanding of programming knowledge, and some of the tools I have at my disposal as I work.

I started meeting weekly with Dr. Colin Fredericks at HarvardX, who brought me up to speed on some of the new problem types that edX is already experimenting with.  We identified a need for an adaptive multiple choice problem type.  Currently, edX students may be presented with an assessment that uses multiple choice questions, but these questions are linear–no matter what students on question 1, they are taken to question 2.  An adaptive multiple choice assessment may take them to question 4 if they get question 1 right, but question 2 if they get it wrong.

For example, if I were teaching algebra, I may want to start by assessing students with a single-variable algebra question.  If they get it right, I may want them to shift to a multi-variable question.  If they get it wrong, it would be immensely helpful to shift them to a resource (video, diagram, etc).  Even better, I may want them to see a video on absolute value if they answered C (an answer that might indicate that a student doesn’t understand absolute value), or a diagram on order of operations if they answered B.  An adaptive multiple choice question allows students to do just that.

After some sketches on what this might look like, I started programming:

1) Basic multiple choice form

Even after hours on Codecademy, I had no memory of how to create a form.  Luckily, the Internet is a great resource for basic HTML questions.  I started with three basic multiple choice questions in the style of a form.  The questions weren’t adaptive or styled.

2) Styling

CSS was very easy to learn after learning HTML, and allowed me to quickly style my multiple choice questions:

3) Animation, logic

I then turned my problems into JavaScript objects, and gave them two attributes: “html” and “logic.”  The “html” was the form and styling that I already had, but the “logic” told the objects which problem should come next.

Using jQuery, I programmed the form to “listen” for user input–that is, when the user clicked one of the bubbles, the object would follow the logic that I gave it.