Table of Contents

Welcome to Loree

Are you ready to Explore the benefits of Loree?

Open

Loree on Course Navigation

Here we go! The powerful Canvas content editor tool is now on your Canvas Course Navigation. After a successful configuration of Loree, it can be accessible on all Canvas Course Navigations. On the left side navigation bar, you can find out the Loree and by clicking on that it will open the Loree tool.

Open

OAuth Verification

In-order to use Loree product as an External tools from Canvas, user must accept the Canvas authorisation. So that they can easily access canvas integrated external applications.

End User License Agreement (EULA)

This modal will open once user authorise the Canvas OAuth Verification. The EULA modal contains all the End User License Agreement terms and conditions which belongs to Loree and Crystal Delta. In order to use the Loree tool, users must read and agree the terms and conditions.

Filter Content types

Loree has its own Navigation bar on top. It allows the users to select (or) Filter the course contents type either Modules, Pages, Assignments or Discussions. The list will be shown in dropdown.

At a time, you can select only one option.

The main purpose of having the Nav-dropdown is to access every editable course contents within Loree.

Following screen represent the view of Loree tool. By clicking Canvas course Hamburger icon, it will collapse the side navigation and Loree shows in Full-width.

Help

Loree provides the instructions on how the Loree features works and what are the purpose of having it in Loree tool. Also you can get the Frequently Asked Questions by various users and their answers.

In order to access the FAQ and User Guide pages, you have to select the respective page from top bar “Help” option. These pages will open in new tab.

You can raise feedbacks to Loree by using More info Loree official website.

Course Modules as Loree Modules

Loree has integrated within Canvas to edit the Course contents. Earlier, if you want to edit a page - You have to open the page on Canvas Rich Text Editor and you have to select Loree for edit that particular page contents.

In order to fetch all the Canvas course modules in Modules, user have to choose the option “Modules“ from the top navigation bar dropdown list.

Loree Modules imports the course Pages from Module items into a Single list. It allows the users to choose any Pages from Canvas Modules and by simply clicking “Edit“ icon will open the Loree Editor.

Loree Modules allows the users to Duplicate, Edit, or remove the items from the Canvas modules.

Create Modules

Loree provides the option to create new modules for Canvas courses. If you want to Create new Modules, you no need to go back to Canvas for the Creation. JUST you have to open the Loree Modules list. There you can see the icon “+ Module” on top right the list. By click on the icon will open the new modal.

Modal contains the text field, date picker and button for create modules.

When user click on “+Module” icon, it opens the modal which is represented in below image:

From the above, you have to enter the valid module name and the locking time. It shouldn’t be a Null value.

Lock Until feature will lock the modules for certain time period. By default, the Lock until checkbox will be disabled. When the user enabled, it opens another text field along with date picker.

Newly created modules will be added at the bottom of the list.

Clicking on Date picker field shows the current local system time. You can modify the date and time on when the module should unlock for students.

Edit Modules

Loree allows the users to Edit their existing Modules. By click on “Edit” from Modules toggle menu will open the new Modal. Users can rename the module and can change the date and time for unlock the modules for students.

Delete Modules

Now, you can delete Canvas modules by using Loree Modules list. When you choose “Delete” from the menu, it will ask “Are you sure you want to delete this module?”. By click on “Yes” will delete the module. Click on “No” will discard the process.

Published/ Unpublished Modules

The Published/ Un-published icons will allow the users to publish or un-publish the Canvas Modules. When the Module is Published, then it shows “Published“ with the icon background of #61b087. Same of Unpublished contents will shows “Not Published“ with background colour of #fb836b.

Hovering the mouse on these buttons will display the tool-tip either “Click to Publish” or “Click to Un publish”.

An item can be Published when it’s in Un-publish state, same as Published contents only can Un-Publish.

Add Module Items

As a Canvas user, you can add or remove items within Canvas Modules. Now, Loree allows the users to add Canvas shell pages as a Module item within Loree Modules List. In Loree Modules list, you can find out the “+” icon next to Modules toggle menu. By click on the “+” icon will open the below modal. Where you can see the list of all Canvas Shell pages on the course.

You can type and enter the values in search field to filter the page list.

Create a new page from Add Module items: 

This feature allows the users to create a new page on Canvas course by using Add items on Modules view.

In that modal, by default you can see the list option as “[Create new page]”. In order to create new page from this section, you need to select this option from the list to enable it. When only this option enabled from the list, you can see the new input field named as “Page title” on same window.

You can give any name which is up to 255 characters and click on “Add item” to create and add the newly created page into the respective module.

From the list, Loree allows the users to add existing pages as multiple selection. When user selects existing pages along with “Create new page”, this won’t allow the users to create new page.

Loree allows the users to select one or more pages from the list to add as a Module item. When user not selecting any pages and click on Add Item option will get an alert “Minimum one page should be selected”.

You can search the existing pages using the search field. You have to click on “Enter“ key to filter the result.

(Note: For selecting pages from the list, just a simple click is enough. In case of Un-selection, click the selected page again from the list)

From the above modal, you can choose either “Cancel” to discard the process and click on “Add item” to add the selected pages from the list.

Course Pages List

First, you have to select “Pages“ from the Loree top navigation dropdown. It will fetch all the pages from the Canvas course list. Each page list have an option for Edit, Duplicate, Delete, Publish and Un-publish.

Also it displays the date of page created and the date when it was last modified. It helps the users to identify the contents. Currently the page list not ordered. Upcoming release it will have a sorting option.

Loree will displays the content type on Course Title also.

Assignments List

By selecting “Assignments“ from the Loree top navigation dropdown, it will fetch all the Assignments list from the Canvas course list. Each Assignment list have an option for Edit, Duplicate, Delete, Publish and Un-publish.

Also it displays the date of Assignment when its created and the date when it was last modified. It helps the users to identify the contents. Each Assignments are differentiated by using Group name.

Discussions List

By selecting “Discussions“ from the Loree top navigation dropdown, it will fetch all the Discussions list from the Canvas course list. Each Discussions list have an option for Edit, Duplicate, Delete, Publish and Un-publish.

Also it displays the date of Discussion when its created. It helps the users to identify the contents. Each Assignments are differentiated by using Group name.

Discussions list have differentiated as same as Canvas like Pinned Discussions and Discussions group.

Edit the Course contents

Loree allows the users to edit and design their course contents. Following are the types of contents which allows the users to Edit the content:

• Pages

• Assignments

• Discussions

For edit the course content, you have to select “Edit“ icon on each contents. It will open the Loree Editor, where you can design you course contents and you can save it.

Rename the Course shell Pages

Loree allows the users to “Rename“ their course shell pages. In order to do that, user must have permission from Canvas to add/edit/delete the page. Pages can be listed on both Pages list and Modules list.

For Rename the course pages, you have to select “Rename“ on page list which you want to rename. It will open new modal on same page and you can provide the new name for the relevant page. After click on “Rename“ button on modal will update the same in Canvas page.

Create a new Canvas shell Page

This feature enabled for all the users of Loree. Now after you can create new page within Loree tool itself. In order to create new page, usr must have permission to add/edit/delete page from Canvas.

Create Page option available on Pages list only. By clicking “+ Page“ on pages list will open the modal. Where user must enter the page title and then click on “Create“. It will create new page in Course shell page.

Delete/Remove the Course contents within Loree

The users can now delete their course contents within Loree tool itself. Following are the types of contents which allows the users to Delete the content:

• Pages

• Assignments

• Discussions

For Delete the course content, you have to select “Delete“ option from the toggle menu on each contents. After click on Delete, it will automatically creates the Copy of the content. By default the status of Copied content will be Unpublished.

IMPORTANT:

When an item removed from Modules view, it will be removed from the respective module and not deleted in source page.

Ex: If you remove any page from Loree Modules, that will be removed only from Canvas Modules and not delete in Pages list.

But when a user delete the page from the pages list, will be permanently deleted in both Pages and Modules view.

Duplicate the Course contents

The users can now Duplicate their course contents within Loree tool itself. Following are the types of contents which allows the users to Duplicate the content:

• Pages

• Assignments

• Discussions

For Duplicate the course content, you have to select “Duplicate“ option from the toggle menu on each contents. After click on that, will ask the Confirmation. It will duplicate the page and an alert will be displayed.

Publish/ Unpublished the Course contents

The users can now Publish/ Un publish their course contents within Loree tool itself. Following are the types of contents which allows the users to Publish or Un publish the content:

• Pages

• Assignments

• Discussions

The Publish and Un publish icon appeared on below the content title. When the page already Published, then it shows “Published“ with the icon background of #61b087. Same of Unpublished contents will shows “Not Published“ with background colour of #fb836b.

Hovering the mouse on these buttons will display the tool-tip either “Click to Publish” or “Click to Un publish”.

An item can be Published when it’s in Un-publish state, same as Published contents only can Un-Publish. Loree doesn't have the option to Un-publish the course front-pages. Why because the Front-page must be Published in Canvas.

Device Selection

The device selection option is on the top left corner of Loree.

It allows the user to select the orientation of the page being designed based on the target device on which the page is intended to be viewed.

E.g. if the page is being designed for desktop viewing, choose Desktop from the drop down and if the page is being designed for mobile landscape mode, choose mobile landscape.

Understanding the Toolbar Menu

Auto save

This feature allows the users to save their content automatically while editing in Loree Editor Interface. By default this feature will be inactive and this can be enabled at anytime by users.

Note: Dashboard admin has to toggle ON this feature to permit the Loree users availing this service based on their course enrolment.

Once this feature activated by users in Loree Editor Interface, it will save the content automatically into Canvas at background and user will not exit the Editor. This feature will save the contents into Canvas every 60 seconds once.

After save and exit and back to editor, this feature will be set to it’s default state of Inactive.

Viewing Components

This feature allows the user to view the various components laid out on the page.

For example, in the image below, the various components on the page are individually identifiable, delineated by a dotted line boundary

Preview

This feature provides a live preview of the page being designed.

Clicking on preview option opens the page in preview mode

To return to Design mode, click on the Exit Preview icon

View Code

The View Code option is for advanced users and only available in Designer mode. This feature enables users to view the underlying HTML and CSS code for the course pages.

Upon selection on the Toolbar, a new window will pop up (modal), displaying the HTML/CSS content of the page.

At the bottom of the view code window, an option to export the code in compressed form is available (‘Export to ZIP’). This file is saved in the download folder of the web browser.

This functionality is provided in order to allow the user to make design modifications directly on to the HTML / CSS code in their preferred editor.

The altered HTML/CSS designs can be incorporated back into the course page through ‘import’ option which is available in the navigation bar (explained on next page).

Importing Code

The import option is used to import external (or) custom HTML / CSS code into the page.

On selecting the import option, an import template pops up, allowing external HTML / CSS code to be copied. Clicking the <import> button at the bottom left of the pop up imports the code into the page. Upon successful import, the page will be rendered in accordance with the new design.

Add new Categories for Templates and Blocks

Loree allows the users to Add new categories for the templates and custom blocks.

If the Admin or Course designer wants to add a new category for templates or custom blocks, choose <Add New Category> from the dropdown and provide the Category Name.

If the provided name already exists for a Category, Loree will display a warning and request the user to provide an alternate name. The name can be alpha numeric and can include special characters like “_”.

Save as new block / Updating / Locating Blocks

The Edit feature allows the user to update HTML and CSS content within a selected component (also referred to as a block) or save the content as a new custom block. This is only available in designer view.

If user clicks on Edit Code with no selected contents, will display an alert saying “Select content to Edit“.

To edit the contents, select the component to be edited and then click on the edit icon from the toolbar. A new window pops up displaying the content within the selected component on a HTML editor.

The user can perform one of the following actions:

Update Block - Edit the contents of the block and update the page.

Save as New Block – Save the block along with updated content as a new custom component. If required later, the saved component can be found under the Open Blocks -> Custom Blocks

By Clicking Save as new Block, will open the new modal for Save Block. Where user can save the selected components as new block under categories. Loree allows all the users to create the custom blocks.

In the ensuing pop-up window, select Block category and provide the name for the custom block.

If the provided name already exists for a Block, Loree will display a warning and request the user to provide an alternate name.

Once the custom block name is provided and the category is chosen, the custom block will be saved successfully and be accessible under Open Blocks -> Custom Blocks. The name can be alpha numeric and can include special characters like “_”.

Undoing and Redoing Changes

Emptying the Page Canvas

Emptying the Canvas

The empty canvas option is used to clear the contents of the page.

Upon selection, a confirmation window pops up requesting confirmation from the user to clear the contents of the page.

Once the user confirms, the content of the page is cleared. The user can then start to fill in new content. At the time of confirmation, the user can also choose to <cancel> the action in order to retain the contents of the page.

Please note: Using this option will clear the contents of the entire page. In order to clear the contents of individual components, please refer to ‘content bar’

Creating / Saving / Locating Templates

To create a new template (or) <Save> the contents of an existing page, use the Save Template option available in the navigation bar.

The templates can be created only by Admin and Course Designers.

1. Open a blank page in canvas. If you already have an existing page which you wish to save as a template, skip to step 3.

2. Create the required content on the page using the components under ‘Content Blocks’.

3. Click on <Save> from the navigation bar.

4. Pop-up will be opened after clicking the save, Now click on the Save as Template button.

1. In the ensuing pop-up window,

select template category and provide the name for the template

If the provided name already exists for a Template, Loree will display a warning and request the user to provide an alternate name.

Once the template name is provided and the category is chosen, the template will be saved successfully and be accessible under Open Blocks -> Templates. The name can be alpha numeric and can include special characters like “_”.

Sharing and Deleting Custom Blocks

Sharing Custom Blocks:

Administrators can share a custom block with members of other departments by right-clicking on the block. A pop-up with a drop-down option will appear; you can then choose the department to which the template is to be shared else you can choose the Everyone option to share it to all the Learning Designers and Teachers enrolled in the Instructure.

Course Designers can share the custom blocks only within their department.

Teachers don't have access to share the custom blocks but they can delete their own.

Select the department and click on <share>
To cancel the operation, the user can click on <Cancel> button.

Deleting Custom Blocks:
Administrators can delete a blocks by right-clicking on the specific block. A pop-up with an option to choose the block to be deleted appears on the screen. Upon clicking the<Delete> button, the block is deleted and removed from Custom Blocks.

IMPORTANT NOTE:

If Admins or Course Designers delete their blocks that had previously been shared to other departments, it will be deleted in all locations.

If Admin has shared the blocks and a course designer would like to delete, it will be removed only within department and not from Admin account.

All the Loree users can delete their own custom blocks at any time.

Editing and Remove/Restore Templates

Edit Templates

Loree has new feature to update the templates. For updating templates, you must have permission from the Loree Admin Dashboard. When “Update Templates” feature is enabled, you can edit Templates by right click on it.

By right click on Templates will show a modal which has Edit, Share, delete as buttons and Modal header will show the Template name. When you click on “Edit” option, the HTML and CSS contents of the relevant Templates will be replaced in Loree Editor and the existing page contents will be disappeared.

In case, the existing Page contents not saved in Loree Editor will be not save in Canvas too.

The moment when you click on “Edit” will change the “Save” icon into “Update” icon at the menu bar. You can choose either “Update” or “Update & Exit” by click on Update Icon from the Menu bar.

1. Click on “Update” will update the latest changes to the Template and will keep stay the user on same editor window

2. Click on “Update & Exit” will update the latest HTML and CSS to the relevant Template and Will navigate the user to Loree Modules list.

On top of the Editor window, editing Template name will be displayed. So that user can easily differentiate the editing contents whether it’s Canvas Course or Templates.

Removing Templates:

Administrators can remove a template by right-clicking on the specific template. A pop-up with an option to choose the template to be removed appears on the screen. Upon clicking the<Remove> button, the template is removed from templates.

IMPORTANT NOTE:

Global templates cannot be removed or updated.

Restore Templates

Loree allows the Admins to Restore the Archived templates. When the designers removed their template from My Templates section and the same was already marked as Global, it needs to be editable at a particular point. Then only the Global Templates can be modified.

In order to do that, Loree doesn’t allow anyone to edit the Global templates. Instead, if a designer wants to modify/update their template from My Templates sections and the admin wants to Modify the Global template – only the creator can edit the template.

Earlier, there is no way to update the Global Template when the source template removed from My Templates Section. In order to avoid this, Admin can restore the Archived template via Dashboard.

H5P Interactive Contents:

The main purpose of using H5P is to create and re-use more interactive contents in a Canvas pages. So that, learning designers can create advanced level of interactive contents.

Loree has 40+ configured the H5P contents by itself. In order to Use H5P contents, user should activate the H5P service while subscribing Loree.

Create/ add new H5P content:

The H5P content creation can be allowed only in Designer view of tool. By clicking “H5P” icon from the Navigation bar, will open the H5P modal to add new contents. So, all the contents will be created and managed for individual user. From the Add New modal, user can view the list of already installed H5P modules.

You can select the module category to which you want to create as a new configured H5P content. Once you provide the valid inputs into the required field, choose “Create” option to make sure the content is created successfully.

All the H5P contents will be created based on unique canvas user account.

Saving the Contents

Saving the Page

The save option is used to save any changes made to the page contents.

When the save option is selected, a confirmation window pops up requesting the user to confirm if the changes are to be updated on Canvas.

In the above “Save“ alert, user can select either “save“ to save the contents into Canvas and not exit the Editor. Whereas “Save & Exit“ will save the contents into Canvas and exit the users from Loree editor Interface and navigate them to Loree home page.

Important: By click on “Save & Exit“ will navigate the users to preview page. Where user can exit the preview to navigate to Loree home page. Else they can select “Back to Editor“ to edit the contents.

Style Manager

The Style Manager allows for formatting and styling of components on the page without using CSS code.This allows course managers to create styles on the fly without code familiarity.

NOTE: For some areas of style manager, especially in the Designer view it is helpful if the designer has some familiarity with HTML/CSS styling standards and practices.

The styling properties are categorised as below based on their properties:

• General

• Dimension

• Font

• Background

• Extra

• Quick Links

General: Float

Float – used for positioning content.
E.g. you can let an image float left to the text within its container (container is a distinct layer / wrapper within a page that contains one or more components).
There can be multiple containers on each page. Refer to ‘Layer manager’ for more information on how to view the layers within a page.

First select the component on the page and then choose one of the following options:

Alignment:

• Left: The component floats to the left of its container

• Right: The element floats to the right of its container

• None: The component does not float within the container and will be displayed just where it occurs in the text. This is the default value

General: Display

Display – specifies whether/how an element or component is displayed on the page.

First select your element or component on the screen

• Block: A block-level element always starts on a new line and takes up the full width

  available (stretches out to the left and right as far as it can). Examples of a block element

  would be a <div>, <header>, <footer>

• Inline: When the value is set to inline, the element / component does not start on a new

  line and only takes up as much width as necessary. This is generally used in a paragraph in

  present the textual content is a concise form

• Inline-Block: allows width, height, top/bottom margins and paddings to be set for the

  component. Unlike a block element, there are no line breaks added towards the end of

  the content, thus allowing the component to sit next to other components.

• None: This is used to show / hide the selected component. When the NONE option is

  selected, the component is hidden from view.

General: Position

Position – specifies the type of positioning method used for an element.

First select your element or component on the screen

• Static: Default value. Elements render in order, as they appear in the Editor window

• Relative: The Element is positioned relative to its normal position

  E.g. “left: 20px” adds 20 pixels to the element’s LEFT.

• Absolute: The element is positioned relative to its positioned (not static) ancestor element.

• Fixed: The element is positioned relative to the browser window.

General: Top and Bottom

This property has no effect on non-positioned elements.

Top and Bottom – affect the vertical position of a positioned element.

• If position: absolute or fixed; this sets the top/bottom edge of an element to a unit

  above/below the edge of its nearest positioned ancestor.

• If position: static; no effect.

• If position: relative; this lets the element’s top/bottom edge to move above/below its

  normal position.

General: Left and Right

This property has no effect on non-positioned elements.

Left and Right – affect the horizontal position of a positioned element.

• If position: absolute or fixed; this sets the left/right edge of an element to a unit to the

  left/right of the edge of its nearest positioned ancestor.

• If position: static; no effect.

• If position: relative; this lets the element’s left/right edge to move to the left/right of its

  normal position.

Dimension: Width and Height

Dimension – used to customise the placement of the selected component.
Width – sets the width of a selected element. Does not include padding, borders and margins.

Height – sets the height of a selected element. Does not include padding, borders and margins.
If width: auto or height: auto, the element will automatically adjust its height to allow its content to be displayed correctly. It allows the values in ‘px’ , ' %' and ‘vh’ format.

Max-Width – defines the maximum width of an element.

If the selected content > the maximum width, it will automatically change the width of an element. If the content < the maximum width, the max-width property has no effect.

Min-Height - defines the minimum height of an element. If the selected content < the minimum height, the minimum height will be applied. If the content > the minimum height, the min-height property will have no effect.

Dimension: Margin

MARGIN – dictates the margins for a particular component on all 4 sides.

Margin values can be set as pixels, percentage or viewport height.

To change the type of margin (shortened as px, % and vh):

1. Select the component intended for margin adjustments

2. Click on ‘px’, the default margin type. A drop down with available options will be shown.

3. Enter corresponding values in the space provided. The up/down arrows can also be used the

   increase/decrease the values

The margin properties which can be set for a component are:

• Margin Top : provides the margin of given value for the component from the top.

• Margin Bottom: provides a margin of given value for the component from the bottom

• Margin Left: provides a margin of given value for the component from the left
  Margin Right: provides a margin of given value for the component from the right

Dimension: Padding

Padding: Padding is the space between the content of a component and its border. This property allows for padding on all 4 sides on the content.

To change the type of padding (shortened as px, % and vh):

1. Select the component intended for padding adjustments

2. Click on ‘px’, the default margin type. A drop down with available options will be shown.

3. Enter corresponding values in the space provided. The up/down arrows can also be used the

   increase/decrease the values

The padding properties which can be set for a component are:
Padding Top: provides the padding of given value for the component from the top

Padding Bottom: provides a padding of given value for the component from the bottom
Padding Left: provides a padding of given value for the component from the left
Padding right: provides a padding of given value for the component from the right

Font

Font – used to stylise textual content used within a component.

Headers: used to make the selected element as Header text. The standard HTML options are: Header 1, Header 2, Header 3, Header 4, Header 5 and Header 6. Selecting a particular header type will format the text accordingly. This parameter will available for header tag HTML contents only.

Font family: The font type can be selected through this option

Font Size: The font size can be changed using this property. The user can choose to either:

• Using pre-defined sizes viz. Large, medium, small

• Enter custom values in the space provided. Font size can be adjusted in pixel (px), em, rem or % for custom values.

Font Weight: can be set to one of available options ranging from Thin to Ultra-Bold.

Font Spacing: The font spacing by default is set to normal. The user can also set custom spacing between fonts by entering values in the space provided. (in pixel (px), em, rem or %)

Colour: The colour of the font can be set through this property.

Note: The Custom colours can be selected via Dashboard by toggle ON the custom colour feature. When no colours are selected in Loree Admin dasboard then “No custom colours available” will be displayed.
Text Align: The alignment of text within a component can be customized by selecting one of

LEFT, CENTRE, RIGHT or JUSTIFY.
Line-height: specifies the height of a line. This doesn’t allow negative values.

Text- Shadow: adds shadow to text. This property allows for more than one shadow to be added to text.

The property values of text-shadow are:

• h-shadow: position of the horizontal shadow.

• v-shadow: position of the vertical shadow.

• Blur: blurring the text.

• Colour: the colour of the shadow. The user can select colours from the colour picker

  modal.

Background

Border radius: allows for the ‘smoothing’ of the container’s corners. The radius can be adjusted in pixels (px) or percentage (%), which can be changed by clicking on the default option ‘px’.

A container with BORDER RADIUS set at 0 px (default).

The same container with BORDER RADIUS set at 20 px.

IMPORTANT NOTE: Depending on your version of Canvas, Border Radius may not display (render) after saving the page and opening it in Canvas.

Border Width: The default border width is medium. The user can also set custom width for the border by entering values in the space provided. For the custom values, the width can be set to pixel (px) or em.

Border Style: Choosing ‘none’ from the available values would remove the border for the component.

Border Colour: Alters the colour of the border.

Note: The Custom colours can be selected via Dashboard by toggle ON the custom colour feature. When no colours are selected in Loree Admin dasboard then “No custom colours available” will be displayed.

Border-top-left/right radius: defines the radius of the top-left/right corner.

Border-bottom-left/right radius: defines the radius of the bot

tom-left/right corner.

Border-left/right/top/bottom: a shorthand property for border-left/right/top/bottom-width, style and colour. If this is omitted, the border colour will be the colour of the text by default.

Background: By Clicking ‘+’ icon from the panel will open new layer manager for background. The user can select the background image, background repeat, background position, background attachment and background size for the selected element. More than one layer can be created for background.

Box-Shadow: adds shadow to box, accepts more than one number of shadows to the selected box.

• h-shadow: required and represents position of the horizontal shadow.

• v-shadow: required and it represents position of the vertical shadow.

• Blur: to be applied for blurring the box.

• Spread: A positive value increases the size of the shadow and a negative value decreases the size of shadow.

• Colour: The user can pick more than one colour from the colour picker modal.

• Type: changes the shadow type of selected box as outside or inside.

  IMPORTANT NOTE: Depending on your version of Canvas, Box-Shadow may not display (render) after saving the page and opening it in Canvas.

Extra

This section provides the CSS3 styles to the users. So you can play around CSS3 styles with Course contents by using the below properties.

Transition-property:

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).

Tip: A transition effect could typically occur when a user hover over an element

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to

• the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The transition effect will start when the specified CSS property (width) changes value.

The transition-timing-function property specifies the speed curve of the transition effect. This property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)

• ease-in - specifies a transition effect with a slow start

• ease-out - specifies a transition effect with a slow end

• ease-in-out - specifies a transition effect with a slow start and end

Perspective:

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

Transform:

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale elements. Following are the transform properties which Loree provides:

IMPORTANT : For now, Canvas not support any of CSS3 Style formats. Because of that Flex features may not reflect in Canvas page, but it works in Loree Editor. Please refer the HTML Whitelists which supports in Canvas.

Open

Quick Links

This feature allows the users to create Canvas course contents as a quick link. By creating course content as a link within Course pages, user can navigate from one page to another page. This feature is enabled for every user by default. The Quick Links can be accessed below the Style manager panel. After save and Exit, the user can click on link to navigate to that content.

Once you add the link in Editor window, you can select the target window either “New window” or “This window” by using component settings.

Note: In order to add quick links within course content, the cursor must be located first.

Below are the canvas content types which are available to create quick links:

1. Modules

2. Pages

3. Assignments

4. Discussions

5. Quizzes

6. Announcements

7. Course Navigation

8. Files

Modules:

By clicking Modules section within Quick links will list the Course modules as a linkable item. To add Modules as a Quick Link, user must click on the module title from the list. Once you click on the link, will create a relevant Module category as a Link at the position of where cursor placed.

Pages:

Canvas pages list will be displayed under this section. Where user can select and add Canvas course shell pages as a quick link.

Assignments:

Course Assignments list will be displayed as a linkable object and that can be added into the editor interface.

Discussions:

The list of available discussions on course will be listed in this section. User can click and add the discussions as link within course content.

Quizzes:

Loree allows the users to add Course Quizzes as a quick link by using this section.

Announcements:

Loree allows the users to add Announcements as a quick link by using this section.

Course Navigation:

Now, the course navigation list also can be added as a link within course content. By click on course navigation link (Syllabus, Pages, Modules, Files, Assignments…) will navigate the users to the relevant page.

Files:

This section will list out the files which were uploaded as a PDF, DOC, DOCX, ZIP,… By click on files as a link, the relevant file will be downloaded in local system storage.

Component Settings

Component settings – Images, Text and more

Each component on the page has its unique ID, which can be edited in Component setting. First select the component you want then click onto the gear button on the toolbar.

This is an advanced setting that allows users to set identities or referential properties for selected components.

These settings vary for each type of component (text, image and video etc. )

Important Note: The component settings for Video is available under section 20.1 (Inside Component Settings Toolbar)

Component settings – Text and Images

Text

The component setting for text allows the user to set the Component ID and Title for the selected component. This setting can be used to provide specific user defined values that can be easily referenced in the HTML code.

Images

Users can give an alternate label and Title for an image under component settings. This text is displayed in place of the image in situations where the image is broken / doesn’t render properly on the page (e.g. connectivity issues). The title value is shown when the user hovers the image.

Layer Manager

The Layer Manager presents a layered view of the components in the page. Upon clicking the open layer manager from the navigation bar, the component layout pops-out as shown here.

• The components are displayed in a hierarchical manner with the outermost layer appearing first, followed by the layer contained by it and so forth as seen in image to the right.

• Each row represents a layer. When a layer is clicked on, sub-layers / components contained within the layer will be consequentially revealed. As an example, clicking on ‘Body’ opens up the Box layer (first two rows in the above image).

• Any layer which does contain further sub-layers cannot be expanded further. For example, the HTML Code (toward the end of the image) does not contain any other sub-layers / components within it.

Each Layer bar has additional features as outlined below:

• Clicking on a layer name highlights the layer on the page

• The eye-shaped icon on the leftmost of each row can be used to reveal / hide the particular layer on the page.

• Clicking on the eye-shaped icon once hides the layer and all sub-layers / components underneath it and clicking once more reveals the sub-layers / components.

• Clicking on the forward-facing arrowhead expands and the downward-facing arrowhead collapses the sub-layers contained within the layer.

• The number next to the layer name indicates the number of sub-layers in the immediate succeeding layer that it contains.

• The drag arrows can be used to move the layer / component with in the page. Click on the icon and move the layer upwards or downwards in order to place it in the required position.

• When there is a great number of layers and contained components, the scroll bar that appears to the right of the Layer Manager can be used.

• This layer manager option is not available for Teachers or Teaching Assistant roles.

Blocks and Component Settings

The component menu provides access to Blocks and Templates

Content Blocks – Adding Images, Videos, Text and more​

Select Component Menu to access ‘Content Blocks’

Click on ‘Content Blocks’ to display the menu options. You can now drag and drop content such as HTML Code, Image with caption, Video with caption and text etc.

Content Blocks - Adding Images

To add an image with caption to the page:

• Drag and drop the image/image with caption component onto the page

• Double click on the image component

A popup will appear; use one of the below steps to add an image:

• By clicking on the dotted box, you will be able to upload and select an image from your local computer drive

• Images uploaded previously will be displayed on the right hand side of the pop-up. You can also drag and drop those images into the dotted box

• Option to include a caption is also available underneath the image on the webpage preview

IMPORTANT NOTE: When image size exceeds 500KB, you will get an alert for continue to upload or discard upload. This will let the users know that the performance may get affect when uploading high quality images.

Content Blocks - Adding Videos

To add an video content to the page:

• Drag and drop the video / video with caption component onto the page

• Click on the video component on the webpage builder.

• Click on Component Settings on the Toolbar. This allows the user to choose video properties such as provider, source and poster etc.

• Option to include a caption is also available underneath the video

Content Blocks - Adding Text

This component can be used to add a text to the page.

The various operations that can be performed with a textual content is available under the following section (Component / Content Action Bar).

By drag and drop the Text block will allow the users to create/design text contents. You will see “Insert Text Here“ as a default text provided by Loree.

IMPORTANT NOTE: Due to page payload limitations set in Canvas, the word count in each Loree page is set to 15,000. Loree will provide a warning as the word count for a page approaches 15,000 words.

Content Blocks - Adding Full-width Image Block

Use this option to add a banner to the page. This is similar to the Image option, however the added image appears as a banner instead of a regular full-sized image.

• Drag and drop the image/image with caption component onto the page

• Double click the image component

A popup will appear; follow one of the steps below to add an image:

• By clicking on the dotted box, you will be able to upload and select an image from your local computer drive

• Images uploaded previously will be displayed on the right hand side of the pop-up. You can also drag and drop those images into the dotted box

Content Blocks - Banner with Text Block

Use this option to add a banner with text to the page. This is similar to the Image option, however the added image appears as a banner with text instead of a regular full-sized image.

• Drag and drop the Banner with text block onto the page

   

• Double click the component to upload the banner image and inside the image we can also add text

A popup will appear; follow one of the steps below to add an image:

• By clicking on the dotted box, you will be able to upload and select an image from your local computer drive

• We can include a text inside the image

• Images uploaded previously will be displayed on the right hand side of the pop-up. You can also drag and drop those images into the dotted box
  
  

Content Blocks - Adding Headers

Use this component to add headers on course contents.

• Drag and drop the Headers component on to the page

• By default it will create Header1 component in the editor page and user can change the header type up to header6.

• In order to change the header type user should select the header component and navigate to Style Manager-> Font → Header. Now you can use the dropdown values from header1 to 6.

IMPORTANT NOTES:

1. The Header dropdown on the Font section will be available only for header components. If the user selects other element the header option will not be visible.

2. The desired Font size and Font family for each Header can be selected via the Admin dashboard. But we can still change the Header size and other styles in Loree editor.

Content Blocks - List Block

Are you tired of adding bullets and numbering using HTML code? Now, Loree has the simple solution to add Links/ Bullets using List block within the Loree Editor Interface.

From the release of 1904.2 onwards, Loree supports Bullets and Numbering within the Editor.

By Clicking on Bullets icon, will add the bullets (Round filled) icon in starting on the sentence. When user pressing “Enter” key to move the cursor on next line, the bullets icon will get automatically applied for the new line. The same flow implemented for Numbering list also. By click on Numbering icon will add numbers in starting cursor point.

Use this component to add Ordered/ Unordered list properties on course contents.

• Drag and drop the List component on to the editor page

• By default it will create “Ordered List“ component with a list item as “Insert text here“. User can change the list type from Ordered list to Unordered list or Unordered to ordered list by selecting the list icon on tool bar.

• This option available only when user selecting list element.

• Loree allows the users to add nested list elements by drag and drop List block into existing List items.

• By press on “Enter“ will create new list item and “Shift + Enter“ will create new line on same list item.

Section Blocks – Adding Columnar Sections

Section blocks allow the user to add columnar sections onto the page.

When contents need to be presented as sections, open section blocks and choose from one of the predefined styles. Several predefined options ranging from single to multi column section components with / without headers are available under section blocks.

To include a section component on the page:

1. Open the section block.

2. Select the preferred section style from the available list of predefined styles.

3. Drag and drop onto page

4. Enter textual content for the section in the placeholder.

All the above blocks were designed with bootstrap classes to make sure the contents are responsive on all devices.

1col -This will allow the users to design a course contents for 100% width.

1col w Header -When user wants to design a page with a single column with header values, this block will be useful.

2col (50/50) -This will allow the users to create or design a 2column blocks with equal width. User can drag any blocks into this.

2col (40/60) -This allows the users to design a new 2column block with 40% left and 60% right side block.

2col (60/40) - Designers can design a new 2column block with responsive. The left side block will be 60% and the right side block will be 40% of width.

2col (30/70) - This block allows the users to design a course contents using 2columns section. The left column will represents 30% and right will be 70% width. 

2col (70/30) - This allows the users to design a new 2column block with 70% left and 30% right side block.

2col (20/80) - Designers can design a new 2column block with responsive. The left side block will be 20% and the right side block will be 80% of width.

2col (80/20) - This block allows the users to design a course contents using 2columns section. The left column will represents 80% and right will be 20% width. 

2col (10/90) - Designers can design a new 2column block with responsive. The left side block will be 10% and the right side block will be 90% of width.

2col (90/10) - This block allows the users to design a course contents using 2columns section. The left column will represents 90% and right will be 10% width. 

2col w. Header - User can create or design a 2column contents with header values for each column. Both columns will be 50% of width.

3col- User can create or design 3column section blocks using this block. Each column on this section will be equal width.

3col w Header - Create or Design a 3column section block with header section.

3col v2 -This will provide the 3column design with different width styles. Left and Right columns will be 25% each and the middle column will be 50%.

3col v2 Header - User can create or design 3col V2 block along with header section.

4col - Allows the users to create a four column section block.

4col w Header - Four column section which contains the Header section.

Special Blocks – Adding Grids and Icons

Special blocks allow the users to add tables and Icons onto the page.

When contents are to be presented as a Grid, open Special blocks and choose from one of the predefined Grid components. Several predefined options ranging from single to multi-row and multi-column Grid components with / without headers are available under section blocks.

To include a Grid component on the page:

1. Open the Special block.

2. Select the type of Grid to be included in the page from the list of pre-defined table contents, then drag and drop onto page.

3. The Grid acts as a container for other contents. For example, image, text or video components can be included within a Grid. This is done by first adding a Grid onto the page and then opening Content Blocks to add required content.

Dynamic Tables

For Designer/Teacher's view (Simplified view), In special block a new block called "Dynamic Table" will be available. "Custom table" block is draggable, When a custom table block is dragged and dropped in a Loree editor then a modal will appear with a input field like "Number of rows, Number of columns and Header(if necessary)". Once we fill up this fields then click "Create" button to create a new table in Loree editor. 

Once the table created, you need to click on the table element outer layer. By highlighting the table element, you can see the blue action bar items, which contains the “Table“ icon for editing the table.

Click on the Table icon from action bar, the new modal “Dynamic Table Properties“ will open in Loree Editor Interface. You can see all the Editor Contents in new modal.

Once you navigate to the table elements, by right click on any cell or row or column you can edit the table. Below are the sample screens which shows how the table items can be edited.

To edit the table rows, columns and header, click the table column/row/header -> a toolbar with "Edit and Expand" options will be available in top right corner of the column/row/header. We can click "Edit" to edit/update the column/row/header and click "Expand" to select the nearby column/row.

Once you edit the table cells, columns or rows it will be reflected in the Modal. In order to apply those changes in Loree Editor interface, you need to click “Update & Save“. Otherwise the changes will be not saved.

Custom Blocks

Any component / group of component(s) within a page can be saved as a custom block. All components saved by the user will be available under custom blocks and can be accessed by all the users within the department.

Custom Blocks will have two different sections:

1. My Blocks - Created by own blocks will be listed here

2. Shared Blocks - All the Shared blocks by others will be listed here.

To include a custom block on the page:

1. Drag and drop the chosen custom block from the list of available custom blocks on to the page.

2. You can modify the contents of the custom blocks just added and update the page.

Note: For more information on how to create/edit a custom block, please refer to Save as new Block/ Creating/ Locating Custom Blocks, previous pages on ‘Custom Blocks’ and ‘Content Bar' .

Templates

Any page which is saved as a template by an Admin, course editor or designer will be available under this category.

Custom Templates will have three different sections:

1. Loree Template Pack-1 - This provided by Loree. It can't be deleted but can be shared. By default this will applicable only for Admins and they can share it to other departments.

2. Global Templates - All the Templates which marked as Global will be displayed in this Section. This section will be displayed for all the users in Same organisation.

3. My Templates - Templates created by own will be listed here

4. Shared Templates - All the Shared Templates by others will be listed here.

To include a template into the page:

Drag and drop the chosen template from the list of available templates on to a blank page or an existing page. You can now modify the contents of the template just added to the page.

The user can filter the templates by using categories or Name Search.

For Admin role, they can filter templates by using Department Name as well.

Note:

• For more information on ‘How to create a template’, please refer to ‘Creating / Saving / Locating Templates’.

• Templates created by the Editor / Designer are accessible by all members within the department.

Global Templates

Global templates are enabled by an Admin via Admin Dashboard. All the templates are managed by Admin via Dashboard. When an Admin enables any template as “Global”, will be available for all the users who are accessing Loree in same organisation.

By default, the global templates won’t allow the users to edit, share or delete. The right click functionality has been disabled for all the global templates.

In admin panel, when any new template created by designer or any user in the same Organisation- that will be listed under Templates Management section. So that, an Admin can Enable/ Disable the template as Global at any time.

Note: When any templates marked as Global, that will not allow the Loree users to Share, Edit or Delete from the Loree Editor Interface. (Right Click functionality restricted for Global Templates)

Managing the Global templates can be done only via Dashboard. If a Designer deleted his/her template from “My Templates” and the same was marked as “Global Template” by Admin, that will be Archive from their account. But still the Global Template will display on all user accounts.

As an Admin or Designer, when you update your templates from My template section and if the same was marked as Global by Admin – then all the latest changes will be automatically updated in Global Templates also.

Restricted Remove Templates:

Restricted remove option in "My Templates" when a template is marked as global template. So that Designer will be not able to remove the template when it’s marked as Global.

When a template in "My Templates" section is made as global template then course designer/admin can't remove/archive that template from "My Templates" section, remove option is restricted for a template which is made as "Global Template". Once the template is not Global template (Which means once the template is removed from global template and be as my template) then that template will have "Remove" option when right clicking it.

H5P Contents

Fetch configured H5P modules

Once, the user created the H5P content then it will be ready to use it in Loree Editor. All the user created H5P contents can be accessed only on Designer view of Loree tool.

In order to View the contents, first select Open Blocks and Select H5P Interactive content Blocks section. (Open Blocks -> H5P Interactive Content Blocks)

The list will show all the user created H5P modules by Ascending order based on provided title name.

Use configured H5P modules

By drag and drop the H5P contents into Loree editor window, you can use it inside Canvas course. Also, the same content you can use it another course as well.

Edit the Configured H5P modules

Loree allows the users to edit and delete their own H5P contents from their account. By right click on H5P content will open the Edit modal where use can modify the contents.

When the same content used in multiple locations and if you edit from any one place, that will reflect on all other pages as well.

Once Editing functionality finished you can close the Edit modal.

Delete the Configured H5P modules

In Edit H5P modal itself, Loree allows the users to delete the configured H5P content. This action cannot be undone, and it will remove the content permanently from user account.

When same content used in multiple locations, this delete will reflect on all other places.

Accessibility Checker

Accessibility Checker is an innovative solution that lets user inspect the accessibility level of content created in Loree Editor and immediately solve any accessibility issues that are found.

It Provides visualisations of accessibility features of web pages like headings, landmarks, images, links and form controls. Provides computed information on the role, accessible name and accessible descriptions for accessible elements that are visualised.

This feature is enabled for everyone by default. Later it can be enabled or disabled for users by the Admin in Loree Admin Dashboard.

Within Loree Editor, you can see the Accessibility Checker icon on top of the Menu bar when it’s enabled. By click on Accessibility Checker icon will open the sample below modal:

Above screen describes that the Accessibility issues can be resolved within tool itself. When any accessibility issues found in Loree Editor, it will trigger the issues in small modal along with brief description of how it can be fixed.

You can easily find out the issue type by viewing the checker report window. In case of Accessibility issues found, will pop-up the alert with no accessibility Issues.

In the modal bottom you can see “Check Again” and “Update & Exit” as an option.

1. When you choose “

Check Again” will run the Accessibility Checker again and display the results.

1. If you select “

Update & Exit”, the fixes you made on accessibility issues will get update in Loree Editor content. So, after Save and Exit will solve the issues.

NOTE: In case if you not click on “Update & Exit”, will discard the fixes which you made in Accessibility window.

You can navigate to previous and next issues by click on “Previous” and “Next” arrows in the modal header.

Loree provide the option to the users that you can use “Quick Fix” option to solve the issues within Accessibility Checker result modal. Or you can select “Ignore” to ignore the issues from the results.

Component Bar and Toolbar

Component/Content Bar

The Component/Content bar a.k.a the Blue Menu, sits on top of the blue box that appears when a component is selected. It is used to perform select operations exclusive to the selected component including expand selection, move, copy and delete.

Expand Selection : expands selection to the next outer block. This expand option can be used continually until the outermost block is selected.

Some examples of how expand selection can be used are:

• Finding out the word count of two or more adjacent blocks

• Clearing the contents of two or more adjacent block

• Creating custom blocks by expanding the current selection up to the point to which the custom blocks is to be created, then select Edit from the navigation bar and create custom blocks

• Dragging a component / content to any position within the layer

• Duplicating content using copy and paste. The duplicate content is placed adjacent to the selected content

• Deleting content from multiple components

Toolbar (text)

The text toolbar appears when any text (individually or collectively) is selected (double click). It allows for customisation of selected text.

The options available in the toolbar are

• Bold

• Italic

• Underline

• Strikethrough

• Link (Chain symbol): This option allows the selected text to be linked to

  • A custom URL

  • An email address (mailto:)

  • Modules within the course

  • Other Canvas Pages within the module

Note: Links can also be customised via the Admin dashboard.

When the page is viewed on Canvas LMS, the selected text will appear as hyperlink. Upon clicking the hypertext, the corresponding action based on the type of link will be executed.

• Unlink: This option is used to unlink any hyperlink associated with a text on the page

• Bullets & Numbering:

Are you tired of adding bullets and numbering using HTML code? Now, Loree has the simple solution to add Links/ Bullets using List block within the Loree Editor Interface.

From the release of 1904.2 onwards, Loree supports Bullets and Numbering within the Editor.

By Clicking on Bullets icon, will add the bullets (Round filled) icon in starting of the sentence. When user pressing “Enter” key to move the cursor on next line, the bullets icon will get automatically applied for the new line. The same flow implemented for Numbering list also. By click on Numbering icon will add numbers in starting cursor point.

Note: For now, Firefox supports bullets and numbering only for <div> wrapper classes.

Link on Modules and Canvas shell pages

On selection of the link option, another pop-up appears as seen in the image below.

Select Link Type. The different link types will be explained in the following few pages.

Custom URL: the selected text can be linked to any custom URL. The custom URL to be linked, e.g. www.google.com can be included under ‘URL’. A title for the link can be provided through the “Link Title”. It appears when the user hovers over the linked text.

Email Address: the selected text will be linked to an email recipient (will appear as mail to: support@loree.io when the linked text is hovered upon).

Click the text to display the email composer. The contents of the composer will be pre-filled with the details configured, including email address, subject and body. A link title can also be inserted for ease of reference and will appear on Hover over the text.

Modules within a course can be linked using this option.

When the Link Type is selected as Modules, the available modules within the course is displayed in a dropdown. The user can then select the module to which the selected text is to be linked

Pages: Pages which belong to the same course can be linked using this option. When the Link Type is selected as Pages, the available Canvas Shell Pages within the course is displayed in a dropdown. The user can then select the page to which the selected text is to be linked.

Use Images as a Link

Earlier Loree supports the links only for text elements. Now you can add Hyperlinks to an Image also. By single click on image will show the Link and Unlink icons. When you click on Link icon for the image, will open the Edit Link modal. So that, you can add any custom URL, Email, Modules or Pages.

a) Image before linking

b) Image after linking

When you click on Link icon, that will open the new Modal to add hyperlink.

After add hyperlink on image you can save and exit. After adding hyperlink anytime you can unlink it by click on “Unlink” icon.

When an Image linked with any of the available target’s, that can be edited by again clicking on “Link“ icon from the RTE.

Note: By default, click on image link will open the link in new tab.

Asset Manager

• The Loree has ability to manage the assets like Images and Videos. So the user can upload and use their existing images from Canvas courses as well as Kaltura images.

• All the roles have an access to use their assets individually.

Canvas Images:

• Drag and Drop the Images and Image with Caption blocks from Content blocks section, the new Image Uploader modal will open in Loree tool.

• Image Uploader modal will fetch all the images from relevant Canvas courses files.

• The user can simply click the existing images from image list to use it. It allows the user to filter the images by typing the file name in search box and hit enter to the filtered image files.

• In case of new image, Click the upload button to upload a new image from your computer, Till the image is uploaded the loader (progressing) will appear. Once the image is ready in the list (Canvas image tab), Select the image and click set button so that the image is uploaded into the editor. Then the uploaded successfully pop up will appear.

• The Select Image modal will allow the users to only upload and use the images, not deleting it.

• In case of duplicate files uploaded again, it will show the alert to the users to choose either Replace or Duplicate the content.

• Acceptable formats are: gif, jpeg, jpg, png, svg & tiff.

• By default, the images list sorted by date last modified.

Note: Alt text should be provided before uploading an image.

Loree Images:

Earlier, all the images from Image Uploader fetches only the Canvas course level. When any template marked as Global, that can be accessible by any Loree user on same Organisation. In this case, the course level images will be broken.

In order to avoid the broken image issues on Global templates, Loree has introduced the centralised storage for Global template images. From the release of 1904.2, Loree will have two different sources for Image storage. By default, the images will be fetching from Canvas files and Global template images will be fetch from Centralised storage which was externally provided by Loree.

The user can simply click the existing images from image list to use it. It allows the user to filter the images by typing the file name in search box and hit enter to the filtered image files.

Click the upload button to upload a new image from your computer, Till the image is uploaded the loader (progressing) will appear. Once the image is ready in the list (Canvas image tab), Select the image and click set button so that the image is uploaded into the editor. Then the uploaded successfully pop up will appear.

User can choose the images either from Canvas files or Centralised Image storage which is provided by Loree.

When any new templates created or the existing templates modified using Canvas Images, the same will be replaced by Loree Images(Centralised storage) when it’s marked as Global.

Note:

• For now, Loree doesn’t allow the users to delete the images from Image Uploader modal. In future, it will be implemented.

• Alt text should be provided before uploading an image.

Insert from URL:

This feature allows the users to insert an image using embed URL. Loree will not save the embed images and it will directly fetch from the embed URL which provided by users.

The upload image section will be hidden when user select this option.

Once user provide the valid URL in the respective field, click on “Add Image“ option to list out the inserted image. After that, user has to click on image from the list to insert into course page.

Important:

• In Image upload modal, set button will be disabled by default until the user selects an image. Once the image is selected it is highlighted and by clicking the set button the image will be set in Loree editor. Even double clicking on the image list will set the image in Loree editor.

• Alt text should be provided before uploading an image.

Sort on images:

• We can also sort images name from Ascending and descending orders. This is only applicable for Canvas images and Loree images.
  
  

   

Videos:

• Drag and Drop the Video and Video with Caption blocks from Content Blocks, user can access video related files.

• Once user drag and drop the video block in Loree editor, they have to double click on video element to open the “Select Video“ modal.

• Following providers are used to import Video files in Loree tool

  • HTML5 Source(Link)

  • Vimeo(Link)

  • YouTube(Link)

  • Loree Video(List)

  • Kaltura(List)

• HTML5 Source:Used to insert the web url for Videos.

• Vimeo: Used to insert Vimeo videos using the video id. You can provide the input as Vimeo URL or ID

• YouTube: Used to insert Youtube videos by using the embed video id. In the Link to Video field you have to enter the Youtube Video ID or the URL.

• Kaltura(List): After a successful configuration of Kaltura media provider with Loree on Canvas LMS, you can upload and use the Kaltura videos in Canvas pages by using Loree. Kaltura supports the following video formats: MP4, MPEG, MOV, 3GP, AVI, OGG, FLV, etc.,

  Earlier Kaltura fetches the videos from Canvas My Gallery and display it in Loree Editor. So the user can select and use the appropriate videos within their course.

  Now, Loree allows the users to upload Kaltura videos using Loree Editor Interface. In order to upload video, you must navigate to “Select Video” modal.

• Loree Video(List):

  From the release of 1904.2, Loree allows the users to upload videos from System file browser. In order to do that you have to drag and drop the video or Video with Blocks element to Editor from Content Blocks. By double click on any Video element will open new modal, which contains the media provider’s list.

  You have to Choose “Loree Video” from the Media provider selection. After choosing the Loree Video you can see “Upload” icon from the right panel of the modal. You must click the “Upload” icon to open the file browser.

  After select the video from the system file browser and click on “Select” icon. Once the video selected, you will be notified with an acknowledgment modal. You can choose either “Upload” to upload the Video or choose “Cancel” to discard the process. The selected file name will be displayed in the Modal itself. When any unsupported format’s getting upload, you will get an alert saying “Unsupported Format“.

Note: All the video upload process will be carried out to background. For now, Loree allows the users to upload and use the videos in canvas contents. Delete videos feature will be implemented later.

All the uploaded videos will be saved in Loree Video and will be listed on Loree Editor Select video Modal. You can pick the video to add it in a course page.

Video component default size:

Video/Video with caption block dimension is made default. When a video/video with caption component is dragged and dropped form a Content Blocks, then the video/video with caption component's dimension would be "Width - 560px and Height - 315px" by default. This would provide us more responsiveness and good looking for video/video with caption component.

When Video/Video with caption is drag and dropped in a Loree editor, the instruction of the block would be "Double click to Upload Video". This instruction is changed to be more informative and clarification for user to use video/video with caption block. 

Enable/Disable video in dashboard:

Now admin dashboard will manage the video component in Loree, Based on Enable/Disable (toggle "Off" and "On") in dashboard, the video component will be available in Loree tool for use. If the Loree tool need video/video with caption block in content block then it should be "Enabled" (toggled "On") in admin dashboard.

Contextual Help Icons

This feature is provided by Loree to help the users to understand the feature benefits and tips on how to use it. When user facing challenges on using the tool features, they can simply click on the Help icon. It will navigate the users to the confluence page in new tab, where they can see the usage of particular feature.

For phase-1, Contextual Help Icon has been implemented around 14 features on Loree. This will be enabled for all the Loree users.

Following are the features list which has Contextual help icon:

1. Blocks - Content Blocks

2. Blocks - Section Blocks

3. Blocks - Special Blocks

4. Blocks - Custom Blocks

5. Blocks - Templates

6. Style Manager - General

7. Style Manager - Dimensions

8. Style Manager - Font

9. Style Manager - Background

10. Style Manager - Flex

11. Update/ Create Custom Blocks

12. Share/ Delete Custom Blocks

13. Edit/ Share/ Delete Custom Templates

14. Asset Manager - Image Uploader

15. Asset Manager

16. Device Selection

17. Quick Links

18. Add New/ Edit H5P contents

Understanding on “Enter“ and “Shift + Enter“

Loree has different set of functionalities for Enter key and Shift + Enter key. When user drag and drop a text block into Loree and pressing on”Enter” key will create new <paragraph> tag with “Insert Text Here“.

For Enter key:

• When the cursor point is placed either starting of the text block or ending of the text block and pressing “Enter“ key will create new <paragraph> text.

• When the cursor is on middle of the text and hit on “Enter“ key will create new paragraph text with copied styles.

For Shift + Enter:

• When user pressing “Shift + Enter“ will create new line within same paragraph text.

Clearly different open learning cloud