Community

I'm looking for someone that I can hire to walk me through the basics of building a basic LTI. I've built a bunch of ideas for my school's own installation of Canvas.  However, I would like to get to the point where I can share these ideas with the community and they can use them in their own installations. Here's a few of the features I have built: Highlight Text on Hover  Canvas Scrolling Side Menu  Highlight Text on Hover  Maybe the first "Toy" LTI app that we could create together is getting this interactive triple beam balance that I created for my physics teacher to be an LTI that others could easily plop into their own lessons with a click of a button. Triple Beam Balance  I work mostly with a Javascript/node/express stack if that matters.  If you feel like this is something that you could help with, please feel free to message me. Best Regards, Jeremy Bell ... View more

Issue: In longer lessons, students can become disorientated on how the current information in their viewport relates to the entire lesson. Custom Fix: Create a sidebar menu that scrolls with the students viewport.  It dynamically captures that main sections of the lesson and highlights the section that the student is currently viewing. Code: Code is a little long, so I have it has a gist on GitHub. Canvas Scrolling Side Menu · GitHub  ... View more

Issue: Some students may have reading issues that involve losing one's place when reading a paragraph of text.   Custom Solution: Make text highlight on mouse hover.  I think some people call this "hot text"?  I made the highlighting feature able to be turned off and on with the click of a button in the bottom right hand corner of the screen. The Code: $( '.ht-btn' ).ready( function (){      const pElements = document.querySelectorAll( '.ems-container-fluid p, .ems-container p' );       const liElements = document.querySelectorAll( '.ems-container-fluid li, .ems-container li' );       const allElements = [ ... pElements, ... liElements];       const htBtn = document.querySelector( '.ht-btn' );       let htSwitch = false ;       htBtn.addEventListener( 'click' , activateHt);       function activateHt(){             htSwitch = ! htSwitch;             if (htSwitch){             allElements.forEach((el) => {                   const text = el.innerHTML;                   //A regex to try and select each sentence in the paragraph and wrap it in a span element. The span element allows a listener to be added to the sentence inside the paragraph.                   const newText = text.replace( /([\w\d\s\,\(\)\{\}\:\<\=\"\-\>\/\@\#\%\^\&\*\_\+\\\|\'\[\]\;]) + ([\!\?\.][ ^ \s] + ) ? ([\w\d\s\,\(\)\{\}\:\<\=\"\-                         \>\/\@\#\%\^\&\*\_\+\\\|\'\[\]\;]) * / g , `<span class="ht-sentence">$&</span>` );                   //Replace the old paragraph with the new paragraph with the span classes                   el.innerHTML = newText;             })             //Grab all those spans with the class .ht-sentence, which will allow mouseover listener added             const highlights = document.querySelectorAll( '.ht-sentence' );             highlights.forEach((el) => {                   el.addEventListener( 'mouseover' ,addHighlight);                   el.addEventListener( 'mouseout' ,removeHighlight);             })             function addHighlight(){                   if (htSwitch){                         this .classList.add( 'ht-highlight' );                   }             }             function removeHighlight(){                   this .classList.remove( 'ht-highlight' );             }       } } }) //end highlight sentence on hover hot text ... View more

The Need: Current module tracker has generic "Complete all items".  This could be a handy completion tracker for students and teachers.  The tracker keeps track of how many items in each module that the student has successfully completed. My Custom Solution: I "hacked" together a custom solution that looks for the green "completion check mark icon".  It counts how many of those green checks there are in a module and uses that number for a completion tracker in the header of the module. This tracker automatically updates as students complete items in the module. Note: For this to work, the items in your module must have some type of "completion criteria set".  For example, if it's a quiz, it needs a passing grade assigned to it.  If it's a content page item, you must have the "view" criteria set on it. Installation: You need access to your custom Javascript file. Paste the code below into that file. Note: I have my instance of Canvas running on jquery 3.x+.  Canvas by default runs on jquery 1.x. I'm not 100% sure at the moment if this would work on a default instance of Canvas.  Can someone verify? The code: Module Completion Tracker · GitHub  ... View more