-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (147 loc) · 5.51 KB
/
index.html
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
147
148
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>User Evaluation Form</title>
<link type="text/css" rel="stylesheet" href="./form.css">
</head>
<body>
<button type="button" class="collapsible">Tell us what you thought!</button>
<div class="form-wrap">
<form action="/user-evaluation" method="post">
<h1>User Evaluation Form</h1>
<fieldset>
<legend> Context </legend>
<p>
<label for="task-select" class="statement">Which option best describes what you're doing?</label>
<div class="select-wrapper">
<select id="task-select" name="task">
<option value="target-find"> Looking for a specific sound </option>
<option value="browse-for-like"> Browsing the search results for a sound I like</option>
<option value="exploring-freesound"> Exploring what's available in Freesound </option>
</select>
</div>
</p>
</fieldset>
<fieldset>
<legend> Usability </legend>
<ul>
<li>
<p class="statement">The meaning of the filters was clear enough.</p>
<ul class='likert'>
<li>
<input type="radio" name="likert-1" value="strongly_disagree" id="l1-strongly-disagree">
<label for="l1-strongly-disagree">Strongly disagree</label>
</li>
<li>
<input type="radio" name="likert-1" value="disagree" id="l1-disagree">
<label for="l1-disagree">Disagree</label>
</li>
<li>
<input type="radio" name="likert-1" value="neutral" id="l1-neutral">
<label for="l1-neutral">Neither Agree Nor Disagree</label>
</li>
<li>
<input type="radio" name="likert-1" value="agree" id="l1-agree">
<label for="l1-agree">Agree</label>
</li>
<li>
<input type="radio" name="likert-1" value="strongly_agree" id="l1-strongly-agree">
<label for="l1-strongly-agree">Strongly agree</label>
</li>
</ul>
</li>
<li>
<p class="statement">Adjusting the filters had a clear and predictable impact on the search results.</p>
<ul class='likert'>
<li>
<input type="radio" name="likert-2" value="strongly_disagree" id="l2-strongly-disagree">
<label for="l2-strongly-disagree">Strongly disagree</label>
</li>
<li>
<input type="radio" name="likert-2" value="disagree" id="l2-disagree">
<label for="l2-disagree">Disagree</label>
</li>
<li>
<input type="radio" name="likert-2" value="neutral" id="l2-neutral">
<label for="l2-neutral">Neither Agree Nor Disagree</label>
</li>
<li>
<input type="radio" name="likert-2" value="agree" id="l2-agree">
<label for="l2-agree">Agree</label>
</li>
<li>
<input type="radio" name="likert-2" value="strongly_agree" id="l2-strongly-agree">
<label for="l2-strongly-agree">Strongly agree</label>
</li>
</ul>
</li>
<li>
<p class="statement">The meaning of the barplots over each filter was clear and helped adjusting them.</p>
<ul class='likert'>
<li>
<input type="radio" name="likert-3" value="strongly_disagree" id="l3-strongly-disagree">
<label for="l3-strongly-disagree">Strongly disagree</label>
</li>
<li>
<input type="radio" name="likert-3" value="disagree" id="l3-disagree">
<label for="l3-disagree">Disagree</label>
</li>
<li>
<input type="radio" name="likert-3" value="neutral" id="l3-neutral">
<label for="l3-neutral">Neither Agree Nor Disagree</label>
</li>
<li>
<input type="radio" name="likert-3" value="agree" id="l3-agree">
<label for="l3-agree">Agree</label>
</li>
<li>
<input type="radio" name="likert-3" value="strongly_agree" id="l3-strongly-agree">
<label for="l3-strongly-agree">Strongly agree</label>
</li>
</ul>
</li>
</ul>
</fieldset>
<fieldset>
<legend> Overall Impression: </legend>
<p class="statement" id="relevance-section">
Pick the 3 filters that were most relevant/useful for you particular use case and query (drag & drop, order does not matter):
<div id="relevance-wrapper">
<ul class="cols" id="available">
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>
<ul class="cols" id="selected">
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>
</div>
</p>
<p class="statement">
<label for="liked-text">Describe the things you liked about the proposed filtering system:</label>
<textarea id="liked-text" name="liked" placeholder="Enter text"></textarea>
</p>
<p class="statement">
<label for="disliked-text">Describe the things you did NOT like about the proposed filtering system:</label>
<textarea id="disliked-text" name="disliked" placeholder="Enter text"></textarea>
</p>
<p class="statement">
<label for="general-comments">Please type here any other comments you might have...</label>
<textarea id="general-comments" name="comments" placeholder="Enter text"></textarea>
</p>
</fieldset>
<p>
<button type="submit">Submit Feedback</button>
</p>
</form>
</div>
</body>
<script src="./form.js"></script>
</html>