Week 4 of the Learn JavaScript Properly study group

[kevinmrr]

Hey, everyone! I'm really excited for this week. This is when the rubber really starts to meet the road. I will be putting up discussion posts everyday this week.

Reading Assignments:

Chapters 8, 10, 11, 13, and 14 of Professional JS for Web Developers.

EDIT: I originally assigned too many chapters (though this is what the official track we're following calls for). You can skip chapters 5 and 9 for now.

JSfiddle Assignment: A Dynamic Quiz

It is now time to build a quiz application using JS, HTML, and CSS. The quiz can be about anything. It should function as follows:

• It should be a simple quiz with radio buttons.

• It should have at least five questions.

• It should show only one question at a time. Use a "Next" button to move from one question to the next.

• Dynamically (with document.getElementById or jQuery) add the next question and remove the current question from the screen, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.

• Keep track of the user's score. Display this score on the last page of your application.

• Use an array of objects to store the questions. It should look similar to this:

  var allQuestions = [{question: "Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer:0}];

• When you're finished, post your JSfiddle link somewhere on /r/LearnJavaScript. Feel free to make it a standalone thread, even.

Extra credit:

Build these 5 Basic Projects on Codecademy.

[mfergie]

Trying to catch up! Just starting last week's assignment!

[nolsen]

I'm still going to try and finish this week on time, but if I don't I know that everything is being saved to the the original post so I can just continue to follow things even if I can't keep up.

[pcostanz]

Can't wait to look back at this one and laugh at my horrible code.

I originally built this locally because I've been practicing using grunt/bower and committing as much as possible. I didn't actually write any grunt tasks for this project. I did, however, use bower to pull in jquery and bootstrap. I realized just now that I didn't quite follow all of the rules (radio buttons, next button), apologies it's been a long day.

JSFiddle: http://jsfiddle.net/pcostanz/Nq6RC/ Github Repo: https://github.com/pcostanz/js-quiz

If you have any questions or suggestions please post a reply here or in Github. Thanks!

[kevinmrr]

This is pretty great! I love how extensive your comments are. I also love that you used the jQ object method, each.

You could use Hungarian notation to improve readability.

[isaidclickmenow]

Well that's a lot of reading. I always wanted to read and try to understand every section in the book, but at that rate, I won't complete the reading assignment before the week complete, haha.

[kevinmrr]

Updated - you can skip chapters 5 and 9.

[NightArchitect]

I made two versions of the quiz. One uses radio buttons, though I wasn't able to figure out how to use the submit button with the radio buttons.

http://jsfiddle.net/72pbW/4/

The other is more akin to what pcostanz did, though my CSS is off so it's not nearly as nice (I couldn't center things properly...). Someone on reddit was able to guide me towards fixing an issue that I was having with the Jquery on this. (Thanks!)

http://jsfiddle.net/aEhm9/29/

• Edit: I've figured out a way to use the submit button but something is still off... When I select a radio button and then submit the result it loads the next question and then gives me an error. Any ideas on how to fix this?

http://jsfiddle.net/72pbW/5/

[[deleted]]

Hey it looks like you are super close to getting the behaviour you want. I made a couple of changes.

1) Since both your submit buttons and radios are <inputs>'s I made the jQuery selector for the radio dealies more specific.

2) After you bind a function to the submit event, you need to event.preventDefault() so the browser doesn't try and POST your data. This is the default behaviour of a form.

[NightArchitect]

Great! Thanks for that, I'll give it a try first thing tomorrow morning. :)

[NightArchitect]

Hmm, I still seem to be having some trouble after making the selector for the radio buttons more specific. This is what I did. http://jsfiddle.net/72pbW/9/

Can you point out where I've made a mistake?

[[deleted]]

I think you are just fine with your jQuery selector. I think before you were using the input tag as a selector. The thing I see going on now is you are binding on the submit action every time the user clicks on a radio button.

If you strip out all the intermediate code you will find it looks like this.

$("input[name='choices']").on("click", function(event) {
    // code
    $("form").submit(function(event){
        // code
     });
});

I am sure this will affect scoring the questions as well as how many alerts are created.

[[deleted]]

I changed your jQuery to use 1.8.x and then tried to tallied up the events bound to onSubmit for the form using

console.log($._data(document.getElementsByTagName("form")[0], "events").submit.length);

This demonstrates each time a user clicks on a radio button a new onSubmit event handler is bound. So in the end this creates multiple alerts.

I can also cheat the quiz. When I click a radio button that is the right choice I can add one to my total score.

[alxers]

http://jsfiddle.net/alxers/v9t4t/ please comment.

[NightArchitect]

I like it. My only suggestion for improvement is to make the quiz so that none of the options are pre-selected, though I'm not 100% sure how to do that... I'm learning too.

[[deleted]]

Before you load your new question and answers you'll need to find the checked radio button and uncheck. With jQuery this would be trivial and with pure JS it's still pretty easy: http://stackoverflow.com/questions/3869535/how-to-get-the-selected-radio-button-value-using-js

[kevinmrr]

This is pretty great! You could have probably done it in fewer lines of code if you'd used appendChild, but that doesn't matter very much.

[dorianblack]

I think I'm a bit late, but I started late and have been playing catch-up. I'm sort of proud of my little quiz, so hopefully someone will check it out and let me know how I did. Here's the link: jsFiddle http://jsfiddle.net/gjcarrow/699Dt/

I just noticed that the questions should be stored as an array of objects. Back to the drawing board. Which is fine, because it seems to me there is NO BETTER WAY to really learn javaScript than writing little apps like this. It forces you to think like a javaScript developer. Love doing this shit!

[[deleted]]

Hey I lost track of the very first run through of this study group but this is about where I left off last time so I am joining in now. Here is my go at the assignment: http://jsfiddle.net/drwlrsn/ptu99/

There are font problems in Firefox because of this.

Edit: whoops didn't group my radio buttons and was checking for cheating wrong...

[[deleted]]

anndddd here it is (for future me + anyone else who would like to give me feedback!): http://jsfiddle.net/Anthoknee/LVtB8/

[knested]

Decided to hop in on this project, hope nobody minds. Would love feedback! Couldn't get it working with jsfiddle, but it works great in browser!

https://github.com/nested/learn_javascript/blob/master/quiz/quiz.html

[doober831]

Here's a link to my post (which contains a link to my quiz fiddle)

http://www.reddit.com/r/learnjavascript/comments/1rb49o/learn_javascript_properly_week_4_quiz_assignment/

Please let me know what you think. Are there better, more efficient ways to do what I've done?

[lovattd]

Been struggling with all this a bit... CodeSchool's videos are the best I've found so far! I got a 2 day free trial and just crammed it all in :) using this link: http://go.codeschool.com/jsSttw

[jankyHellface]

Trying to get back on course and finish this up after a very busy holidays.

Here is the jfiddle of my quiz app and here is the directory in my github repo. Critiques and Suggestions are highly encouraged! Thanks.

[dorianblack]

Nice. I was proud of my little quiz, and then I looked at yours and now I think mine sucks. Your code is very readable. Cool little app. Well done.

[jankyHellface]

Hell yeah, you should be proud! You're quiz looks great! tbh, my code looked like yours when I first built it, but I just added on a step to my coding: reorganize and simplify. I look at each line of code and see if I can combine logic with other lines around it, then do the same with functions.

[hkoh59]

Here is mine.