# How to join Recipe ner.manual and choice

**URL:** <https://support.prodi.gy/t/how-to-join-recipe-ner-manual-and-choice/1706>\
**Category:** Uncategorized\
**Tags:** enhancement, usage, custom, front-end\
**Created:** [June 26, 2019, 5:02am UTC](https://support.prodi.gy/t/how-to-join-recipe-ner-manual-and-choice/1706 "2019-06-26T05:02:35Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [June 26, 2019, 8:17am UTC](https://support.prodi.gy/t/how-to-join-recipe-ner-manual-and-choice/1706/3 "2019-06-26T08:17:31Z")

</div>

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](https://support.prodi.gy/t/question-answering-with-sequence-tagging/1694) and here's my response:

> [@Question Answering with sequence tagging](https://support.prodi.gy/t/question-answering-with-sequence-tagging/1694/2):
>
> Hi and sorry for only getting to this now! What you’re trying to do definitely makes sense, but we don’t currently have a combined interface for that.
> 
> One solution would be to do the task in two steps and start with the answers and then stream in the examples again to select the paragraphs. But I understand that this isn’t ideal. Alternatively, you could also add some JavaScript to the `ner_manual` interface that mimicks the choice options (which is probably easier than doing it the other way around). When the user selects an option, it can call `window.prodigy.update` and add the selected option to the task. And selecting the spans would just work out-of-the-box, just like in the regular manual annotation workflow.

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](https://support.prodi.gy/t/javascript-in-views-other-then-html-add-position-information-to-span-elements/935/4)

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:

```javascript
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 })
    })
})

```

---

_[View the full topic](https://support.prodi.gy/t/how-to-join-recipe-ner-manual-and-choice/1706)._