bsl-random-word/fingerspelling.html at main · programmingpixels/bsl-random-word · 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
<!DOCTYPE html>
<html>

<head>
    <title>BSL helpers</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <script type="module" src="Fingerspelling.js"></script>
</head>


<section>
    <div class="container">

        <h2 class="title is-2"><a href="flashcards.html">Go to Flashcards</a></h2>

        <div id="begin" class="columns is-flex is-centered">
            <div class="column is-full has-text-centered is-fullwidth">
                <button class="button is-primary is-size-1 " onclick="main()">Begin/ New word</button>
            </div>
        </div>

        <div id="gameControls" class="columns is-flex is-centered" style="display:none;">
            <div class="columns is-fullwidth">
                <button class="column button is-primary is-size-3 " onclick="fingerspellWord()">Repeat</button>
            </div>
        </div>


        <div class="columns is-flex is-centered">
            <div class="column is-half">
                <div class="control">
                    Seconds to show each sign for:
                    <input id="timeBetweenSigns" class="column input is-primary " type="text" value="0.5" />
                </div>
            </div>
        </div>

        <div class="columns is-flex is-centered">
            <div class="column is-half">
                <div class="control">
                    Letters you'd like included:
                    <input id="favouriteLetters" class="column input is-primary " type="text" value="" />
                </div>
            </div>
        </div>

        <div class="columns is-flex is-centered">
            <div class="column is-half">
                <div class="control">
                    Answer (pressing enter in this box will repeat the word):
                    <input id="answerbox" class="column input is-primary " type="text" onkeyup="answerboxUpdated()"
                        autocomplete="off" disabled />
                </div>
            </div>
        </div>

        <div class="columns is-flex is-centered">
            <div class="column is-half">
                <img id="imageLetter" src="" />
            </div>
        </div>
    </div>

    </div>
    </div>

    <div id="warmup">
        <!-- make sure the client has all the images -->
        <div class="column">
            <img id="imageA" src="fingerspelling/a.webp" />
            <img id="imageB" src="fingerspelling/b.webp" />
            <img id="imageC" src="fingerspelling/c.webp" />
            <img id="imageD" src="fingerspelling/d.webp" />
            <img id="imageE" src="fingerspelling/e.webp" />
            <img id="imageF" src="fingerspelling/f.webp" />
            <img id="imageG" src="fingerspelling/g.webp" />
            <img id="imageH" src="fingerspelling/h.webp" />
            <img id="imageI" src="fingerspelling/i.webp" />
            <img id="imageJ" src="fingerspelling/j.webp" />
            <img id="imageK" src="fingerspelling/k.webp" />
            <img id="imageL" src="fingerspelling/l.webp" />
            <img id="imageM" src="fingerspelling/m.webp" />
            <img id="imageN" src="fingerspelling/n.webp" />
            <img id="imageO" src="fingerspelling/o.webp" />
            <img id="imageP" src="fingerspelling/p.webp" />
            <img id="imageQ" src="fingerspelling/q.webp" />
            <img id="imageR" src="fingerspelling/r.webp" />
            <img id="imageS" src="fingerspelling/s.webp" />
            <img id="imageT" src="fingerspelling/t.webp" />
            <img id="imageU" src="fingerspelling/u.webp" />
            <img id="imageV" src="fingerspelling/v.webp" />
            <img id="imageW" src="fingerspelling/w.webp" />
            <img id="imageX" src="fingerspelling/x.webp" />
            <img id="imageY" src="fingerspelling/y.webp" />
            <img id="imageZ" src="fingerspelling/z.webp" />
            <img id="imageFinishFlag" src="fingerspelling/finishflag.webp" />
        </div>
    </div>
</section>

</html>