Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Member

Discussion with embedded accordions

I'm working in a school with many ELS students. I have to modify the learning content and my instructions to reach up to those students for whom English is a second language to help them be successful and happy learners.

Sentence frames and word banks help many students to complete the assignments successfully during my in-class instructions. However, how would I do it in Canvas without putting a lot of text and overloading the discussion board?

Lately, I was working on creating a Discussion with embedded accordions. I've decided to use accordions to provide students the sentence frames to help them to explain their thinking and for positive feedback on peers' posts, or asking clarifying questions. Also, I wanted to remind students about proper online behavior and etiquette rules. 


Let me know If you are interested in HTML code (to give ti a try), I'll send it to you.


I'm looking for your feedback and ideas on how to make it better for readability to help my ESL and Special Ed students.

Thank you.

Labels (2)
10 Replies
Community Member

What a fabulous Idea. I would love the html……

I have an ESL student who just messages me and says What I do now? Poor thing, she must be in a world of confusion.

Thanks in advance,


Thank you for willing to try it!

There is one more tip to help your ESL student to work on Canvas. The student needs to go to his/her Gmail account and change the Language setting ( add the language he/she speaks). Then the student can log in into Canvas using the Chrome browser. This way, the Canvas page will appear in the student's native language.

There is an HTML code!


1.Create a Discussion on Canvas

2.Copy and paste the code

3.Make SURE to relink the buttons to your pages or discussions:

  • Lesson # (on the top)
  • Learn More (on the bottom)
  • Learn How (on the bottom)
  • Ask your teacher (on the bottom)

Otherwise, your students will end up in my classroom discussions, or it will appear as a broken link.

<p><strong><a class="btn btn-primary" title="Lesson 7 What Do Illustrators Do?" href="" data-api-endpoint="" data-api-returntype="Page"> LESSON  # </a></strong></p>
<p style="text-align: center;"> </p>
<pre><span style="font-size: 8pt;"><strong>LEARNING OBJECTIVES<br /><br /><span></span>SL.3.1d</strong> I can explain own ideas and understanding in light of the discussion.</span><br /><br /><span style="font-size: 8pt;"><strong><span></span>SL.3.1</strong>c I can ask questions to check understanding, stay on topic, and link comments to others' remarks.</span><br /><br /><span style="font-size: 8pt;"><strong><span></span>SL.3.1b</strong> I can follow rules for discussion.</span><br /><br /><span style="font-size: 8pt;"><strong><span></span>SL.3.6</strong> I can speak in complete sentences to provide details or clarification.<br /><br /><br /></span></pre>
<p style="text-align: left;"> </p>
<p> </p>
<div style="max-height: 55px; position: relative; width: 93%; top: -80px; left: 0px; padding: 20px; background: lightyellow; border: 2px solid #ffff1a;">
<table style="width: 106.186%; border-collapse: collapse; border-style: hidden; height: 50px;" border="1">
<td style="width: 19.3498%; text-align: left;"><img src="" alt="" width="52" height="49" data-decorative="true" data-api-endpoint="" data-api-returntype="File" /></td>
<td style="width: 80.6502%; border-style: hidden;"><span style="color: #3366ff; font-size: 18pt;"><strong>Type your topic here</strong></span></td>
<p> </p>
<div style="max-width: 98%;">
<div style="color: black; background: lavender; border: 2px solid #ffff1a; width: 96%; padding: 15px; min-height: 220px; overflow-x: hidden;">
<h2 class="p1"><strong><span style="font-size: 14pt;">In this discussion you will:</span></strong></h2>
<li>Share opinion on the discussion board using the sentence frames below to explain your thinking</li>
<li><span>Comment on the reasons of one other student(s) using sentence starters below</span></li>
<li><span>Follow discussion rules and etiquette. </span></li>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><iframe src="" width="1090" height="138" allowfullscreen="allowfullscreen"></iframe></p>
<p style="text-align: left;"><iframe src="" width="1090" height="81" allowfullscreen="allowfullscreen"></iframe></p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><strong><a class="btn btn-primary" title="Lesson 6 Bats Loves the Night" href="" data-api-endpoint="" data-api-returntype="Page"> LEARN  MORE</a></strong></p>
<p style="text-align: left;"><strong><a class="btn btn-primary" title="LEARN HOW ..." href="" data-api-endpoint="" data-api-returntype="Discussion"> LEARN HOW</a></strong></p>
<p style="text-align: left;"><strong><a class="btn btn-primary" title="Ask your teacher" href="" data-api-endpoint="" data-api-returntype="Discussion">ASK YOUR TEACHER</a></strong></p>
<hr />
<p> </p>

You are wonderful. I can’t wait to try that.

I will definitely break the links before I publish.

I’ll let you know how I get on. (I guarantee you it won’t be today though.) Completely under the pump to get content finalised for tomorrow!

Good Luck.

Community Champion

These are ace. How did you get the bullet point icons to work - is that magic?

Immersive reader in Pages proving really useful for supporting our EAL students. Screencasting and captioning (via Streams) too.

No, there no magic. I played with HTML for a while to figure this out.

Thank you for reminding me of screencasting and captions. These are powerful tools!

How does immersive reader work on Pages? I've never seen that.

What do you do to turn it on?

It should be ON by default:

Teacher View of Page


Student View of Page


You will find it in:

Admin > Settings > Feature Otions:


If it is not on, get in switched on ASAP!!

It is an amazing feature

I've never seen it in our district instance. I wonder If the district admin blocked it for some reason.

We do not use Microsoft on our computers. We have Chromebooks and Macs.

Community Champion

But will still work regardless of the device (I believe!)