mturk-template/index.html at master · swallace21/mturk-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>test</title>
    <meta name="description" content="mturk task template">
    <meta name="author" content="kimberli">

    <link rel="stylesheet" href="assets/lib/semantic/semantic.min.css">
    <link rel="stylesheet" href="assets/css/overrides.css">
    <script src="assets/lib/jquery/jquery-3.1.1.min.js"></script>
    <script src="assets/lib/semantic/semantic.min.js"></script>
    <script src="assets/js/custom.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/demo_survey.js"></script>
</head>

<body>
<div class="ui container">
    <h1 id="page-title" class="meta-title ui centered dividing header"></h1>
    <div id="instructions" class="ui top aligned centered grid">
        <div class="row">
            <div class="left aligned fourteen wide column">
                <h2>Instructions</h2>
                <p><b class="meta-desc"></b></p>
                <p class="instructions-simple"></p>
                <h3>Guidelines:</h3>
                <ol class="instructions-steps">
                </ol>
                <div id="sample-task">
                    <h3>Sample task:</h3>
                    <div id="instructions-demo"></div>
                </div>
                <div class="ui primary button right floated instruction-button">Continue</div>
            </div>
        </div>
    </div>
    <div class="ui error message subtask" id="hit-not-accepted" style="display:none">You have not yet accepted this HIT. Please accept the HIT before you can see the rest of the task.</div>
    <div id="succesful-submit" class="row" style="display: none; text-align:center">
        <p class="ui header">Thank you for completing the task!</p>
        <div style="background-color: lightgray; display: inline-block; align-items: center; padding: 20px; border-radius: 10px">
            <p>MTurk submit code:</p>
            <h1 class="ui header" id="submit-code"></h1>
        </div>
    </div>
    <div id="experiment" class="ui top aligned centered relaxed grid">
        <div class="row">
            <div class="sixteen wide column">
                <div id="progress-bar" class="ui small olive progress">
                    <div class="bar"></div>
                    <div class="label"></div>
                </div>
            </div>
        </div>
        <!-- vv CUSTOM EXPERIMENT MARKUP GOES HERE vv -->
        <div class="row" id="custom-experiment">
            <h4 class="exp-data">Input data for task</h4>
            <div class="right aligned twelve wide column" id="exp">
                <div class="ui input">
                <input id="exp-input">
                </div>
            </div>
        </div>
        <!-- ^^ CUSTOM EXPERIMENT MARKUP GOES HERE ^^ -->
        <div id="demo-survey" class ="ui top aligned centered grid"></div>
        <div class="middle aligned row">
            <div class="eight wide column">
                <div id="message-field" class="field">
                </div>
            </div>
            <div class="eight wide column">
                <div id="button-row" class="field">
                    <div id="next-button" class="ui primary right floated button">Next</div>
                    <div id="prev-button" class="ui primary right floated button">Prev</div>
                    <div class="ui button right floated instruction-button">Show instructions</div>
                </div>
            </div>
        </div>
        <div class="top aligned row">
            <div class="eight wide column"></div>
            <div class="right aligned eight wide column">
                <div id="final-task-fields" class="ui form">
                    <div id="feedback-field" class="field">
                        <label>
                            Any comments or feedback?
                        </label>
                        <textarea id="feedback-input" rows="2"></textarea>
                    </div>
                    <div id="submit-field" class="field">
                        <div id="submit-button" class="ui green right floated button">Submit</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div class="row">
            <div id="disclaimer-box" class="center aligned fourteen wide column">
                <p class="disclaimer"></p>
            </div>
        </div>
        <div class="row">
            <form id="submit-form" name="submit-form">
            </form>
        </div>
    </div>
</div>
</body>
</html>