Check out the section on custom Javascript in the PRODIGY_README.html. This thread also has some examples: Custom view templates with scripts - #6 by ines
Essentially, you want your recipe config to return a html_template that looks something like this ({{text}} will get replaced with the "text" value of the current annotation task):
{{text}}<br /><br />
<select class="dropdown">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<!-- and so on... ->
</select>
In your javascript, you can then add an event listener to it and update the current task with the selected value. Something like this – untested, but should work:
document.addEventListener('prodigymount', event => {
const dropdown = document.querySelector('.dropdown')
dropdown.addEventListener('change', event => {
// dropdown.value is the selected answer
console.log('Selected:', dropdown.value)
window.prodigy.update({ accept: [ dropdown.value ]})
})
})
This is all assuming you only want to allow single selections. If you want multiple selections, you could make it a <select multiple> and then add some logic to read out the selected options.