/firefox.plugin/data/tutorial/tutorial.html - Annotate - GazeTK - Research for Cognitive Interaction

76dd22bd

KevinTaron

<html>

2

<head>

3

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

4

<script src="../lib/jquery/jquery-2.2.4.min.js"></script>

5

<script src="../lib/jquery-ui/jquery-ui.js"></script>

6

<link rel=stylesheet href="../lib/jquery-ui/jquery-ui.css">

7

<script src="tutorial.js"></script>

8

<link rel=stylesheet href="tutorial.css">

9

<title>Blickbrowser - Tutorial OnScreen</title>

10

</head>

11

<body>

12

13

<div id="content" class="tutorial">

14

15

        <div class="container inputcont">

16

                <form action="">

17

                        <h1>Tutorial</h1>

18

19

                        <ol>

20

                                <li>

21

                                        <h2><span class="number">1</span> Text Input</h2>

22

                                        <p>If you gaze over a text-input field you can input text via GAZE. <br>

23

                                        Try it.

24

                                        </p>

25

                                        <input type="text" class="gaze-keyboard" id="keyboard" placeholder="Enter your Text here" data-gaze="true" data-gaze-type="text" data-gaze-model="onscreen">

26

                                </li>

27

                                <li>

28

                                        <h2><span class="number">2</span> Radio Buttons</h2>

29

                                        <p>If you gaze over radio buttons you can switch the selection. <br>

30

                                        Try it.

31

                                        </p>

32

                                        <label data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen">

33

                                                <input type="radio" name="choice1" value="Choice 1"  placeholder="choice1">Choice 1

34

                                        </label><br>

35

                                        <label data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen">

36

                                                <input type="radio" name="choice1" value="Choice 2" placeholder="choice2">Choice 2

37

                                        </label>

38

                                </li>

39

                                <li>

40

                                        <h2><span class="number">3</span> Select Field</h2>

41

                                        <p>If you gaze over a select fiel you can switch the selection. <br>

42

                                        Try it.

43

                                        </p>

44

                                        <select data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen">

45

                                          <option value="choice1">Choice 1</option>

46

                                          <option value="choice2">Choice 2</option>

47

                                          <option value="choice3">Choice 3</option>

48

                                          <option value="choice4">Choice 4</option>

49

                                        </select>

50

                                </li>

51

                                <li>

52

                                        <h2><span class="number">4</span> Checkbox</h2>

53

                                        <p>If you gaze over a checkbox you can check or uncheck the box. <br>

54

                                        Try it.

55

                                        </p>

56

                                        <label data-gaze="true" data-gaze-type="choice" data-gaze-model="onscreen">

57

                                                <input id="checkbox" type="checkbox" name="" value="" >Checkbox

58

                                        </label>

59

                                </li>

60

                        </ol>

61

62

                        <button data-gaze="true" data-gaze-type="action" data-gaze-model="onscreen">Button</button>

63

                </form>

64

65

                <h3> You have clicked the Button: <span class="clicknumber">0</span> times</h3>

66

        </div>

67

68

</div>

69

70

</body>

71

</html>

GazeTK

blinker / firefox.plugin / data / tutorial / tutorial.html @ 76dd22bd