Hiding div block in html when loading amazon mechanical turn template

60 Views Asked by At

I want to submit work to Amazon Mechanical Turk to help me annotating some data.

I have a research ethics consent that I need to show to the workers at the beginning before they start their jobs.

My csv file looks like:

variable2,consent
,This is the consent
text1,
text2,
text3,

HTML code:

<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<script type="text/javascript">
function show_hide_data() {
    var co = new String(${consent});
    if(co.length > 2){
        document.getElementById('con_').style.display ='block';
        document.getElementById('data_').style.display ='none';
    } else{
        document.getElementById('con_').style.display ='none';
        document.getElementById('data_').style.display ='block';
    }
}
</script>

<body onload="javascript:show_hide_data()">
<!-- You must include crowd-form so that your task submits answers to MTurk -->
<crowd-form answer-format="flatten-objects">
    
<div id="con_">
    <p> Consent: ${consent}</p>
</div>

<div id="data_">
     <p> Text: ${variable2}</p>
</div>

</crowd-form>
</body>

My idea is, using javascript, I want to show the con_ div and hide data_ div when there is a consent text in the csv (first line), and vice versa.

The code works well locally, but it seems that the javascript part doesn't when I test it on the website.

0

There are 0 best solutions below