/
Loree User Guide

Loree User Guide

Table of Contents

Welcome to Loree

Are you ready to Explore the benefits of Loree?

ACCESSIBILITY

Enables anyone to build courses using powerful drag & drop design elements natively within Canvas platform. Create content with no HTML skills required.

INTUTIVE

Instinctual and easy to use toolset that supports academic workflows and delivers consistent course designs across users.

EFFICIENT

Boosts academic input and decreases effort, slashing build time and costs.

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.

 

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.

Back to Top

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.

Back to Top

Understanding the Toolbar Menu

Back to Top

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

Back to Top

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

 

Back to Top

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

Back to Top

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.

Back to Top

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 “_”.

 

 

Back to Top

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 “_”.

 

Back to Top

Undoing and Redoing Changes

Undo Change: This is used to undo / revert any recent changes to the page, prior to saving it. Once saved, any changes to the page prior to the <save> operation cannot be undone.

Clicking once will undo the most recent change. In order the to undo the previous changes, the user should click <undo> multiple times, which will undo the changes in a reverse chronological order (viz. starting with the most recent ones first)

The user can also use (CTRL + Z) in windows or (CMD + Z) on Mac to undo changes

Redo Change: This is used to redo / reincorporate the most recent changes which were undone or reverted on the page, prior to saving the page.

Once saved, any changes to the page prior to the <save> can’t be undone.

Clicking once will redo / revert the most recent undo action. In order to redo the changes undone earlier, the user should click <redo> multiple times, which will redo / reincorporate changes made in reverse chronological order

The user can also use (CTRL + Z) in windows or (CMD + Z) on Mac to undo changes

Back to Top

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’

Back to Top

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 “_”.

Back to Top

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.

 

(Figure: Admin View)

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.

 

Back to Top

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.

 

 

 

Back to Top

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.