Link in choice text for entity linking

Hi,

I am using a multiple choice view to allow annotators to choose the best candidate for entity linking.

{"view_id":"choice"}

In order to choose the best candidate, each choice includes a paragraph and a link, like so
choice example

Currently if an annotator clicks on the the link, it is opened in a new tab but the choice is also automatically ticked due to an EventListener attached to the entire choice box.

I was trying to inject some JS into the <a> tag in order to prevent that but I cannot get it to work.
Following this thread, they seem to argue that one can prevent the event from triggering the parent.

<div class="prodigy-content c0179 c0177">
<a href="https://<URL>" target="_blank" onclick="{e => e.stopPropagation();}">Q575337</a>: Bridget Philipson; Bridget Philipson is a Shadow Education Secretary. Score: 100
</div>

I can get this behaviour to work manually if I use the Chrome Dev Tools and remove the document click listener on the choice box.

listeners attached to choice box

Do you have any suggestion on how to achieve this in code?

1 Like

For what it's worth, I managed by creating a local prodigy.json file with

{
  "javascript": "function clickMe(e) {\ne.stopPropagation();\n}"
}

and then calling this function in the onclick

<div class="prodigy-content c0179 c0177">
<a href="https://<URL>" target="_blank" onclick="clickMe(event)">Q575337</a>: Bridget Philipson; Bridget Philipson is a Shadow Education Secretary. 
</div>

Not sure why you need to call a previously declared function rather than just providing the function inline as I did above, but it works. :tada:

2 Likes

I'm happy to hear you've found a way to get it working.

I guess a small note on my end; it might be a good idea to use a custom HTML template here that just renders the text such that the candidates are underlined and wrapped in an <a href=""> tag. That way, the element that allows you to select the candidate is different from the element that assigns the annotation.

1 Like