Fill in the blanks mod

I'm an English language teacher experimenting with H5P using self-hosted Moodle.

I'm quite new to H5P but I'd like to try and make a modified version of the fill in the blanks activity.

What I'd like to achieve is:

• Change the blanks to monospace font in CSS.
• Change the size (width) of the blanks to exactly match the missing words so that it's impossible to write too many letters and so the learner can see the length of the word to help with its recall.
• Add the missing word to the input placeholder so I can control it using CSS perhaps displaying it briefly onfocus or when a hint button is clicked.

Some of this can achieved with CSS quite simply however I also need to alter the Javascript I guess.

Could anyone give me some pointers to get started? Thanks in advance!