Accordion Styles (details tag)

As in the above example, an accordion element is a type of button that when clicked shows hidden information. In these cases we are using the basic Details tag to allow us to toggle content.

Below is the main skeleton of what we have created above (not including the formatted content box) and utilizes the same structure as those below. We usually use this unformatted version for hiding long reference lists or giving credit or licensing information within a page in Canvas.

<details>
    <summary>This will be the title of the accordion "button"</summary>
            <p>Anything after the summary will be within the toggled drop down. For this simple versions we
                   use a paragraph tag but you can put anything in here (as you can see below).</p>
</details>

 

---

Title of drop down

insert content

<details style="margin: 3%; background: #f9f9f9; border: #262359 3px solid; border-radius: 15px; padding: 15px;">
    <summary style="cursor: pointer; font-size: 16pt; text-align: center;" title="click to expand">Title of drop down</summary>
    <div style="padding: 15px; margin: 15px;">
        <p>insert content</p>
    </div>
</details>

 

 

 

How to record in Canvas

To start, you will need to make sure your computer has a microphone and camera. If not, make sure to connect a webcam to your device before proceeding. To record your voice or video during a quiz, start by going to insert and selecting media, and upload/record media.

Then click the record tab at the top of the new window. As you talk a blue bar will bounce along to your voice to show your mic is working. If it isn't you can click the mic button to select a different audio source. You can do the same with your webcam if applicable.

Once you start the recording, Canvas will give you a 3 second count down before recording. If you need to start over you can do so, otherwise click finish when you are done.

When your recording is finished you will have the option to preview it, give it a title, and then save. You can start the recording over if you are unsatisfied with the result.

Once you save media, the recording will be embedded in the essay question within a quiz. You will again be able to preview the video to make sure it processed appropriately. If you need to delete a video, click it once to select it, then hit the delete key on your keyboard. You can use the undo tool if you accidentally delete a recording by going to edit menu at the top of your essay question tool bar, then select undo. You can now move on to the next question once the recording has been inserted. It will be submitted when you submit the quiz.

<details style="background: #f9f9f9; border-radius: 15px; padding: 15px; border: 3px solid #173c72;">
    <summary style="cursor: pointer; padding: 10px; color: #173c72; text-align: center;" title="click to expand"><strong>How to record in Canvas</strong></summary>
    <div>
        <p>To start, you will need to make sure your computer has a microphone and camera. If not, make sure to connect a webcam to your device before proceeding. To record your voice or video during a quiz, start by going to <strong>insert&nbsp;</strong>and selecting&nbsp;<strong>media</strong>, and <strong>upload/record media</strong>.</p>
        <p><img style="display: block; border: 1px solid red; margin: 15px auto 15px auto;" src="/courses/2253278/files/230992835/preview?verifier=ALdxyOMJ6NFR5LvKmlbw1CZaRKZkfUhOezMBmT9M" alt="insert can be found in the toolbar anytime you are accessing a essay question" width="432" height="460" data-api-endpoint="https://ccs.instructure.com/api/v1/courses/2253278/files/230992835" data-api-returntype="File" /></p>
        <p>Then click the <strong>record</strong> tab at the top of the new window. As you talk a blue bar will bounce along to your voice to show your mic is working. If it isn't you can click the mic button to select a different audio source. You can do the same with your webcam if applicable.<img style="display: block; margin-left: auto; margin-right: auto; border: 1px solid red; margin: 15px auto 15px auto;" src="/courses/2253278/files/230992834/preview?verifier=BFp9j0k1BAosjjP5B6bJjCR73YJ8jd84DpDOZQ1j" alt="the record/upload media option will take you to a pop-up window with two tabs. One reads upload the other record" data-api-endpoint="https://ccs.instructure.com/api/v1/courses/2253278/files/230992834" data-api-returntype="File" /></p>
        <p>Once you start the recording, Canvas will give you a 3 second count down before recording. If you need to start over you can do so, otherwise click&nbsp;<strong>finish</strong> when you are done.</p>
        <p><img style="display: block; margin-left: auto; margin-right: auto; border: 1px solid red; margin: 15px auto 15px auto;" src="/courses/2253278/files/230992832/preview?verifier=CWWOrMD8R2m1vRKnOn9dgWBtDcobGAazMcSmej7g" alt="once recording, from left to right, the finish button and start over buttons will appear" data-api-endpoint="https://ccs.instructure.com/api/v1/courses/2253278/files/230992832" data-api-returntype="File" /></p>
        <p>When your recording is finished you will have the option to preview it, give it a title, and then save. You can start the recording over if you are unsatisfied with the result. <img style="display: block; margin-left: auto; margin-right: auto; border: 1px solid red; margin: 15px auto 15px auto;" src="/courses/2253278/files/230992833/preview?verifier=nvuIiidmn40To6J4jaapKd5M3BB8xF6ymso6QDoZ" alt="once the recording is over the following options will show in order: play video, text entry of a title, a start over button, and a save media button" data-api-endpoint="https://ccs.instructure.com/api/v1/courses/2253278/files/230992833" data-api-returntype="File" /></p>
        <p>Once you save media, the recording will be embedded in the essay question within a quiz. You will again be able to preview the video to make sure it processed appropriately. If you need to delete a video, click it once to select it, then hit the <strong>delete</strong> key on your keyboard. You can use the&nbsp;<strong>undo</strong> tool if you accidentally delete a recording by going to <strong>edit</strong> menu at the top of your essay question tool bar, then select <strong>undo</strong>.<strong>edit</strong> menu at the top of your essay question tool bar, then select <strong>undo</strong>. You can now move on to the next question once the recording has been inserted. It will be submitted when you submit the quiz.<img style="display: block; margin-left: auto; margin-right: auto; border: 1px solid red; margin: 15px auto 15px auto;" src="/courses/2253278/files/230994729/preview?verifier=2C2mIBx5kSoUEl3rRmDFWVNPNl1HXsgOeVqxS05J" alt="once media is saved you will be able to select it in the text box for your essay question. You can play the recording to preview" width="556" height="596" /></p>
    </div>
</details>

 

 

 

<div style="background: #f9f9f9; border-radius: 15px; padding: 15px; margin-top: 30px; border: 5px solid #173c72;">
    <p style="margin: 15px 0px 15px 0px; padding: 10px 0px 10px 0px; color: #173c72; font-size: 18pt;"><strong>Poem #1</strong></p>
    <details>
        <summary style="cursor: pointer;" title="click to expand">"Nighthawks" by poet Anne Carson</summary>
        <div style="margin: 15px; padding: 15px;">
            <p>I wanted to run away with you tonight</p>
            <p>but you are a difficult woman</p>
            <p>the rules of you-</p>
            <p>Past and future circle round us</p>
            <p style="padding-left: 40px;">now we know more now less</p>
            <p style="padding-left: 80px;">in the institute of shadows.</p>
            <p style="padding-left: 80px;">&nbsp;</p>
            <p style="padding-left: 80px;">On the street black as widows</p>
            <p style="padding-left: 40px;">with nothing to confess</p>
            <p>our distances found us</p>
            <p>the rules of you-</p>
            <p>so difficult a woman</p>
            <p>I wanted to run away with you tonight.</p>
            <p><em>Yet I say boldly that I know that if nothing passed</em></p>
            <p style="padding-left: 160px;"><em>away, time past were not.</em></p>
            <p><em>And if nothing were coming, time future were not.</em></p>
            <p><em>And if nothing were, time present were not.</em></p>
            <p style="padding-left: 120px;"><em>(Augustine, Confessions XI)</em></p>
        </div>
        <p><span style="font-size: 10pt;"><em>Men in the Off Hours, New York: Vintage Contemporary Poetry, 2001. All rights reserved.</em></span></p>
        <p><strong>Summary</strong></p>
        <p>In this poem, Carson is imagining what circumstances may have brought these people to this lonely bar at a late hour. The poem is part ekphrasis, part monologue. Including St. Augustine's words at the end of the poem brings in another dimension. It invites us to reflect on the nature of time.</p>
    </details>
</div>

 

 

➕ Assignment Goals

1. Recognize common perceived barriers to health
2. Identify information in a consultation that can inform cardiovascular risk
3. Use the standard pre-participation screen to determine exercise intensity
4. Design S.M.A.R.T goals based on an initial consultation

<details style="margin: 30px 0px 30px 0px; color: #173c72;">
    <summary style="list-style: none; border: 3px dashed #C7CDD1; border-radius: 5px; background-color: #f9f9f9; text-align: center; vertical-align: middle; margin-bottom: 15px; padding: 2px; cursor: pointer;" title="click to expand"><span style="font-size: 14pt;"><span aria-hidden="true">➕ <strong>Assignment Goals</strong></span></span></summary>
    <div style="border-radius: 5px; background-color: #f9f9f9; padding: 30px;">
        <ol>
            <li>Recognize common perceived barriers to health</li>
            <li>Identify information in a consultation that can inform cardiovascular risk</li>
            <li>Use the standard pre-participation screen to determine exercise intensity</li>
            <li>Design S.M.A.R.T goals based on an initial consultation</li>
        </ol>
    </div>
</details>

 

 

 

Read "Ode on a Grecian Urn"

Click for Audio Links to an external site.

Thou still unravish'd bride of quietness,

       Thou foster-child of silence and slow time,

Sylvan historian, who canst thus express

       A flowery tale more sweetly than our rhyme:

What leaf-fring'd legend haunts about thy shape

       Of deities or mortals, or of both,

               In Tempe or the dales of Arcady?

       What men or gods are these? What maidens loth?

...

...

...

"Ode on a Grecian Urn" by John Keats, 1819

<details style="margin: 3%; background: #f9f9f9; border: #262359 3px solid; border-radius: 15px; padding: 15px;">
    <summary style="cursor: pointer; font-size: 16pt; text-align: center;" title="click to expand">Title of drop down</summary>
    <div style="margin-left: 30%; margin-top: 30px;">
        <p>insert content (will be centered)</p>
    </div>
</details>

 

 

 

Title (top)

[insert text]

Title (middle)

[insert text]

Title (bottom)

[insert text]

<details style="margin: 0px; color: #173c72;">
    <summary style="font-size: 18pt; border-radius: 5px 5px 0px 0px; background-color: #f9f9f9; padding: 10px; cursor: pointer;"><span style="font-size: 14pt;">Title (top)</span></summary>
    <div style="background-color: #e6e7e7; margin: 0px; padding: 10px; font-size: 1rem;">
        <p>[insert text]</p>
    </div>
</details>
<details style="margin: 0px; color: #173c72;">
    <summary style="font-size: 18pt; border-top: 1px solid #2d3b45; background-color: #f9f9f9; padding: 10px; cursor: pointer;"><span style="font-size: 14pt;">Title (middle)</span></summary>
    <div style="background-color: #e6e7e7; margin: 0px; padding: 10px; font-size: 1rem;">
        <p>[insert text]</p>
    </div>
</details>
<details style="margin: 0px; color: #173c72;">
    <summary style="font-size: 18pt; border-top: 1px solid #2d3b45; background-color: #f9f9f9; padding: 10px; cursor: pointer;"><span style="font-size: 14pt;">Title (bottom)</span></summary>
    <div style="border-radius: 0px 0px 5px 5px; background-color: #e6e7e7; margin: 0px; padding: 10px; font-size: 1rem;">
        <p>[insert text]</p>
    </div>
</details>

Note: Repeat the middle (red) code as many times as you want in sequence before closing with the bottom (green) code.

 

 

 

 

 

 

[insert title]

[insert text]

[insert title]

[insert text]

<details>
    <summary style="font-size: 20pt; background-color: #fff7ad; padding: 24px;"><strong><span style="font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;">[insert title]</span></strong></summary>
    <div style="background-color: #fffddb; margin: 0px; padding: 24px;">
        <p>[insert text]</p>
    </div>
</details>
<details>
    <summary style="font-size: 20pt; border-top: 2px solid #cad887; background-color: #fff7ad; padding: 24px;"><span style="font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;"><strong>[insert title]</strong></span></summary>
    <div style="background-color: #fffddb; margin: 0px; padding: 24px;">
        <p>[insert text]</p>
    </div>
</details>

Note: Start this accordion using the top half <details></details>  tag, then repeat the bottom half for as many additional sections as you need. 

---

How do I add my image to this question?

For this question you are being asked to insert an image. You can either use the "insert" menu on the toolbar at the top of the essay box, or by dragging and dropping an image into the essay box. Watch the video below for full instructions.

00:07: How do I upload an embed an image in the rich content editor? 00:11: Open the rich content editor when using one of the canvas features, which support the editor. 00:17: You can upload and embed an image by dragging and dropping from a web browser or 00:21: a file saved to your computer. If you drag and drop an image 00:25: from a web browser The Source URL for the image populates in the file 00:29: URL field in the image options. 00:33: You can upload and embed an image by copying and pasting it. 00:37: To copy an image to your clipboard right? Click the image and select copy. 00:42: You can paste it by right clicking into the Rich Text Editor and selecting paste or 00:46: using the keyboard shortcut Ctrl + V on a PC or command + V 00:50: on a Mac. 00:52: To upload an image from the toolbar click the image icon. 00:56: From the drop-down menu select the upload image option. 01:00: Alternatively, you can embed images from the menu bar. 01:03: Click the insert link navigate to view the image options, then 01:07: select the upload image option. 01:11: By default the image upload tool displays the computer tab click 01:15: or drag and drop an image file to the image uploader to upload a file from your 01:19: computer. 01:21: After uploading your file the uploader displays the image file name and 01:25: an image preview. To remove the image. 01:27: Click the delete icon. 01:30: To upload an image using a URL click the URL tab Enter 01:35: the URL in the file URL field 01:39: To add alt text to your image type an alternative text description or 01:43: text tags in the alt text field. 01:46: By default the alt text field displays the image file name. 01:50: Alt text is read by screen readers and it displays when an embedded image 01:54: cannot display. If the image is decorative and does not require, alt 01:58: text click the decorative image check box. 02:02: By default the embed image display option is selected for embedded 02:06: images. To display the image file link select the display 02:10: text link display option 4 the file link will 02:14: replace the image in the rich content editor. 02:18: To embed your selected image. Click the submit button. 02:22: View your uploaded image in the rich content editor. 02:24: You can also add alt text tags and manage the image display options. 02:30: To manage image options from an embedded image file. 02:32: Click the image then click the image options link. 02:36: You can manage display options for embedded images in the image options menu. 02:41: You can manage the image, alt text the image size and other display 02:45: options. To replace or update an image added via URL 02:50: enter an updated image URL in the file URL field. 02:54: Click the done button. 02:57: View the content created in the rich content editor. 03:01: This guide covered how to upload and embed an image in the rich content editor.

<details style="margin: 3%;">
    <summary style="color: #180f73; background-color: #f7f7f7; border: solid 2px #2c7bb6; border-radius: 2px; padding: 1% 0 1% 0; text-align: center; margin-bottom: 1%;"><strong>How do I add my image to this question? (remove)</strong></summary>
    <div style="padding: 2%; border-radius: 2px; border: 2px dashed #2c7bb6; background-color: #f7f7f7; text-align: center;">
        <p>For this question you are being asked to insert an image. You can either use the "insert" menu on the toolbar at the top of the essay box, or by dragging and dropping an image into the essay box. Watch the video below for full instructions.</p>
        <iframe title="How do I upload and embed an image in the Rich Content Editor?" src="https://embed.app.guidde.com/playbooks/goZjw97ip2HW8ggS6JpP6F" width="700px" height="400px" allowfullscreen="allowfullscreen" allow="clipboard-write"></iframe>
        <p style="display: none; text-align: center;">00:07: How do I upload an embed an image in the rich content editor? 00:11: Open the rich content editor when using one of the canvas features, which support the editor. 00:17: You can upload and embed an image by dragging and dropping from a web browser or 00:21: a file saved to your computer. If you drag and drop an image 00:25: from a web browser The Source URL for the image populates in the file 00:29: URL field in the image options. 00:33: You can upload and embed an image by copying and pasting it. 00:37: To copy an image to your clipboard right? Click the image and select copy. 00:42: You can paste it by right clicking into the Rich Text Editor and selecting paste or 00:46: using the keyboard shortcut Ctrl + V on a PC or command + V 00:50: on a Mac. 00:52: To upload an image from the toolbar click the image icon. 00:56: From the drop-down menu select the upload image option. 01:00: Alternatively, you can embed images from the menu bar. 01:03: Click the insert link navigate to view the image options, then 01:07: select the upload image option. 01:11: By default the image upload tool displays the computer tab click 01:15: or drag and drop an image file to the image uploader to upload a file from your 01:19: computer. 01:21: After uploading your file the uploader displays the image file name and 01:25: an image preview. To remove the image. 01:27: Click the delete icon. 01:30: To upload an image using a URL click the URL tab Enter 01:35: the URL in the file URL field 01:39: To add alt text to your image type an alternative text description or 01:43: text tags in the alt text field. 01:46: By default the alt text field displays the image file name. 01:50: Alt text is read by screen readers and it displays when an embedded image 01:54: cannot display. If the image is decorative and does not require, alt 01:58: text click the decorative image check box. 02:02: By default the embed image display option is selected for embedded 02:06: images. To display the image file link select the display 02:10: text link display option 4 the file link will 02:14: replace the image in the rich content editor. 02:18: To embed your selected image. Click the submit button. 02:22: View your uploaded image in the rich content editor. 02:24: You can also add alt text tags and manage the image display options. 02:30: To manage image options from an embedded image file. 02:32: Click the image then click the image options link. 02:36: You can manage display options for embedded images in the image options menu. 02:41: You can manage the image, alt text the image size and other display 02:45: options. To replace or update an image added via URL 02:50: enter an updated image URL in the file URL field. 02:54: Click the done button. 02:57: View the content created in the rich content editor. 03:01: This guide covered how to upload and embed an image in the rich content editor.</p>
    </div>
</details>