cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
nschwiet
Community Participant

HTML Button toggle content

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?

Tags (3)
38 Replies
dhulsey
Community Champion

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
Community Participant

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.

brueckert
Community Champion

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:

<iframe src="/courses/[YOUR COURSE ID]/files/[YOUR FILE ID]/download" width="100%" height="[WHATEVER WORKS]" data-api-endpoint="https://[YOUR CANVAS DOMAIN]/api/v1/courses/[COURSE ID]/files/[FILE ID]" data-api-returntype="File"></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
Community Participant

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
Community Participant

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
Community Participant

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>

jperkins
Instructure
Instructure

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>

<div id="group_2" class="content-box" style="display: none;">

<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.

robert_wakelyn
Community Participant

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

awilliams
Community Champion

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.