SpAM-task/index.html at master · InterdisciplinaryAffectiveScienceLab/SpAM-task · 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
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Word Similarity</title>
    <meta name="description" content="Measure participant's association between words">

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Source+Serif+Pro" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Using Konva.js Canvas library for drawing-->
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js" defer></script>
    <script src="js/jquery-3.3.1.min.js" defer></script>
    <script src="js/jquery.csv.min.js" defer></script>
    <script src="js/script.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous" defer></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous" defer></script>

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
    <div id="configScreen" class="container h-100">

        <div class="row justify-content-center mt-5 mb-5">
            <h1>Word Similarity</h1>
        </div>

        <div class="row h-100 justify-content-center">
            <form>
                <div class="form-group row">
                    <label class="btn btn-primary" for="configUpload">
                        <input id="configUpload" type="file" accept="text/csv" style="display:none" >
                        Upload configuration CSV
                    </label>
                    <label id="config-name">No config uploaded. Using default.</label>
                </div>
                <div class="form-group row">
                    <label class="btn btn-primary" for="instructionUpload">
                        <input id="instructionUpload" type="file" accept="text/csv" style="display:none" >
                        Upload instructions
                    </label>
                    <label id="instruction-name">No instruction uploaded. Using default.</label>
                </div>
                <div class="form-group row">
                    <input type="text" class="form-control" id="participantId" placeholder="Participant ID">
                </div>
                <div class="form-group row" role="group">
                    <button type="button" class="btn btn-success" id="startButton">
                        Start
                    </label>
                </div>
            <form>
        </div>
    </div>
    <div id="instructionScreen">
        <div id="instructionsContainer">
            <p class="activeInstruction">
Words will appear on the screen. Group similar words close together.
            </p>
            <p>
To move words, simply drag and drop them. Put similar words next to one another, and dissimilar words far apart.
            </p>
            <p>
You can also move multiple words at a time. To select multiple words, simply click on the words you want, or click on the background and drag to select every word in a rectangular area. They will turn green and you will be able to move them together. Click anywhere else to ungroup.
            </p>
            <p>
You will have as much time as you'd like. Click the finish button in the top left to finish.
            </p>
        </div>
        <button type="button" class="btn btn-primary" id="nextButton">Next</button>
        <button type="button" class="btn btn-primary" id="prevButton">Back</button>
     </div>
    <div id="associationScreen">
        <button type="button" class="btn btn-primary" id="doneButton">Finish</button>
        <div id="container"></div>
    </div>
    <div id="doneScreen">
        <h1 class="text-center mt-3 mb-3">
            Thank you
        </h1>
        <div class="text-center">
            <a class="btn btn-primary" role="button" id="screencap" download="screencap.png">screencap</a>
            <a class="btn btn-primary" role="button" id="pairwise" download="pairwise.csv">pairwise data</a>
        </div>
        <br>
        <div class="text-center">
            <button type="button" class="btn btn-success" role="button" id="restart">Run New Experiment</button>
        </div>
</body>