Karuta Apereo Miami 2014 Conference

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

Jacques Raynauld – Olivier Gerbé, HEC Montréal

June

1, 2

014

2

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

3

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

4

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.

5

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

June 1, 2014

6

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

7

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

8

OUR APPROACH WITH PARTNER SCHOOLS

KARUTA Designer

Prototype - Pilot

KARUTA Production

June 1, 2014

9

EXAMPLE ASSESSMENT*

* Thanks to VirginiaTech for letting us use their TESOL Portfolio

June 1, 2014

10

EXAMPLEASSESSMENT

June 1, 2014

(peer)

11

EXAMPLEASSESSMENT

June 1, 2014

12

STRUCTURE-UNIT

June 1, 2014

13

June 1, 2014

14

June 1, 2014

15

June 1, 2014

16

June 1, 2014

17

June 1, 2014

18June 1, 2014

19

June 1, 2014

20

June 1, 2014

21

June 1, 2014

22

June 1, 2014

23

STRUCTURE-UNITMETADATA

June 1, 2014

24

STRUCTURE – UNITOTHER METADATA

June 1, 2014

student

25

LEVERAGING KARUTASPECIAL RESOURCES

Item

Get_Resource

Proxy

Menu

June 1, 2014

26

LEVERAGING KARUTAITEM

June 1, 2014

27

LEVERAGING KARUTA GET_RESOURCE

June 1, 2014

METADATA

28

LEVERAGING KARUTA PROXY

June 1, 2014

METADATA

29

LEVERAGING KARUTA MENU

June 1, 2014

30

LEVERAGING KARUTA MENU

June 1, 2014

METADATA

31

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

32

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

33

KARUTA

ARCHITECTURE

34

GENERAL ARCHITECTURE

Application (javascript jQuery html css)

Karuta-core (javascript jQuery html css)

Karuta-Backend (java)

File Server (java)MySQL Oracle

Brow

serS

erver

web services

Internet

ajax

35

TREESTRUCTURE

KARUTA

36

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

TREE

ASM MODEL

37

Root

Structure

Unit

UnitStructure

Context

Resource

Page Page

PagePage

Page

38

NODE AND LEAF

Node

NodeNode

noderes

context

Node

Resource

Node

Leaf

children

children

codelabel

text

noderes

context

codelabel

text

39

CODEORGANIZATION

KARUTA

40

KARUTA-CLIENTCODE

karuta

css

htm

img

js

xml

languages

model

resources

other

bootstrap

bootstrap-datepicker

jplayer

lightbox

wysihtml5

. . .

jquery

41

HOW IT WORKS

KARUTA

42

GET A PORTFOLIO

Web Browser

Backend

GET XML

43

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

44

TWO INDEXES TO ACCESS TREE AND UI OBJECTS

uuid ui objectmanage and display

methods

childs[ ]

asmRootasmStructureasmUnitasmUnitStructureasmContext

uuid

UICom.structure["ui"][]

UICom.structure["tree"][]

jQuery XML

node

node

45

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

Tree: function(node)

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

{

this.node = node;

this.childs = [];

}

46

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

UIFactory["Node"] = function( node )

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

{

try {

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);

}

. . .

47

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

48

RESOURCE

KARUTA

49

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

<asmContext xsi_type="">

<metadata-wad seenoderoles="all" />

<metadata-epm />

<metadata multilingual-node="Y"

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

<asmResource xsi_type="nodeRes">

<code />

<label lang="fr" />

<label lang="en" />

</asmResource>

<asmResource xsi_type="context" />

<asmResource xsi_type="Field">

<text lang="fr" />

<text lang="en" />

</asmResource>

</asmContext>

50

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()

51

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));

}

}

52

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();}

53

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;}

54

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();}

55

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());

}

};

56

SECURITY

KARUTA

57

FIVE CONCEPTS

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

58

THE MODEL

USER• Username• Lastname• Firstname• Email• Password

GROUP

ROLE• rights

ACCOUNT

Portfolio

1

n 1

n

11

59

AN EXAMPLE

USER1

studentACCOUNT

ACCOUNT

tutorACCOUNT

USER2

USER1 has 2 accounts then 2 roles: student and tutor

Students

Tutors

Portfolio2

Portfolio 1

student

Portfolio

1

2

3

4

Instantiate

Rights group

all:

Read 1,2,3

student:

Edit 3tutor:

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

Write 4

GROUP INSTANTIATION

Role - Rights

all:

Read 1,2,3

student:

Edit 3tutor:

Read 4

Role Group

all:

-

student:

student1tutor:

tutor1

Write 4

Portfolio

1

2

3

4

ASSIGN USERS TO ROLES

1 - student submits

student

Remove write

2 - tutor submits

tutor

Remove write

student

Add read

Rights group

all:

Read 1,2,3

student:

tutor:

Read 4

Write 4

Read 4

Portfolio

1

2

3

4

DYNAMIC RIGHTS

Edit 3

63

INSTANTIATION

KARUTA

64

ORIGINAL TREESHAREDNODERESOURCE - SHAREDRESOURCE

node

node

noderes

context

noderes

context

resource

sharedNodeResource=N

sharedNodeResource=YsharedResource=N

node noderes

context

resource

sharedNodeResource=YsharedResource=Y

context

context

PortfolioModel

65

INSTANTIATIONSHAREDNODERESOURCE - SHAREDRESOURCE

node

node

noderes

context

noderes

context

resource

sharedNodeResource=N

sharedNodeResource=YsharedResource=N

node noderes

context

resource

sharedNodeResource=YsharedResource=Y

context

context

node

node

noderes

context

context

resource

sharedNodeResource=YsharedResource=N

node

context

context

context

New PortfolioPortfolioModel

66

APIS

KARUTA

67

GETCREDENTIAL<user id="1">

<username>root</username>

<firstname>root</firstname>

<lastname></lastname>

<email></email>

<admin>1</admin>

<designer>0</designer>

<active>1</active>

</user>

68

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

<version>3</version>

<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>

<metadata></metadata>

<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 »>

69

PUTRESOURCES/RESOURCE/{UUID}

<asmResource xsi_type="TextField">

<text lang="fr"></text>

<text lang="en">

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

<br></span>

</text>

</asmResource>

70

GETNODES?PORTFOLIOCODE=PPN_GEA&SEMTAG=ACTIVITE

<nodes>

<node id="4f8981a2-5ba9-450f-9592-ef996ecee914">

<asmResource  contextid="4f8981a2-5ba9-450f-9592-ef996ecee914" xsi_type="nodeRes">

<code>GEA1</code>

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

<label lang="en">New Unit</label>

<description></description>

</asmResource>

</node>

<node id="471c6d13-b45d-11e3-861e-00215e6c3f32">

<asmResource contextid="471c6d13-b45d-11e3-861e-00215e6c3f32" xsi_type="nodeRes">

<code>GEA2</code>

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

<label lang="en">New Unit</label>

</asmResource>

</node>

</nodes>

71

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

72

QUESTIONS?

[email protected] [email protected]

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

73

STRUCTURE-UNIT

June 1, 2014

74

STRUCTURE - UNIT

June 1, 2014

75

June 1, 2014

76

June 1, 2014

77

June 1, 2014

78

June 1, 2014