Insert HTML5 Code

1 Initial Problem

Request by Joel Hesse

To extend the possibilities of editing, it would be helpful to have the possibility to insert a block of free html-code. It should only be possible to insert, change (pure text) and delete this block. To keep this feature easy in programming, editing of the code has to be done outside of ILIAS (for example with Dreamweaver etc.).

Request by Anton Edtmeier

There should be a (combined?) media object that can replace an interactive flash element. In a "HTML5 replacement" of an interactive flash application, there are some graphic elements combined with javascript and the option to define "trigger" elements (to call javascript routines).
 
At the moment the media element allows to upload additional content when the uploaded element is a swf element. If I upload a picture, this option would be useful to upload i.e. javascript files and additional graphics. Additionally it would be necessary to define a javascript command on a link area.
 
Maybe there is already a better concept in the community how to make use of HTML5 elements ?
 
If uploading/executing javascript is a security risk at the Editor-Level, would it be better to include javascript in special templates, that can be applied to learning modules?
 
 

2 Conceptual Summary

A new page element should be offered in the ILIAS page editor. This element is able to contain and display HTML5 content.

• Because such an HTML input element is a security risk, a specific permission should be necessary to add and edit HTML5 content in the page editor.
• An alternative solution could be to allow the generation and modification of such content only in media pools. HTML5 objects would be offered by the media pool and could be used but not modified by normal autors in learning modules and other modules that support the page editor.

3 User Interface Modifications

3.1 List of Affected Views

{Please list all views (screens) of ILIAS that should be modified, newly introduced or removed.}

3.2 User Interface Details

{For each of these views please list all user interface elements that should be modified, added or removed. Please provide the textual appearance of the UI elements and their interactive behaviour.}

3.3 New User Interface Concepts

{If the proposal introduces any completely new user interface elements, please provide a link to separate feature wiki entries for each of them according to the kitchen sink template.}

4 Technical Information

{The maintainer has to provide necessary technical information, e.g. dependencies on other ILIAS components, necessary modifications in general services/architecture, potential security or performance issues.}

5 Contact

• Author of the Request: Joel hesse (ilias (at) joelhesse.de) ; Anton Edtmeier (anton.edtmeier(at)fh-steyr.at)
• Maintainer: Killing, Alexander [alex]
• Implementation of the feature is done by: {The maintainer must add the name of the implementing developer.}

6 Funding

If you are interest in funding this feature, please add your name and institution to this list.

• DHBW

7 Discussion

[Joel Hesse] Please leave a comment or "like" if you like this feature, too!

Kunkel, Matthias [mkunkel], September 21, 2015: I have merged Anton Edtmeier's requirements from ‘Insert HTML5 Objekt’ into this feature request and ask all interested persons to state the concept precisely for 5.2. It would be interested to know what kind of content should be added as HTML5 object, e.g. animations that have been realised as flash objects before.

Killing, Alexander [alex], September 21, 2015: Dreamweaver creates complete websites with HTML, CSS and JS files. An HTML block that would be embedded somewhere in the ILIAS page would not allow to include dreamweaver created content easily, since it would not take care of the external dependencies (js files, css files, image files, ...). Moreover the JS of dreamweaver may interfere badly with ILIAS content (e.g. having a separate jQuery lib included or relying on a different version). The same is true for the CSS.

If you create content using dreamweaver, the HTML learning modules (type "HTML") of ILIAS should be your target imo.

Trying to mix these things into ILIAS native learning modules (Type "ILIAS") could result in an unmaintainable mixture of content concepts.

Killing, Alexander [alex], 19 Oct 2015: "Swiffy support" won't make it in the ILIAS standard I guess. The only solution for the standard I could think of would be an "iframe"-like solution, similar to the SCORM player. This would encapsulate all the CSS and javascript in a separate frame. To check if this is possible, I ask all of you to provide more example elements you would like to embed.

Hesse, Joel [Joel_Hesse] 13.02.2016: we would like to use animated buttons or any 3rd party element (3D Animation based on a special player) - this feature will enable us to use any webobject instantly.  Another important thing is to display an external website inline.

But, Alex, i agree with you - the use have to be save and should not interefer with othere elements or the ILIAS Framework.

The majority of the members of the SIG Corporate which voted at the 7th of September 2016 in Utrecht appreciate this feature request and ask the maintainer and the ProductOwner to consider the trunk-integration of this feature in reasonable way as soon there is a funding available.

Bogen, Christian [bogen] 29.11.2017: Careful, this could be a security nightmare. — Has there been any further developement?

11.06.2018 I'd be interested in this feature too. There are two used - cases I can come up with:
a) Integrating an html5 file which was for example created in an eLearning authoring tool like storyline or captivate directly into the learning module. I know - we could include it as a scorm - module but that's not a nice solution if I would like to show it directly in an Ilias Module withouth having to open a new tab (and showing the scorm module as an Iframe is not such a nice workaround and doesn't always behave properly.

b) Integrate an interactive story which is for example designed with TWINE will require the possibility to upload the HTML - file.

We might be able to contribute to funding.

Killing, Alexander [alex], 1 Apr 2019: The best practice is currently to use media objects. Security concerns are discussed on the Higher level of security for HTML content page.

8 Implementation

{The maintainer has to give a description of the final implementation and add screenshots if possible.}

Test Cases

Test cases completed at {date} by {user}

• {Test case number linked to Testrail} : {test case title}

Approval

Approved at {date} by {user}.