The Open Source Portfolio(OSP) tools in the Sakai CLE are well known for their assessment matrices. Although these tools have served the community well, more flexibility, increased usability, improved customizability, and expanded reporting capabilities are required. Karuta, a new IMS-LTI ready open source portfolio software created in the spirit of OSP, provides highly customizable assessment portfolios. How does Karuta work? This presentation will provide an overview of the different components and technologies used (jQuery javascript library, Twitter Bootstrap, RestAPIs, MsSQL, XML). Karuta enrich the hierarchical structure of web pages with a comprehensive set of specialized resources and semantic tags. A designer can quickly construct very sophisticated workflows where different users (students, tutors, etc.) are assigned to a wide range of actions (reflect, upload files, comment, evaluate, etc.). This will be illustrated with practical use cases (assessment, accreditation).

1. KARUTA
OPEN SOURCE PORTFOLIO : A
FLEXIBLE ARCHITECTURE FOR
ASSESSMENT, ACCREDITATION AND
MUCH MORE
Jacques Raynauld – Olivier Gerbé, HEC Montréal
June1,2014

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
2

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

5. 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.
6
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 must
7
June 1, 2014

8. OUR APPROACH WITH
PARTNER SCHOOLS
KARUTA
Designer
Prototype
- Pilot
KARUTA
Production
8
June 1, 2014

9. EXAMPLE
ASSESSMENT*
9
* Thanks to VirginiaTech for letting us use
their TESOL Portfolio
June 1, 2014

10. EXAMPLE
ASSESSMENT
10
June 1, 2014
(peer)

11. EXAMPLE
ASSESSMENT
11
June 1, 2014

12. STRUCTURE-UNIT
12
June 1, 2014

13. June 1, 2014
13

14. June 1, 2014
14

15. June 1, 2014
15

16. June 1, 2014
16

17. June 1, 2014
17

18. June 1, 2014
18

19. June 1, 2014
19

20. June 1, 2014
20

21. June 1, 2014
21

22. June 1, 2014
22

23. STRUCTURE-UNIT
METADATA
23
June 1, 2014

24. STRUCTURE – UNIT
OTHER METADATA
June 1, 2014
24
student

25. LEVERAGING KARUTA
SPECIAL RESOURCES
Item
Get_Resource
Proxy
Menu
June 1, 2014
25

26. LEVERAGING KARUTA
ITEM
26
June 1, 2014

27. LEVERAGING KARUTA
GET_RESOURCE
27
June 1, 2014
METADATA

28. LEVERAGING KARUTA
PROXY
28
June 1, 2014
METADATA

29. LEVERAGING KARUTA
MENU
29
June 1, 2014

30. LEVERAGING KARUTA
MENU
30
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)
31
June 1, 2014

32. ADDITIONNAL
FEATURES
1. 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
32

33. KARUTA
ARCHITECTURE
33

34. GENERAL
ARCHITECTURE
Application (javascript jQuery html css)
Karuta-core (javascript jQuery html css)
Karuta-Backend (java)
File Server (java)MySQL Oracle
BrowserServer
web services
Internet
ajax
34

35. TREE
STRUCTURE
KARUTA
35

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

37. 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
code
label
text
noderes
context
code
label
text
38

39. CODE
ORGANIZATION
KARUTA
39

40. KARUTA-CLIENT
CODE
karuta
css
htm
img
js
xml
languages
model
resources
other
bootstrap
bootstrap-datepicker
jplayer
lightbox
wysihtml5
. . .
jquery
40

41. HOW IT WORKS
KARUTA
41

42. GET A PORTFOLIO
Web Browser
Backend
GET XML
42

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
43

44. TWO INDEXES TO
ACCESS TREE AND UI
OBJECTS
uuid
ui object
manage and display
methods
childs[ ]
asmRoot
asmStructure
asmUnit
asmUnitStructure
asmContext
uuid
UICom.structure["ui"][]
UICom.structure["tree"][]
jQuery XML
node
node
44

45. TREE OBJECT
//===========================
Tree: function(node)
//===========================
{
this.node = node;
this.childs = [];
}
45

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);
}
. . .
46

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
47

48. RESOURCE
KARUTA
48

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

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

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

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

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

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

55. UIFACTORY["FIELD"].PROTOTYPE.SAVE
UIFACTORY["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());
}
};
55

56. SECURITY
KARUTA
56

57. FIVE CONCEPTS
• User
• Role-Rights
• Group
• Account
• Portfolio
57

58. THE MODEL
USER
• Username
• Lastname
• Firstname
• Email
• Password
GROUP
ROLE
• rights
ACCOUNT
Portfolio
1
n 1
n
11
58

59. AN EXAMPLE
USER1
student
ACCOUNT
ACCOUNT
tutor
ACCOUNT
USER2
USER1 has 2 accounts
then 2 roles: student and
tutor
Students
Tutors
Portfolio
2
Portfolio
1
student
59

60. Portfolio
1
2
3
4
Instantiate
Rights group
all:
Read 1,2,3
student:
Edit 3
tutor:
Read 4
Seenode role: all
Editres role: student
...
Write 4
GROUP INSTANTIATION

61. Role - Rights
all:
Read 1,2,3
student:
Edit 3
tutor:
Read 4
Role Group
all:
-
student:
student1
tutor:
tutor1
Write 4
Portfolio
1
2
3
4
ASSIGN USERS TO ROLES

62. 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
63

64. SHAREDNODERESOURCE -
SHAREDRESOURCE
node
node
noderes
context
noderes
context
resource
sharedNodeResource=N
sharedNodeResource=Y
sharedResource=N
node noderes
context
resource
sharedNodeResource=Y
sharedResource=Y
context
context
Portfolio
Model
64

65. SHAREDNODERESOURCE -
SHAREDRESOURCE
node
node
noderes
context
noderes
context
resource
sharedNodeResource=N
sharedNodeResource=Y
sharedResource=N
node noderes
context
resource
sharedNodeResource=Y
sharedResource=Y
context
context
node
node
noderes
context
context
resource
sharedNodeResource=Y
sharedResource=N
node
context
context
context
New Portfolio
Portfolio
Model
65

66. APIS
KARUTA
66

67. GET
CREDENTIAL
<user id="1">
<username>root</username>
<firstname>root</firstname>
<lastname></lastname>
<email></email>
<admin>1</admin>
<designer>0</designer>
<active>1</active>
</user>
67

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

69. PUT
RESOURCES/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>
69

70. NODES?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>
70

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
71
June 1, 2014
Demo :
https://confluence.sakaiproject.org/
display/OSP/Portfolios+for+the+Fu
ture+of+Sakai

72. 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
72
June 1, 2014

73. STRUCTURE-UNIT
73
June 1, 2014

74. STRUCTURE - UNIT
June 1, 2014
74

75. June 1, 2014
75

76. June 1, 2014
76

77. June 1, 2014
77

78. June 1, 2014
78