Blog 6: NY Times Interactive Quiz

I decided to do the new york times multimedia quiz on how people talk. It was hard for me to figure out what actually created certain actions looking at the jQuery. However, I believe I definitely know what this does:

function surveyEnd() {

// fade out survey holder

$c.find(‘.quiz-container’)

.fadeTo(500, 0, function() {

$(this).hide();

// fade in the map holder

$(‘.map-container’).fadeTo(650,1);

})

// bring back map preloader

$c.find(‘#map-preloader’).show();

// get answer indices

$.each(responses, function(k,v) {

if ( v == ‘1’ )

answers.push(k);

})

This should be what happens when the survey ends and it fades out. The box goes away and a big map fades in. The .fadeTo is very simple but it makes for a clean switch. It is not distracting at all.

survey end and restuls
survey end and restuls

I wish I knew what the jquery was for the actual quiz. When the cursor goes over a possible answer, it is underlined and when it’s clicked it turns green and an X appears in the box. Once you hit next, a map will pop out on the side showing you a specific result for that answer. I wasn’t able to find it but I thought that was a simple, non distracting way to have answers be selected. Hopefully someone can help me figure this out.

Quiz
Quiz
Advertisements

One thought on “Blog 6: NY Times Interactive Quiz

  1. I think you picked an interesting page to comment. I’ve done this survey before (totally out of curiosity). The survey looks great, but I’ve never considered how it was coded until now.

    I like the code you chose to look into and I think it’s a very useful one. The function helps to create a smooth fade-in effect. I also wish that I knew what the jquery was for the actual quiz, and what makes the map turn into different colors according to the result. Sometimes I feel it’s hard to know what codings to analyze, as there is no specific correlation shown in the inspector to tell us how a certain function is coded, which could be a bit frustrating.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s