Loading...

PDF iframes and long image descriptions.

Links & Documents

Some students are not able to leave the tab they’re taking a test in. Because of this, we cannot use target="_blank" to link to PDFs and other documents. Please use the standard details snippet (show below) to embed a document into a question.

Note: The details element has been tested in Canvas and Buzz.

                  
    <details>
        <summary>Click to Read</summary>
        <iframe
            src="PDF_Source"
            title="PDF_Title"
            style="width: 100%; height: 400px; padding: 0; display: block;">
        </iframe>
    </details>
                  
                

Try it for yourself!

Click to Read

Images with Long Descriptions

Some images may require a description that an alt attribute is not able to satisfy. In those cases, please use the <details> element to enclose a detailed description (example below).

                  
    <figure style="margin: 1em 0;">
       <img src="image.pjg"
       alt="A detailed description of this image is available via the 'View Image Description' button."
       style="width: 100%; max-width: 500px;">
       <details>
         <summary>View Image Description</summary>
           <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
       < /details>
    </figure >
                  
                

Try it for yourself!

A detailed description of this image is available via the 'View Image Description' button.
View Image Description

The number 12,400. In this number, the 1 and the 2 are black. These digits stay the same. The number 4 is highlighted in red. It has been rounded from 3. The two zeros are in blue. The digits to the right of the rounding digit become zeros.


There are some online resources that may be helpful in formatting your Respondus code!

tip