Specs for the embedded activity API

[Stian Håklev]

Hi everyone,

could anyone point me in the direction of a spec for the embedded activity API? We are using a similar mechanism (postMessage from iFrame to parent window) to embed H5P activities and receive their xAPI messages, and have been experimenting with making FROG (our collaborative learning platform) activities also "deeply embeddable" in a parent app using this mechanism. I would love to understand better the possible interactions with WISE embeddables, and look at whether it might be possible to embed them in FROG, or even expose FROG activities to a WISE system.

thanks!
Stian Håklev

Ecole Polytechnique Fédérale de Lausanne

PS: Rather long video where I prototype some of these interactions with H5P, FROG external activities, etc: https://www.youtube.com/watch?v=SrBVhU-sH8k

[Geoffrey Kwan]

Hi Stian,

I've written up documentation for our Embedded Component API. If you see anything missing from the documentation, let me know and I'll try to add it. You can read it here

https://github.com/WISE-Community/WISE/wiki/Embedded-Component-API

I watched the video you linked to and I can imagine a standalone FROG activity being used inside of a WISE Embedded Component. Are there any publicly available servers running standalone FROG activities that I could easily embed inside WISE to try out?

Thanks,

Geoff

--
You received this message because you are subscribed to the Google Groups "WISE-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wise-dev+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Stian Håklev]

Hi Geoff,

thanks! Will read this with interest.

We currently have https://icchilisrv3.epfl.ch running as a semi-public test server (not guaranteed to keep running, code might change to test stuff etc, but it's at least an instance you can play with for now). It should work with the API documented in the Google Doc.

Will read this and get back to you

Stian

To unsubscribe from this group and stop receiving emails from it, send an email to wise-dev+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "WISE-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to wise-dev+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

http://reganmian.net/blog -- Random Stuff that Matters

[Stian Håklev]

Hi Geoff,

this is great. Here are a few questions from someone who is not so familiar with the WISE terminology, etc.

What (if any) is the difference between student data and student work? (Ie. studentDataChanged vs studentWork - is the only difference when the student data gets saved by WISE, or is there a difference in payload also?). I am assuming that student data is opaque to WISE (ie. it is able to store it, and send it back next time it launches an embeddable, but it has no insight into what's "in" the data, cannot manipulate it independently etc? This is similar to how data works in FROG, except internal activities have access to a set of functions that can manipulate a ShareDB object that is synced across all students in the same group, including collaborative editing of a text field etc. It is thus also automatically "saved" on every change.

From what I understand, the events are very similar to the log messages that FROG sends, and are conceptually similar to the xAPI statements that for example H5P components emit. 

I see that there is a concept of parameters, which can be delivered to the component either in the GET request or with a postMessage - this is very similar to how FROG does with config (which is passed in the POST request). However, how does the WISE authoring tool know which parameters a certain embeddable accepts, and is there a GUI way of filling these out or does it have to be typed by hand? In the case of FROG activities, the config object uses jsonschema to express the parameters (which can be nested etc, looks more complex than the parameters in WISE?). For external activities, we thought about just exposing this configuration object, but because we've added a few things (conditional fields, rich content fields etc), as well as form validation, we decided to expose the config form as it's own iFrame, which would send the resulting config object over postMessage, to be stored by the editor and to be used when the actual activity is called.

Do you have any specs for the data interchange between the graph component and embeddables that can produce data that can be graphed?

Do embeddables build-in any functionality to take screenshots or send representations of themselves to the notebook, or do you just trigger a screenshot of the iFrame from WISE?

How are the embeddables served in practice? Do you install a bunch of them into the same WISE instance and WISE "serving them" as a webserver? (I guess they have to come from the same domain to do screenshots?)... How do you actually "register" them with WISE? Or are there instances of embedding activities from other servers? Are there public servers with WISE activities that can be embedded?

So here's what I see so far in terms of comparing WISE, FROG, and H5P

Finding list of widgets

FROG: API call

H5P (I'm working on it), WISE ? 

Embedded configuration

FROG: through iFrame/API, config sent over postMessage and stored in host system

H5P (I'm working on it), WISE - parameters over postMessage/GET/POST request, but how does authoring work?

Collaboration (multiple students live-collaborating on widget)

FROG: just use same instanceId

H5P/WISE: not possible? (I had a naive idea that it might be able to "fake" this for WISE embeddables, by syncing data over FROG, and sending latestStudentWork on host for all connected students, when a single student sends a studentDataChanged message - but this might be very glitchy for components not designed for it

Logs

H5P: xAPI

FROG and LAMS: non-standard log messages sent continuously over postMessage

Storage of student data

H5P: no data stored, can in some cases be "recovered" from xAPI messages (eg. quizzes)

FROG: student data is stored on external FROG, but can be initialized from host, and is continuously also shared with host.

LAMS: widget is "stateless", can get data from host, and occasionally sends data to host for storage (but not necessarily with every change?)

Interoperable data

H5P: None

FROG: can send arbitrary data between activities, but trying to standardize on Learning Items for student produce data, which can be displayed in many different activity types

LAMS: screenshot of widget can be sent to another activity (but this is handled by host system?) -- some simulations can stream data to graph display (specs?) - any other examples?

Do you know of any other set of widgets that have some API like this (more than just LTI)? Would be great to have stuff from PhET, Concord, Khan Academy, CMU OLI, LAMS etc, but I don't think they fit into this list above.

I don't know if you have any interest in H5P components, but I have a student working on making them much more easy to configure, embed, edit etc from external systems - which LAMS could also benefit from.

Ultimately, I'd love to have FROG provide an "app store" of widgets, where you could do an API request to get a list of widgets, including all the FROG activities, all the LAMS embeddables, all the H5P widget types (https://h5p.org/content-types-and-applications), and having somewhat unified API for config, storing student data, getting logs etc. (In the future, as mentioned, adding some of the other collections listed above). That's a long term goal (but perhaps not so long term?)... Thus is you enabled support for the FROG api, you'd get all that other stuff "for free".  (Yannis, how about GLUE components?)

Stian

[Geoffrey Kwan]

What (if any) is the difference between student data and student work? (Ie. studentDataChanged vs studentWork - is the only difference when the student data gets saved by WISE, or is there a difference in payload also?).

There is no difference between student data and student work, we use those terms interchangeable. In regards to the studentDataChanged vs studentWork, there is no difference in the payload. The only difference is how WISE handles the saving for them. Student work sent in a studentDataChanged message will be eventually auto saved. Student work sent in a studentWork message will be saved immediately.

I am assuming that student data is opaque to WISE (ie. it is able to store it, and send it back next time it launches an embeddable, but it has no insight into what's "in" the data, cannot manipulate it independently etc?

Yes, this is correct.

However, how does the WISE authoring tool know which parameters a certain embeddable accepts, and is there a GUI way of filling these out or does it have to be typed by hand?

WISE does not know what parameters an embeddable accepts. The author has to have that insight themselves. There currently is no GUI for the parameters, they must be hand typed.

 In the case of FROG activities, the config object uses jsonschema to express the parameters (which can be nested etc, looks more complex than the parameters in WISE?).

The parameters to a WISE embeddable can be a JSON object of any nested depth. 

Do you have any specs for the data interchange between the graph component and embeddables that can produce data that can be graphed?

We don't have any written out specs for the data interchange at the moment. If an embeddable wants to send data to be displayed in a graph, the embeddable must generate data in the format that our graph component uses (highcharts format). If an embeddable wants to receive data from a graph, it must previously know the format of our graph data (highcharts format).

Do embeddables build-in any functionality to take screenshots or send representations of themselves to the notebook, or do you just trigger a screenshot of the iFrame from WISE?

Embeddables do not have any screenshot or representation functionality. WISE can screenshot the iframe.

How are the embeddables served in practice? Do you install a bunch of them into the same WISE instance and WISE "serving them" as a webserver? (I guess they have to come from the same domain to do screenshots?)... How do you actually "register" them with WISE? Or are there instances of embedding activities from other servers? Are there public servers with WISE activities that can be embedded?

Embeddables are standalone html files that run javascript code. The author needs to upload the html and js files to the WISE project. Then the author can reference the html file in an embeddable component. We currently do not have a public repository for these embeddables. If an author wants to reference a resource/model on a remote public server, they must use the Outside URL component. The Outside URL component takes in a url and displays that webpage in an iframe. There is no student data sending/receiving/saving in an Outside URL component.

To unsubscribe from this group and stop receiving emails from it, send an email to wise-dev+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "WISE-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to wise-dev+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

http://reganmian.net/blog -- Random Stuff that Matters

--

http://reganmian.net/blog -- Random Stuff that Matters

--

You received this message because you are subscribed to the Google Groups "WISE-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to wise-dev+u...@googlegroups.com.

[Stian Håklev]

Just an update on this discussion, here's a demo of two WISE simulations in FROG, where we can actually take screenshots, capture logs, and stream data to a graph or a table: https://www.youtube.com/watch?v=-zDLN0E87YM