Accordion HTML Not Working in Instructions in New Quizzes

[nogueim]

I am trying to use HTML to contract/expand sections for instructions in the New Quizzes. Although I am using the exact code that I use on any Canvas page, it appears that this does not work in New Quizzes. Am I doing something wrong? Here is the code I am using:

<p>For the sections below, click on the blue title to expand the selection. Click again on the blue title to close the selection.</p>

<details>

<summary><span style="font-size: 18pt;"><strong> <span style="color: #236fa1;">Title of Section to Display</span> </strong></span></summary>

 <p>Your content goes here.</p>

</details>

<hr />

Thank you in advance for your help.

[GideonWilliams]

Just to confirm that this is also happening to me. The <details> and <summary> html tags are being scrubbed. Does not happen in Pages RCE nor in the  and not sure that it should be happening anyway as both are html 5 tags

The original post for this tag was - Solved: Accordion Alternative - Details tag - Instructure Community - 395062 (canvaslms.com) and I notice that it is accepted in the Community.

I dont know enough of why the RCE in New Quizzes is different from the RCE elsewhere. I have submitted a ticket and will add it to the Community Coaches Slack page. Hopefully someone can pick it up!

[mzimmerman]

Hi @nogueim and @GideonWilliams 

Remember that New Quizzes are actually an external tool coming from a different server, so if your code is relying on classes coming from CSS in the Canvas theme, those classes may not be available on content coming from the New Quizzes server, *.quiz-lti-iad-prod.instructure.com.

[nogueim]

Thank you. This HTML code does not refer to or link to anything inside or outside Canvas at all.

[mzimmerman]

Thanks, I hadn't seen the <details> tag before.   When I paste your code into the RCE in New Quizzes and save, the <details> tags are stripped out.

[chriscas]

Hopefully someone at Instructure sees the support ticket @GideonWilliams filed and is able to fix this or at least document it on the Canvas HTML Editor Allowlist - Instructure Community - 387066 (canvaslms.com) page, which currently says details is supported.  The RCE in New Quizzes was updated to the same one as base Canvas last year, but since New Quizzes is technically an LTI, I bet the configuration for the RCE in New Quizzes is stored somewhere different and has some variation compared to Canvas.  Ideally these should be identical, at least in my mind.

-Chris

[Shar · Accepted solution]

Hi @nogueim , @chriscas , @mzimmerman , @GideonWilliams  ( I tagged everyone so you'd be informed for my reply),

I just tested out the Details tag and it is working. You have to be in Student View to see it operating because in Teacher/Build view clicking on the section takes you into Edit mode. So that's the good news.😎 Details is a standard HTML5 tag and it would be truly bad form if New Quizzes didn't recognize standard elements. Styling on the tags... are another story.

I only started using New Quizzes Fall 2023 and quickly noticed that it does apply standard Canvas CSS at all. Even the normal <P> which usually has a margin space around it is reset by some other class to margin:0px; Inspect the page and take a look. I have to manually add style="margin-bottom: 1em;" to my <P> tags otherwise my multi-paragraph instructions get squished together.

I came to this thread hoping there was a fix on how to import my CSS into New Quizzes, but alas because it is an LTI it's not even pinging regular Canvas account CSS. New Quizzes does not even grab my theme colors. 😓

Now I'm trying to decide if the ability to let students build off previous attempts (only answer questions they got wrong) is worth the sacrifice of losing all HTML styles and having to recreate the manually. 😼

Details works, CSS doesn't
Cheers - Shar ⭐