Educate 2017: Customizing Assessments: Why extending the APIs is easier than you think

Customizing Assessment:
Why extending our APIs
is easier than you think
10:30 – 11:10am
Michael & Pierre

Michael Sharman
Director of Product & Engineering
michael.sharman@learnosity.com
Pierre Bergamin
Technical Lead - Assessment
pierre.bergamin@learnosity.com
Presenters

1. Our objectives for assessment
2. Learnosity 101
3. Configuring our APIs
4. Styling our APIs
5. Extending your solution
Outline

● Learners
○ K–12
○ Higher Education
○ Corporate
○ Test Prep
● Developers
○ People integrating the APIs – you!
Who we develop for

Learnosity’s APIs are:
● Powerful
● Flexible
● Extendable
● Simple
46 million tests delivered per month
Product objectives

1. Our objectives for assessment
2. Learnosity 101
3. Configuring our APIs
4. Styling our APIs
5. Extending your solution

How to use our APIs 
<div id="learnosity_assess"></div>

<script src="https://items.learnosity.com"></script>
<script>
const initOptions = {
"security": {
// Security JSON
},
"request": {
// Initialization JSON
}
};
const itemsApp = LearnosityItems.init(initOptions, {
readyListener() {
},
errorListener() {
}
});
</script>
1. HTML hook
2. Embedding the API script
3. Initialization options
↳ server-side security signature
generation required
1. API initialization

Essential API hooks
App Instance
↳ Object containing methods to interact with
○ Public methods
○ Events
Ready Listener
↳ Function called when the API has initialised
Error Listener
↳ Function called when the errors are raised
const itemsApp = LearnosityItems.init(initOptions, {
readyListener() {
console.log(`API ready`);
},
errorListener(error) {
console.error(`an error occured`, error);
}
});

Items API
Assess API
Questions API
Items API
Assess API
Questions API
Usage scenario – Player

Questions API
Items API
Questions API
Items API
Questions API
Usage scenario – Inline

// Configuration is handled via a simple JSON request
// object that is passed to the init() method
{
"security": {/* security object */},
"request": {
"activity_id": "itemsassessdemo",
"name": "Items API demo - assess activity",
"rendering_type": "assess",
"state": "initial",
"type": "submit_practice",
"session_id": "9f730ce2-faa1-4062-adbb-cd9552490767",
"user_id": "demo_student",
"items": [
"Demo1",
"Demo2"
],
"assess_inline": true,
"config": {
"regions": "main",
"time": {
"max_time": 1500,
"limit_type": "soft",
"warning_time": 120,
}
}
}
}
Configuring the player
● Student controls
○ Pause
○ Navigation
○ Tools
● Player controls
○ Item counter
○ Timed tests
○ Component layout

{
"request": {
"state": "initial",
"items": [
"Demo1",
"Demo2"
],
"config": {
"regions": "main",
"time": {
"max_time": 1500,
"limit_type": "soft",
"warning_time": 120,
"countdown_option": false
}
}
}
}
Time controls
Items API

{
"request": {
"state": "initial",
"items": [
"Demo1",
"Demo2"
],
"config": {
"navigation": {
"show_accessibility": true,
"show_answermasking": true,
"show_fullscreencontrol": true
}
}
}
}
Player controls
Items API

● < 2014 - fixed approach
Layout in 2014

Configuring regions – Out of the box
{
"request": {
"state": "initial",
"items": [
"Demo1",
"Demo2"
],
"config": {
"regions": "main"
}
}
}

{
"request": {
"state": "initial",
"items": [
"Demo1",
"Demo2"
],
"config": {
"regions": "horizontal"
}
}
}

{
"request": {
"state": "initial",
"items": [
"Demo1",
"Demo2"
],
"config": {
"regions": "horizontal-fixed"
}
}
}

● Control where elements go
● Order
● Minimalistic or rich UI
● Element options
Configuring regions – Flexibility
{
"regions": {
"top-right": [
{ "type": "pause_button" },
{ "type": "timer_element" },
{ "type": "reading_timer_element" },
{ "type": "itemcount_element" }
],
"right": [
{ "type": "save_button" },
{ "type": "fullscreen_button" },
{ "type": "separator_element" },
{ "type": "accessibility_button" },
{
"type": "calculator_button",
"scientific_option": true
},
{ "type": "verticaltoc_element" },
{ "type": "masking_button" }
],
"bottom-right": [
{
"type": "next_button",
"hide_label_option": true
}
]
}
}

Demo : Regions
https://docs.learnosity.com/demos/isolation/regions/educate/regions.php

Customizing Learnosity styles
● Overriding Learnosity API styles
○ Questions or Assess APIs
○ CSS specificity
● We can host your custom stylesheets or you do it

Customizing Learnosity styles
https://docs.learnosity.com/demos/isolation/questions_styles.php

Demo:
Middle School
https://docs.learnosity.com/demos/isolation/custom_ui/grade4-6/index.php

Extending your
solution
With public methods

● Programmatically control
your assessment
● Get/Set data
● App instance
Public methods
// Example 1: Get the list of attempted items
const attemptedItems = itemsApp.attemptedItems();
/*
[
"ccore_ccs_rabbit",
"ccore_DropDowns_inline_cloze_mp4",
"ccore_sbalance_online_43081"
]
*/
// Example 2: Show a custom dialog
itemsApp.assessApp().dialogs().custom.show({
header: "My Custom Header",
body: "Custom body with <strong>html</strong> support",
buttons: [
{
button_id: "my_primary_button",
label: "My Primary Button",
is_primary: true
},
{
button_id: "my_standard_button",
label: "My Standard Button",
is_primary: false
}
]
});
// Dismiss the custom dialog
itemsApp.assessApp().dialogs().custom.hide();

Public methods
addAccessibilityPalettes eventsApp getItems hasStarted on setAccessibility
addItems feature getItemsMetadata item.checkImages once setHeight
append features getProgress item.retryLoadImages question start
attemptedItems getCurrentItem getQuestions item.flag questions submit
attemptedQuestions getFeatures getResponses items.goto questionsApp unsaveableQuestions
audioPlayer getItemPosition getScores items.previous reset validQuestions
dialogs.show getItemResponses getSubmitssionData items.next safeToUnload validatableQuestions
dialogs.hide getItemScores getTime off save And more to come!

https://docs.learnosity.com/demos/isolation/custom_ui/corporate/index.php
Demo:
Your own next & previous buttons

Use your own “Next & Previous” buttons? Easy!
readyListener() {
document
.getElementById('next-item-btn')
.addEventListener('click', event => {
assessApp.items().next();
});
document
.getElementById('prev-item-btn')
.addEventListener('click', event => {
assessApp.items().previous();
});
}
<button id="prev-item-btn">Previous</button>
<button id="next-item-btn">Next</button>

Extending your
solution
With events

Events
● Player events
● Questions events
.on('eventName', callback, ctx);
↳ Binds a callback function that will be invoked whenever
the eventName is triggered.
↳ To supply a context to execute the callback on, pass the
optional third argument.
.once('eventName', callback, ctx);
.off('eventName', callback, ctx);
Plug into the API event bus
/* Example 1 - player event */
// Event handler - log the index of the item we navigate to
// and save
function itemChangedHandler(itemIndex) {
console.log('itemChanged', itemIndex);
itemsApp.save();
}
itemsApp.assessApp().on('item:changed', itemChangedHandler);
/* Example 2 - question facade event */
const audioQuestion = myQuestionsApp.question('60001');
// Start recording
audioQuestion.recording.start();
// Play response when recording is stopped
audioQuestion.on('recording:stopped', () => {
audioQuestion.response.play();
});

Back to our “custom dialog” solution
assessApp.on('button:answer1_button:clicked', () => {
console.log('That is right, well done!');
const lastItemIndex = Object.keys(assessApp.getItems()).length - 1;
assessApp.dialogs().custom.hide();
// Go to the last item
assessApp.items().goto(lastItemIndex);
});
assessApp.on('button:answer2_button:clicked', () => {
console.log('Sorry mate, you can start your test again!');
assessApp.dialogs().custom.hide();
// Go to the first item
assessApp.items().goto(0);
});
const assessApp = itemsApp.assessApp();
assessApp.dialogs().custom.show({
header: "How many Question types does Learnosity offer?",
body: "You get a <B>special</b> prize if you get it right!",
buttons: [
{
button_id: "answer1_button",
label: "65 or more",
is_primary: true
},
{
button_id: "answer2_button",
label: "64 or less",
is_primary: true
}
]
});

https://docs.learnosity.com/demos/products/assessapi/events.php
Demo:
List of Player Events

Demo:
Blue Riding Hood
https://docs.learnosity.com/demos/products/questionsapi/stories/blueRidingHood/index.php

Custom questions
Create your own Question Types to be used within Learnosity
Create JSON definition1
{
"response_id": "custom-response-1",
"type": "custom",
"js": "//mysite.com/demos/custom_shorttext.js",
...
}
2
LearnosityAmd.define(['underscore', 'mathcore'],
(_, mathcore) => {
/* Custom Question Class */
class Question {
constructor(options) { /* ... */ }
}
return { Question, /* ... */ };
});
Use Learnosity module definition
3 Scoring
isValid() { /* ... */ }
score() { /* ... */ }
maxScore() { /* ... */ }

Customization continuum
Configure Style Extend
Simplicity Simple Pretty Simple Simple if you know JavaScript
Frequency All customers Some customers A few customers
Skills/Tools Learnosity Learnosity + CSS Learnosity + JavaScript
Time Minutes to hours Hours to days Days to weeks
More Effort & Added ValueLess Effort

● Learnosity is designed to be customized
● Customize only the areas that are important to your users
● Only limited by your imagination.
● Allows you to easily differentiate your product, while taking
advantage of cutting-edge, scalable, powerful solutions.
Conclusions

Educate 2017: Customizing Assessments: Why extending the APIs is easier than you think

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to Educate 2017: Customizing Assessments: Why extending the APIs is easier than you think

Similar to Educate 2017: Customizing Assessments: Why extending the APIs is easier than you think (20)

More from Learnosity

More from Learnosity (18)

Recently uploaded

Recently uploaded (20)

Educate 2017: Customizing Assessments: Why extending the APIs is easier than you think

Editor's Notes