Dropdown / hidden text

Hello. I’m working with an academic who is considering Pressbooks as a platform for publishing his Maths book. He is asking if Pressbooks supports the use of ‘dropdown’ boxes in the main body of the text so that he can pose the reader a question, they can consider their response, and then click to display the solution. Apparently this feature is available in Jupyter Books. Does anyone have any experience of incorporating this type of functionality in Pressbooks? Many thanks :slightly_smiling_face:

1 Like

Hi Helen,

Something like this is in Pressbooks, but not out of the box. To do this, you would need to install the “Lumen Learning Shortcode Handler”

This extra plugin that is in the Pressbooks repository would allow you to add shortcodes to the textbook, which would allow you to have the hidden answers that you are looking for.

(Pressbooks used to struggle if shortcodes were nestled inside other shortcodes. Since this is a math book, you might want to be aware of this issue and use the $latex $ start and end codes for mathjax instead of the [latex][/latex] shortcode style.)

Thank you Ed, that’s helpful. I’ll pass this info onto our colleague.

Hi Helen,

This may be what you need:
https://university.pressbooks.pub/oersourcebook/chapter/show-hide-experimentation/

I used it in https://wisc.pb.unizin.org/agent-based-evolutionary-game-dynamics/chapter/1-4/ without any problems. Please, search for “computation of” to see the results.

The code I inserted is the following:

<details><summary>Computation of $q(x)$</summary>
HIDDEN TEXT
</details>

And the result:

Computation of $q(x)$ HIDDEN TEXT

Cheers,
Luis

3 Likes

That’s excellent Luis, thank you, and I think that’s exactly what we need :smiley:

1 Like

Hi Luis,

That’s helpful, but the reason why I would use the Pressbooks Shortcode plugin over the pure HTML method that you describe is that there is a logical fallback for all of the Pressbooks exports like PDF and EPUB. If we use their plugins instead of advanced HTML wizardry, then I know the interactive will have a logical fallback in PDF and EPUB.

1 Like

Thanks a lot for pointing that out. That’s a very important point but, from my ignorance, I would think that -precisely because of that- it is important to ensure that standard HTML tags (HTML Standard) have a logical fallback in PDF and EPUB (right now details does have a logical fallback in PressBooks and I would expect this to continue, as it is standard HTML).

I would be very interested to know what’s the official PressBooks advice on how to implement this.

1 Like

@beckej and @lrizquierdo you’re both correct — I believe that both of these methods actually result in an identical details HTML element in the resulting output. The Lumen plugin Ed referenced uses shortcodes to generate a details/summary element: lumenlearning-shortcode-handler/pressbooks-shortcode-handler.php at 67ad11bde3557466e3ea19fcd16e83a6478d8d77 · pressbooks/lumenlearning-shortcode-handler · GitHub.

I’m quoting from memory because it’s been a while, but I believe that details elements are shown in their expanded form in PDF exports formats (you can’t toggle show/hide in a PDF, to the best of my knowledge). The trickiest part here is that there isn’t a button in the visual editor that lets you construct a details element — you have to switch to the text tab and manually construct the HTML.

Also — hello again Luis, old friend. I hope you’re well!

2 Likes

Thanks a lot, my dear old friend @SteelWagstaff ! As helpful and as super-nice as always!
I confirm that in PDF and EPUB exports, the details elements are shown in their expanded form.
I hope you’re doing great Steel!

1 Like

@HelenMoore I also endorse the use of the details tag and can confirm that they show up full open (expanded) in the PDF export.

Yes, you have to pop into the text editor to set it up, but it’s also pretty easy to see what you’re doing after you pop back into the RCE.

Here’s more on the details element from the Mozilla’s Developer Network.

We use the details tag as part of a video debrief after embedded videos so that readers don’t necessarily see the answer on the page waiting for them, they have to click. :sweat_smile: Here’s an example in our child development webbook on a video “Let’s Talk About Math: Everyday Fun with Addition and Subtraction” with 2 questions following the video.

Happy Pi Day!
Cheers - Shar :star:

2 Likes

Thank you very much Shar, and your example is very helpful :slightly_smiling_face: