audioTranscribe/tutorial.html at master · BritishMuseumDH/audioTranscribe · 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
<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
                    try to transcribe what is being said into the text 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 card 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.
                </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="../middleEastPostcards/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>