-
Notifications
You must be signed in to change notification settings - Fork 0
/
tutorial.html
96 lines (87 loc) · 2.86 KB
/
tutorial.html
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
<div class="row">
<div class="col-md-12">
<div id="modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal header -->
<div class="modal-header">
<h3>How to transcribe our audio files</h3>
</div>
<!-- Step 1 of the tutorial -->
<div id="0" class="modal-body" style="display:none">
<p>
Transcription of our audio is pretty straightforward.
</p>
<p>
All we want you to do, is to listen to the audio snippet you
are presented with (10 seconds) and check this against the
automatically derived transcription.
</p>
<p>
If you spot an error, could you put your corrections in the transcription box.
</p>
</div>
<!-- Step 2 of the tutorial -->
<div id="1" class="modal-body" style="display:none">
<p>
The audio player has very simple controls.
</p>
<ul>
<li>Rewind</li>
<li>Play and pause</li>
<li>Fast forward</li>
<li>Mute</li>
</ul>
<p>
The audio will not play until you ask it to do so. Stop it
whenever you need to do so and rewind and fast forward as required.
Do not worry if you cannot transcribe everything. Each task
will be worked on by several people and then these transcriptions
will be merged via computing scripts for final curatorial approval.
</p>
<p>
Thank you for participating. Your help means a lot to us all.
</p>
</div>
<!-- End of stepped modal body -->
<!-- Modal footer -->
<div class="modal-footer">
<a id="prevBtn" href="#" onclick="showStep('prev')"
class="btn btn-default">Previous</a>
<a id="nextBtn" href="#" onclick="showStep('next')"
class="btn btn-success">Next</a>
<a id="startContrib" data-dismiss="modal"
href="../deathOnTheNile/newtask" class="btn btn-primary"
style="display:none"/><i class="glyphicon glyphicon-thumbs-up"></i>
Let's start!</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var step = -1;
function showStep(action) {
$("#" + step).hide();
if (action == 'next') {
step = step + 1;
}
if (action == 'prev') {
step = step - 1;
}
if (step == 0) {
$("#prevBtn").hide();
}
else {
$("#prevBtn").show();
}
if (step == 1 ) {
$("#nextBtn").hide();
$("#startContrib").show();
}
$("#" + step).show();
}
showStep('next');
$("#modal").modal('show');
</script>