JavaScript Object-Oriented JavaScript (2015) Practice Project User Interface Code

David Clausen
David Clausen
11,403 Points

Awesome Quiz: Share how you did your project!

https://w.trhou.se/0scfqy62xl

Share how you all did your project. You can take a snapshot of your project when you open it from workspaces in the top-right corner, and share the resulting link.

Fork a snapshot to get it on your workspace and preview it!

I think this will be great to see how others did it, ask for critique or someone can look at our examples for some hints too!

3 Answers

Nathaniel Nasarow
Nathaniel Nasarow
10,290 Points

This was quite a tough one for me. I did about half of the program before I got stuck, then started doing some MDN and googling and trying a few things before I moved on to the next video.

https://w.trhou.se/ojduh34ged

So the majority of my code I ended up deleting and using Andrew's code for quite a bit of the program. I was originally using modified code from previous projects, but Andrew's code made a lot more sense and made things simpler over-all. Nevertheless, I did learn quite a bit more about prototyping and inheritance, and especially about putting the questions into the HTML and moving from one question to the next.

I'll be keeping this code to use as a reference for future projects.

Nathaniel Nasarow
Nathaniel Nasarow
10,290 Points

Oh yeah, and after that I attempted to add certain touch-events for phones and iPads, but ended up deleting that because one: I botched it and two: figured out that I didn't need it in the end because tapping the answer button on a touch screen already translates to a mouse"click" so to speak.

David Clausen
David Clausen
11,403 Points

Hey the important part is getting through any part and the trail and error. I love the fact he went through it in detail. I was able to finish my through with no real issue except I had to MDN 'nextsibling'. But checking references are part of the job anyways. Andrew and I came to different solutions but a lot of overlap, so I can tell I picked up some of the ways he approaches things.

I know you said you end up using a lot of his from the video, but i can't tell which part I can say all of it looks very well organized and readable so great job!

I also incorporated the results to show each question and what you got right or wrong. That was fun to extend it.

geoffrey
geoffrey
28,721 Points

Cool to share your code buddies ! I'haven't got the time to check your projects yet, but I'll as soon as possible, to see how I could have managed this differently.

However here is my little project : https://w.trhou.se/ozn1fby15l I just 've finished it, the code might probably be cleaner but I'm happy with it for now.

Finally, I would really want to thank Andrew Chalkley for this course, the explainations were very clear and you succeeded in teaching essentials informations without confusing me, that was the perfect course for the experience I have.

I just hope to be able to code as elegantly as Andrew does, as soon as possible :p !

David Clausen
David Clausen
11,403 Points

Nice! Its very clean and readable, I like it. Great job man!

Ran Yehushua
Ran Yehushua
5,908 Points

My route was a little different than Andrew's but I'm really glad I worked through it, what I learned on this course feels very tangible as a result. My biggest issue was that I kept looking for a way to use a loop to cycle through the program (like we did on the project in Dave's course where the user is asked questions via prompt). Once the idea of resetting the questions and upping the score and index from within a quiz_ui method hit me, it all made sense.

Here is a snapshot of my workspace: https://w.trhou.se/f98tib2xgn

David Clausen
David Clausen
11,403 Points

Yes! Event loops are the essence of UI interacted programs. Fortunately you'll discover that a browsers has it own event loop too. That is what you are doing when you hook a callback on a function. The browsers goes through a event loop your code is just a part of the loop. We can even have our own event loop like Dave's directly responding to new events.

Event loops is basically any loop responding to events as it loops. That it. Obviously such a simple model can become extremely complex and an essential feature.

But essentially YOU are creating the events in the loop. When you click a answer, the loop grabs the click event loops past callbacks see the click event has a function tied to it (the one you tied to it), runs it (your code), comes back around. If nothing happened it keeps looping until the next answer is clicked. Then it loops responds, and loops. Its pretty neat when you think about it.

Here is a good read up, though a bit deep, in event loops in browsers with javascript. http://www.altitudelabs.com/blog/what-is-the-javascript-event-loop/


I checked your project out, it looks very well layout. Variables names are understandable and love the comments. The only comment I have is these variables:

var score = 0;
var question = '';
var option1 = '';
var option2 = '';
var button1 = '';
var button2 = '';
var progress = '';

They are in app.js, you should consider if these really need to be global variables or variables contained in one of your objects, using function to pass in relevant information. I only say this cause your bigger applications if you go down this route will have a unwieldy amount of global variables. BUT this is just something to consider next time.

Ran Yehushua
Ran Yehushua
5,908 Points

Thanks David.

Absolutely, those variables are out of control! I meant to clean that up, but after figuring out the event loop, it escaped me. I am not even sure what my reasoning was when I did that now, there was definitely a reason! I just can't recall what it was. I think I will clean it up for the practice though, thanks for pointing it out!