Vertical Numberline Plot

We have extended the functionality of our Numberline Plot Question Type by adding the ability to plot on a vertical number line.

Change between the default horizontal and new vertical number line by selecting the appropriate layout in the Formatting section of the Author Site.

Building Educational Experiences with Learnosity

Guest Post: Brad Hunt, VP Business Development, Smooth Fusion


One of our long-term clients, CEV Multimedia, Ltd., has been providing innovative educational materials for the last 30 years. CEV specializes in providing quality curriculum and educational resources for the subject areas of Agricultural Science & Technology, Business & Marketing, Family & Consumer Sciences, Trade & Industry, and Career Orientation. CEV’s teaching materials were originally distributed on VHS tapes, followed by CD and DVD, and now are delivered through the web.

Over the last few years, we have worked with the team at CEV to create an online learning platform known as iCEV. This online learning platform makes it easy for teachers and students to find and view educational videos, download worksheets and assignments, and find other quality content in several subject areas.

In the summer of 2014, CEV wanted to add interactive assignments, quizzes and tests to the existing platform. Instead of trying to reinvent these features and functionality from scratch, CEV partnered with Learnosity. Learnosity provides a set of tools and services that power the next generation of assessment products. Offered through a software-as-a-service model, Learnosity provides modular and flexible learning tools that can be integrated into any existing site.

With a powerful authoring system, Learnosity allows educators to create 52 different question types including multiple choice, sort lists, match lists, draw-on-an-image questions, cloze questions, number lines, and math essay. For CEV’s content areas, we used mostly multiple choice and order lists, but CEV continues to create new innovative questions as Learnosity adds question types.


This figure shows the Learnosity authoring platform that is used to create the questions.

Once the questions have been authored, there are several ways in which they can be grouped together to form activities and assessments. These activities can then be embedded on your own site. For CEV, we used Learnosity’s powerful API to embed activities into the iCEV product directly so that users don’t ever leave the iCEV platform. 

The figure above shows an interactive question in action on the iCEV platform. Students drag and drop the vocabulary term to match the definition.

The figure above shows an interactive question in action on the iCEV platform. Students drag and drop the vocabulary term to match the definition.

Another valuable Learnosity feature is the reporting system. And through the API, you can embed reports right on your own site. For example, when students complete an activity on the iCEV platform, they are presented with a summary of their work.


The flexibility of the Learnosity platform was one of the reasons that it was selected by CEV. A good example of this is Learnosity’s user management features. Through the API, we were able to programmatically create users as they begin to take the assessments, and then Learnosity tracks all the student progress on various attempts at activities. This meant that we could keep the user management system we already had in place for iCEV’s users. They did not need a second login for Learnosity tools. This also allows us to track user progress to provide grade reports for students and teachers.


Lastly, as we progressed through the Learnosity integration, the Learnosity team was there to help. On a few occasions, we had questions about the API or how to accomplish something specific with it, and the staff at Learnosity were always willing to support our development via email or phone calls. They were great to work with.

If you are working on projects that require the use of some type of assessment engine, consider Learnosity. It is a robust, flexible platform that has worked well for iCEV and was easy for Smooth Fusion to integrate.

This post originally featured on the Smooth Fusion Blog.



Expanding trust in educational technology by pledging to safeguard student personal information.

Dec 9th (New York, NY) Learnosity, a transformative education technology company, supplying Software as a Service (SaaS) assessment to many of the world’s leading school service providers today announced that it has joined the Student Privacy Pledge created by the Future of Privacy Forum (FPF) and the Software & Information Industry Association (SIIA).

“We take security and student data protection extremely seriously at Learnosity and use advanced security features such as encrypted volumes and rotating authentication keys to help keep student data secure.” says Learnosity CTO Mark Lynch. “We are 100% committed to any endeavours that safeguard student privacy and are delighted to publicly affirm our commitment to responsible data practices by signing the Student Privacy Pledge

The Pledge details ongoing industry practices that meet and go beyond all federal requirements and to encourage service providers to more clearly articulate these practices to further ensure confidence in how they handle student data.

By signing the Pledge, Learnosity joins major ed tech companies including: Amplify, Atomic Learning, Clever,, DreamBox Learning, Edmodo, Follett, Gaggle, Houghton Mifflin Harcourt, Knewton, Knovation, Lifetouch, Microsoft, Renaissance Learning, Think Through Math and Triumph Learning and publicly confirms that the company will:

  • Not sell student information
  • Not behaviorally target advertising
  • Use data for authorized education purposes only
  • Not change privacy policies without notice and choice
  • Enforce strict limits on data retention
  • Support parental access to, and correction of errors in, their children’s  information
  • Provide comprehensive security standards
  • Be transparent about collection and use of data

The Pledge and more information about how to support it are available at

About Learnosity

Learnosity is a rapidly expanding educational technology company. The company offers a set of tools and services that allow clients to incorporate powerful interactive assessment into their digital products quickly and easily. Run by a talented group of people who are passionate about transforming learning and assessment, Learnosity is committed to designing market-leading software to allow developers to create exceptional assessment products, make teachers’ lives easier, and above all, instill a love of learning in students. The Company is seeing an annual doubling of revenues, and works with some of the leading names in the Education industry.  The Learnosity Toolkit was recently named the Best K-12 Enterprise Solution by the SIIA, and National Champion for Innovation in the European Business Awards.  Learnosity has offices in NYC, Dublin and Sydney. For more information contact Learnosity on +353 (0) 1 4498789, or visit

Bringing the Learnosity Audio Question To Devices

The Audio Question has been a key vertebra in Learnosity’s backbone for quite some time. Built with a clever mixture of Flash and JavaScript, it has more than carried its own weight from amongst the repertoire of the Learnosity Questions API.

As is the case with anything built with Flash, though, its lack of open standard has implications for its adoption on newer and more mobile platforms, most of which have seen a demand and subsequent push for open web standards.

Rather than forever maintaining the DIY aspect of specialisation through the use of plugins and special configurations, this push has seen the adoption of amazingly practical audiovisual APIs for mobile web, namely, the slew of WebRTC APIs and Web Audio API.

The question: With these emerging technologies for mobile, can we bring the Learnosity Audio Question to devices?

A Short History of Exploration

At Learnosity, we like to keep up with emerging technology and adapt accordingly. As such, investigations on making the audio question more portable started as early as 2013, when the WebRTC and Web Audio APIs became available for Chrome for Android. One of our hack day teams tinkered with the technologies as they emerged, and, while noticable teething problems put the proverbial pin in things, the positive undertone was that there was definitely potential.

It wasn’t until early 2014 that stable and user friendly support for the Web Audio API came to Chrome for Android. MediaStream API support for mobile WebRTC had hit the ground running not long after our initial experiments, but now the latest inclusion of the AudioContext from the Web Audio API was the next runner in the relay.

What this meant for a more portable Audio Question was:

  • The browser itself had access to the audio stream coming from an end users recording hardware thanks to the MediaStream API.
  • We could read in that audio stream to an accessible audio context.
  • Most importantly, we could access buffered chunks of that stream for the sake of persistence.

Recording – A Workflow

Working draft specifications and naming polyfills aside, the recording workflow itself is rather straightforward. The Web Audio API comes equipped with more tools than required to just get the job done. That being said, the bulk of the work came about while dealing with the ‘newness’ of having these tools available for mobile browsers – buffer sizes and memory management being of prime concern in a context of being as lightweight as possible.

The flow itself works as follows:

Audio Question workflow with Web Audio API

Audio Question workflow with Web Audio API

From the MediaStream API, we have access to a communications stream – the MediaStreamAudioSourceNode (dependent on the end user, this is typically from a microphone).
This is an AudioNode that acts as an audio source for the Web Audio API to work on.

We connect our audio source to an AnalyserNode. This allows us to have access to frequency and time domain analysis in real-time for the sake of levels monitoring.

This gets passed to a JavaScript processing node, which is the crux of accessing the audio itself for persistence. This pipes the audio buffer out of the AudioContext thread and into the main JavaScript thread so we can (as the name suggests) process it. At this point, we adjust the audio sample rate and encoding for transport and persistence – similarly, we need to have a copy stored in memory ready for playback.

Finally, the whole process chain is connected to AudioDestinationNode, which, is effectively the speakers of the end user.

(A pre-recording tone is supplied by an OscillatorNode, which outputs a computer generated sine wave, and we control the output drop-off with a GainNode – to prevent speakers from giving a hardware crackle due to a lone burst of sound).

Playback – A Workflow

The playback workflow provided more than its fair share of “what?” moments while putting it together. It needs to be understood that the Web Audio API wasn’t intended to be an out of the box media player – there’s other tools that fill that niche already, though, those other tools didn’t anticipate playing back raw audio fresh off the stream.
The Web Audio API was designed around the idea of video game audio engines and audio production applications, and as such, a lot of the tooling revolves around “one shot” playback – you don’t scrub or seek on an audio blip that lasts less than a second. Similarly, its purposing from the WebRTC specification sees it being hooked up to a live stream and playing that until it stops – not altogether different.

Playback via the Web Audio API

Playback via the Web Audio API

In our playback workflow, our AudioBufferSourceNode is created from the stream we’ve been capturing via our recording workflow. In essence, this is raw audio data that has turned up to the party wearing a “Hi, my name is WAV” name tag, and manages to mingle as such.

Through our familiar chain of a GainNode (for volume) and an AnalyserNode (for levels), we again reach the AudioDestinationNode (hopefully speakers).

However, due to the one-shot nature of the AudioBufferSourceNode, any pause or seeking operation done on the audio will see its destruction, and a new Node taking its place as if nothing has happened. Hilariously, the original has no idea at what point it stopped, it just knows that it did, and as such, playback timing needs to be an external operation.

Conclusion – a solution?

The current incarnation of our efforts is the WebRTC-audio question. Currently in beta, and functioning admirably on the latest versions of Chrome and Firefox for Android.


As the MediaSteam API specification is still in working draft, and the Web Audio API specification is still subject to change (for the better, no doubt), this beta flag is unlikely to be lifted in the near future.

The Future

Readers who themselves have experimented in this area will know all too well the pain of having to pipe the audio stream buffer into the main JavaScript thread. Thread jumping from the relatively safe audio stream thread has the potential to introduce latency and all manner of audio glitches.

Thankfully, the ever accomplishing API specifications have seen to it that we’ll be getting Audio Workers at some point along our journey – let’s hope it’s not too far off.


Formula Input Feature

You can now embed our Formula Keyboard into multiple areas within a page even if you are not using the Formula Question Type.

Formula Input now sits alongside our range of Feature Widgets in the Features section of the Author Site.

Formula InputUsers can choose the symbol groups to be displayed and can control other features such as the hints, if an initial value is to be displayed, the keyboard UI style and response container size.

Check out the Author Guide Docs for more information on this new feature.


Creating Percentage Bar question type

At Learnosity, we have some pretty creative clients. The need for them to be able to create their own question types is increasing. We want to give third party developers the ability to create their own custom question while utilising the power of the Learnosity Platform for Authoring, Assessment and Reporting. This is exactly what the recently released Custom question is for. With the Custom question, developers have full control over the look and feel of the question, the user interaction and the scoring of the responses.

The Custom question is designed to be very simple to extend. To test drive it, I was asked to follow our knowledge base article creating a percentage bar question, where the student is able to drag the slider on the bar to change the input value.


View Demo

A Custom question is defined by passing a JSON object to the Questions API, just like any other other question type. I figured I could use HTML5′s range input to do this, and style its Shadow DOM using CSS to get the user interface I wanted. In the JSON object, I passed in my custom attributes:

  • js – URL to the question’s JavaScript file
  • css – URL to the question’s CSS file
  • prepend_unit – unit that gets prepended to the value
  • append_unit – unit that gets appended to the value
  • step – the value between incremental points along the slider range
  • min_value – minimum value
  • max_value – maximum value
  • min_percentage – minimum percentage
  • max_percentage – maximum percentage
  • init_value – value of the question when it’s first loaded
  • color – color of the bar
  • valid_response – valid response
  • score – the score students get if the response is valid
    "response_id": "custom-range-slider-response-1",
    "type": "custom",
    "js": "//",
    "css": "//",
    "prepend_unit": "$",
    "append_unit": "",
    "min_value": "0",
    "max_value": "150",
    "step": "10",
    "min_percentage": 0,
    "max_percentage": 100,
    "init_value": "20",
    "bar_color": "#80D3B4",
    "valid_response": "120",
    "score": 1,
    "stimulus": "If Luke has $150 and he spends $30 on beer, how much money has he got left?" 

I passed in the stimulus attribute as well, which is available in all question types.

After that, I created a JavaScript module with the init function of the question, where I specified the markup of the question to be rendered. Once this is completed, I used the ready event to notify Questions API that my question was ready:

var PercentageBar = function (options) {
    var template = '//My custom question HTML';


    this.$el = options.$el;


In order for responses to be saved, I needed to let Questions API know when the response to the question had changed. To do this, I created a listener for the input event. For it to work in IE10, I needed a listener for the change event as well. When the events were triggered, I could call the changed event and pass in the current input value:

$bar.on('input change', function() {'changed', $response.val());

Next I had to implement the scoring function. I simply needed to define a scorer function and pass in the question object and response data:

function PercentageBarScorer(question, response) {
    this.question = question;
    this.response = response;

Then following the structure of the scoring interface as specified in the knowledge base article, I defined methods to determine if the response was correct, what was the score for the current response and the maximum score of the question.

function PercentageBarScorer(question, response) {
    this.question = question;
    this.response = response;

PercentageBarScorer.prototype.isValid = function() {
    return this.response === this.question.valid_response;

PercentageBarScorer.prototype.score = function() {
    return this.isValid() ? this.maxScore() : 0;

PercentageBarScorer.prototype.maxScore = function () {
    return this.question.score || 1;

When the validation button was clicked, it triggered Questions API’s public method validateQuestions. In my JavaScript module, I listened for the validate event which would trigger the validate function I created:

var scorer = new PercentageBarScorer(options.question, $response.val());
function validate() {
    if (self.scorer.updateResponse($bar.val()).isValid()) {
    } else {
}'validate', function() {

The last step in creating the JavaScript module was to return the its object containing Question and Scorer properties:

return {
    Question: PercentageBar,
    Scorer:   PercentageBarScorer

Embedding the question on the page was just like any of our existing core question types. I followed the guide on Questions API documentation and voilà! We have a new percentage bar custom question! Since I was utilising HTML5 range input and Shadow DOM, this will only work in latest Chrome, Firefox, Safari and IE10+.

All this from start to finish took less than 2 days to implement and we think it will open up a lot of doors for developers out there to do some pretty cool things with our APIs.

View Demo

Learnosity VP, Jim Ruddy, appointed to SIIA Education Division Board of Directors


New York,  November 19, 2014 Learnosity, an educational technology company, providing innovative assessment solutions to educational publishers worldwide, today announced that Vice President of Business Development, Jim Ruddy has been appointed to the Board of Directors of the Software & Information Industry Association’s (SIIA) Education Division.

Made up of 21 executives from SIIA member companies that provide educational software applications, digital content, online learning services and related technologies across the K-20 sector, the Board brings together selected executives to represent a broad spectrum of interests within the educational technology industry. The new Board members will help develop initiatives and determine the projects, activities, and events the Education Division will undertake in 2015 and beyond.

I am delighted to be joining the Education Division’s Board of Directors” says Jim “and look forward to working closely with my fellow board members to bring innovation and industry best practices to the educational technology industry.

A results-driven executive, Jim Ruddy has over 15 years experience in the education industry and will bring a wealth of experience and insight to the Board. Prior to joining Learnosity he held senior executive roles at both Houghton Mifflin Harcourt and Riverdeep; including SVP of Business Development, Chief Revenue Officer and SVP of School Sales. He joins the Board alongside leaders from Intel, Scholastic, Follett Schools, Adobe, Academic Business Advisors, Promethean, Pearson, McGraw Hill Education, Renaissance Learning, HMH and Knovation.

Vice President for the SIIA Education Division, Karen Billings says “We are very pleased to welcome Jim Ruddy to our Board. With his extensive business and leadership experience he will add a valuable perspective to the Board. We appreciate his willingness to serve and look forward to benefiting from his insight and counsel.

About Learnosity  Learnosity is a rapidly expanding educational technology company. The company offers a set of tools and services that allow clients to incorporate powerful interactive assessment into their digital products quickly and easily. Run by a talented group of people who are passionate about transforming learning and assessment, Learnosity is committed to designing market-leading software to allow developers to create exceptional assessment products, make teachers’ lives easier, and above all, instill a love of learning in students. The Company is seeing an annual doubling of revenues, and works with some of the leading names in the Education industry. The Learnosity Toolkit was recently named the Best K-12 Enterprise Solution by the SIIA, and National Champion for Innovation in the European Business Awards. Learnosity has offices in NYC, Dublin and Sydney. For more information contact Learnosity on +353 (0) 1 4498789, or visit

About SIIA  The Software & Information Industry Association (SIIA) is the principal trade association for the software and digital content industry. SIIA provides global services in government relations, business development, corporate education, and intellectual property protection to more than 800 leading software and information companies. The SIIA Education Division serves and represents more than 200 member companies that provide software, digital content, and other technologies that address educational needs. The Division shapes and supports the industry by providing leadership, advocacy, business development opportunities, and critical market information. For more information, visit


Bar Chart – Read only bars

We have added the ability to make bars in our Simple Chart Bar Question Type ‘read only’ for students.

The addition of a interactive toggle makes choosing this option very easy for authors.

Untitled drawing (9)








Your own parser possible with PEG.js

There are many parser generators out there, but the vast majority of them only run in shells on the server side and are usually written in C. What if you need a solution that not only understands JavaScript syntax but can also generate ready to use JavaScript code in the form of a function?

Example use case

But why did I need a parser? A few weeks ago I was looking for the possibility of parsing LaTeX math expressions. My black box model required a valid LaTeX string as an input, and a JavaScript function as an output, e.g.




function (x) {
    return x + 4;

Looking for a solution

After spending some time researching various parser generators out there, I concluded that PEG.js was one of the most appropriate solutions to this problem. There are two other able to output results in JavaScript, but Waxeye works only from command line, and OMetaJS while very powerful, it doesn’t have proper documentation.

PEG.js describes itself as “a simple parser generator for JavaScript that produces fast parsers with excellent error reporting.” As I found out, it is indeed a simple parser generator with the biggest advantage being a very low entry barrier (If you navigate to, you’ll see an example grammar that recognises basic arithmetic expressions like addition and multiplication).

The project is in its early stages, and still under development, so, it may take some time to see v1.0 next to the name. Though, I must admit, even the early release is cool.

Simple calculator extended

Based on the earlier mentioned example provided on their website I was playing around and quickly found a way to offer much more than it was on the example page (check this Gist). It simply takes a LaTeX expression and evaluates it returning a value, e.g.





But it wasn’t exactly something I wanted, as you see in the Example Use Case section. To plot a function on a graph I needed a JavaScript function which I could pass a variable to (most commonly x).

Real parser

The parser I was writing had to be able to decompose passed LaTeX, i.e. for each portion of the LaTeX, generate a function that accepts any defined parameter, evaluate the LaTeX, and return the result.. Here’s a diagram of a concept I came up with:



A given LaTeX expression could be divided into blocks as follows:

Screen Shot 2014-10-28 at 4.03.17 pm


var func = function (x) {
    return (function (x) { // multiply
        return (function (x) { // fraction
            return (function (x) { // x
                return x;
            })(x) / (function (x) { // 2
                return 2;
        })(x) * (function (x) { // absolute
            return Math.abs((function (x) { // -10
                return -10;

func(5); // outputs 25
func(4); // outputs 20
func(1); // outputs 5
func(0); // outputs 0

Now returned function can be plotted on a graph, using e.g. JSXGraph library:


OK – it all looks pretty, but now the hard part. It’s like I invited you to watch a game, but instead of watching it, you’re constantly staring at a website with live scores being refreshed every few minutes. I promised a parser that can convert LaTeX expression to executable JavaScript function but all you see are hardcoded snippets of code, and nothing automated. Well – you just have to be patient.

Let’s be even more ambitious

One of our unwritten rules of thumb is to make our solutions as sweet as possible, so, I made few tweaks to this task to sweeten the pot a bit.

There can be many occasions when you want to plot a set of variations of the same functions, e.g. slightly changing the position of a graph. To achieve this, your function needs to accept more parameters than only x. Let me give you an example:




var func = function (obj) { … };
func({x:5,a:1,b:2}); // outputs 7
func({x:6,a:3,b:4}); // outputs 22

You can see that our parameterized LaTeX defines more than one variable – now we have a, b and x. It requires our parser to be able to recognise all variables, and let us pass their values on execution to a generated function. I don’t want to bore you with going through the solution step by step, as this article is not a tutorial (nevertheless, the parser is available here).


One of the design decisions in PEG.js is avoidance of recursion. It’s up to you to decide whether this decision will prevent you from using this tool or not. There are problems which are much easier to solve using recursion, and can really mess up your parser grammar if you decide to take a path around it. In case of PEG.js, a path around recursion is mandatory.

I think PEG.js is a great tool, and worthy of attention. I hope it grows and that someday we will see v1.0.