Is it possible to create javascript enabled page design within Canvas?

I'd love to be able to use javascript to create collapsible content areas and other interactions within Canvas pages. Unfortunately, it seems that Canvas has limited the code types that can be used directly within a course page. Is it possible to create collapsible content areas and other interactions using javascript or do I still need to build my content outside of Canvas and link to it?

If Instructure would allow TinyMCE to use and not strip the <details> and <summary> tags you could use them to do simple show/hides too. Though they would only work with modern browsers supporting HTML5

James Kocher, have you seen David Lyons post in Media and HTML Examples: A Library/Lab? I am coming to realize the style guide is not the best recommendation for page design. When I first found out about the style guide I also assumed this was a great instructional design tool and started thinking about ways to redesign some stuff. I quickly realized there were various problems with this approach such as interacting with the content in the RCE and viewing the content on mobile. Once I heard David explain that actual purpose of the style guide it all made more sense and I reversed my approach on design back to using very basic RCE tools so I could be confident future users of the content would not have issues and the design would transition to mobile users correctly.

I'll include a direct quote of his post here for reference.

" love that people are thinking about design and appearance of their content but I want to point out that the Canvas Style Guide is actually for the Canvas interface itself, not content. I'm happy to go into technical details if anyone is interested but the short version is: most of the items in the Canvas Style Guide will not work in the rich-content editor, and the parts that do work aren't guaranteed to continue working because that's not what the Style Guide is actually for." -- David Lyons

Yes, that's right James. My colleague Kenneth Larsen utilized the Style Guide to create a lot of the functionality and tools in kennethware. He can speak to the point in more detail, but there are also other items that were added for additional functionality and usefulness.

I did use a lot of the Style Guide for the original kennethware code, but I have been gradually phasing out parts of it due to it not being available in the mobile app. I still use some of the styles and elements like accordions, buttons, icons, etc, I just try to ensure that they degrade nicely for the mobile app. For example, my code creates an accordion panel as simply a heading followed by content and then the code rearranges that and adds the necessary pieces for it to become an accordion if they are using a web browser. That way, all of the content is organized and viewable in the mobile app, it just isn't as fun .

Default Accordion, the first thing that pops up on the style guide. TinyMCE accepts the html but it strips the javascript needed to run it - $("div#styleguide_demo_accordion1").accordion({header:"h3"})

Canvas only allows Javascript to be hosted by account admins. An institution can host it at an account level, but it will load on every page. My understanding is that for security reasons teachers and students are not allowed to host javascript. You can self host an HTML file with all reference files (including Javascript and CSS) in your course files if you want to have cool content without using Canvas Pages.

We have tried using the style guide suggestions and adding the JQuery javascript part in our Global JavaScript URL for the appropriate sub-account (in our test environment at the moment). But we still have problems. I'll use a JQuery accordion example to try to explain. First we add this HTML code to a wiki page to set up the HTML part of collapsing/expanding accordion sections (from Canvas LMS )

And, in the sub account Global JavaScript URL, we include something like

$("div#styleguide_demo_accordion1").accordion({header: "h3"});

This asks for the div with the id = "styleguide_demo_accordion1" and has JQuery apply whatever magic is necessary for the div to exhibit the accordion properties.

However, it does not work as simply as expected. The $("div#styleguide_demo_accordion1") function does not find the "styleguide_demo_accordion1" div. I think this is because the div hasn't actually been rendered into HTML at the time when the sub-account's Global JavaScript URL is injected. If we look at the source code of the wiki page with the accordion content, we don't see the HTML as above. Instead we see some javascript data, part of which looks like this:

My "blah..blah..blah" entries indicate lots of omitted stuff. But note that this data actually is the accordion HTML code represented as Javascript data. This data presumably is be being rendered into HTML after the page has loaded. This would explain why the $("div#styleguide_demo_accordion1") command does not find the styleguide_demo_accordion1 div. It presumably has not been rendered in HTML yet at the time when $("div#styleguide_demo_accordion1") is called.

If I modify the Javascript a little to include a slight timing delay (100 milliseconds), the script works as intended.

setTimeout(function() {

$("div#styleguide_demo_accordion1").accordion({header: "h3"});

}, 100);

This doesn't seem like a reliable way to do things, however. Is there some better way to tell when the wiki data has been rendered into HTML?

Thanks for the idea, Jeremy. Unfortunately it did not seem to help. Might it be that the code to render the wiki html is called when the document is "ready"? If that were so, then $( document ).ready() wouldn't help to tell us when the wiki html has finished being added to the document.

Some success here, but only with Firefox on my Mac. It doesn't help on Chrome or Safari. These results might be consistent with my timing theory and slight javascript speed differences between different browsers. I'll try some other things and report back. Thanks again.

I tried putting the JQuery code in the Global Javascript URL at the main account level in our development system, and unfortunately I got the same varied results. Maybe I am missing something but I'm not sure why having the Javascript set at the main account level would change much. Looking at the source code of a page, all the Global Javascript URLs appear to be added in the same loop with the root account's going first.

The timing issue is actually a result of how Canvas loads their user content. The user content does not load until after the document ready so the JavaScript code fires before the DOM elements for the accordion exist.

Also, I re-read the original questions and it sounds like part of the question is how to create collapsable content in Canvas. This can be done without needing any Javascript or additional code. Just follow the instructions below...

Use this code from the Styleguide to create "Collapsable Content".

<span

class="element_toggler"

aria-controls="group_1"

aria-expanded="true"

aria-label="Toggler toggle list visibility"

role="button"

>

<iclass="icon-mini-arrow-down"></i> Toggler

</span>

<ulid="group_1">

<li>item 1</li>

<li>item 2</li>

</ul>

Add the following code inside of the the <ulid="group_1"> as follows if you want the items to be collapsed as default.

Thanks, Jeremy, for that simpler technique. I find that it works, although when I hide content using the 'style="display: none;"' suggestion, I seem to have to click on "Toggler" twice to make the initially hidden content appear.

Also, as a side note, the 'class="content-box"' setting seems to cause the ul styling to change (no bullet points, no indentation). Using 'class="content-box"' doesn't seem necessary, however.

Good to know Brian. I generally use a <div> instead of <ul> so I was unaware of the fact that class="content-box" strips that out. But with the class="content-box" I did get around the having to click twice problem. Also I generally use an <a> tag instead of an <i> tag so I can use one of the icons from the styleguide.