Getting Started

Getting Started

The "Getting Started" section provides users with essential content creation options, allowing them to add various elements to their course or project.

Available Options:

  • Text: Insert and format written content.
  • Image: Upload or embed visual elements.
  • Video: Add multimedia content for better engagement.
  • Audio: Incorporate sound or voice recordings.
  • Document: Attach and display files for reference.
  • Loree Interactive: Likely an advanced tool for interactive content creation.

This structured menu helps users easily integrate different media types, enhancing the learning experience.

Text

The Text element allows you to add text to your page, and when selected, it provides four formatting options:

  1. Header: This option adds a large, bold header, ideal for introducing sections or drawing attention to key content. It’s typically used for titles or major headings.

  2. Paragraph: This option adds regular text in a paragraph format, suitable for body content, descriptions, or any other standard text.

  3. Heading with Paragraph: This combines both a heading and a paragraph. It’s useful for structuring content where you want a title followed by a detailed explanation or information in a single block.

  4. QuoteBlock: This option is used for displaying quotes. It presents the text in a styled block, often with special formatting, to distinguish it as a quote or cited text. 

  1. Style 1 only allows for a solid border on the left side as shown in the image:

  1. Style 2 provides users the option of adding a quote icon only on one side (left) as shown in the image:

  1. Style 3 gives Loree users the option of adding a quote icon on both the left and right sides of their content as shown in the image:


Image

The Images option provides multiple pre-defined layouts to easily add images, text, or a combination of both to your page. Selecting one of these options will place the content into the chosen column. Here’s a breakdown of each available option:
  1. Banner: Adds a full-width image that spans the entire column, perfect for headers, announcements, or visually striking sections.
  2. Image: Inserts a standalone image into the column without any accompanying text, ideal for showcasing visuals.
  3. Centered Image: Places an image at the center of the column, creating a balanced and professional layout.
  4. Image with Flexi Align: Adds an image with flexible alignment options (left, right, or center), allowing for better customisation based on your design needs.
  5. Paragraph on Image: Overlays a paragraph of text directly on the image, useful for creating visually engaging banners or highlights.
  6. Image with Wrap Text: Positions an image with text wrapped around it, providing a dynamic and space-efficient layout for content and visuals.
  7. Image with Wrap Heading and Paragraph: Similar to the previous option, but includes both a heading and a paragraph wrapped around the image for a more detailed presentation.
  8. Image with Caption: Adds an image with a caption below, ideal for providing context, descriptions, or credits for the image.




After selecting an option, an image will be added to your course. You can click on the image to replace it with one of your choice. A pop-up (modal) will appear when you double click on the image or single click on the image then click on the replace option on the left side of your screen. This modal allows you to choose from existing course images, user-uploaded images, Loree’s image library, or an icon, or upload a new image using the "Click to upload a new course image" link. This feature makes it simple to personalize your design with the ideal visual elements.




Adding image

When you're adding an image, it's essential to provide a file name and Alt text. We've made it a requirement to ensure accessibility and proper labeling.

If you try to leave the Alt text box empty or only add spaces, the "Add image" button will be disabled.

You have to either include some text in the Alt text box or select "Decorative Image" to add an image as shown.

It's a small but important step to ensure your content is inclusive and informative!




Image Cropping in Loree


The Loree editor now includes an intuitive image cropping feature, allowing users to crop images into two shapes: a circle or a square. This feature makes it simple to customise images while designing pages.

Here’s how it works:

  • When uploading an image, a "Crop Image" button appears on the image.
  • Clicking the "Crop Image" button lets you choose the desired shape (circle or square) and adjust the crop area.
  • While hovering over and selecting the crop options, the selection will be highlighted in Loree blue, consistent with other elements in Loree.
To ensure that cropped images reflect correctly in Canvas, a set of CSS properties needs to be added to your Canvas themes.


Images can now be cropped with precision, allowing you to select and adjust the crop area exactly as desired. Cropped images will maintain their shape and alignment across different devices and screen sizes, ensuring a polished and professional appearance, as shown.






A Banner Image is a prominent visual element displayed at the top of a page or section. It enhances the design, provides context, and can be customized by selecting an image from the library or uploading a new one.

Image Cropping for Banner:

The image on the left shows the minimum cropping size of 50*50 for any image. 
The image crop option is not available for banner images. Instead, when a banner image that is selected is bigger in size, Icons cannot be used as a Banner Image.


Once the user selects their desired top, center, or bottom part of the banner, clicking on Apply will add the banner in the editor and provide a variety of editing options on the side as well; refer to the image:

NotesNote: The Crop Image option will only be available for images that are available for upload or in the course images. Some of the external images can’t be uploaded, therefore restricting this Crop Image option for users.



Upload New Image


The "Click to upload a new course image" option allows users to upload images in supported formats such as JPG, JPEG, PNG, GIF, and SVG. If the image size exceeds 500KB, the upload time may vary based on the user's internet bandwidth. This feature provides an easy way to add custom images to the course.

The External Link option allows users to add an image to the course by providing a direct URL instead of uploading a file. This feature is useful when using web-hosted images, reducing storage usage and ensuring easy updates.



LMS Image Upload Rules

  1. When we save a page to LMS, it will compare the image file with the name and extension first.

  2. If the name and extension are different in S3 and course files, then the file will be uploaded to the LMS course files.

  3. If the file name and extension are the same in S3 and course files, then the file will be hashed to compare the images.

  4. If the images are different after hashing, then the image file will be uploaded.

  5. If the images are the same after hashing, then the image file will be restricted to upload.

  6. The S3 images on the page while we save to LMS will only be compared with the above steps, and no images will be saved again in the LMS.


NotesNote: While checking the image name for duplication, the spaces are filled with %20, and we will remove %20 while comparing the file name while duplication; therefore, if the file name itself has %20, that will be removed while comparing, and in that case, the file with %20 and without %20 might get duplicated since we will remove %20 while comparing.

Embed Icons in Loree Editor

Loree now offers the ability to add icons while creating templates, providing more flexibility and customisation. We have updates thousands of icons in the Icon library. Here's how the feature works:

Where Icons Can Be Used:

  • Icons are accessible under the Images element in the editor but are not applicable to banners or images with text elements.
  • Special Elements also support icons. When accessing the special elements option in the editor, you’ll be able to add and customise icons.

How It Works:

  • Clicking on the Icons option within an element will display a library of icons categorized by tag names.
  • All icons are provided in SVG format for scalability and quality.
  • The Icon Library 
    includes a search filter, allowing you to quickly find specific icons. Icons based on tags or search terms will load within five seconds.


Customisation Options:

Once an icon is added, you can customise the following properties:

  • Size: Adjust the dimensions of the icon.
  • Space: Modify the spacing around the icon.
  • Alignment: Align the icon within the element.
  • Background: Add or adjust the background color.
  • Border : 
  • Shadow : 
Notes
Important Note: To ensure icons are displayed correctly in the LMS, specific CSS updates are required.

Videos

Videos are easily uploaded to the page, and similar to images, Loree allows users to choose from predefined layouts to assist in completing the page. See below for a screenshot of the layout, and options:

Open image-20220317-195501.png
Open image-20220315-203157.png

Selecting the video will give you four options as detailed below:


Video



Paragraph on Video:


Use this option to upload a video with Text on it.



Video With Paragraph:


Use this option to upload a video with Text aligned parallel to it.




Video with Heading and Paragraph:


Use this option to upload a video with a Heading and Paragraph text parallel to it.

After selecting an option, a video will be added to your course. You can click on the video to replace it with one of your choice. A pop-up (modal) will appear when you click the replace option on the left side of your screen. This modal allows you to choose from existing course videos, user-uploaded videos, or upload a new video using the "External Links" option you can insert a link to a video (YouTube, Vimeo, or other external links). After updating the link click next, then give a title to your video and click on Replace to add a Video to your course.


Audio

After selecting audio option you will get a popup modal, This modal allows you to choose from existing course audios, user-uploaded audios, or upload a new audio using the "External Links" option.




After updating the link click next, then give a title to your audio and click on add too add a audio to your course.

Document

  1.  After selecting the Document option, a pop-up modal will appear. This modal lets you choose from existing course documents, previously uploaded documents, or upload a new document using the External Links option.

  2. If you’re adding an external document, enter the document title and URL, then choose whether it should open in the same tab or a new tab. Once you’ve made your selection, click Add to include the document in your course.




 

  1.  Loree's Inline Document Preview option gives you greater control over how documents appear within your content.
  1. With this update, when you upload a document—such as a PDF, Word file, PowerPoint, or plain text—you can choose from three flexible display options:

    • Disabled Preview: Displays a simple link that learners can click to download or open the document.

    • Preview in Overlay: Opens the document in a pop-up window when the link is selected.

    • Preview Inline: Embeds the document directly within the page, with the option to keep it expanded by default.

  2.  After uploading a document and selecting a display mode, Loree shows a smart placeholder inside the Editor. This allows you to clearly preview how the document will appear to learners in Canvas before publishing.

  3. Check out the Video on your left to know more about Document Inline Preview!

Loree Interactives:

Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging and interactive way, transforming the individual from a passive viewer into an integral part of a dynamic, two-way experience.

Refer to the Image below:

To access Loree Interactives, select it from the left-hand side menu, as shown in the screenshot below:


After selecting Loree Interactives, a new left-hand side menu will appear with the following options:


Choosing "Create New" will take the user to the dashboard pop-up (modal), as shown below:

Loree Interactives Dashboard:

The Loree Interactives (LI) dashboard features nine interactive components: Accordion, Tab, Button, MCQ, Click & Reveal, Flip Card, Video/Image Slider, Drag and Drop, and Image Hotspot. Users can easily create a component by clicking the "Create" button.
Accordion

Accordion:

An interactive accordion is a popular UI element in web design and development, featuring vertically stacked collapsible panels. Each panel has a clickable title or header that expands to show additional content. This design allows users to efficiently navigate information, accessing only the sections they need while keeping the interface neat and organized.

Here is a short video on how an Accordion works: 



How to create an Accordion:

To create an accordion, follow these steps:
  1. Click on the "Create" button located in the accordion section.

  2. You will be redirected to the page mentioned below, where you can start building your accordion.
                   




Once the form is open, you'll find the following fields to fill out:



Accordion Interactive Title: Input a title or name for the interactive accordion.

Section Header: Enter a title for each section, which can be expanded or collapsed by users.

Section Body: Input content to be displayed when the section is expanded.

Add Section for Accordion

  1. The Accordion form has collapsible sections. To add a new section, click 'Add Section' and a '+' icon will appear on the section line stating 'Add Section' below. Refer to the images.
  2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
  3. To delete a section, click the 'Delete' icon on the Section Line and confirm the deletion by selecting 'Remove.'

NotesPlease Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customize Options

Customization options allow for users to personalize and adjust visual aspects like fonts, colors, styles, and spacing to fit preferences or branding. They improve appearance and usability to meet user requirements, with options for Section Headers, Borders, and Icons provided.
Section Header: Users can customize section header appearance by modifying: 1. Font Family, 
                                                                                                                                               2. Font Style,
                                                                                                                                               3. Font Size,                                                                                                                                                                           4. Font Weight,
                                                                                                                                               5. Alignment,
                                                                                                                                               6. Margin (px),
                                                                                                                                               7. Font Color,
                                                                                                                                               8. Background Color.











These options provide flexibility to create visually appealing and well-organized section headers that suit the overall design and readability of the content.

     

Border: 
1. A border outlines and separates content, adding structure and enhancing appearance.

2. You can customize its color and thickness and choose from different border styles. The border radius allows for rounded edges.
Icon: Icons represent dropdown interfaces with two types: Arrows and Plus/Minus radio buttons


Preview:

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.


THANK YOU!



Tab

TABS Interactive

The primary goal of Tabs Interactive is to present users with a grouped view of related data, which in turn allows content builders to modularize groups of information in a compact manner, saving valuable screen real estate.

Here is a short video on how Tabs Interactive works:

How to create Tabs Interactive:

To create a Tabs interactive, follow these steps:
  1. Click on the "Create" button located in the Tabs interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Tabs interactive.


 Once the form is open, you'll find the following fields to fill out:

Interactive Title: Input a title or name for the Tabs interactive.

Section Header: Enter a title for each section, which can be expanded or collapsed by users.

Section Body: Input content to be displayed when the section is expanded.
'Add Section' for Tabs Interactive:
  1. The Tabs interactive form has collapsible sections. To add a new section, click 'Add Section,' and a '+' icon will appear on the section line stating 'Add Section' below. Refer to the images.
  2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
  3. To delete a section, click the 'Delete' icon on the Section Line and confirm the deletion by selecting 'Remove.'

Notes
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).
Customize Options: Customization options allow for users to personalize and adjust visual aspects like fonts, colors, styles, and spacing to fit preferences or branding. They improve appearance and usability to meet user requirements, with options for Section Headers, Borders, and Icons provided.

Section Header: 

  1. The section header customization options allow users to tailor the appearance of headers or titles within their content: font family, font style, font size, font weight, alignment, font color, active tab background color, inactive tab background color, separator color, and separator size.

  2. You can customize headers for visually appealing and organized content presentation.
   


 


Border:

 1. A border outlines and separates content, adding structure and enhancing appearance.
 2. You can customize its color and thickness and choose from different border styles.
 3. The border radius allows for rounded edges.

Preview:

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.




THANK YOU


Button

Button Interactive:

A Button interactive is a clickable element in a user interface that triggers an action, such as dialogs, modal windows, forms, cards, and toolbars. It provides a straightforward way for users to interact with the application.

Here is a short video on how Button Interactive works:

How to create a Button Interactive:


To create a Button Interactive, follow these steps:
  1. Click on the "Create" button located in the Button Interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Button Interactive.
 



Once the form is open, you'll find the following fields to fill out:

Interactive Title: Input a title or name for the Button interactive.

Button Name: Each interactive button has a clickable name that can expand or collapse to show or hide more content.

Button Link: A button link combines the look of a button with the functionality of a hyperlink, allowing navigation to different pages or sections within an app or website. It can open the linked content in a new tab or the same tab, using radio buttons.
 Add Link: You can now easily add and manage links directly within your interactive content using the new, all-in-one Link Modal.

 Choose course items from Canvas and link them in one click, attach links to selected text or automatically created labels, and even link images. You can connect to Canvas content or any external URL, control how links open or where they jump, and use the new Email tab to create email links instantly.

 Refer to our Release Notes Version A2504.1 for more details on Add link modal.

Customize Options:

Customization options allow users to personalize and adjust fonts, colors, styles, and spacing to suit preferences or brand needs, enhancing appeal and usability. For Button interactives, options include types, alignment, padding, font family, size, color, and background for emphasis and readability.

Preview:

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.




THANK YOU


Multiple Choice Question

Multiple Choice Question (MCQ)

A Multiple Choice Question (MCQ) interactive is a learning and assessment tool where users respond to a question by selecting one or more answers from a set of predefined options. Commonly used in online courses, quizzes, and exams, this format helps measure understanding and retention while providing a simple, structured way for learners to engage with content. MCQ interactives also allow for instant feedback, making them effective for reinforcing learning and evaluating performance.

Here is a short video on how Multiple Choice Question works:

How to create an interactive MCQ:

To create a MCQ interactive, follow these steps:
  1. Click on the "Create" button located in the Multiple Choice Question interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Multiple Choice Question interactive.
 

 
Once the form is open, you'll find the following fields to fill out:
  1. Interactive Title: Use this field to give your MCQ interactive a clear and meaningful name. The title appears at the top and helps learners understand what the question set is about.

  2. Question: In this section, you can create your question using the bubble menu, which lets you add tables or upload images as needed. Each MCQ question is clickable, allowing learners to expand or collapse the content for a cleaner viewing experience.

  3. Options: The Options area is where you add and organize the possible answers. The bubble menu makes it easy to format text, add images, insert links, or include helpful tips for learners.

    • Add as many options as you need (at least two are required).

    • Select the checkbox to mark the correct answer.

    • Use Show Feedback if you want learners to see feedback after choosing an option.

    • The Check Answer button lets learners verify their response, while Get Results displays their overall score.

    • If you need to remove an option, simply use the delete icon.


Add Section for MCQ Interactive:

  1. The MCQ form is designed with collapsible sections to help you organize your content more easily.

  2. You can add a new section at any time by clicking the Add Section button. This instantly creates a section right below the current one. After a section is added, you'll also see a + (Add Section Below) icon on the section line for quick access.

  3. Need to move a section? You can shift it up or down using the arrow icons. This lets you place the section exactly where you want without needing to drag it manually.

  4. If you want to remove a section, simply click the Delete icon on the section line. A confirmation window titled "Remove Section" will appear—select "Remove" to permanently delete that section.





Notes
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when multiple sections are present).

Customization Options

Customization settings allow you to tailor the look and feel of your MCQ interactive so it aligns with your branding and design preferences. These options help you adjust fonts, colors, styles, spacing, and other visual elements to create a polished and engaging learner experience.

  1. We currently offer the following customization categories: Progress Bar, Section, Option, Button, Question Type, Body Border, Behavioural Setting. 
  2. Each of these options helps you fine-tune the appearance and behavior of your interactive, ensuring it meets your design standards and enhances overall usability.

 Progress Bar:

The progress bar comes with flexible customization options so you can match it to your course design or branding. 

  1. Background & Text Color: You can set any background or text color using the built-in color palette or enter a specific Hex or RGBA code for precise control. 

  2. Font Options: Choose from the same font collection available across Loree and Loree Interactive to maintain consistent styling. Just select your preferred font from the dropdown menu. 

  3. Font Styling: Adjust the appearance of your section headers by modifying:
     1. Font style (Normal, H1, H2, etc.)
     2. Font size (6–72)
     3. Font weight (normal, bold, lighter)
     4. Alignment (left, center, right)

  4. Spacing: You can define the margin around the section header in pixels to control spacing and layout. 

  5. Progress Bar Colors: You can customize both the font color and the color of the progress bar itself. Additionally, the background behind the question count can be personalized through the Progress Bar settings.
   



  Section: 


  1.  Within this section, the Background option allows you to change the background color of the question section. You can choose a color from the palette or enter a specific Hex or RGBA code to achieve the exact look you want.

  2. The Background option is used to change the background color of the question section, while Option Background is used to adjust the color of the option section. You can select colors from a palette or input specific Hex or RGBA codes to achieve the exact customization you desire.
 
 
Option: Users now have greater flexibility in customizing the appearance and layout of MCQ options.

  • Background Color:
    Easily set a background color for the options section using the color picker or by entering a specific Hex or RGBA code.

  • Spacing Adjustments:
    Fine-tune the spacing within and around each option to create a cleaner, more structured layout that suits your design needs using the Padding and Margin options.















  


 Button:
  1. The Button settings allow you to customize the look and feel of the buttons within your MCQ interactive.

  2. You can adjust the Style, Alignment, Padding, Font family, Font size, Font color, Background color.

  3. These options let you control the spacing, font appearance, and overall visual style of your buttons. You can make selections from the dropdown menus or enter specific color codes (Hex or RGBA) for precise customization.
 

 


 Question Type: You can customize how learners interact with each question by choosing from two supported question types:

  • Single Select: Allows learners to choose only one answer from the list of options. This is ideal when there is a single correct answer.

  • Multi Select: Allows learners to choose multiple answers. Use this for questions where more than one option may be correct.

 These options offer flexibility when designing quizzes, assessments, or surveys, helping you match the interaction style to the needs of your content.

 Body Border: The Body Border customization settings let you control the appearance of the border around the main content area. You can adjust:

  • Border Color: Set the border color using the palette or by entering a Hex/RGBA value.

  • Padding: Define the inner spacing between the border and the content for a clean and balanced layout.

  • Border Style: Choose from solid, dashed, dotted, double, and more.

  • Border Radius: Adjust how rounded the corners appear to create a softer or sharper look.

  • These tools make it easy to shape the visual structure of your MCQ interactive to match your preferred design.

 


 
 
 Behavioural Setting: Behavioural settings control how learners interact with questions and how feedback is delivered. These options help you shape the quiz experience to support learning, engagement, and fairness.

  • Check Answer: Allows learners to instantly verify whether their selected answer is correct. This is especially useful for practice quizzes where immediate feedback supports learning.

  • Retry Option: Enables learners to attempt the question again after seeing feedback. This helps reinforce understanding and encourages mastery through repeated practice.

  • Shuffle Order: Randomizes the order of questions or answer options each time the activity is taken. This prevents learners from relying on memorized patterns and promotes fairness across attempts.

  • These settings give you greater control over how your MCQ interactives behave, making them more flexible and learner-friendly.


Preview:
The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.


THANK YOU!


Click & Reveal Interactive

Click & Reveal Interactive

Click & Reveal interactive elements let users click on an item to uncover hidden content. This feature helps manage screen space effectively and offers an engaging way to access additional information.

Here is a short video on how Click & Reveal works: 

How to create Click & Reveal Interactive: 

  1. To create a Click & Reveal Interactive, start by clicking the Create button in the Click & Reveal Interactive section. You will then be redirected to the setup page, where you can begin building your interactive content.
 
 



 Once the form is open, you'll find the following fields to fill out:

  1. Interactive Title: Enter a title for your Click & Reveal interactive, prominently displayed or serving as a label.

  2. Click Content: Interactive element users click to trigger actions or reveal additional information.

  3. Reveal Content: Information visible after interacting with click content, enhancing user experience with supplementary details or functionality.

Add a section for Click & Reveal

  1. Click the 'Add Section' button to add collapsible sections below existing ones in the Click & Reveal form.
  2. A '+' icon appears on the section line to 'Add Section Below' for adding new sections.
  3. Use the up or down arrow icons to move sections instead of dragging.
  4. Click the 'Delete' icon on the section line, confirm in the 'Remove Section' window, then click 'Remove' to delete.





Notes
Please note: Whenever a new section is added, by default, it will be directly reflected instead of navigating to the previous section.

Customize Options:

Personalize fonts, colors, styles, and spacing to enhance visual appeal and usability for Click & Reveal Interactive.

 Click Content

 Includes options for Height, Padding (px), Border color, Border size (px), Border style, Border radius, and Background color.

 




  Reveal Content

 Mirrors the Click section and includes options for Height, Padding (px), Border color, Border size (px), Border style, Border radius, and Background color.

Highlight key information and make a memorable impression with the following customization options:
  1. Height: A height input field is now available in the Design section. The default height is set to 318 px, and you can adjust it anywhere between 100 px and 999 px. This feature supports both text and image content, giving you more control over the layout and visual presentation.

  2. Padding (px): Controls the space inside an element’s border, improving readability and overall layout.

  3. Color: Allows you to set the border color using the color palette or by entering Hex/RGBA values for precise customization.

  4. Border Size (px): Defines the thickness or width of the border in pixels.

  5. Border Style: Lets you choose the border’s visual style, such as Solid, Dashed, Dotted, Double, Groove, or Ridge.

  6. Border Radius: Adjusts the roundness of the border corners to create a softer, more modern look.

  7. Background Color: Sets the background color behind the text to enhance contrast and visibility, using either the color picker or custom Hex/RGBA codes.

Preview:

The PREVIEW option is conveniently located in the far right corner of the form section for all interactive elements, allowing easy access for reviewing your changes.




THANK YOU!

Flip Card

Flip Card

Flip card interactive elements are user interface components that flip to reveal additional content when clicked or hovered over. They provide a dynamic way to present information, combining both front and back content areas to maximize space and engagement.

Here is a short video on how Flip Card works:


How to create a Flipcard?
 To create a Flipcard interactive, follow these steps:
  1. Click on the "Create" button located in the Flip card interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Flipcard interactive.
 
 

Once the form is open, you’ll see the following fields to complete:


  1. Interactive Title: Enter a title for your Flipcard interactive. This title appears prominently at the top and serves as the main label for the interactive set.

  2. Front View: This is the initially visible side of the Flipcard. It is typically used to display a summary, prompt, or engaging visual to capture the learner’s attention. The Front View includes a bubble menu editor, allowing you to add and format text, images, and other elements.

  3. Back View: This section appears when the flip card is turned. It is used to provide more detailed information, supporting content, or interactive elements such as text, images, links, or multimedia. The Back View also includes the bubble menu editor for easy customization.

Add a section for Flip card:

    1. Click the 'Add Section' button to add collapsible sections below existing ones in the Flipcard form.
    2. A '+' icon appears on the section line to 'Add Section Below' for adding new sections.
    3. Use the up or down arrow icons to move sections instead of dragging.
    4. Click the 'Delete' icon on the section line, confirm in the 'Remove Section' window, then click 'Remove' to delete.



Notes
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customize Options:

  1. Personalize fonts, colors, styles, and spacing to suit specific preferences or branding needs.
  2. Enhance visual appeal and usability, meeting diverse user requirements effectively.
Card Type

Customize the appearance of your cards, including their type, number per row, and event interactions to match your page's aesthetics.

Type: Select either Square or Portrait for the card shape.

Number of Cards per Row: Choose how many cards to display per row, with options ranging from 1 to 4, to ensure optimal visual organization.

Event Options: Configure interactions such as hover effects or click actions to enhance user engagement.

 
Card Front

Enhance the front of your card to create engaging initial views that capture attention and encourage interaction. Highlight key information and make a memorable impression with the following customization options:

  1. Height: A height input field is now available in the Design section. The default height is set to 318 px, and you can adjust it anywhere between 100 px and 999 px. This feature supports both text and image content, giving you more control over the layout and visual presentation.

    This option is specifically enabled when using the     Portrait layout and selecting the Card Front (it’s not applicable for square layouts).

  2. Padding (px): Controls the space inside an element’s border, improving readability and overall layout.

  3. Color: Allows you to set the border color using the color palette or by entering Hex/RGBA values for precise customization.

  4. Border Size (px): Defines the thickness or width of the border in pixels.

  5. Border Style: Lets you choose the border’s visual style, such as Solid, Dashed, Dotted, Double, Groove, or Ridge.

  6. Border Radius: Adjusts the roundness of the border corners to create a softer, more modern look.

  7. Background Color: Sets the background color behind the text to enhance contrast and visibility, using either the color picker or custom Hex/RGBA codes.


Card Back

Enhance the card back in flip cards to provide detailed information or additional content, enriching user interaction and understanding. It mirrors the Card Front customization options.


 


Preview:

The PREVIEW option is conveniently located in the far right corner of the form section for all interactive elements, allowing easy access for reviewing your changes.


THANK YOU!


Image/Video Slider

Image/Video Slider Interactive

An image/video slider is a dynamic user interface element commonly found on websites, featuring a carousel or slideshow format to display multiple images or videos in a single area. It allows users to view content sequentially through navigation controls like arrows or dots, with options for automatic or manual transition between slides. Sliders are versatile for showcasing products, portfolios, or promotional content, offering visual engagement and enhancing the user experience with responsive design.

Here is a short video on how the Image/Video Slider works:


How to create an interactive Image/Video Slider?

To create an Image/Video Slider, follow these steps:

  1. Click on the "Create" button located in the Image/Video Slider section.
  2. You will be redirected to the page mentioned below, where you can start building your Image/Video Slider.
 










 Once the form is open, you’ll see the following fields to complete:


  1.  Interactive Title: Enter a title or name for your Image/Video Slider. This title appears at the top and serves as a label for the entire set of slides.

  2. Image/Video: Add images or videos to build your slider. Each slide acts as a visual element that users can navigate through, helping you present multimedia content in an engaging and dynamic way.

  3. Caption: A caption is required for each image or video. Use this field to add descriptive text or titles that provide context and help viewers better understand the media being displayed.
     Upload Image:

    1.  When the user selects “Click here to add media” within the section, all previously uploaded images stored in the Editor platform will be displayed for easy selection.
    1. If users want to add new images to the Image Slider, they can upload them using the “Click to upload a new interactive image/video” option, which allows them to seamlessly import and use their own media files.

    2. Additionally, users can insert images directly from the web by using the External Image Link option and entering the image URL.





     Upload Video:

    1. We support uploading videos from YouTube, Vimeo, or any external link, making it easy to include the media you need in your slider.

      To add a YouTube video:

      1. Paste the YouTube URL into the YouTube link input field.

      2. Click the Next button.

      3. You will be redirected to a page where you can enter a title for the video.

      4. Click Add at the bottom to include the video in your slider


    Add Section for Image/Video slider:

    The Image/Video Slider form includes collapsible sections that make organizing your media simple and intuitive.
    1. Click the Add Section button to insert a new section directly below the current one. Once added, a + (Add Section Below) icon will appear on the section line for quick access.
    2. Reordering Sections: You can move a section up or down using the arrow icons. This lets you position sections exactly where you want them without needing to drag them manually.
    3. To remove a section, click the Delete icon on the section line. A Remove Section confirmation window will appear—select Remove to permanently delete that section.
    4. These features make it easy to structure, update, and manage your slider content efficiently.


    Notes
    Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

    Customize Options:

    The Image/Video Slider includes the following customization options to help you tailor the look and feel of your content:

    1. Caption: Customize the text that appears below each image or video to provide context or descriptions.

    2. Icon: Choose or update the icon used within the slider for a more personalized visual style.

    3. Image/Video Background : Adjust the background behind your media to enhance contrast, visibility, and overall design.





    Caption:

    1. The caption in the Image/Video Slider can be fully customized using various style options.

    2. You can modify the background color and text style through the menu and select a font family from the options available in both Loree and Loree Interactive for consistency.

    3. Text formatting such as font style, size, weight, alignment, and margin can also be adjusted.

    4. Font and background colors can be chosen from the color palette or entered using specific Hex or RGBA codes.

    5. Additionally, the caption can be positioned at either the top or bottom of the image or video to enhance the user experience.

    		 


     

    Icon:
    Icon customization includes

    1. Icon Type: Choose between square or circular icons to match your design aesthetic.

    2. Icon Color: Personalize icons with a range of colors to align with your branding or visual theme.

    3. Icon Size: Opt for default, medium, or large sizes to ensure icons are appropriately scaled for visibility and impact.

    4. Icon Alignment: Position icons as default, at the top, or at the bottom of your interactive elements for optimal display and user engagement.

     Image/Video Background:



    1. Offering the option to change the background of the image/video slider using a color palette enhances customization and visual appeal.

    2. Users can select from a variety of colors to personalize the slider's backdrop, ensuring it complements the content and overall design theme seamlessly.

    3. This feature allows for greater flexibility in adapting the slider to different contexts and preferences, enhancing the overall user experience. 
    		 



    Preview

    The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.


    THANK YOU!



    Drag and Drop

    Drag and Drop

    Drag and drop functionality refers to the ability for users to click and hold on an object (such as an image, file, or element) and move it to a different location by dragging it with the mouse cursor. This interaction allows users to rearrange, reorder, or transfer items within a user interface intuitively. It is commonly used in various applications and websites to enhance user experience by enabling seamless and efficient manipulation of content or elements.

    Here is a short video on how Drag and Drop works:

    How to create Drag and Drop Interactive:


    To create a Drag and Drop interactive, follow these steps:
    1. Click on the "Create" button located in the Drag and Drop interactive section.
    2. You will be redirected to the page mentioned below, where you can start building your Drag and Drop interactive.
    		 





    1. Enter a title for your Drag and Drop element in the Interactive Title field.
    2. Then, click “Click here to add an image” to upload an image or add one using an external link. Once added, don’t forget to include alternative text or mark the image as decorative if it doesn’t need a description.

    Customizations

    1. In the Customize menu, you'll find the Drop Zone Layout section, offering two options: Custom and Fixed.


    Drop Zone Layout (Custom):
    To create a custom layout, follow these steps:

    Add/Edit Drop Zones:
    1. To add, edit, or delete drop zones, simply click the drop zone button, enter your label and options, and place the zone on the image.
    2.  Use Edit to make changes or Delete to remove a zone. When you're done, click Save to return to the main form.
    		 





    Drop Zone Layout (Fixed):

    1. For the fixed drop zone layout, you’ll see an extra option called Draggable Text. Just type your draggable text into this field, and it will appear as the item users can drag into the drop zones.


    Add Section Option for Drag and Drop

    1. The Drag and Drop form uses collapsible sections for easy organization.
    2. To add a new section, click Add Section, and a plus icon will appear showing where you can insert it. After adding a section, you can move it up or down using the arrow icons.
    3. If you need to remove a section, just click the Delete icon and confirm by selecting Remove.


    Notes
    Please Note:  Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).
    Customize Options

    Customization options let you tailor fonts, colors, styles, and spacing to match your design or branding needs. These settings help improve both visual appeal and usability. All of these customization features 1. Draggable Area. 2. Drop Zone Area. 3. Button are available for the Drag and Drop interactive.
    Draggable Area:

    1. Type: Choose the type of draggable area, such as Fill, Outline, Pill.

    2. Padding: Adjust the padding around the draggable area to control its spacing from surrounding elements.

    3. Font Family: Our platforms, Loree and Loree Interactive, allow for consistent font changes. Simply use the font dropdown to match your desired design or branding.

    4. Font Size: Adjust font size from 6 to 72 for readability and visual balance within the draggable area.

    5. Font Color: Font color options enhance readability, highlight information, and match branding. Access through a color palette menu. Click on the font color option to choose from a color palette or use Hex/RGBA code.

    6. Background Color: Background color options enhance readability and emphasis in a text editor's color palette menu. Choose from a color palette or use specific codes.

    		 
     

    Drop Zone Area:

    The drop zone area can be customized to match your design.

    1. Background Color: You can change the background color using the color palette or by entering Hex or RGBA codes.

    2. Opacity: You can also adjust the opacity to control how transparent the drop zone appears, letting more or less of the image show through.


     Button Customization

    Supports button styles like pill, outline, and pill-shaped, with options for rounded edges, transparency, and elongated shapes.

    1. Alignment: Set the section header text alignment to left, center, or right.

    2. Padding: Add space inside the element (in pixels) to improve layout and readability.

    3. Font Family: Choose from available fonts, consistent across Loree and Loree Interactive.

    4. Font Size: Select from a range of sizes (6 to 72) in the dropdown menu.

    5. Font Color: Change text color using the color palette or by entering Hex/RGBA codes.

    6. Background Color: Adjust the background color for emphasis or readability using the palette or specific color codes.
    		 



    Preview:

    The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactive.

    THANK YOU


    Image Hotspot

    Image Hotspot

    An image hotspot interactive allows users to click on specific areas (hotspots) within an image to reveal additional information or media. This enhances user engagement by providing an intuitive and visually appealing way to explore detailed content within an image.

    Here is a short video on how Image Hotspot works:


    How to create Image Hotspot Interactive:

    To create an Image Hotspot Interactive, follow these steps:
    1. Click on the "Create" button located in the Image Hotspot Interactive section.
    2. You will be redirected to the page mentioned below, where you can start building your Image Hotspot Interactive.
    		 




    Once the form is open, you'll find the following fields to fill out:
    1. Enter your Interactive title to label your Image Hotspot activity.

    2. Then, choose a visually rich base image where users can click on hotspots to reveal more information or media, making the experience more interactive and engaging.

    1.  When the user clicks “Click here to add an image,” they’ll see all images already uploaded to the Editor.

    2. If they want to use course images inside Loree Interactives, they’ll need to upload them as new files first.







    1.  The “Click to upload a new interactive image” option lets users upload any image they want to include in their interactive.

    2. They can also use the External Image Link option to add an image directly from a URL.

    1. After adding an image, users can click on the 'Add/Edit Hotspot' button to open a new window, allowing them to add, edit, or delete hotspots in their desired positions.

    2. Clicking on the 'Add' option opens another window called 'Add Hotspot', requiring users to add a Label and Content to the hotspot using the bubble menu editor.

    3. Once the hotspot is added, it can be edited and saved by clicking the Save option.
    		 


     
    		 Users can preview their work using the PREVIEW option, now located at the top right side of the form section

    Info
    Please Note: We’ve also improved the hotspot pop-up behavior. If your content is larger, the pop-up height now adjusts dynamically. It can expand smoothly up to 800 pixels without showing a scrollbar. If the content goes beyond that limit, a scroll bar appears inside the modal so everything stays readable and accessible.

    Add Section for Image Hotspot:
    1. The Image Hotspot form includes collapsible sections for easy organization.
    2. To add a new section, click Add Section, and a plus icon will appear on the section line showing Add Section Below.
    3. Once a section is added, you can move it up or down using the arrow icons to place it exactly where you want; no manual dragging is needed.
    4. To delete a section, click the Delete icon and confirm by selecting Remove in the pop-up window.




    Notes
    Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

    Customize Options:

    Customization options in the Image Hotspot interactive allow users to personalize fonts, colors, styles, and spacing, enhancing visual appeal and usability tailored to specific preferences or branding needs.

    Icon: Icon customization for image hotspots enables users to select or upload icons representing points of interest in an image. These icons can be customized in type, size, color, and background color to integrate seamlessly with the design and improve usability.

     1. Type: You can customize your hotspot icons in several ways. Choose the icon type to mark clickable points on your image and guide users visually. 

    2. Icon Size    : Adjust the icon size anywhere from 6 to 72 using the dropdown menu.

    3. Icon Color: Update the icon color to match your branding or improve visibility, using either the color palette or Hex and RGBA codes.

    4. Background Color: You can also change the background color behind the icon for extra contrast, with the same easy color selection options



    THANK YOU!


    Embed  

    After creating an interactive, you can click on the Embed option on the right side of the screen to insert it into the editor. If you need to make changes, click on the Edit option to modify the interactive. Alternatively, you can discard it by clicking on the "X" (Close) icon.

    To Embed an existing interactive from My Interactives, Shared Interactives, or Global Interactives, simply click on the Embed button on the right side of the interactive. This will insert the interactive directly into your editor's page.


    Info
    All fonts and sizes for headers and paragraph text will be determined by the predefined values set in the admin dashboard.

    THANK YOU

      • Related Articles

      • Loree Enhanced UI User Manual

        Welcome to the world of Loree Your go-to resource for mastering the Loree editor and its powerful features. Explore the sections below to quickly navigate to the specific guides you need. Landing Page Get started with the Loree editor! Learn how to ...

      • Release Notes for Loree A2403.3

        Published on: 31/07/2024 Feature Enhancements 1. Enhance Customization for Active and Inactive Tab Text Colour Earliers, when Loree users created a Tabs Interactive, the customize section applied the same font color style to both Active and Inactive ...

      • Interactive Elements

        Introduction In the Loree editor, H5P is available under the Interactive Elements section. It allows you to create fun and engaging content by adding more than 20 + interactive elements like hotspots, multiple-choice questions, and accordions using ...

      • Loree Interactive Style Management in admin dashboard

        Getting started We are happy to introduce the Loree Interactive feature in the admin dashboard. From the admin dashboard, admins can effortlessly customize styles and manage their Loree Interactive content. Benefits of a Loree Interactive feature in ...

      • Custom Row

        Getting started Introduction to custom rows The Custom Row feature allows you to save and reuse a row instead of creating a new one from scratch. This helps streamline your workflow by making it easy to save, access, and reuse rows whenever needed. ...