userstudy/index.html at main · JiewenChan/userstudy · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Study</title>
    <script>
    document.write('<link rel="stylesheet" href="style.css?v=' + Date.now() + '">');
    </script>
</head>
<body>
    <div class="video-container">
        <div id="images"></div>
    </div>
    <br>
    <div style="position: relative;display: inline-block;">
        <form>
        <fieldset id="question" style="width:600px;">
            <legend><b><font size="4" face="Comic Sans MS" id="text_prompt"></font></b></legend>
            <div id="questions"></div>
        </fieldset>
        </form>

        <div class="navigation-container">
            <button id="prev_button" onclick="prevPage()">PREV</button>
            <p id="num_page"></p>
            <button id="next_button" onclick="nextPage()">NEXT</button>
        </div>
    </div>


    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="vendor/animsition/js/animsition.min.js"></script>
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/select2/select2.min.js"></script>
    <script src="vendor/daterangepicker/moment.min.js"></script>
    <script src="vendor/daterangepicker/daterangepicker.js"></script>
    <script src="index.js"></script>
    <script>
        now = 0

        questions = [
            "Which voxel art version most clearly and prominently represents abstract details, such as facial features, clothing, and textures?",
            "Which version looks most visually appealing as a voxel art character, like something you might see in Minecraft or a stylized game?"
        ]
        num_of_questions = questions.length

        form_url = "https://docs.google.com/forms/d/1F9-Li-z43Kykk7uPL_U4KoBQKSJxeBvLsUNQX4--YJ8/formResponse?"

        username_entry = "entry.1926733457"
        entry_list = [
            ["entry.2125490581", "entry.2080099033"],
            ["entry.1372537838", "entry.472180442"],
            ["entry.879584889", "entry.1192493797"],
            ["entry.1524869044", "entry.1553191529"],
            ["entry.277023299", "entry.178317512"],

            ["entry.545691709", "entry.2122281902"],
            ["entry.1324347345", "entry.1468420399"],
            ["entry.1803416582", "entry.258372846"],
            ["entry.777412838", "entry.59955615"],
            ["entry.2051570683", "entry.1996689856"],

            ["entry.2133676184", "entry.955208890"],
            ["entry.1766930993", "entry.65481457"],
            ["entry.2146775832", "entry.812424855"],
            ["entry.280368547", "entry.910904533"],
            ["entry.793893094", "entry.2076724073"],

            ["entry.126578552", "entry.378206762"],
            ["entry.1782458395", "entry.3838315"],
            ["entry.671283456", "entry.1649809104"],
            ["entry.921939832", "entry.456987409"],
            ["entry.2124992845", "entry.164383548"],

            ["entry.460258273", "entry.1481215830"],
            ["entry.1304365754", "entry.1108937229"],
            ["entry.1717149641", "entry.1422318090"],
            ["entry.45496290", "entry.1765172097"],
            ["entry.1881969669", "entry.1858027944"],

            ["entry.548360291", "entry.47337527"],
            ["entry.1161446232", "entry.2055038896"],
            ["entry.2125445030", "entry.1409270125"],
            ["entry.30140000", "entry.902669447"],
            ["entry.1410083225", "entry.438069592"]

        ]

        data_list = [
            {
                'username': ""
            },
        ]

        input_title = "Input Object"
        obj_title = "Voxel"
        obj_width = 160
        element_type = "image" // video / image
        for(let i=1; i<=30; i++) {

            data_list.push({
                "name": `${i}`,
                "input": `data/${i}/input.png`,
                "data": [
                    {
                        "url": `data/${i}/blen.png`,
                        "value": "blen"
                    },
                    {
                        "url": `data/${i}/in2n.png`,
                        "value": "in2n"
                    },
                    {
                        "url": `data/${i}/voxe.png`,
                        "value": "voxe"
                    },
                    {
                        "url": `data/${i}/ours.png`,
                        "value": "ours"
                    },
                ],
                "Q1": null,
                "Q2": null,
            })
        }
        num_of_selection = data_list[1]['data'].length

        for(let i=1; i<data_list.length; i++) {
            shuffle(data_list[i]['data']);
        }
        renderObjects(now);

        $(document).ready(function(){
            $('#username').keypress(function(e){
                if(e.keyCode==13) {
                    nextPage();
                }
            });
        });

    </script>
    <script type="text/javascript">prohibitpreviouspage();</script>
</body>
</html>