Audio_description.html

<!-- HIT template: TranscribeAudioVideo-v3.0 --><!-- The following snippet enables the 'responsive' behavior on smaller screens -->
<meta content="width=device-width,initial-scale=1" name="viewport"/>
<section class="container" id="TranscriptionFromAV"><!-- Instructions -->
    <div id="content" class="row">
        <div class="col-xs-12 col-md-12">
            <div class="panel panel-primary">
                <!-- WARNING: the ids "collapseTrigger" and "instructionBody" are being used to enable expand/collapse feature --><a
                    class="panel-heading" id="collapseTrigger"><strong>Please read the following instructions
                carefully</strong> <span class="collapse-text">:</span> </a>
                <div class="panel-body" id="instructionBody" style="background-color:#E6E6E6">
                    <p><strong><u>The audio players will not work with Internet Explorer, do not accept this HIT if you
                        are using that browser or do this HIT with another browser.</u></strong></p>

                    <p>Listen to a short audio track and write <strong><u>one</u></strong> sentence describing its
                        contents. Please do this task in a <strong><u>quiet environment</u></strong> with <strong><u>headphones</u></strong>.
                        Workers will be limited to 100 HITs on this task.</p>

                    <p><u><strong>Follow the instructions carefully and precisely.</strong></u></p>

                    <ul>
                        <li>Describe both foreground and background.</li>
                        <li><strong>Describe only what you hear.</strong>
                            <ul>
                                <li>Do not assume or speculate. (e.g. in Ex 2 instead of "two <strong>people playing
                                    golf</strong>" it says "two <strong>golf swings</strong>" and in Ex 1 instead of "A
                                    woman<strong> is sick </strong>and coughing..." it says "A woman is coughing...".)
                                </li>
                                <li>Avoid using words like <strong>"possibly" or "probably" or "likely"</strong>.(e.g.
                                    instead of "An engine, <strong>probably diesel</strong>, is whiring..." say "A
                                    <strong>diesel engine</strong> is whiring...")
                                </li>
                                <li>Do not describe or refer to yourself, the recording itself or the equipment. (e.g.
                                    Instead of "<strong>This is a recording of a dog barking</strong> while..." say
                                    "<strong>A dog is barking</strong> while..." and instead of "A bird is singing
                                    <strong>in the audio clip</strong>..." say "A bird is singing..." and instead of
                                    "Rain is hitting the ceiling<strong> above the microphone</strong>..." say "Rain is
                                    hitting the ceiling...").
                                </li>
                                <li>Do not describe&nbsp;what might have happened in the past or might happen in the
                                    future.
                                </li>
                            </ul>
                        </li>
                        <li><strong>Additional requirements for the sentence:</strong>
                            <ul>
                                <li>Do not use the phrases <strong>"I hear'' or "I listen'' or "There is'' or "There
                                    are" or "Sounds like''&nbsp; or "I say'' or "I think''</strong>. If you want to say
                                    that the audio clip sounds like something, just describe it as being what you think
                                    it sounds like (e.g. Instead of "<strong>It sounds like a plane passing by</strong>
                                    and..." say "<strong>A plane passes by</strong> and...").
                                </li>
                                <li>Do not use the phrases <strong>"sound of" </strong>or <strong>"noise
                                    of"&nbsp; </strong>or similar structures. For example, instead of "A <strong>vehicle
                                    travelling sound</strong>..." say "A <strong>vehicle is travelling</strong>" and
                                    instead of "<strong>The sound of</strong> a horse galloping..." say "A horse is
                                    galloping...".
                                </li>
                                <li>Do not use the phrases <strong>"you can hear" or "can be heard" or "is
                                    heard"</strong> etc. (e.g. instead of "Birdsong <strong>can be heard </strong>in the
                                    background..." say "<strong>A bird is singing</strong> in the background...").
                                </li>
                                <li>Do not refer to the <strong>contents of speech</strong> (e.g. instead of "A man
                                    <strong>shouts</strong> <strong>"This is the best day of my life!"</strong>
                                    while..." say "A man <strong>is shouting</strong> while..." and instead of
                                    "A woman is <strong>speaking a foreign language</strong> and..." say
                                    "A woman is <strong>speaking</strong> and...")
                                </li>
                                <li>Avoid giving proper names to people, places, or scenery (e.g. "People are walking
                                    and talking in the downtown of <strong>Tokyo</strong>". <strong>Do not do
                                        that</strong>).
                                </li>
                                <li>If you use numbers, write them out. For example, instead of "<strong>2</strong> dice
                                    are tossed", say "<strong>two </strong>dice are tossed".
                                </li>
                                <li>Be specific. For example, instead of
                                    "<strong>something</strong>&nbsp;hits&nbsp;<strong>something else</strong>", say
                                    "<strong>a ball bounces</strong>&nbsp;on&nbsp;<strong>a table</strong>''.
                                </li>
                                <li>Write different descriptions for each HIT. I.e. do not copy and paste a submission
                                    across multiple HITs.
                                </li>
                            </ul>
                        </li>
                        <li>The sentence should contain at <strong>least 8 </strong>and at <strong>most 20
                            words</strong>.
                        </li>
                        <li><u><strong>The audio clip is not blank. If you cannot hear anything, please return the HIT
                            and do not describe the audio as blank.</strong></u></li>
                    </ul>

                    <p>&nbsp;</p>

                    <h5><strong>Please <u>listen to and read</u> the following examples and <u>adjust your headphone
                        volume </u>so that you can hear the audio fully:</strong></h5>

                    <table style="width:100%">
                        <tbody>
                        <tr>
                            <td>
                                <h4>Example 1</h4>

                                <p><label for="AudioExample1">Please listen to the following audio:</label></p>


                                <div class="audioContainer" src="YOUR_EXAMPLE_1_FILE_HERE" audioId="AudioExample1"></div>

                                <p>&nbsp;</p>
                                <label for="DescriptionExample1">Please describe the audio here (input is disabled for
                                    the examples):</label><textarea class="form-control" cols="250"
                                                                    id="DescriptionExample1" readonly="readonly"
                                                                    rows="2" type="text">A woman is coughing louder and more severely as time goes on.</textarea>
                            </td>
                            <td>
                                <h4>Example 2</h4>

                                <p><label for="AudioExample2">Please listen to the following audio:</label></p>


                                <div class="audioContainer" src="YOUR_EXAMPLE_2_FILE_HERE" audioId="AudioExample2"></div>

                                <p>&nbsp;</p>
                                <label for="DescriptionExample2">Please describe the audio here (input is disabled for
                                    the examples):</label><textarea class="form-control" cols="250"
                                                                    id="DescriptionExample2" readonly="readonly"
                                                                    rows="2" type="text">Two golf swings are hit before a man grunts while birds are chirping in the background.</textarea>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- End Instructions --><!-- Video transcription layout -->

            <div class="row" id="workContent"><!-- Link to the video file -->
                <h4><strong><u>VVV The task starts here! VVV</u></strong></h4>
                <!--Hidden inputs to capture inputs with results--><input name="audioUrl" style="display:none"
                                                                          value="${audioUrl}"/> <input name="audioType"
                                                                                                       style="display:none"
                                                                                                       value="${audioType}"/>
                <p><label for="TrackControls">Please listen to the following audio (You can listen to it multiple
                    times):</label></p>

                <p><!-- Worker input --></p>

                <div id="theAudioContainer" class="audioContainer" src="${audioUrl}" audioId="TrackControls"></div>

                <p>&nbsp;</p>

                <div class="form-group"><label for="DescriptionText">Please describe the audio here (input will be
                    available once audio has been listened to):</label><textarea class="form-control" cols="250"
                                                                                 id="DescriptionText"
                                                                                 name="DescriptionText"
                                                                                 readonly="readonly" required=""
                                                                                 rows="2" spellcheck="true"></textarea>
                </div>

                <hr style="border-color:#222222"/>
                <label for="Feedback">Feedback (not obligatory):</label><textarea class="form-control" cols="250"
                                                                                  id="Feedback" name="Feedback"
                                                                                  placeholder="Please tell us if there is some way we could improve this HIT."
                                                                                  rows="2"></textarea>

                <p>&nbsp;</p>

                <p>&nbsp;</p>
            </div>
        </div>
    </div>
</section>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
      integrity="sha384-IS73LIqjtYesmURkDE9MXKbXqYA8rvKEp/ghicjem7Vc3mGRdQRptJSz60tvrB6+"
      rel="stylesheet"/><!-- Open internal style sheet -->
<style type="text/css">#collapseTrigger{
  color:#fff;
  display: block;
  text-decoration: none;
}
#submitButton{
  white-space: normal;
  display: none;
}
.image{
  margin-bottom: 15px;
}
.audioIn{display:none;}
/* CSS for breaking long words/urls */
.dont-break-out {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

</style>
<!-- End internal style sheet --><!-- External JS references -->
<script src="//uniqueturker.myleott.com/lib.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
        integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"
        integrity="sha384-s1ITto93iSMDxlp/79qhWHi+LsIi9Gx6yL+cOKDuymvihkfol83TYbLbOw+W/wv4"
        crossorigin="anonymous"></script><!-- Open internal javascript -->
<script>
var ans_visible = 0;

function getWordCount(sentence){
    var matching = sentence.toLowerCase().match(/[a-z]\b/g);

    if (matching === null) {
        var count = 0;
    } else {
        var count = matching.join(" ").trim().split(" ").length;
    }

    return count;
}

$(".audioContainer").each(function() {
    btnHTML = '<button class="audioButton">Click here to enable audio.</button>'
    this.innerHTML = btnHTML;
});

$(document).ready(function() {
    $("audio").attr("controlsList", "nodownload");
    submitBtn = document.getElementById("submitButton");
    
    if (submitBtn){
        submitBtn.setAttribute("style", "white-space: normal; display: inline;");
    }

    $(".audioButton").click(function() {
        $(".audioContainer").each(function(){
            var src = this.getAttribute("src");
            audioId = this.getAttribute("audioId");

            if (audioId == "TrackControls"){
                preload = 'auto';
            } else {
                preload = 'metadata';
            }

            inner = '<audio id="' + audioId + '" class="audio" controls="" preload="' + preload +'" >';
            inner = inner + '<source src="' + src + '" type="audio/wav" />';
            inner = inner + 'Your browser does not support the <code>audio</code> element.';
            inner = inner + '</audio>';

            this.innerHTML = inner;
        });

        $('.audio').each(function(){
            this.onpause = function() {
                if ((this.played.end(0) - this.played.start(0) == this.duration || (this.played.end(0) == this.duration && this.played.start(0) == 1)) && ans_visible == 0) {
                    document.getElementById("DescriptionText").removeAttribute("readonly");
                    ans_visible = 1;
                }
            };
        });
     });


    $("form").submit(function(event) {
        var audio = document.getElementById("TrackControls");
        var ans = document.getElementById("DescriptionText");

        if (!audio) {
            alert("Please listen to the audio before submitting.");
            document.getElementById("theAudioContainer").focus();
            event.preventDefault();
        }

        var word_count = getWordCount(ans.value);

        var no_no_words = ["sound like", "sounds a bit like", "sounds abit like", "sound abit like", "there is", "there's", "theres", "here is", "there are", "there're", "here are", "this is", "his is", "there was", "here was", "there were", "here were", "this was", "overhear", "overheard", "his was", "i hear", "i listen", "i say", "i hear", "i think", "sounds like", "sound of", "sounds of", "noise of", "noises of", "hear", "hearing", "heard", "hears", "possibly", "probably", "likely", "maybe", "could be", "perhaps"]
        var rec_words = ["the clip", "audio clip", "mic", "microphone", "recording", "listener", "me", "i", "whole clip"];
        var phrase_appears = 0;
        var rec_appears = 0;
        check = function(phrase) {
            return ans.value.toLowerCase().match(new RegExp("\\b" + phrase + "\\b"));
        };
        for (var i = 0; i < no_no_words.length; i++) {
            if (check(no_no_words[i])) {
                phrase_appears = 1;
            }
        }
        for (var i = 0; i < rec_words.length; i++) {
            if (check(rec_words[i])) {
                rec_appears = 1;
            }
        }
        if (ans.value.toLowerCase().startsWith("this")) {
            rec_appears = 1;
        }

        if (audio.played.length == 0) {
            alert("Please listen to the audio before submitting.");
            audio.focus();
            event.preventDefault();
        } else if (audio.played.end(0) - audio.played.start(0) != audio.duration && (audio.played.end(0) != audio.duration || audio.played.start(0) != 1)) {
            alert("Please listen to the whole audio before submitting.");
            audio.focus();
            event.preventDefault();
        } else if (phrase_appears) {
            alert("Please do not use the phrases given in the instructions.");
            ans.focus();
            ans.select();
            event.preventDefault();
        } else if (rec_appears) {
            alert("Please do not refer to yourself or the recording in your description, describe only what is happening in the audio.");
            ans.focus();
            ans.select();
            event.preventDefault();
        } else if (ans.value.replace('"', "___") != ans.value) {
            alert("Please do not transcribe the audio.");
            ans.focus();
            ans.select();
            event.preventDefault();
        } else if (word_count < 8) {
            alert("Please make sure the description has at least 8 words.");
            ans.focus();
            event.preventDefault();
        } else if (word_count > 20) {
            alert("Please make sure the description has no more than 20 words.");
            ans.focus();
            event.preventDefault();
        } else if (ans.value.match(/\.\s*[a-z]/gi)) {
            alert("Please make sure the description only has one sentence.");
            ans.focus();
            event.preventDefault();
        }
    });
});
</script>
<script type="text/javascript">
(function(){
    var ut_id = "${collapse_token}";
    if (UTWorkerLimitReached(ut_id)) {
    // Instructions expand/collapse
    var content = $('#instructionBody');
    var trigger = $('#collapseTrigger');
    trigger.attr("href", "javascript:void(0);");
    content.hide();
    $('.collapse-text').text('(Click to expand)');
    trigger.click(function(){
      content.toggle();
      var isVisible = content.is(':visible');
      if(isVisible){
        $('.collapse-text').text('(Click to collapse)');
      }else{
        $('.collapse-text').text('(Click to expand)');
      }
    });
    // end expand/collapse
    }
})();

</script>
<script src="//uniqueturker.myleott.com/lib.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
    var ut_id = "${unique_id}";
if (ut_id){
    if (UTWorkerLimitReached(ut_id)) {
        document.getElementById('mturk_form').style.display = 'none';
        document.getElementsByTagName('body')[0].innerHTML = "You have already completed 100 of these HITs. Please click 'Return HIT' to avoid any impact on your approval rating.";
    }
}
})();

</script><!-- Close internal javascript -->