What's New

What's New

Published on: 19/09/2024

Feature Enhancements

1. Flexi Align Image Element

  1. We are pleased to introduce a feature enhancement with the new Flexi Align option under the image element. This feature allows users to create left-aligned images with accompanying text and easily switch the alignment by clicking on the empty space inside the container to enable options. Users can then adjust the alignment by selecting the right or left arrow button. Additionally, users can change the number of columns and add more elements below the image or text within the same container, offering greater design flexibility and control.
     


2. Email Support Enhancement

  • We have introduced a new Email option in the "Add Link" feature, available exclusively in the editor (not applicable to interactives). This enhancement allows users to directly link a valid email address to an imageicon, or text. Upon clicking the email link, the system will open the user's default email, enabling them to compose and send an email to the selected address easily. 



 
Bug Fixes

1. 'Check Answer' option in MCQ Preview

  1. Previously, users were unable to validate responses in the MCQ interactives preview mode. We have now provided the option to check answers, and the "Check Answer" functionality works as expected, allowing users to validate responses directly during the preview. Refer to the video below for more details.


2. Color Picker opacity input field UI issue

  1. We have fixed an issue in the Loree editor where the opacity percentage field in the color picker was overlapping outside its designated area in the Loree interactive section. The opacity field now displays properly within the color picker for a smoother user experience. 
    Before:         

    After:
     


  2. We also have resolved an issue where the opacity field in the color picker always reflected 100%, regardless of any changes made to the percentage. The opacity percentage now updates correctly based on user input.

     

3. Drag and Drop Interactive Scroll issue 

  1. We have addressed an issue where users were unable to scroll through drag and drop interactives after clicking the "Check Answer" button. Previously, after validating their answers, users encountered difficulty navigating the interactive area as the scroll functionality became unresponsive. 
  2. With this fix, users can now smoothly scroll through the drag and drop interactives even after clicking "Check Answer".


4. Added Support for Drag and Drop Layout

  1. We have resolved an issue with the "Fixed" layout option for drag and drop interactives wherein previously, users were unable to edit the number of layouts in the already existing drag and drop interactives, which would have default fixed layout as 4, although they could modify content as per our earlier interactives revamp update.

  2. This was a migration issue which is now fixed and, users can now edit the number of layouts for any existing drag and drop interactives, even when the "Fixed" layout option is selected.

5. Accordion interactive Issue in Loree Mobile View

  1. We have addressed an issue where users could not view the full content of an accordion interactive on the Canvas mobile app due to the accordion height not getting auto adjusted. This issue has been fixed by adding additional lines of code to the Canvas mobile JS file. To resolve this issue, please add the following JS code to your existing Canvas mobile app JS.
    Note: Users may contact the Loree Support team via service desk for assistance with updating the JS files for their mobile app.

  1. const validHosts = [
  2.   'https://master.d1uzdukkodhm61.amplifyapp.com',
  3.   'https://loree-int.crystaldelta.net',
  4.   'https://loree-h5p.crystaldelta.net',
  5.   'https://master.dsw63snfssb15.amplifyapp.com',
  6.   'https://master.d273ugfkhsuatz.amplifyapp.com', // Loree US Region
  7. ];

  8. function isValidHost(host) {
  9.   return validHosts.includes(host);
  10. }

  11. window.addEventListener(
  12.   'message',
  13.   (event) => isValidHost(event.origin) && receiveMessage(event),
  14.   false,
  15. );

  16. function receiveMessage(event) {
  17.   if (
  18.     event.data &&
  19.     event.data.type &&
  20.     event.data.type === 'LOREE_WINDOW_SIZE' &&
  21.     event.data.height
  22.   ) {
  23.     const frames = document.getElementsByTagName('iframe');
  24.     for (const frame of frames) {
  25.       if (
  26.         frame.src &&
  27.         frame.contentWindow === event.source &&
  28.         frame.src.startsWith(event.data.url)
  29.       ) {
  30.         frame.style.height = event.data.height.toString() + 'px';
  31.         if (frame.id.includes('InteractiveCards') || frame.id.includes('flipcard') || frame.id.includes('Accordion')) {
  32.           frame.scrolling = 'yes';
  33.         } else {
  34.           frame.scrolling = 'no';
  35.         }
  36.       }
  37.     }
  38.   }
  39. }
  40. var misSpelledFonts = {
  41.   BeVietnam: "Be Vietnam",
  42.   DancingScript: "Dancing Script",
  43.   OpenSans: "Open Sans",
  44.   opensans: "Open Sans",
  45.   SourceSansPro: "Source Sans Pro",
  46.   TimesNewRoman: "Times New Roman",
  47. };
  48. var fontUrls =
  49.     "https://fonts.googleapis.com/css?family=ABeeZee|Abel|Abhaya+Libre|Abril+Fatface|Aclonica|Acme|Actor|Adamina|Advent+Pro|Aguafina+Script|Akronim|Aladin|Aldrich|Alef|Alegreya|Alegreya+SC|Alegreya+Sans|Alegreya+Sans+SC|Aleo|Alex+Brush|Alfa+Slab+One|Alice|Alike|Alike+Angular|Allan|Allerta|Allerta+Stencil|Allura|Almarai|Almendra|Almendra+Display|Almendra+SC|Amarante|Amaranth|Amatic+SC|Amethysta|Amiko|Amiri|Amita|Anaheim|Andada|Andika|Angkor|Annie+Use+Your+Telescope|Anonymous+Pro|Antic|Antic+Didone|Antic+Slab|Anton|Arapey|Arbutus|Arbutus+Slab|Architects+Daughter|Archivo|Archivo+Black|Archivo+Narrow|Aref+Ruqaa|Arima+Madurai|Arimo|Arizonia|Armata|Arsenal|Artifika|Arvo|Arya|Asap|Asap+Condensed|Asar|Asset|Assistant|Astloch|Asul|Athiti|Atma|Atomic+Age|Aubrey|Audiowide|Autour+One|Average|Average+Sans|Averia+Gruesa+Libre|Averia+Libre|Averia+Sans+Libre|Averia+Serif+Libre|B612|B612+Mono|Bad+Script|Bahiana|Bahianita|Bai+Jamjuree|Baloo|Baloo+Bhai|Baloo+Bhaijaan|Baloo+Bhaina|Baloo+Chettan|Baloo+Da|Baloo+Paaji|Baloo+Tamma|Baloo+Tammudu|Baloo+Thambi|Balthazar|Bangers|Barlow|Barlow+Condensed|Barlow+Semi+Condensed|Barriecito|Barrio|Basic|Battambang|Baumans|Bayon|Be+Vietnam|Belgrano|Bellefair|Belleza|BenchNine|Bentham|Berkshire+Swash|Beth+Ellen|Bevan|Big+Shoulders+Display|Big+Shoulders+Text|Bigelow+Rules|Bigshot+One|Bilbo|Bilbo+Swash+Caps|BioRhyme|BioRhyme+Expanded|Biryani|Bitter|Black+And+White+Picture|Black+Han+Sans|Black+Ops+One|Blinker|Bokor|Bonbon|Boogaloo|Bowlby+One|Bowlby+One+SC|Brawler|Bree+Serif|Bubblegum+Sans|Bubbler+One|Buda|Buenard|Bungee|Bungee+Hairline|Bungee+Inline|Bungee+Outline|Bungee+Shade|Butcherman|Butterfly+Kids|Cabin|Cabin+Condensed|Cabin+Sketch|Caesar+Dressing|Cagliostro|Cairo|Calligraffitti|Cambay|Cambo|Candal|Cantarell|Cantata+One|Cantora+One|Capriola|Cardo|Carme|Carrois+Gothic|Carrois+Gothic+SC|Carter+One|Catamaran|Caudex|Caveat|Caveat+Brush|Cedarville+Cursive|Ceviche+One|Chakra+Petch|Changa|Changa+One|Chango|Charm|Charmonman|Chathura|Chau+Philomene+One|Chela+One|Chelsea+Market|Chenla|Cherry+Cream+Soda|Cherry+Swash|Chewy|Chicle|Chilanka|Chivo|Chonburi|Cinzel|Cinzel+Decorative|Clicker+Script|Coda|Coda+Caption|Codystar|Coiny|Combo|Comfortaa|Coming+Soon|Concert+One|Condiment|Content|Contrail+One|Convergence|Cookie|Copse|Corben|Cormorant|Cormorant+Garamond|Cormorant+Infant|Cormorant+SC|Cormorant+Unicase|Cormorant+Upright|Courgette|Cousine|Coustard|Covered+By+Your+Grace|Crafty+Girls|Creepster|Crete+Round|Crimson+Pro|Crimson+Text|Croissant+One|Crushed|Cuprum|Cute+Font|Cutive|Cutive+Mono|DM+Sans|DM+Serif+Display|DM+Serif+Text|Damion|Dancing+Script|Dangrek|Darker+Grotesque|David+Libre|Dawning+of+a+New+Day|Days+One|Dekko|Delius|Delius+Swash+Caps|Delius+Unicase|Della+Respira|Denk+One|Devonshire|Dhurjati|Didact+Gothic|Diplomata|Diplomata+SC|Do+Hyeon|Dokdo|Domine|Donegal+One|Doppio+One|Dorsa|Dosis|Dr+Sugiyama|Duru+Sans|Dynalight|EB+Garamond|Eagle+Lake|East+Sea+Dokdo|Eater|Economica|Eczar|El+Messiri|Electrolize|Elsie|Elsie+Swash+Caps|Emblema+One|Emilys+Candy|Encode+Sans|Encode+Sans+Condensed|Encode+Sans+Expanded|Encode+Sans+Semi+Condensed|Encode+Sans+Semi+Expanded|Engagement|Englebert|Enriqueta|Erica+One|Esteban|Euphoria+Script|Ewert|Exo|Exo+2|Expletus+Sans|Fahkwang|Fanwood+Text|Farro|Farsan|Fascinate|Fascinate+Inline|Faster+One|Fasthand|Fauna+One|Faustina|Federant|Federo|Felipa|Fenix|Finger+Paint|Fira+Code|Fira+Mono|Fira+Sans|Fira+Sans+Condensed|Fira+Sans+Extra+Condensed|Fjalla+One|Fjord+One|Flamenco|Flavors|Fondamento|Fontdiner+Swanky|Forum|Francois+One|Frank+Ruhl+Libre|Freckle+Face|Fredericka+the+Great|Fredoka+One|Freehand|Fresca|Frijole|Fruktur|Fugaz+One|GFS+Didot|GFS+Neohellenic|Gabriela|Gaegu|Gafata|Galada|Galdeano|Galindo|Gamja+Flower|Gayathri|Gentium+Basic|Gentium+Book+Basic|Geo|Geostar|Geostar+Fill|Germania+One|Gidugu|Gilda+Display|Give+You+Glory|Glass+Antiqua|Glegoo|Gloria+Hallelujah|Goblin+One|Gochi+Hand|Gorditas|Gothic+A1|Goudy+Bookletter+1911|Graduate|Grand+Hotel|Gravitas+One|Great+Vibes|Grenze|Griffy|Gruppo|Gudea|Gugi|Gurajada|Habibi|Halant|Hammersmith+One|Hanalei|Hanalei+Fill|Handlee|Hanuman|Happy+Monkey|Harmattan|Headland+One|Heebo|Henny+Penny|Hepta+Slab|Herr+Von+Muellerhoff|Hi+Melody|Hind|Hind+Guntur|Hind+Madurai|Hind+Siliguri|Hind+Vadodara|Holtwood+One+SC|Homemade+Apple|Homenaje|IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Sans+Condensed|IBM+Plex+Serif|IM+Fell+DW+Pica|IM+Fell+DW+Pica+SC|IM+Fell+Double+Pica|IM+Fell+Double+Pica+SC|IM+Fell+English|IM+Fell+English+SC|IM+Fell+French+Canon|IM+Fell+French+Canon+SC|IM+Fell+Great+Primer|IM+Fell+Great+Primer+SC|Iceberg|Iceland|Imprima|Inconsolata|Inder|Indie+Flower|Inika|Inknut+Antiqua|Irish+Grover|Istok+Web|Italiana|Italianno|Itim|Jacques+Francois|Jacques+Francois+Shadow|Jaldi|Jim+Nightshade|Jockey+One|Jolly+Lodger|Jomhuria|Josefin+Sans|Josefin+Slab|Joti+One|Jua|Judson|Julee|Julius+Sans+One|Junge|Jura|Just+Another+Hand|Just+Me+Again+Down+Here|K2D|Kadwa|Kalam|Kameron|Kanit|Kantumruy|Karla|Karma|Katibeh|Kaushan+Script|Kavivanar|Kavoon|Kdam+Thmor|Keania+One|Kelly+Slab|Kenia|Khand|Khmer|Khula|Kirang+Haerang|Kite+One|Knewave|KoHo|Kodchasan|Kosugi|Kosugi+Maru|Kotta+One|Koulen|Kranky|Kreon|Kristi|Krona+One|Krub|Kumar+One|Kumar+One+Outline|Kurale|La+Belle+Aurore|Lacquer|Laila|Lakki+Reddy|Lalezar|Lancelot|Lateef|Lato|League+Script|Leckerli+One|Ledger|Lekton|Lemon|Lemonada|Lexend+Deca|Lexend+Exa|Lexend+Giga|Lexend+Mega|Lexend+Peta|Lexend+Tera|Lexend+Zetta|Libre+Barcode+128|Libre+Barcode+128+Text|Libre+Barcode+39|Libre+Barcode+39+Extended|Libre+Barcode+39+Extended+Text|Libre+Barcode+39+Text|Libre+Baskerville|Libre+Caslon+Display|Libre+Caslon+Text|Libre+Franklin|Life+Savers|Lilita+One|Lily+Script+One|Limelight|Linden+Hill|Literata|Liu+Jian+Mao+Cao|Livvic|Lobster|Lobster+Two|Londrina+Outline|Londrina+Shadow|Londrina+Sketch|Londrina+Solid|Long+Cang|Lora|Love+Ya+Like+A+Sister|Loved+by+the+King|Lovers+Quarrel|Luckiest+Guy|Lusitana|Lustria|M+PLUS+1p|M+PLUS+Rounded+1c|Ma+Shan+Zheng|Macondo|Macondo+Swash+Caps|Mada|Magra|Maiden+Orange|Maitree|Major+Mono+Display|Mako|Mali|Mallanna|Mandali|Manjari|Mansalva|Manuale|Marcellus|Marcellus+SC|Marck+Script|Margarine|Markazi+Text|Marko+One|Marmelad|Martel|Martel+Sans|Marvel|Mate|Mate+SC|Maven+Pro|McLaren|Meddon|MedievalSharp|Medula+One|Meera+Inimai|Megrim|Meie+Script|Merienda|Merienda+One|Merriweather|Merriweather+Sans|Metal|Metal+Mania|Metamorphous|Metrophobic|Michroma|Milonga|Miltonian|Miltonian+Tattoo|Mina|Miniver|Miriam+Libre|Mirza|Miss+Fajardose|Mitr|Modak|Modern+Antiqua|Mogra|Molengo|Molle|Monda|Monofett|Monoton|Monsieur+La+Doulaise|Montaga|Montez|Montserrat|Montserrat+Alternates|Montserrat+Subrayada|Moul|Moulpali|Mountains+of+Christmas|Mouse+Memoirs|Mr+Bedfort|Mr+Dafoe|Mr+De+Haviland|Mrs+Saint+Delafield|Mrs+Sheppards|Mukta|Mukta+Mahee|Mukta+Malar|Mukta+Vaani|Muli|Mystery+Quest|NTR|Nanum+Brush+Script|Nanum+Gothic|Nanum+Gothic+Coding|Nanum+Myeongjo|Nanum+Pen+Script|Neucha|Neuton|New+Rocker|News+Cycle|Niconne|Niramit|Nixie+One|Nobile|Nokora|Norican|Nosifer|Notable|Nothing+You+Could+Do|Noticia+Text|Noto+Sans|Noto+Sans+HK|Noto+Sans+JP|Noto+Sans+KR|Noto+Sans+SC|Noto+Sans+TC|Noto+Serif|Noto+Serif+JP|Noto+Serif+KR|Noto+Serif+SC|Noto+Serif+TC|Nova+Cut|Nova+Flat|Nova+Mono|Nova+Oval|Nova+Round|Nova+Script|Nova+Slim|Nova+Square|Numans|Nunito|Nunito+Sans|Odor+Mean+Chey|Offside|Old+Standard+TT|Oldenburg|Oleo+Script|Oleo+Script+Swash+Caps|Open+Sans|Open+Sans+Condensed|Oranienbaum|Orbitron|Oregano|Orienta|Original+Surfer|Oswald|Over+the+Rainbow|Overlock|Overlock+SC|Overpass|Overpass+Mono|Ovo|Oxygen|Oxygen+Mono|PT+Mono|PT+Sans|PT+Sans+Caption|PT+Sans+Narrow|PT+Serif|PT+Serif+Caption|Pacifico|Padauk|Palanquin|Palanquin+Dark|Pangolin|Paprika|Parisienne|Passero+One|Passion+One|Pathway+Gothic+One|Patrick+Hand|Patrick+Hand+SC|Pattaya|Patua+One|Pavanam|Paytone+One|Peddana|Peralta|Permanent+Marker|Petit+Formal+Script|Petrona|Philosopher|Piedra|Pinyon+Script|Pirata+One|Plaster|Play|Playball|Playfair+Display|Playfair+Display+SC|Podkova|Poiret+One|Poller+One|Poly|Pompiere|Pontano+Sans|Poor+Story|Poppins|Port+Lligat+Sans|Port+Lligat+Slab|Pragati+Narrow|Prata|Preahvihear|Press+Start+2P|Pridi|Princess+Sofia|Prociono|Prompt|Prosto+One|Proza+Libre|Puritan|Purple+Purse|Quando|Quantico|Quattrocento|Quattrocento+Sans|Questrial|Quicksand|Quintessential|Qwigley|Racing+Sans+One|Radley|Rajdhani|Rakkas|Raleway|Raleway+Dots|Ramabhadra|Ramaraja|Rambla|Rammetto+One|Ranchers|Rancho|Ranga|Rasa|Rationale|Ravi+Prakash|Red+Hat+Display|Red+Hat+Text|Redressed|Reem+Kufi|Reenie+Beanie|Revalia|Rhodium+Libre|Ribeye|Ribeye+Marrow|Righteous|Risque|Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Rochester|Rock+Salt|Rokkitt|Romanesco|Ropa+Sans|Rosario|Rosarivo|Rouge+Script|Rozha+One|Rubik|Rubik+Mono+One|Ruda|Rufina|Ruge+Boogie|Ruluko|Rum+Raisin|Ruslan+Display|Russo+One|Ruthie|Rye|Sacramento|Sahitya|Sail|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Saira+Stencil+One|Salsa|Sanchez|Sancreek|Sansita|Sarabun|Sarala|Sarina|Sarpanch|Satisfy|Sawarabi+Gothic|Sawarabi+Mincho|Scada|Scheherazade|Schoolbell|Scope+One|Seaweed+Script|Secular+One|Sedgwick+Ave|Sedgwick+Ave+Display|Sevillana|Seymour+One|Shadows+Into+Light|Shadows+Into+Light+Two|Shanti|Share|Share+Tech|Share+Tech+Mono|Shojumaru|Short+Stack|Shrikhand|Siemreap|Sigmar+One|Signika|Signika+Negative|Simonetta|Single+Day|Sintony|Sirin+Stencil|Six+Caps|Skranji|Slabo+13px|Slabo+27px|Slackey|Smokum|Smythe|Sniglet|Snippet|Snowburst+One|Sofadi+One|Sofia|Song+Myung|Sonsie+One|Sorts+Mill+Goudy|Source+Code+Pro|Source+Sans+Pro|Source+Serif+Pro|Space+Mono|Special+Elite|Spectral|Spectral+SC|Spicy+Rice|Spinnaker|Spirax|Squada+One|Sree+Krushnadevaraya|Sriracha|Srisakdi|Staatliches|Stalemate|Stalinist+One|Stardos+Stencil|Stint+Ultra+Condensed|Stint+Ultra+Expanded|Stoke|Strait|Stylish|Sue+Ellen+Francisco|Suez+One|Sumana|Sunflower|Sunshiney|Supermercado+One|Sura|Suranna|Suravaram|Suwannaphum|Swanky+and+Moo+Moo|Syncopate|Tajawal|Tangerine|Taprom|Tauri|Taviraj|Teko|Telex|Tenali+Ramakrishna|Tenor+Sans|Text+Me+One|Thasadith|The+Girl+Next+Door|Tienne|Tillana|Timmana|Tinos|Titan+One|Titillium+Web|Trade+Winds|Trirong|Trocchi|Trochut|Trykker|Tulpen+One|Turret+Road|Ubuntu|Ubuntu+Condensed|Ubuntu+Mono|Ultra|Uncial+Antiqua|Underdog|Unica+One|UnifrakturCook|UnifrakturMaguntia|Unkempt|Unlock|Unna|VT323|Vampiro+One|Varela|Varela+Round|Vast+Shadow|Vesper+Libre|Vibes|Vibur|Vidaloka|Viga|Voces|Volkhov|Vollkorn|Vollkorn+SC|Voltaire|Waiting+for+the+Sunrise|Wallpoet|Walter+Turncoat|Warnes|Wellfleet|Wendy+One|Wire+One|Work+Sans|Yanone+Kaffeesatz|Yantramanav|Yatra+One|Yellowtail|Yeon+Sung|Yeseva+One|Yesteryear|Yrsa|ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei|Zeyada|Zhi+Mang+Xing|Zilla+Slab|Zilla+Slab+Highlight&display=swap";

  50. var customFontsLinkTag = document.createElement("style");
  51. (customFontsLinkTag.innerHTML = `@import url(${fontUrls})`),
  52.   document.getElementsByTagName("head")[0].appendChild(customFontsLinkTag),
  53.   $(window).on("load", function () {
  54.     let a = $(".loree-iframe-content-column").find(
  55.       "h1, h2, h3, h4, h5, h6, p, span, li, a"
  56.     );
  57.     Array.from(a).forEach((a) => {
  58.       Object.keys(misSpelledFonts).forEach((e, n) => {
  59.         a.style.fontFamily.includes(e) &&
  60.           (a.style.fontFamily = Object.values(misSpelledFonts)[n]);
  61.       });
  62.     });
  63.   });
  64. var acc = document.getElementsByClassName("accordion");
  65. for (i = 0; i < acc.length; i++)
  66.   acc[i].addEventListener("click", function () {
  67.     this.classList.toggle("active");
  68.     var a = this.nextElementSibling;
  69.     "block" === a.style.display
  70.       ? (a.style.display = "none")
  71.       : (a.style.display = "block");
  72.   });
  73. function h5pIframeHeight() {
  74.   var a = document.createElement("script");
  75.   a.setAttribute("charset", "UTF-8"),
  76.     a.setAttribute(
  77.       "src",
  78.       "https://loree-h5p.crystaldelta.net/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js"
  79.     ),
  80.     document.head.appendChild(a);
  81. }
  82. h5pIframeHeight(), window.addEventListener("message", receiveMessage, !1);
 


THANK YOU!!

    • Related Articles

    • Release notes for Loree - Canvas A2201.10

      Loree Uploading Multiple Images at the same time To Improve the performance of saving Multiple images in LMS we have updated the Editor now when we save multiple Images in the LMS all the images will be uploaded at the same time. This will reduce the ...
    • Release notes for Loree - Canvas A2204.3

      Loree Restrict Edit New-Quizzes inside Loree editor As a Loree user, When we create a Quiz using the New Quizzes option in the LMS and edit the same quiz in the Loree editor, The edited content is not reflected on the LMS. This is because Canvas ...
    • Release notes for Loree - Canvas A2203.7

      Loree No Add Button - After adding a Custom Row As a Loree user, After adding a Custom Row, the “Add” and “Cancel” button doesn’t appear. So, user is unable to proceed further. This occurs only in the random scenario. This issue is resolved now. We ...
    • How to use modules in Loree?

      Simplified Editing and Module Management with Loree in Canvas Create Modules To create new modules for your Canvas courses in Loree, you don't need to go back to Canvas itself. Simply open Loree from the left hand navigation in the Canvas Course ...
    • Release notes for Loree A2201.1

      Loree Fetching all Loree roles When we install Loree on clients instances we create designer and teacher roles as default under Loree role. But due to the pagination issue in the dynamo DB/ query, it is fetching either teacher's role or designer's ...