Widget Type: Digital Badges
Widget "Digital Badges" uses data from linked Google spreadsheet to determine which badges it should display. Badges can be displayed the same for all users accessing the widget or can be displayed specifically for each user.
This widget type has, on top of data-sources, few additional components:
Canvas & Images
- canvas - defines space where badges will be displayed. Dimensions are specified in pixels. All badges should fit onto canvas. Canvas usually reflects size of the background image. Images are display on canvas on specified layers, so they can be placed one over another.
- images - bitmap (png, jpg) or vector (svg) badge images. Maximum size is 100kiB.
It is important to set the canvas size. Canvas size does
not limit size of the displayed widget. Widgets will be resized automatically based
on space they will be given. Canvas gives you space to place badge images
on and usually reflects size of your "background image", in a case you have
any.
Images of badges must be uploaded and placed/positioned on
canvas before widget can be displayed. Click on "Add image" to upload new image.
- Identifier - image identifier used to link data from spreadsheet to specific image
- Top, left - coordinates of top-left corner in pixels
- Width, height - in pixels (default values are loaded from the image file)
- Layer - images are displayed in layers. Images can
overlap and images in higher levels will be displayed on top of those in lower
levels.
- Always Visible - images with this flag set to "on" are always visible.
- Link - address/url which will open when user click on the image/badge
After uploading all images are visible in image tiles and in preview section.
Click 'x' sign next to image identifier to remove selected image.
Click 'Open Visual Editor' to place/resize images.
To move image simply drag & drop image to different place within canvas. Additional functions are available after selecting an image from the image list (1) - selection rectangle will appear on canvas (2) around selected image. Then you can resize, change image layer or directly put image to back or front using tools from toolbar (3).
Data Sources
Data source for digital badges is a Google spreadsheet, which has to adhere to a certain format:
- users' emails are in the first column - not required if you want to display the same badges for all users. Content of all other columns is ignored unless such column contains image identifier in the header row.
- it must have Identifier Row containing badge identifiers, so application can identify which column contains data about which badge. You can specify which row is a header row. In example above the header row is
- it has to have a data area - one or more rows under header row identifiers specifying how specific badge shall be displayed: empty - do not display, 1 - display, 2 - display yellow overlay, 3 - display red overlay. Property Data Row specifies how data area is accessed: specified row or lookup row using user email in the first column.
