forked from camillet/OAMatchQuiz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
352 lines (311 loc) · 8.68 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="vendor/dombars.min.js"></script>
</head>
<body>
<style type="text/css">
.clearfix:after {
content: "";
display: table;
clear: both;
}
.quiz {
width:746px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
}
.question:after {
content: "";
display: table;
clear: both;
}
.question h1 {
text-align: center;
background:#ffffff;
font-size: 50px;
font-weight:bold;
padding:10px 0px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
color:#ffffff;
text-shadow: 2px 2px 2px #000;
}
.answers {
margin-left: -15px;
}
.answer {
width:365px;
min-height:150px;
float:left;
background:#F9F9F9;
margin:0px 0px 10px 15px;
color:#FFF;
box-shadow: 1px 1px 1px #AAA;
}
.answer:hover {
background: #EEE;
}
.answer.selected {
background:rgb(255, 255, 112);
}
.answer .wrapper {
margin:20px;
}
.answer .wrapper .table {
display: table;
width:100%;
}
.answer .text {
text-shadow: 2px 2px rgba(0,0,0,0.4);
box-shadow: 1px 1px 1px #AAA;
font-weight:900;
text-align: center;
background:#FF7B03;
height: 90px;
font-size: 29px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
display:table-cell;
vertical-align:middle;
}
.answer .checkbox {
height: 20px;
width:20px;
background:#FFF;
float:right;
margin:0px 20px 10px 0px;
box-shadow: 1px 1px 2px #000;
position: relative;
}
.answer.selected .checkbox:before {
color:#000;
font-size:40px;
content:"\2713\0020";
position: absolute;
top:-15px;
left:-5px;
}
.result {
display:none;
}
.result.selected {
display:block;
}
.result .wrapper {
padding:50px;
border:1px solid #AAA;
}
.result .wrapper:after {
content: "";
display: table;
clear: both;
}
.result .title {
margin-bottom:20px;
}
.result .mainImage {
float:left;
margin-right: 30px;
}
.result p {
line-height: 1.5em;
margin:0px;
}
</style>
<script id="quiz_template" type="text/x-handlebars-template">
<div class="quiz">
<div class="questions">
{{{outlet 'questions'}}}
</div>
<div class="results">
{{{outlet 'results'}}}
</div>
</div>
</script>
<script id="question_template" type="text/x-handlebars-template">
<div class="question" >
<h1 style="background:{{color}}">{{{title}}}</h1>
<div class="answers">
{{{outlet 'answers'}}}
</div>
</div>
</script>
<script id="answer_template" type="text/x-handlebars-template">
<div class="answer {{#if selected}}selected{{/if}}" >
<div class="wrapper">
<div class="table">
<div class="text" style="background:{{parent.color}}">
{{text}}
</div>
</div>
</div>
<div class="footer">
<div class="checkbox"></div>
</div>
</div>
</script>
<script id="result_template" type="text/x-handlebars-template">
<div class="result {{#if selected}}selected{{/if}}" >
<div class="wrapper">
<div class="title">{{parent.title}}</div>
<p>{{text}}</p>
</div>
</div>
</script>
<script type="text/javascript" src="PersonalityQuizzer.js"></script>
<script type="text/javascript">
var quiz = new PersonalityQuizzer();
quiz.set("title","What Should I do for Open Access Week?")
quiz.addQuestion({
color: "#50C5CC",
title: "How much experience do you have working on open access week activities?",
answers: [
{
text: "None",
result: 1
},
{
text: "Low",
result: 2
},
{
text: "Medium",
result: 3
},
{
text: "High",
result: 4
},
]
});
quiz.addQuestion({
color: "#8ADAFF",
title: "Which audience are you the most interested in reaching?",
answers: [
{
text: "Faculty or Researchers",
result: 1
},
{
text: "Students",
result: 2
},
{
text: "Librarians or Colleagues",
result: 3
},
{
text: "Public or Wide Audience",
result: 4
},
]
});
quiz.addQuestion({
color: "#FFC14A",
title: "Choose the strengths that best describe you.",
answers: [
{
text: "Connecting and Collaborating",
result: 1
},
{
text: "Enthusiasm and Experimenting",
result: 2
},
{
text: "Knowledge and Expereince",
result: 3
},
{
text: "New Ideas and Quick Learning",
result: 4
},
]
});
quiz.addQuestion({
color: "#FFD86C",
title: "How much do you partner with others for open access week?",
answers: [
{
text: "It's mostly me",
result: 1
},
{
text: "Primarily me, a few colleagues",
result: 2
},
{
text: "It's a team effort!",
result: 3
},
{
text: "Collaborate with external partners",
result: 4
},
]
});
quiz.addQuestion({
color: "#B4B4B4",
title: "What kind of materials do you have access to now?",
answers: [
{
text: "None",
result: 1
},
{
text: "Pre-made items from organizations",
result: 2
},
{
text: "A budget from my organization",
result: 3
},
{
text: "No materials, but help from others",
result: 4
},
]
});quiz.addQuestion({
color: "#A1A1A1",
title: "What kind of activity are you interested in working on the most?",
answers: [
{
text: "Virtual",
result: 1
},
{
text: "Workshops",
result: 2
},
{
text: "Activism or Advocacy",
result: 3
},
{
text: "Events",
result: 4
},
]
});
quiz.addResults([
{
id: 1,
text: "You are a New Natalia!You might be new new to open advocacy, but your new ideas and enthusiasm to celebrate Open Access Week is inspiring! If you are organizing outreach and events primarily alone, you will needs materials and ideas to raise awareness at your institution. Suggested activities for New Natalias: social media campaign, film screening and discussion or sending factsheets. Resources for New Natalia: 100 Stories of Impact, The Internet's Own Boy (film and background), factsheets and other resources."
},
{
id: 2,
text: "You are an Amped Amal!You may be thrilled at the success of last year, and want to grow your institution’s Open Access Week events this year! You might primarily be organizing the week alone, but would like to involve colleagues in planning. An Amal might their zeal and ability to experiment to get more faculty engagement with the institutional repository. With solid experience under your belt, all you need is more resources and collaborators to break your previous record. Suggested activities for Amped Amal: an Upload-a-thon with department liaisons, a workshop with trivia night, or a meeting with with administration to advance open. Resources: workshop slidedeck, trivia ideas, quiz questions, upload-a-thon email template and talking points for administration."
},
{
id: 3,
text: "You are a Growing Gene! With the experience, knowledge, and resources of a seasoned advocate it may be your goal to grow Open Access Week and produce more tangible advocacy results throughout the year. You may be an advocate in a well-developed department at a research-intensive institution that offers you a small budget. You're most likely collaborating with a handful of very supportive colleagues to plan Open Access week events this year. Consider targeting a new audience, such as students, for wider impact. Suggested activities for Growing Genes: panel of faculty and students, invited speakers, discuss a resolution with administration, request student organizations to sign the Right to Research resolution or make a statement in support of open. Resources for Growing Genes: Right to Research brochures, resolution language, talking points for administration, and the Open Speakers database."
},
{
id: 4,
text: "You are a Connected Cate! Building relationships and coalitions is your strength! It's possible you live in a city with multiple institutions and organizations interested in Open Access. You’d like to take these connections and work together on larger events for this Open Access Week. If you are hoping to leverage recent conversations about open to create taskforces with deliverables during Open Access Week, here is a place to start. Suggested activities for Connected Cates: user support and training on tools for open, meeting with political officials to discuss policy or conducting multiple workshops across institutions. Resources for Connected Cates: talking points for administrations, workshop, edit-a-thons, data day training materials, doodle and sched for coordinating events."
},
]);
</script>
</body>
</html>