Community Help

nschwiet · ‎11-03-2015

I am trying to make some interactive content in a page. Ideally, there would be a button that upon being pressed would yield some further information sort of analogous to the javascript alert method, except without the popup box and javascript. Instead, the content would appear within the content page.

The closest I have come to this functionality is by using the element toggler found on the styleguide. However this solution has two issues: first, the toggle is by default on, eliminating the need for interaction; and second, the text for the toggle is not clearly clickable (it does not have the appearance of a button).

Does anyone have any suggestions or examples of this in a Canvas content page?

dhulsey · ‎11-03-2015

Hi, Nick. For interactive lessons, you might wish to use a Canvas quiz or survey instead of pages. Here is a tutorial: Designing Interactive Canvas Lessons - YouTube

You might also look into the free PowerPoint add that offers free LTI integration with Canvas: Office Mix.

A great paid option for interactive lessons is SoftChalk CLOUD.

I hope that helps!

nschwiet · ‎11-04-2015

Hi Dallas,

Thanks for the response; these tools look excellent. I had considered using the Canvas Quiz for this functionality, however I think that this serves a different purpose than what I'm going for here. I think of Quizzes as more of a review/test tool verses a content delivery tool. For example, if I want to propose a scenario to a student and would like them to toggle through the various options, each with some learning value, I would like the student to go through each option interactively. This way, the student is encouraged to read the prompt and then select an option for the prompt.

Essentially, the content is dynamic - the student is encouraged to click on a button in the content page to show further content.

rebecca3 · ‎01-15-2021

I put several of these on a page for a course FAQ for students. When I click on one, they all open. Is there a way to have each one open on its own when clicked?

ann_strickland · ‎09-09-2021

@rebecca3

I struggled with this the first time I tried it, as well. However, the toggle buttons and pop-ups are similar in how each one has a unique "ID." All you have to do is modify your code to show a unique ID for each one:

Example:

Look in your code before the button text and you should see this: aria-controls="unique label goes here"

Then you will see this after the button text: id="unique label goes here"

Make sure each button has its own unique label. Once I did that, voilà! It worked beautifully.

robert_wakelyn · ‎11-10-2015

Office mix is a great tool that has analytic features too.

brueckert · ‎11-04-2015

Hi @nschwiet

Content pages are limited to certain html tags and attributes. This is the "white list" I typically reference:

https://s3.amazonaws.com/tr-learncanvas/docs/Canvas_HTML_Whitelist.pdf

That being said, it's very easy to embed an html file into a content page using an iframe tag. You'll need to host the html document in the course files, and use the following code for your iframe:

This has worked well for me in the past as you can include all the CSS and Javascript you want in the <head> tag. I recently uploaded to Commons a module for 8-10th graders called STEM 1 Arduino Introduction if you want to see this in action. I included CSS that enables popup boxes that appear when you mouse over pieces of an Arduino sketch, helping to explain the code.

Hope this helps!

nschwiet · ‎11-04-2015

Hi Brian,

I forgot about the HTML whitelist. I was trying to port some HTML pages into Canvas Pages, but I think I will either have to lose some functionality or keep the HTML pages it seems.

Thanks for the help!

60980756 · ‎11-05-2015

Nick,

I think this html might do what you want. In addition to the toggler class, I add a button class (and take away the toggler triangle icon.) I also added the "aria-expanded="false"" to the toggler which tells the toggler that its default state is closed, and "display:none" to (initially) hide the content.

I used this combo for some lengthy exam instructions on a quiz. The exam was 50 questions long, so I did one per page. I wanted the exam instructions to be available on every page, but didn't want students to need to scroll past them every time they clicked to a new page. So I placed them in the closed toggler, like this.

<h4><span class="element_toggler btn btn-primary" role="button" aria-controls="instructions" 
    aria-label="Toggler toggle list visibility" aria-expanded="false"> Click here for additional information.</span></h4>
  <ul id="instructions" style="list-style: none; display: none;">
    <li>
      <h4><strong>Here is The Information You Want</strong></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis posuere ipsum, eget vehicula neque. Vivamus egestas, odio vitae convallis vulputate, nunc risus condimentum erat, quis tempor nibh felis sit amet ante. Maecenas varius sagittis purus ut tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor nec dui ac vehicula. Praesent tristique tortor in fermentum lacinia. Maecenas sapien lectus, dictum at nulla interdum, ultricies scelerisque dolor. Integer a dui id enim ultricies blandit id eu diam. Curabitur rutrum arcu mauris, viverra efficitur diam sagittis placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <p>Morbi augue neque, tempus at porttitor vitae, faucibus non nunc. Maecenas dignissim nec lacus vel dapibus. Donec urna ante, rhoncus sit amet ex id, congue dignissim felis. Suspendisse sit amet hendrerit est, sed ullamcorper orci. Praesent eu risus enim. Nulla facilisi. Sed facilisis odio vitae suscipit efficitur.</p>
    </li>
  </ul>

60980756 · ‎11-05-2015

Caveat: The method I use above does not work on the Canvas Mobile app, because the app does not load CSS. On the app, the hidden text will stay hidden. If you want mobile users to see it, you'll need to create duplicate text that is hidden on the desktop browser, but which loads on mobile. To do this, reproduce the text as you'd like it to display on mobile, and then wrap that text in: <div class="hidden-desktop">[Your content.]</div>

awilliams · ‎11-10-2015

Hey 60980756, Is there something like the <div class="hidden-desktop"> that you can do to hide this sort of "browser only" code from view on the mobile apps? I'm thinking this could be used to create a page with content that works for both environments.

60980756 · ‎11-10-2015

Theoretically yes, but in actuality, no. The classes hidden-desktop, hidden-tablet, hidden-phone, visible-desktop, visible-tablet, and visible-phone are all defined in the Canvas CSS. Here's a table of what those classes do. Note that the CSS doesn't actually know what kind of device you're really using -- the settings are based on the width in pixels of the browser window you're using.

Unfortunately, because the mobile app doesn't load that CSS (or any CSS), you can't just define an element to be "hidden-phone" to hide it on a phone, because (if you're using the app and not a mobile browser), the app won't load that CSS in order to hide the element. Instead, you have to be tricky about it: Hide it by default with "display:none", which is an actual inline style, not an invocation of Canvas CSS... then override that style on your desktop with the "visible-desktop" class, because your desktop browser does load that CSS.

60980756 · ‎11-10-2015

Incidaentally, I did actually put in a request to have the mobile app at least load the properties of the above-mentioned classes, even if the app still wouldn't load any of the other CSS. My rationale: We should at least have the easy ability to hide elements that we've designed to look pretty on the desktop, but which look ugly and confusing on mobile where the CSS doesn't work. They even put it up for voting from August-October... but it only got three votes. I guess my grassroots organizing skills need more work than my html skills. 😕

awilliams · ‎11-10-2015

Would you mind tossing in an example here of how that would work for us ameteurs?

60980756 · ‎11-10-2015

Sure! In several of my courses, I put a set of navigation buttons at the top of each page to help navigate a module. For a module with many pages, it's a big improvement over just "Next" and "Previous" or going back to the module page each time. In this example, the first button represents the current page. The button is disabled and larger than the others to distinguish it.

But the div at the beginning is what works the magic: The "display: none;" style hides the button set by default, but "visible-desktop" and "visible-tablet" override that style and show the button set on larger screens. If you plug this in to a canvas page, you can actuall reduce the width of your browser window by hand, and watch the buttons disappear when the window gets very small.

<div class="visible-desktop visible-tablet" style="text-align: center; display: none;">
 <a class="btn disabled btn-primary" style="margin:2px; display: inline-block; width: 84px; height:36px; text-align: center; line-height: 150%;word-wrap:break-word; white-space:normal;" title="Introductory Video" href="#"><i class="icon-filmstrip"></i> Intro Video</a> 
 <a class="btn btn-small btn-primary" style="margin:2px; display: inline-block; width: 84px; height:36px; text-align: center; line-height: 150%;word-wrap:break-word; white-space:normal;" title="Reading List" href="#"><i class="icon-document"></i> Reading List</a> 
 <a class="btn btn-small btn-primary" style="margin:2px; display: inline-block; width: 84px; height:36px; text-align: center; line-height: 150%;word-wrap:break-word; white-space:normal;" title="Your First Quiz" href="#"><i class="icon-quiz"></i> Short Quiz </a> 
 <a class="btn btn-small btn-primary" style="margin:2px; display: inline-block; width: 84px; height:36px; text-align: center; line-height: 150%;word-wrap:break-word; white-space:normal;" title="Module Checklist" href="#"><i class="icon-check"></i> Checklist</a> 
</div>

awilliams · ‎11-10-2015

You're awesome! Thanks!

awilliams · ‎11-10-2015

I've watered it down to a very basic example for my reference later. In case it helps anyone here it is:

<div class="visible-desktop visible-tablet" style="text-align: left; display: none;">
  Here is some fancy desktop stuff.
</div>
<div class="hidden-desktop">
  Here is some simple mobile stuff.
</div>

Shar · ‎03-25-2016

Yes awilliams,

Your very basic example is precisely what I need to show my coworkers lest they be afraid to put in screen-specific text. Wonderful, simple, and fancy all at the same time!

Cheers - Shar

eliams · ‎03-07-2016

Ditto! Thanks Ethan! Great solution. The mobile part is still an issue, but for most courses, this is a great solution.

Thanks,

Sheryl

Stef_retired · ‎11-11-2015

I love this, 60980756!

I pasted your code into a test page, and notice that in the Rich Content Editor view, I don't see a preview, so I am doing all of my editing in the HTML Editor view. With that in mind, I have a question about the part of the code where you have a # placeholder for the href=. How would you insert a relative link in there, say to a quiz, so that the link doesn't break upon course copy? In other words, I'd like to be able to use the Insert Content into the Page panel to insert the quiz link instead of pasting the direct URL to the quiz. When I tried that just by brute force (clicking on the # and using the Insert Content panel), it broke the buttons. Do you have a quick way of inserting the relative links without having to go back and clean up the HTML?

60980756 · ‎11-11-2015

stefaniesanders, yes, for whatever reason, the Rich Content Editor View doesn't load or apply CSS either, which makes it behave similarly to the mobile app. I do most of my editing either in HTML view, or in an external editor like Dreamweaver, and then paste back into Canvas. Canvas is (fortunately) fairly smart about auto-modifying URLs during rollovers. But I also know a little trick that helps, too.

You might notice that many of your individual page URLs look something like this (not a real URL):

https://canvas.harvard.edu/courses/12345/pages/introduction-to-this-course

If you have tried to link to a page like this by copying and pasting the URL, you know that your link will break if you change the name of that page. You might also notice that even if that page is in a module, you might not see the "Next" and "Previous" buttons at the bottom of the page, because you linked directly to the standalone page, not the page as a module item. However, if you're using Modules, you can harvest a link to that page if you (1) go to your Modules page (2) find the page you want to link to, and then (3) left-click on the link to that page and choose "copy link location" or whatever equivalent your browser uses. If you do that, you get something that looks like this:

https://canvas.harvard.edu/courses/12345/modules/items/105458

This is a link to that same page, as it is situated within the module. This also works for quizzes, assignments, etc.... anything that can be an item in a module. This link will not change even if you change the page title or even if you move it around within the module (though it will break if you move the page to a different module). It also helps Canvas convert the page during a rollover. If you paste that link into Canvas HTML viewer, you'll see that after you save the page, Canvas will automatically truncate the link to

"/courses/12345/modules/items/105458"

...storing it relative to your Canvas instance's domain. When you copy a course over, Canvas audits and adjusts these URLs for the new course. So when you import this page to a new course, it may be converted to something like

"/courses/54321/modules/items/20986"

... but the page it links to will be the correct page in your new course!

Two big caveats to this process:

1) This mass conversion of pages and links only works if you do a single import of everything that cross-links into the new course, all at once. If you import the linking-out page today and the linked-to page tomorrow, that link won't work anymore in the new course.

2) If you use any LTI tools or plugins, they don't necessarily roll over. In fact, I had a problem with one LTI tool linking back to the old course, and I didn't realize it until students tried to follow it and got an error message.

Hope this is helpful!

Shar · ‎03-25-2016

Thank-you, thank-you 60980756! Your example helped me in two ways:

Getting the toggler to work on desktop
Hidding the toggler menu on phone-size

Wait, another thank-you for the link to the table of CSS classes defining the screen-size. Now I'm spiffy and can put in cautionary text for mobile users that desktop will not see and vice-versa. I have also created a simplified course homepage for the mobile viewers to get there where they need to go without all the glamour of the desktop/tablet view.

So very awesome!

Cheers - Shar

awilliams · ‎11-10-2015

This worked well for me! Too bad it doesn't work in mobile, but it would make a great code-snippet document in the Instructional Designers space. Check out some examples here.

nschwiet · ‎11-10-2015

Hey Ethan,

This is exactly what I was looking for! For some reason aria-expanded="false" wasn't hiding my content by default in my HTML, but copying yours this works great. This is an elegant solution.

Thanks!

Nick

isaac_piercy · ‎12-12-2015

Ethan,

Could you tweak this somehow to have multiple toggle buttons working independently on the same page? For example, I'd like to use this to add a "Show Answer" button after every math problem in a set of 10 questions. Clicking on the Show Answer button for Question 1 should only reveal the hidden answer for Question 1. However, I tried this with the code above and the result was that clicking on any one of buttons displays all of the hidden text across the entire page. See below:

Answers hidden:

After clicking Show Answer button just for Q1:

As you can see the button revealed all answers rather than just the first question as I was hoping.

Appreciate any help!

kona · ‎12-12-2015

I'm not sure if this is exactly what you are wanting, but it might help... Practice problems that allow students to click on answers to see if they are correct and see soluti... & html code from John Byrd to make it work Re: CanvasHacks Classroom

bronwyn_tregenz · ‎02-28-2016

Wonderful. Thank you. I was looking for something similar and it works beautifully.

jperkins · ‎11-09-2015

Here is some code that I've had success with.

<p><span class="element_toggler" role="button" aria-controls="group_2" aria-label="Toggler toggle list visibility" aria-expanded="false"> <a class="icon-info"> More Instructions on Responding</a> </span></p>

<p>Hidden Content</p>

</div>

The only con about this code is it will hide the toggle content even inside the Rich Text Editor. So don't change the style="display: none;" until you are ready to not see it anymore.

anna_selway · ‎12-24-2015

Hello thank you for the code - I have implemented it on a page and it works great, the only issue I have is that as I have used the code several times on the same page, when I click on one link to reveal the hidden content - the hidden content from the other instances of the code is also displayed.

I just wondered if there was a quick fix for this.

Thanks a lot

mtuten · ‎06-01-2017

Sorry if this answer comes too late, but you have to change the value for aria-controls= and <div id= for each toggle instance.

<p><span class="element_toggler" role="button" aria-controls="group_2" aria-label="Toggler toggle list visibility" aria-expanded="false"> <a class="icon-info"> More Instructions on Responding</a> </span></p>

<p>Hidden Content</p>

</div>

<p><span class="element_toggler" role="button" aria-controls="group_3" aria-label="Toggler toggle list visibility" aria-expanded="false"> <a class="icon-info"> More Instructions on Responding</a> </span></p>

<p>Hidden Content</p>

</div>

nealc62 · ‎11-12-2015

Hi Nick,

This is this markup for interactive buttons to jump to the Start Here module in a course:

<h3 class="btn" style="text-align: center;" role="button"><strong><a title="0. Start Here (Day 1)" href="https://community.canvaslms.com/courses/11876/modules/2909" data-api-endpoint="https://erau.instructure.com/api/v1/courses/11876/modules/2909" data-api-returntype="Module">Start Here</a></strong></h3>

It looks like this:

I use the same type of interactive button for navigation links inside a content page that point to some other page, assignment, or module.

Let me know if you need to see the steps to add the link to the button.

Cheers,

Jan

awebster · ‎01-21-2016

I needed the same thing you asked for above. This code is based on @JeremyPerkins, but I was able to keep the toggle button.

Hope this helps!

<h4><span class="element_toggler btn btn-primary" role="button" aria-controls="group_2" aria-label="Toggler toggle list visibility" aria-expanded="false"> Click here for the video transcript.</span></h4>

<h4><strong>Video Transcript</strong></h4>

</div>

<h4><span class="element_toggler btn btn-primary" role="button" aria-controls="group_3" aria-label="Toggler toggle list visibility" aria-expanded="false"> Click here for the video transcript.</span></h4>

<h4><strong>Video Transcript</strong></h4>

</div>

jnassif · ‎06-01-2017

Check out my blog, I have a lot of examples of interactive HTML examples you can include in your canvas page.

https://community.canvaslms.com/groups/designers/blog/2017/05/24/canvas-html-editor-tips-and-code

tom_gibbons · ‎05-03-2019

I've started using this, and it's great, but one thing that I've noticed is that the toggler buttons aren't accessible through keyboard/tab navigation. Tabbing skips the buttons to the next actuatable thing, like a straight link. Anyone have any ideas on how to make the togglers "visible" to keyboard navigation?

One other thing that I was dinking around with, but that's outside my abilities (apparently even to isolate usable search terms for the process), is to create a button that changes text based on the expanded/hidden state of the content, like "Reveal the Answer" and "Hide the Answer" (although now I'm thinking it might be fun to do a Harry Potter-themed button set: "Revelio!" "Obscuro!").

Shar · ‎05-06-2019

Hi @tom_gibbons ‌,

Ugh! You're right! I cannot tab to my click-to-reveal buttons at all. I feel as though I was able to in the past though. Oh man oh man!

Grrr

-Shar

rosemary_saul · ‎08-04-2019

Thanks for pointing this out. It would also be interesting to find out if the content is accessible using a screen reader.

tom_gibbons · ‎10-24-2019

Because the code is using ARIA state labels and controls, I believe it should be perceivable for screenreaders. Why the tab nav doesn't work (or didn't a few months ago...haven't checked recently) is a mystery to me.

Sarebre · ‎05-04-2021

Hi all,

Thanks for the tips! Does anyone know how to change the color of the buttons?

Thanks again 🙂

ann_strickland · ‎09-09-2021

@Sarebre

The color of the buttons can be changed based on which button style you put into your code. If you scroll down the style guide you will see the different button styles. The colors are based on your Theme branding. Not sure if you can override those colors...I think it will use whatever colors are established for your account or sub-account theme.

https://canvas.instructure.com/styleguide

[ARCHIVED] HTML Button toggle content

Archived

Questions

You're signed out

[ARCHIVED] HTML Button toggle content

Archived

Questions

Community Help

View our top guides and resources: