Hi! I've merged your two topics, because the underlying questions are quite similar and it's easier to answer them together 
A similar question actually came up in this thread and here's my response:
I'd love to have that use case (combining different UIs and elements) supported better out-of-the-box. I actually wrote up a proposal for how this could work a while ago – I haven't had time to implement this yet, but it's still very much on my radar: javascript in views other then html - add position information to span elements - #4 by ines
In the meantime, you can use custom JavaScript to manipulate a given interface, add elements to it and make them interactive. Here's a super simple example that adds a text field and a submit button. When the submit button is clicked, the current task is updated and the text in the input is added as the "comment" field:
document.addEventListener('prodigymount', event => {
const container = document.querySelector('.prodigy-content')
// Create input and button and add them to annotation card
const input = document.createElement('input')
input.style = "border: 1px solid"
const button = document.createElement('button')
button.textContent = 'Submit'
container.appendChild(input)
container.appendChild(button)
button.addEventListener('click', event => {
// Update current task if button is clicked
console.log(input.value)
window.prodigy.update({ comment: input.value })
})
})