Karuta Apereo Miami 2014 Conference

transcript

KARUTAOPEN SOURCE PORTFOLIO : A FLEXIBLE ARCHITECTURE FOR ASSESSMENT, ACCREDITATION AND MUCH MORE

Jacques Raynauld – Olivier Gerbé, HEC Montréal

OUTLINE

PART 1 - Jacques

1. Sakai CLE OSP tools

2. Karuta – the name

3. Relevance of assessment portfolios

4. Our approach : flexibility and prototyping

5. Structure, Unit, Unit-structure, Resources

6. Examples

7. Leveraging KARUTA

8. Technology

Part 2 – Olivier

1. Tree structure

2. Code organization

3. How it works

4. Resources

5. Security

6. Instantiation

7. Road-map

8. Questions

June 1, 2014

SAKAI CLE OSP TOOLS• The Open Source Portfolios tools in Sakai CLE

• Have reached a significant level of maturity• Have tought us a great deal about how to do portfolios• Have significant issues with usability, quality of code,

performance and QA• We want to continue to offer portfolios in Sakai while

upgrading their capabilities and usability

June 1, 2014

KARUTA PROJECT• HEC Montréal with Kyoto University,Three Canoes LLC

with the help of IUT-2 Grenoble have proposed KARUTA, a new LTI enabled evaluation portfolio tool for Sakai CLE

• Recently accepted as an Apereo incubation project.

June 1, 2014

THE NAME

Karuta (カルタ金 ) was a type of armour worn by samurai warriors during the feudal era of Japan.

The word karuta comes from the Portuguese word meaning "card", (carta) as the small square or rectangular plates that compose the armour resemble traditional Japanese playing cards.

http://www.japanese-armor.com/Takeda-Shinten-Daiymo-Armor.html

June 1, 2014

RELEVANCE OF ASSESSMENT PORTFOLIOS

Many types of portfolios

• Learning portfolios

• Showcase portfolios

• Assessment portfolios

• A specific collection of artifacts and reflections that represent an individual’s learning and accomplishments within a programmatic learning context.

• Evidence is linked to learning outcomes and evaluated using rubrics.

• Reports aggregate and analyze data and identify representative artifacts.

June 1, 2014

OUR APPROACH

A framework in the spirit of OSP that permits

• to organize different resources (text, documents, rubrics, comments, etc.)…

• … according to a workflow for different users (students, tutors, etc.) …

• … for assessment, guidance, reporting and presentation.

Lessons learned over the last three years• No one portfolio is the same

• Flexibility is key, prototyping is a mustJune 1, 2014

OUR APPROACH WITH PARTNER SCHOOLS

KARUTA Designer

Prototype - Pilot

KARUTA Production

June 1, 2014

EXAMPLE ASSESSMENT*

* Thanks to VirginiaTech for letting us use their TESOL Portfolio

June 1, 2014

EXAMPLEASSESSMENT

June 1, 2014

(peer)

EXAMPLEASSESSMENT

June 1, 2014

STRUCTURE-UNIT

June 1, 2014

18June 1, 2014

June 1, 2014

STRUCTURE-UNITMETADATA

June 1, 2014

STRUCTURE – UNITOTHER METADATA

June 1, 2014

student

LEVERAGING KARUTASPECIAL RESOURCES

Get_Resource

June 1, 2014

LEVERAGING KARUTAITEM

June 1, 2014

LEVERAGING KARUTA GET_RESOURCE

June 1, 2014

METADATA

LEVERAGING KARUTA PROXY

June 1, 2014

METADATA

LEVERAGING KARUTA MENU

June 1, 2014

LEVERAGING KARUTA MENU

June 1, 2014

METADATA

TECHNOLOGY

1. jQuery, javascript client

2. REST APIs implemented in Java and mySQL

3. Responsive Design

4. Twitter Bootstrap CSS

5. Group-role permissions

6. IMS LTI-1 (Three Canoes)

7. Almost LEAP2A (XML import/export)

June 1, 2014

ADDITIONNAL FEATURES1. Multilingual (French,

English, Spanish, Japanese)

2. Export, import, share, print portfolios

3. Showcase portfolio (ppt like)

4. Dashboards – matrices (with special javascript)

5. Reports

6. Forms, online editing (no pop-up)

7. HTML output (publication)

8. Admin tools for instanciation of portfolios

9. Peer assessment

10. Notification

11. Social network integration (Elgg)

12. UI customizable

June 1, 2014

KARUTA

ARCHITECTURE

GENERAL ARCHITECTURE

Application (javascript jQuery html css)

Karuta-core (javascript jQuery html css)

Karuta-Backend (java)

File Server (java)MySQL Oracle

web services

Internet

TREESTRUCTURE

KARUTA

An application (competency repository, course syllabus, portfolio, etc.) is structured into web pages.

ASM MODEL

Structure

UnitStructure

Context

Resource

Page Page

PagePage

NODE AND LEAF

NodeNode

noderes

context

Resource

children

codelabel

noderes

context

codelabel

CODEORGANIZATION

KARUTA

KARUTA-CLIENTCODE

karuta

languages

resources

bootstrap

bootstrap-datepicker

jplayer

lightbox

wysihtml5

jquery

HOW IT WORKS

KARUTA

GET A PORTFOLIO

Web Browser

Backend

GET XML

XML PARSING

Each node is identified by an UUID (Universal Unique IDentifier)

The XML is automatically parsed by jQuery and all references to nodes are references to xml structure

For each node we create two javascript objects :

1. a tree object to navigate efficiently in the structure of the portfolio

2. an user interface object to manage and display nodes of the portfolio

TWO INDEXES TO ACCESS TREE AND UI OBJECTS

uuid ui objectmanage and display

methods

childs[ ]

asmRootasmStructureasmUnitasmUnitStructureasmContext

UICom.structure["ui"][]

UICom.structure["tree"][]

jQuery XML

TREE OBJECT//===========================

Tree: function(node)

//===========================

this.node = node;

this.childs = [];

USER INTERFACE OBJECT//==================================

UIFactory["Node"] = function( node )

//==================================

this.id = $(node).attr('id');

this.node = node;

this.asmtype = $(node).prop("nodeName");

this.code_node = $($("code",node)[0]);

//------------------------------

this.label_node = [];

for (var i=0; i<languages.length;i++){

this.label_node[i] = $("label[lang='"+languages[i]+"']",$("asmResource[xsi_type='nodeRes']",node)[0]);

if (this.label_node[i].length==0) {

var newElement = document.createElement("label");

$(newElement).attr('lang', languages[i]);

$(newElement).text(karutaStr[languages[languages[i]],'new']);

$("asmResource[xsi_type='nodeRes']",node)[0].appendChild(newElement);

this.label_node[i] = $("label[lang='"+languages[i]+"']",$("asmResource[xsi_type='nodeRes']",node)[0]);

//------------------------------

var resource = null;

this.resource_type = null;

this.resource = null;

if (this.asmtype=='asmContext') {

resource = $("asmResource[xsi_type!='nodeRes'][xsi_type!='context']",node);

this.resource_type = $(resource).attr("xsi_type");

this.resource = new UIFactory[this.resource_type](node);

NODE UPDATE

1. The user modifies the node

2. XML node is updated

3. a PUT is sent to the backend

4. Client refreshes all representations of the node in the interface

RESOURCE

KARUTA

FIELD//===================== Field =======================

<metadata-wad seenoderoles="all" />

<metadata-epm />

<metadata multilingual-node="Y"

semantictag ="Field” sharedNodeResource="N" sharedResource="N" />

</asmResource>

</asmResource>

</asmContext>

TYPE_FIELD.JS

UIFactory["Field"] = function(node)

UIFactory["Field"].prototype.getView = function(dest,langcode)

UIFactory["Field"].prototype.getEditor = function(type,langcode)

UIFactory["Field"].update = function(input,itself,langcode)

UIFactory["Field"].prototype.save = function()

UIFactory["Field"].prototype.refresh = function()

UIFACTORY["FIELD"] = FUNCTION(NODE)this.id = $(node).attr('id');

this.node = node;

this.type = 'Field';

this.multilingual = ($("metadata",node).attr('multilingual-resource')=='Y') ? true : false;

this.display = {};

this.text_node = [];

for (var i=0; i<languages.length;i++){

this.text_node[i] = $("text[lang='"+languages[i]+"']",$

("asmResource[xsi_type='Field']",node));

if (this.text_node[i].length==0) {

var newelement = document.createElement("text");

$(newelement).attr('lang', languages[i]);

$("asmResource[xsi_type='Field']",node)[0].appendChild(newelement);

this.text_node[i] = $("text[lang='"+languages[i]+"']",$

("asmResource[xsi_type='Field']",node));

UIFACTORY["FIELD"].PROTOTYPE.GETVIEW= FUNCTION(DEST,LANGCODE)

{//---------------------if (langcode==null) langcode = LANGCODE;if (!this.multilingual) langcode = 0;//---------------------if (dest!=null) { this.display[dest]=true;}return $(this.text_node[langcode]).text();}

UIFACTORY["FIELD"].PROTOTYPE.GETEDITOR

{ //--------------------- if (langcode==null)

langcode = LANGCODE; if (!this.multilingual)

langcode = 0; //--------------------- var html = ""; html += "<input type='text' value=\""; html += $(this.text_node[langcode]).text()+"\" >"; var obj = $(html); var self = this; $(obj).change(function (){

UIFactory["Field"].update(obj,self); }); return obj;}

UIFACTORY["FIELD"].UPDATE{//--------------------- if (langcode==null)

langcode = LANGCODE; if (!itself.multilingual)

langcode = 0; //--------------------- var value = $.trim($(input).val()); $(itself.text_node[langcode]).text(value); itself.save();}

UIFACTORY["FIELD"].PROTOTYPE.SAVEUIFACTORY["FIELD"].PROTOTYPE.REFRESH

UIFactory["Field"].prototype.save = function()

UICom.UpdateNode(this.id,writeSaved);

this.refresh();

UIFactory["Field"].prototype.refresh = function()

for (dest in this.display) {

$("#"+dest).html(this.getView());

SECURITY

KARUTA

FIVE CONCEPTS

• User• Role-Rights• Group• Account• Portfolio

THE MODEL

USER• Username• Lastname• Firstname• Email• Password

ROLE• rights

ACCOUNT

Portfolio

AN EXAMPLE

studentACCOUNT

ACCOUNT

tutorACCOUNT

USER1 has 2 accounts then 2 roles: student and tutor

Students

Tutors

Portfolio2

Portfolio 1

student

Portfolio

Instantiate

Rights group

student:

Edit 3tutor:

Read 4Seenode role: allEditres role: student...

Write 4

GROUP INSTANTIATION

Role - Rights

student:

Edit 3tutor:

Role Group

student:

student1tutor:

tutor1

Write 4

Portfolio

ASSIGN USERS TO ROLES

1 - student submits

student

Remove write

2 - tutor submits

Remove write

student

Add read

Rights group

student:

tutor:

Write 4

Portfolio

DYNAMIC RIGHTS

Edit 3

INSTANTIATION

KARUTA

ORIGINAL TREESHAREDNODERESOURCE - SHAREDRESOURCE

noderes

context

noderes

context

resource

sharedNodeResource=N

sharedNodeResource=YsharedResource=N

node noderes

context

resource

sharedNodeResource=YsharedResource=Y

context

PortfolioModel

INSTANTIATIONSHAREDNODERESOURCE - SHAREDRESOURCE

noderes

context

noderes

context

resource

sharedNodeResource=N

node noderes

context

resource

sharedNodeResource=YsharedResource=Y

context

noderes

context

resource

context

New PortfolioPortfolioModel

KARUTA

GETCREDENTIAL<user id="1">

</user>

GET/PORTFOLIOS/PORTFOLIO/{PORTFOLIO-ID}<portfolio id="5afbf83a-2ff0-4662-afcf-41b2bfd22a58" code="0">

<metadata-wad owner="N" ></metadata-wad>

<asmRoot id="b3f43c3a-7169-49f8-8adb-46ac6bba3282"

action="" delete="Y" read="Y" submit="Y" write="Y" xsi_type= »asmRoot">

<metadata-wad></metadata-wad>

<metadata-epm></metadata-epm>

<asmResource id="248518b0-59ca-4563-b090-83b4f36e4bee"

contextid="b3f43c3a-7169-49f8-8adb-46ac6bba3282" xsi_type="nodeRes">

<code>KarutaTest</code>

<label lang="fr">KarutaTest</label>

<label lang="en">KarutaTest</label>

</asmResource>

<asmResource id="34a5f3bf-aa1a-414b-a590-b7ccf5b50d42"

contextid="b3f43c3a-7169-49f8-8adb-46ac6bba3282" xsi_type="context"></asmResource>

<asmStructure id="e35b0934-cb1d-11e3-861e-00215e6c3f32"

action="" delete="Y" read="Y" submit="Y" write="Y" xsi_type="asmStructure »>

PUTRESOURCES/RESOURCE/{UUID}

<span>Please upload a file on the work related to this rubric.

</text>

</asmResource>

GETNODES?PORTFOLIOCODE=PPN_GEA&SEMTAG=ACTIVITE

<nodes>

<label lang="fr">Collecte et organisation des données de gestion</label>

</asmResource>

</node>

<label lang="fr">Recueil et traitement de l'information pour se conformer aux obligations légales et réglementaires</label>

</asmResource>

</node>

</nodes>

ROAD-MAP

1. Apereo Community Incubation Project

2. Improve the UI

3. Investigate scalability issues

4. Improve Admin tools

5. Working on KARUTA 1.0 (September 2014)

6. Various pilots

June 1, 2014

Demo :

https://confluence.sakaiproject.org/display/OSP/Portfolios+for+the+Future+of+Sakai

QUESTIONS?

jacques.raynauld@hec.ca olivier.gerbe@hec.ca

Thanks to:

Janice Smith, Three Canoes LLC

Shoji Kajita, Kyoto University

Eric Giradin and Marc Vassoille, IUT-2 Grenoble

Nobry Ouk, MATI Montréal

And all our partner schools

June 1, 2014

STRUCTURE-UNIT

June 1, 2014

STRUCTURE - UNIT

June 1, 2014

Karuta Apereo Miami 2014 Conference

Education