/
index.kit
432 lines (373 loc) · 24.5 KB
/
index.kit
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
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
<!-- $page = home -->
<!-- $page_title = Blow Minds. Teach STEM. -->
<!-- $fb_title = Blow Minds. Teach STEM. -->
<!-- $description = America isn't the sharpest bulb in the knife shed when it comes to math and science. We can change that with more excllent STEM teachers. Watch a cartoon, take a quiz, and change the future! -->
<!-- $share_image = share-image-facebook.png -->
<!-- $youtubeid = WxVO_5RGM4A -->
<!-- @import "_partials/_header.kit" -->
<!-- @import "_partials/_nav.kit" -->
<section id="video-container">
<div id="video-container-inner" class="row">
<div id="video-wrap">
<div id="video-click" class="video-click" href="http://youtu.be/<!-- $youtubeid -->" data-video-id="<!-- $youtubeid -->">
<div id="playbutton" class="pink taller">
<span>Watch</span> Our Mind-Blowing Cartoon
</div>
<div id="the-video" style="display:none">
<div class="closebutton">×</div>
<div id="the-video-inner"></div>
</div>
</div>
<img id="chalkboard" src="img/chalkboard.png"/>
<img id="chalkboard-mobile" src="img/chalkboard-mobile.png"/>
</div>
</div>
</section>
<script type="text/javascript">
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
}
</script>
<section id="quizinart-container">
<div class="row">
<div class="column large-10 large-centered">
<div id="quizinart-inner-border">
<div id="quizinart-share-buttons" class="largescreen">
<a onclick="return fbs_click('http://bit.ly/blowminds')" href="#"><img id="quizinart-facebook" src="img/share-facebook-blue.svg"></a>
<span class="tweet" data-tweet="Take the best internet quiz on the internet. So good it could lead to a better internet!" data-hashtags="BlowMinds,TeachSTEM" data-tweeturl="http://bit.ly/blowminds"></span>
<a class="tweet-this" alt="Twitter Share" target="_blank"><img id="quizinart-twitter" src="img/share-twitter-blue.svg"></a>
<span class="tumblr-share" data-title="<!-- $page_title -->" data-description="<!-- $description -->" data-url="http://bit.ly/blowminds"></span>
<a class="tumblr-this" alt="Tumblr Share" target="_blank"><img id="quizinart-tumblr" src="img/share-tumblr-blue.svg"></a>
</div>
<div id="quizinart-inner">
<div id="quizinart-intro" class="question-container active">
<h2 id="quizinart-title">Wondering what to do with your life? Need meaningful guidance? There’s an internet quiz for that!</h2>
<h3 id="quizinart-subtitle">Take Our 100% Unbiased Career Assessment Exam</h3>
<h4 id="quizinart-sub-subtitle">(Now With More Algorithms!)</h4>
<a id="quizinart-start-button" class="button">Let’s Begin</a>
</div>
<div id="question-1" class="question-container">
<label class="question-number">Question 1/9</label>
<div class="question-header">What’s a good first question for a life-changing internet quiz?</div>
<div class="quizinart-selections">
<label class="radio-button-option" data-quip="Good choice. We agree.">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
What’s a good first question for a life-changing internet quiz?
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Yo, what’s goin’ on?
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
How many fingers am I holding up?
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Do you subscribe to supersymmetry or multiverse theory for explaining the nature of the universe?
</label>
</div>
</div>
<div id="question-2" class="question-container">
<label class="question-number">Question 2/9</label>
<div class="question-header">Would you consider yourself a patient person?</div>
<div class="quizinart-selections">
<div class="button-container not-under-paragraph">
<label class="selection-option button yes">Yes</label>
<label class="selection-option button no" data-quip="What? Somebody on the internet who isn't patient? Fine.">No</label>
</div>
</div>
</div>
<div id="question-3" class="question-container">
<label class="question-number">Question 3/9</label>
<div class="question-header">Instead of asking you 16 thinly veiled introvert/extrovert questions, we’ll trust you to know yourself and cut to the chase: Are you an introvert or an extrovert?</div>
<div class="quizinart-selections">
<div class="button-container not-under-paragraph">
<label class="selection-option button long" data-quip="Thanks, that saved us a lot of time.">Introvert</label>
<label class="selection-option button long" data-quip="Thanks, that saved us a lot of time.">Extrovert</label>
</div>
</div>
</div>
<div id="question-4" class="question-container">
<label class="question-number">Question 4/9</label>
<div class="question-header">What best describes the reasons for your current career track?</div>
<div class="quizinart-selections">
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
A strong desire to positively impact the future.
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Mother and/or Father.
</label>
<label class="radio-button-option" data-quip="Here’s <a href='http://goldmansachs.com/careers' target='_blank'>another site</a> for when you’re done with this one.">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Moneymoneymoneymoneymoney.
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Exhausted all educational opportunities.
</label>
<label class="radio-button-option" data-quip="Yeah, us too.">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Circus clown made offer I couldn’t refuse.
</label>
</div>
</div>
<div id="question-5" class="question-container">
<label class="question-number">Question 5/9</label>
<div class="question-header">What is your opinion of bioluminescence?</div>
<div class="quizinart-selections">
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
A great band.
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Icky.
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Completely mind-blowing and beautiful.
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
That word has a lot of syllables.
</label>
</div>
</div>
<div id="question-6" class="question-container">
<label class="question-number">Question 6/9</label>
<div class="question-header">Which of these activities seems most appealing?</div>
<div class="quizinart-selections">
<label class="radio-button-option" data-quip="Hint: All you need are leafy greens and secrets.">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Iguana whisperer.
</label>
<label class="radio-button-option" data-quip="We hear that’s not only rewarding, but fun!">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Endowing future generations with the gift of knowledge.
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Spreadsheets! I love my job because my employer monitors my online activities, and I love my job!
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Lying on a beach all day (in crippling debt).
</label>
</div>
</div>
<div id="question-7" class="question-container">
<label class="question-number">Question 7/9</label>
<div class="question-header">You’re almost done. Computer screens are:</div>
<div class="quizinart-selections">
<label class="radio-button-option" data-quip="This is where you live? Cuz it’s kinda filthy in here.">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Where I live.
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Really nasty when they get those grease and oil streaks on them.
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Only one of many windows into the world.
</label>
<label class="radio-button-option" data-quip="It’s okay. Breathe. You’re just high. It will pass. Here’s a really easy one to answer:">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
But you are my screen. Why would you ask me what you are? Screen? What’s happening?
</label>
</div>
</div>
<div id="question-8" class="question-container">
<label class="question-number">Question 8/9</label>
<div class="question-header">Which do you prefer?</div>
<div class="quizinart-selections">
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Working with others (like a teacher guiding a roomful of students through a lesson).
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Working alone (as in, for instance, a teacher grading papers or crafting a lesson plan).
</label>
<label class="radio-button-option">
<div class="radio-button-outer"><div class="radio-button-inner"></div></div>
Both (see: a teacher).
</label>
</div>
</div>
<div id="question-9" class="question-container">
<label class="question-number">Question 9/9</label>
<div class="question-header">Final, totally non-leading question: Have you ever taught anybody anything? You know that moment when the light goes on and you’ve literally altered somebody’s brain with the information you’ve shared? That’s pretty cool, right? </div>
<div class="quizinart-selections">
<div class="button-container not-under-paragraph">
<label class="selection-option button yes">Yes</label>
<label class="selection-option button no"><span class="or-no">No</span><span class="or-yes">Yes</span></label>
</div>
</div>
</div>
<div id="processing" class="question-container center-align">
<h3>Science Is Happening...</h3>
<div class="loader"></div>
</div>
<div id="final-statement" class="question-container">
<h3>Our mathnologically advanced supercomputers suggest you try:
<span>Teaching Science, Technology, Engineering, or Math (STEM)</span></h3>
<p>Coincidentally, this site is chock-full of resources to get you started down that path. Man, that is so lucky and convenient for you! Tell the world that this internet quiz is the best internet quiz. Then scroll down to begin your new mind-blowing life as a STEM teacher.</p>
<a class="button large share"><img src="img/share-facebook-blue.svg" alt=""> Share on Facebook</a>
<span class="tweet" data-tweet="I just took a 100% unbiased career assessment exam, and now my future is so clear. Thanks, science!" data-hashtags="algorithms" data-tweeturl="http://bit.ly/blowminds"></span>
<a class="button large share tweet-this"><img src="img/share-twitter-blue.svg" alt=""> Share on Twitter</a>
</div>
</div> <!-- #quizinart-inner -->
</div><!-- #quizinart-inner-border -->
</div>
</div>
</section> <!-- #quizinart-container -->
<section id="tool-handoff">
<div id="tool-handoff-inner" class="row">
<div class="column xlarge-5">
<img id="figure1" src="img/figure1.png" alt="">
</div>
<div class="column medium-10 medium-centered xlarge-7 xlarge-uncentered">
<h3>STEM Majors Stop Here! Everybody Else Keep Scrolling.</h3>
<p>If you are/were a science, tech, engineering, or math major, you can harness your knowledge and use it to blow minds. Become a teacher and help us create a super genius brain army* to unleash on the future.</p>
<div class="clearfix">
<a id="handoff-button" href="teach.html" target="_parent" class="button taller">See If Teaching Is Maybe Possibly For You</a>
</div>
<p class="caveat">*Cerebrally endowed super squadrons also acceptable.</p>
</div>
</div>
</section> <!-- #tool-handoff -->
<section id="learn-more-outer">
<div id="learn-more-inner" class="row">
<h2 id="section-3-sub-header" class="column">You can help in this mission to grow smarter as a nation and stop us from getting bullied by that smarty-pants Finland.</h2>
<div id="learn-more-content">
<div class="column large-4">
<h3>Honestly, Every Share Makes A Tangible Difference</h3>
<p>The goal is to recruit 100,000 new STEM teachers. Even without a math degree, you have to admit that’s a big number. Fortunately, every
<a onclick="return fbs_click('http://bit.ly/blowminds')" href="#">Facebook post</a> and
<span class="tweet" data-tweet="Who has two thumbs and supports a future where more people #TeachSTEM? (I'm pointing at myself)" data-hashtags="BlowMinds" data-tweeturl="http://bit.ly/blowminds"></span>
<a class="tweet-this">tweet</a>
increases the likelihood a future teacher discovers this site.</p>
</div>
<div class="column large-4">
<h3>Who Do You Know That Could Be A Great Teacher?</h3>
<p>Do you know anybody majoring in a STEM field, or who recently graduated with a degree in one of those subjects? Are they wondering what to do next? Send them this site, then never let them forget how you changed their life for the better.</p>
</div>
<div class="column large-4">
<h3>Oh, And One Other Thing: Go Hug A Teacher</h3>
<p>Everybody’s had a teacher, even if it was the wolf that taught you to howl and never open suspicious emails. And chances are, no matter your age, you still know a teacher or two. These people are heroes, paying it forward for all of humanity. <a href="http://blowmindsteachstem.tumblr.com/post/97592449480" target="_blank">Go on and hug one already!</a> They deserve it.</p>
</div>
<div class="column center-align">
<a id="learn-button" href="learn.html" target="_parent" class="button taller wider">The President Told Us To Tell You To Learn More</a>
</div>
</div>
</div>
</section>
<section id="playground-outer">
<div id="playground-inner" class="row">
<h3 id="section-4-header" class="section-header">Make A GIFference. Share Some STEM Teaching Love.</h3>
<ul class="large-block-grid-3">
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/1_boom.png" alt="" data-animated="img/gifs/1_boom.gif">
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/2_aging.png" alt="" data-animated="img/gifs/2_aging.gif">
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/3_hug.png" alt="" data-animated="img/gifs/3_hug.gif">
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/4_code.png" alt="" data-animated="img/gifs/4_code.gif">>
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/5_runner.png" alt="" data-animated="img/gifs/5_runner.gif">
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/6_jane.png" alt="" data-animated="img/gifs/6_jane.gif">>
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/7_future.png" alt="" data-animated="img/gifs/7_future.gif">
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/8_rollerskate.png" alt="" data-animated="img/gifs/8_rollerskate.gif">
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
<li class="playground-gif effects">
<div class="img-wrap">
<img class="static" src="img/gifs/9_fish.png" alt="" data-animated="img/gifs/9_fish.gif">
<div class="img-share">
<a href="http://www.facebook.com" alt="Facebook Share"><img src="img/share-facebook-blue.svg" alt="Facebook Share Image"></a>
<a href="http://www.twitter.com" alt="Twitter Share"><img src="img/share-twitter-blue.svg" alt="Twitter Share Image"></a>
<a href="http://www.tumblr.com" alt="Tumblr Share"><img src="img/share-tumblr-blue.svg" alt="Tumblr Share Image"></a>
</div>
</div>
</li>
</ul>
<div class="column center-align">
<a id="fun-button" href="http://blowmindsteachstem.tumblr.com/" target="_parent" class="button large taller blue">Like Fun Internet Stuff? There’s More.</a>
</div>
</div>
</section>
<!-- @import "_partials/_footer.kit" -->