index.html

<!-- For help on using this template, see the blog post: https://blog.mturk.com/editing-the-survey-link-project-template-in-the-ui-7c75285105fb#.py7towsdx -->
<!-- HIT template: SurveyLink-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="SurveyLink">

    <!-- Instructions -->
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <strong>Survey Agreement Form</strong>
                </div>
                <div class="panel-body">

                    <!-- Please place the consent form here-->
                    <p>PLEASE PLACE THE CONSENT FORM HERE</p>

                    <div style="text-align: center;">
                        <input type="checkbox" id="consent" value="accept">
                        <font size="4"> <strong> I accept the terms.</strong> </font>
                    </div>
                </div>
            </div>
            <p>Select the link below to complete the survey. At the end of the survey,
                you will receive a code to paste into the box below to receive credit for taking our survey.</p>
            <p> <strong>Make sure to leave this window open as you complete the
                    survey.</strong> When you are finished, you will return to this page to paste
                the code into the box.</p>
        </div>
    </div>
    <!-- End Instructions -->
    <br>
    <!-- Survey Link Layout -->
    <div class="row" id="workContent">
        <div class="col-xs-12 col-md-6 col-md-offset-3">
            <!-- Content for Worker -->
            <table class="table table-condensed table-bordered">
                <colgroup>
                    <col class="col-xs-4 col-md-4" />
                    <col class="col-xs-8 col-md-8" />
                </colgroup>
                <tbody>
                    <tr>
                        <td><label>Survey link:</label></td>
                        <td>
                            <div id="urlToSurvey">
                                Please accept the above terms first.
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- End Content for Worker -->

            <!-- Input from Worker -->
            <div class="form-group"><label for="surveycode">Provide the survey code here:</label> <input
                    class="form-control" id="surveycode" name="surveycode" placeholder="e.g. 123456" required=""
                    type="text" /></div>
            <!-- End input from Worker -->
        </div>
    </div>
    <!-- End Survey Link Layout -->
</section>

<!-- Please note that Bootstrap CSS/JS and JQuery are 3rd party libraries that may update their url/code at any time. Amazon Mechanical Turk (MTurk) is including these libraries as a default option for you, but is not responsible for any changes to the external libraries -->
<!-- External CSS references -->
<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;
    }

    .image {
        margin-bottom: 15px;
    }

    /* 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>
<!-- Close internal style sheet -->

<!-- External JS references -->
<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>
    const checkAcceptance = () => {
        var acceptanceState = consent.checked;
        var linkToSurvey = document.getElementById("urlToSurvey");
        if (acceptanceState) {
            linkToSurvey.innerHTML =
                "<a class=\"dont-break-out\" href=\"http://[example.com/survey345.html] \"target=\"_blank\">http://example.com/survey345.html</a>"
        } else {
            linkToSurvey.innerHTML = "Please accept the the above terms frist.";
        }
    }

    let consent = document.getElementById("consent");
    consent.addEventListener("change", checkAcceptance);
</script>
<!-- Close internal javascript -->