move Hint and Solution knowls to details/summary disclosure

[Alex-Jordan]

This is certainly not ready for a merge. But read on.

This moves "Hint" and "Solution" away from knowls that need the knowl js, and instead uses the HTML5 native disclosure widget that is a details element with a summary child. The advantage of the move is that something fancy with js is now supported mostly with just HTML and CSS.

For now, there are a bunch of default bootstrap classes that get the styling started.

At minimum, it needs much better styling, and I think @drgrice1's expertise is needed here. The styling may need a level of bootstrap understanding that you have better than I do. Also since the current knows are styled using pg/htdocs/js/Knowls/knowl.css, I am wondering if some CSS file inside pg is where styling for this should happen (as opposed to in webwork2/.../math4.scss). And I'm unsure where that should be and if it would be a new (s)css file, how to introduce that.

There is a chevron next to each "Hint" or "Solution" and it is possible to animate that to rotate it as you open/close the item. And it is possible to have a little js to animate the expansion/retraction of the hidden content. Here is one page demonstrating an approach for both of these: https://christianoliff.com/blog/building-a-bootstrap-accordion-with-the-details/summary-html-tags/

Again since it may involve a new CSS file, and especially if it involves new js, I am wondering if @drgrice1 is interested in handling the cosmetic touches for this. PTX has moved to using details/summary for many of its (former) knowls, but does not use bootstrap.

[Alex-Jordan]

I didn't look into it, but perhaps the knowlLink subroutine could be rebuilt to use details/summary and then maybe we could drop knowl.js.

[pstaabp]

I think is a start. A couple of things.

1. I think it would be nice to animate the opening/closing. I looked at a few examples using CSS3 animations, so should be possible.
2. I assume we will extend to other knowls items like the helpLink

[drgrice1]

@Alex-Jordan: I added a pull request to this branch that adds animation of the button icon and body text expansion and contraction.

I am in favor of eliminating knowls completely. However, I do not think that this will work for knowls in general. The problem with knowls in general is how they are used, and that usage presupposes this approach from working. That is the placement of knowl links inline or in tables or lists. That won't work for this or accordions in general in any nice way. So, basically, the only way to eliminate knowls will be to rewrite all problems that use them to not place them in those settings, and insist that they are placed in a place that will work for display:block elements in general.

[Alex-Jordan]

I tweaked some CSS and now in math4, it looks like:

I think it's OK, but there are two problems.

• To do this, the color of the "Hint" and "Solution" relies on the theme. In particular, it uses var(--bs-primary) which is set over in the theme. Is it a concern for this PG thing to rely on a webwork2 style?
• While this looks fine for blue, red, and green, it's bad for yellow. I'm not sure how to set the text color differently when the theme is the yellow theme.

[drgrice1]

This looks mostly good. One contrast issue needs to be fixed though.

[Alex-Jordan]

I applied the changes from this morning about the font color, font weight, and padding.

[drgrice1]

Looks good.

[pstaabp]

Looks great.