Feature Wiki

Information about planned and released features

Tabs

New Page Element »My Badges« for Portfolios

Page Overview

[Hide]

1 Initial Problem

For portfolio a new page element is devised: "My Badges". Users can insert the element into a page of their portfolio, they can decide which badges are to be inserted (could be some, could be all).

The inserted badge element has an optional title. The badges will be displayed in gallery-style (only pictures). Upon clicking on an individual badge a modal is called and shows the full view with all metadata. 

  • Exporting the portfolio as XML will cap all ties to the badges, since these badges are typically not imported into the target platform. 
  • Exporting the portfolio as HTML the bagdes will stay displayed. 
This implementation will not include to displayed badges earned from ILIAS external sources that came from the Mozilla Open Badges Infrastructure.

2 Conceptual Summary

Design of Tile and Badge

Badges are displayed in tiles.
4 badges are implemented side by side as a grid with full width 
If badge-images are not square, the larger axis become upscaled . The scaling is proportional. (Like Avatar-Image)
The badges should behave responsively in the page layout.

3 User Interface Modifications

3.1 List of Affected Views

  • Page-Editor in Portfolio (WYSIWYG)
  • Page-Editor in Blog ?? (Frozen Page-Element?)
  • Config-Screen for Badges
  • Views of Portfolios and Blogs

3.2 User Interface Details

MockUps

Option 1:

Activate an Inactive Badge : When inserting the page-element, all badges become displayed. An activation of a badge is done by clicking. The badge is shown in a light-green with a hook.


Deactivate an Active Badge: If the page element is to be changed, all available badges are displayed. The activated keep their light-green hook markings. If an active is deactivated, it become a red appearance with a red cross.
Not activated Badges in this context can also be activated. They looksn normal or they looks light-green with a hook

After saving, the activated/deactivates Badges become visualisation in the portfolio page-element "My badges" (WYSIWYG like other page-elements,  not like "my courses" or "my competencies").

Step 1
Step 2
Step 3
Step 4
Step 5

Option 2:

  • After clicking on Insert Badge in the Page Editor, all badges are displayed.
  • To insert a badge into the portfolio, users have to activate the Checkbox below the image and then click Save.
  • Bagdes are displayed on portfolio pages as in the tab Personal Desktop >> Achievements >> Badges.

Option 3:

As part of option 3, the presentation of the badges is adapted to those of the certificates. In addition to the issue date, the ILIAS object in which the badge was purchased and actions from the Badges >> Manage-Tab can be viewed.

This leads to a more uniform appearance and a more noticeable placement of the actions, eg. "Add to profile".

  • After clicking on Insert Badge in the Page Editor, all badges are displayed.
  • To insert a badge into the portfolio, users have to activate the Checkbox below the image and then click Save.

@Alexandra:

  • In Step 3 sollte man über eine maximal angezeigte Menge an Badges nachdenken.
    Wünschenswert wäre am untern Rand ein "weitere Anzeigen", um nicht sofort alle laden zu müssen (und die Seite zu lang zu machen).
  • Was müssten wir hinsichtlich Responsive Design berücksichtigen? (Drei Spalten ?)

3.3 New User Interface Concepts

Tiles with badges should be activated/deactivates by click.

4 Technical Information

5 Contact

6 Funding

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

7 Discussion

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

Last edited: 27. Apr 2021, 07:41, Samoila, Oliver [oliver.samoila]