Allow rendering of Q&A on a single continuous HTML page for increased readability

I don't think this is a bug. Perhaps this is more an improvement suggestion.

Description

When using hashcards drill on cards with a lot of text, after revealing
the answer to a card, two scrollable boxes exist rather than a single continuous HTML page.
Below is an example where Q: and A: has a lot of text, but equal amounts of text:

.md file used for aforementioned picture:
testequaltext.md

---

Furthermore, if A: contains more text than Q:,
the revealed A: box becomes disproportionately large.
Below is an example where the card contains a lot of text, yet A: has more text than Q:

.md file used for aforementioned picture:
testamoretext.md

---

This doesn't initially seem like a problem, but if one creates image occlusion cards, it becomes
hard to navigate the images.
Example (before reveal)

And after reveal:

.md file used for above 2 pictures

testpicture.md

The aforementioned example with the image occlusion cards becomes quite a lot worse if
A: has significantly more text than Q:- I haven't had the time to document this, but I can do so if
needed.

Suggestion for solution

Add an option to make the Q: and A:
part of the flashcards to span a single continuous HTML page,
and let the bar at the bottom(the one with "Undo" and "End")
float while being able to scroll the single HTML page.

In this way, one can utilize the entirety of the HTML page for the flashcards,
while not breaking flow because the bottom-bar floats
with one, allowing one to click "Reveal", "Good", etc. at
any time.

The option could be implemented in the hashcards drill command,
perhaps as --single-html

Furthermore, the option for two separate boxes for the question
and answer will still be available if this is what one prefers.

Environment

• OS: Arch Linux
• Kernel: Linux 7.1.3-arch1-2
• Browser/Version: Mozilla Firefox 152.0.5

Additional Information

The cards were drilled in a private firefox browser with no addons enabled to ensure
that the addons did not affect the displaying of the cards

A thank you note

I would like to thank @eudoxia0 for creating and maintaining this software.
I am incredibly grateful for it- it has helped me immensely in my studies.
hashcards suits my workflow infinitely more than Anki does. 😄

[eudoxia0]

Add an option to make the Q: and A:
part of the flashcards to span a single continuous HTML page,
and let the bar at the bottom(the one with "Undo" and "End")
float while being able to scroll the single HTML page.

Yeah this might be a good idea. I often have the problem, particularly on my laptop, that cards with images overflow and make a scrollbar, e.g.:

Which is very uncomfortable! And "resize images intelligently to fix the bounding box", idk if that can be done with CSS in the general case.

For the image occlusion case, I think in certain circumstances it might be nice to have a way to hide the Q on a Q/A card upon reveal.

Hmm. Maybe you are right that the bars should float above the card, fixed to the viewport, while the flashcard is like a normal HTML page that starts at the top (with some margin at the top, to get out of the top-bar) and spills past the viewport and can scroll.

[eudoxia0]

Re: the case where there's a lot of text, I would respectfully suggest that flashcards should not be so long. Do you have an example of a real flashcard with that much text?

Re: the case where there's a lot of text, I would respectfully suggest that flashcards should not be so long. Do you have an example of a real flashcard with that much text?

No, I don't have flashcards that are have that much text. 😅
I made the flashcards in my original post to be certain that the scrollbars were visible. My primary suggestion was to have an option to create a single continuous page, rather than the scrollbars, and for that suggestion to be conveyed clearly, I needed some cards that ensured that those scrollbars were shown.

I do have flashcards that contain references on the "A:" side, as well as collapsible boxes in HTML with notes.
I used some time recreating a flashcard I have in a format I am comfortable to share.
Found below:

---

After reveal:

After reveal, collapsible box "Notes" opened:

After reveal, collapsible box "InformationSource" opened:

The .md flashcard that created the above cards:

testpicture.md

---

For the image occlusion case, I think in certain circumstances it might be nice to have a way to hide the Q on a Q/A card upon reveal.

Hmm. Maybe you are right that the bars should float above the card, fixed to the viewport, while the flashcard is like a normal HTML page that starts at the top (with some margin at the top, to get out of the top-bar) and spills past the viewport and can scroll.

I think a single page with the floating bars is the best solution.
One could also have the option to hide Q on Q/A reveal, but this might also make it more difficult to compare the Q and A side, especially in the case of image occlusion cards, and also make it generally less smooth to navigate. A single page would allow one to quickly scroll up and down and more comfortably see both pictures.
I do believe it is important to have a central "box" for the single page, so that the text and picture doesn't span to fill out the entire page horizontally. That is, one could use the box that contains the Q/A as it is now, but just make it a single continuous box.

Don't hesitate to ask if I can provide more information or help with anything more. 😄

Comment to initial edits: I had to edit this comment immediately after posting a few times to respond to both comments and to reupload a picture of the cards that showed the scrollbars- also to correct formulation mistakes.