Looking for Advice: Best Method for Adding Fill-in-the-Blank Functionality to WordPress Plugin

Hi All,

I'm building a new WordPress plugin for interactive fill-in-the-blank notes. Goal: Anyone who is presenting information and likes to use fill-in-the-blank style handouts could do so using this plugin (without the need for printed copies while retaining interactivity).

My rough plan is to:

1. Create a Custom Post Type.
2. Provide an editor for text notes (and images / other media) to be added by the presenter.(a)
3. Presenters would select a word/phrase they wanted to blank out.(b)
4. Participants at the presentation could pull up the notes on their phone/laptop and fill out the blanks as the presentation occurs.(c)
5. At the end of the presentation participants could enter their email address and have the notes (including their filled out answers and perhaps the correct ones if they differ) emailed to them.

It is a pretty simple/straightforward plugin and this is essentially an MVP. I'd love to add additional features in the future (save to PDF, Evernote, Google Drive, etc.; easy analytics for the presenter to gauge actual participation, etc.).

There are three areas in particular that I'm looking to gain additional perspective on, I've noted them as (a), (b), and (c) above. Below I provide additional details on these along with questions I have.

(a) I could use the Gutenberg block editor to create a block that handles this OR I could use the traditional TinyMCE non-Gutenberg editor. Thoughts on advantages of one over the other? Am I missing any additional (better) options?

(b) Ideally there would be several ways to do this, e.g., select the word and use a key combination (say Ctrl+Shift+B) and an editor button. Once this is done CSS will be used to show that the selected word/phrase will be shown as blank from the front end.

This could be done using a shortcode, like:
The best programming website is [lqdnotes]dev.to[/lqdnotes]

Or it could be done using an html attribute like:
The best programming website is <span class="lqd_blank">dev.to</span>

I tend to prefer the latter as it doesn't clutter the editor interface notes with shortcodes. Any reason to go with the former or another method altogether?

(c) When the front end page is displayed the parser would display the text as-is except for when it found a blanked word, in which case it would replace the blanked word with a form text box with some styling to ensure it looked as if it was in the regular flow of the page (e.g., no borders, sizing with rest of text, no difference in color, etc.).

Are there any better ways to accomplish this? Ideas you'd suggest?

I'd love to hear your thoughts!