# custom javascript elements

**URL:** <https://support.prodi.gy/t/custom-javascript-elements/1496>\
**Category:** Uncategorized\
**Tags:** usage, front-end\
**Created:** [May 8, 2019, 1:31pm UTC](https://support.prodi.gy/t/custom-javascript-elements/1496 "2019-05-08T13:31:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jusjosgra](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/jusjosgra/32/773_2.png) [@jusjosgra](https://support.prodi.gy/u/jusjosgra)\
**Post date:** [May 8, 2019, 1:31pm UTC](https://support.prodi.gy/t/custom-javascript-elements/1496/1 "2019-05-08T13:31:34Z")

</div>

Is there any plan to support custom javascript elements like mechanical turk? We have a complex hierarchy of labels we want to use that requires a 2-step labelling procedure. We have done this using conditional js forms on mturk but are looking for something we can deploy internally like prodigy.

---

<div class="post-metadata">

**Author:** ![honnibal](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/honnibal/32/35_2.png) [@honnibal](https://support.prodi.gy/u/honnibal)\
**Post date:** [May 8, 2019, 2:08pm UTC](https://support.prodi.gy/t/custom-javascript-elements/1496/2 "2019-05-08T14:08:46Z")

</div>

Prodigy does support Javascript, although it’s possible it’ll be more limited than you need.

Here’s an example I hacked up for my own purposes: [https://gist.github.com/honnibal/5c54ad3ddbb0504c0b25319b53d4c681](https://gist.github.com/honnibal/5c54ad3ddbb0504c0b25319b53d4c681) . I wanted to use Prodigy as a spaced repetition system to help me learn German. This recipe uses Javascript to show the correct answer after I make my guess.

---

<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:** [May 8, 2019, 4:20pm UTC](https://support.prodi.gy/t/custom-javascript-elements/1496/3 "2019-05-08T16:20:42Z")

</div>

To add to Matt’s comment – in your case, your `html_template` and `javascript` could look something like this:

```html
<select class="dropdown">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<!-- other stuff here, e.g. the content, another dropdown etc. -->
<!-- properties in your task dict are available as Mustache variables -->
{{text}}

```

```javascript
document.addEventListener('prodigymount', event => {
    const dropdown = document.querySelector('.dropdown')
    dropdown.addEventListener('change', event => {
        // Update the current task with a value, or modify some other elements etc.
        window.prodigy.update({ selectedOption: event.target.value })
    })
})

```

This is just a simple example – but you could, for instance, change the options that are displayed based on the user’s selection from the first dropdown. And once the final label is selected, call `prodigy.update` to update the current task object with the data however you need it.