Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsFirst live app! Feel free to give feedback
I got my first fully independent project looking decent enough and working well enough to put a live demo online. Check out and follow the github link to view the repo.
5 Answers
Eric M
11,547 PointsMichael first off congratulations on getting this project up. It takes a lot to get something to this stage and show it off. Thanks for posting this project to the forum.
I'm going to give a lot of feedback! Don't feel like you have to do everything right away, but it's things to keep in mind for when you end up with a project in front of a larger audience.
As others have said the game is not currently intuitive to play. I would recommend two major changes.
- You only have two keys, put what each of these keys does on the main game page, not hidden behind a modal.
- Make it more obvious / separated when a new sequence has begun. If I get something wrong (an X appears) pause, and start with a new sequence.
While I am not 100% I think there may be a bug (or I do not adequately understand the conditions) with regard to the registering of a repeated letter in the sequence. Multiple times I was 100% sure I had heard the same letter twice in a sequence but pressing the spacebar key caused an X to show up. By contrast pressing the enter key for repeated location of red flashes worked as expected.
While programmers are going to understand the 'n-back' terminology it's not a great way of phrasing things for players. Try to reword things to be very simple and maybe change the flow of the game a little to make it more obvious to the player what they need to focus on when (i.e. point 2 above).
Regarding the code For reference I looked at:
michaelacook.github.io
Dual n-nack live demo.
I assume this is the version you've linked to based on the description.
app_1.3.js is a little hard to read due to how long some of your lines are, viewing them in github cuts off a lot and due to githubs placement of the horizontal scrollbar it's a little annoying to scroll across to read them. Try to keep all lines under 80 characters if possible, and under 100 characters no matter what. This will make it slightly more pleasant for other programmers to review your code.
By the same token you should consider adding a readme to your github project if you are asking people to review it.
In the readme you should state what the program aims to do, any known issues you're aware of, and anything people would need to do or change to run the code on their own environment (and what that environment should be - server, repl, aws lambda hooked up to an API gateway with certain settings, etc.). Is all of the code to run this actually in the repo?
Your code is light on comments - though it is not difficult to understand. While my personal preference is for more comments plenty of developers believe that well written code does not need extensive commentary. This is more of an opinion or comment than feedback. So considering that it's just my opinion, I would especially like to see comments above most functions and methods telling me what the goal of them is, especially in JavaScript where return types are not explicitly labelled in the function signature.
Function by function I find the layout of your code logical and easy to read (except for the long lines as mentioned above, but the structure of each function is decent). In the context of the wider application however I have some questions for you to consider.
- How can each component of this game be broken down so most of the logic isn't sitting in a single file? (for instance, we could at least move the game class and methods into its own file and the main game loop in another)
- Could card and audio be broken into separate classes to game? How would this change your data structures / classes and the main game loop?
-
$('body').keydown((event)could use some helper functions to avoid the long if/if/if/if/elseif/if/elseif/if chaining or at least make the results of the chain flow easier to parse. Consider that the result of each of these branches is a state change to the game class and an animation. How would you make this more DRY?
Really great work getting this up and running and being brave enough to ask for feedback :) Refactored a little this will be a great portfolio project.
Cheers,
Eric
Øyvind Andreassen
16,840 PointsOkay, so first thing. The audio doesn't work in Safari.
Haven't looked much at the code, just the interface. I had some issues with the audio not stoping even though I pressed Stop in Chrome.
I did however not figure out what the objective of the game was, and how I was suppose to play it. I just ended up pressing buttons on my keyboard and hoping for the best. Sporadicly a ´X´ would pop up, but I have no idea why. Is there suppose to be more than just a flashing cell in the grid with a red background?
Threehouse has a course on UX and User Testing, taking some inspiration from these courses maybe you should give the website to a person that you can observe using it, to take notes on how they interact with it and make improvements.
This is not meant to be harsh or anything, just my experience. Good luck!
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsThanks. Definitely important to know the audio doesn't work in all browsers. As for the audio not stopping, I haven't had that issue in Chrome.
The game is a memory training tool. I provided instructions, and it is definitely helpful to read them before playing. In the future, I will likely try to make those instructions even more user-friendly, but my goal was to get a quick live demo up for others to see.
The game gives you a sequence of random flashes on the grid, and gives you a sequence of random letters. You must focus on both at once, and see if each new flash, and each new spoken letter, matches a grid flash or a spoken letter a certain number back in the sequence. The game isn't really meant to be fun. It was developed by psychologists back in 2013 to test participants' working memory, and this game is my own version. The game has been shown in some studies to lead to increased working memory capacity after rigorous use, and since working memory and general intelligence are strongly correlated, regular use of the game can lead to small but significant increases in general intelligence, or IQ. This game would be a handy utility for any developer to keep their problem-solving skills sharp.
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsAlso, the red Xs that were appearing for you were indications that you were missing matches. If you get a correct match, a green check mark will display.
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsI had the same problem as Øyvind that I didn’t know how to play and didn’t know what I was supposed to do. I see that there is a “How to Play” button, but I didn’t see it until after I’d looked around for a bit and lots of people might have given up by that point. You might consider having the “How To Play” modal open by default when people load the page. The "How To Play" instructions are also a little bit verbose and dense, maybe you could figure out how to explain it in a concise way, maybe with some picture examples.
After I clicked the start button, it seemed like nothing happened for a couple seconds until the first box appeared. It would be nice if something on screen showed that the game had started so I’m not wondering if it worked.
This is a personal UX preference, but I think your “Start”, “Stop”, and “New Session” buttons should have the “hand” cursor, { cursor: pointer } in CSS, and some sort of hover state, maybe changing the opacity. I like the buttons though, they look nice.
The links are unstyled. Looks kind of 90’s. You might consider Bootstrap or a similar CSS framework if you don’t want to do all the styling from scratch.
The game area is pushed to the left side of the screen. I would prefer it centered with whitespace on either side. I see in your css you have margin: auto, so maybe that's you're intention. I’m not sure why it’s not centered, I didn’t get too deep into it. But, again, Bootstrap containers do this stuff nicely for you so that could be a solution to that problem too.
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsHey Brendan, thanks a lot for your solid recommendations. I am going to implement most of those, except centering the game area for now. That will involve me playing around a bit more with the CSS, which is just something I find very tedious. Since I made this post I have updated the page with a link to more information about the game on a Wikipedia page to help users get more familiar with the game. But I also really like your idea of having the instructions modal box open by default.
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsCool
Milan Pankhania
3,734 PointsHi Michael, cool idea, although I'm unsure what I'm supposed to do exactly (I read the instructions also). Am I supposed to click the boxes with my mouse? or use the keyboard?
Milan Pankhania
3,734 Pointsah sorry noticed there is a controls link too, my reccomendation would be to have the controls and how to play information as one if that makes sense.
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsHey Milan, if you view the controls you will be instructed on which keyboard controls to use. As you view and listen to the respective sequences, pay attention for matches. If you hear a match, press the space bar. If you see a match, press enter. If your n-back is 2 (which is default), then you will want to try and remember the letter and the grid location 2 iterations back in the sequence and see if they match the current grid location and letter. At first this will be quite tricky. The game isn't meant to be fun, it is specifically meant to increase the capacity of your working memory, thus making you a stronger problem solver.
Øyvind Andreassen
16,840 PointsGetting 404 from GitHub 😕
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsMy bad. I changed my username. Link works now.
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsMichael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsEric, thanks very much for this feedback. With the feedback you and others here have given me, I will have quite a bit of work to keep me occupied improving this project and I plan to update the code base by implementing as many of the changes you suggest as possible.
Two quick things right off the bat though: 1) There isn't a bug when it comes to repeating letters, the audio files are just low quality. One could easily mistake the sequence 'B', 'E', 'D' for 'B', 'B', 'B' for instance, especially if they are not wearing headphones. Obviously if this were a production app I would use much better audio files, and in the future perhaps I will. 2) The sequence does not restart after you get missed match. The pause between a missed match and the next iteration of the same sequence is the same pause that takes place even if there is no match. The reason there appears to be a pause is because the game checks for a missed match at the beginning of the next iteration. It seemed convenient at the time to do it that way, but I will see if it's possible to change.
My priority is going to be making the gameplay and the instructions more accessible, and then making the code base more readable. You are quite right about the key controls, they are very difficult to read with all the nested conditionals.
Thanks again! With improvement I am hoping this will be a portfolio project I can show a potential employer.
Eric M
11,547 PointsEric M
11,547 PointsAh I see, in that case I think my trouble with the letters was not mishearing, but assuming after an incorrect guess the sequence would restart. I would recommend you change it to the sequence restarting, because the sequence is otherwise very difficult to keep track of after a missed guess - I'm aware there's no pause, I think there should be, because it's hard to mentally adjust after getting something wrong and a series of red Xs when you weren't ready doesn't feel like a challenge for the player, it just feels unfun.
I think you have a great attitude about the feedback you're receiving and I look forward to seeing the next version :)
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsMichael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsDefinitely appreciate the encouragement. One thing I doubt I will change is the game sequence and the fact that the sequence continues even after a missed match, just because playability itself is not a value of the game. The game is purposely designed to be quite mentally challenging--the player must keep track of a lot of information and be able to mentally adjust. It is this quality of the game that produces measurable changes to working memory if the player uses the game frequently. However, if you think the flash of the red X is an undue distraction, I can consider taking that out. On the other hand, then the player will not know if they have just missed a match. The X could be seen as a distraction, but it could also be seen as a wake-up call letting the user know that they have allowed their concentration to slip.
If you're interested, there's been a number of studies on working memory and general intelligence using dual n-back, including some studies finding an increase in general intelligence after a period of using the game around a month. https://scholar.google.ca/scholar?hl=en&as_sdt=0%2C5&q=dual+n+back&btnG=&oq=dual+n-b http://releases.jhu.edu/2017/10/17/johns-hopkins-finds-training-exercise-that-boosts-brain-power/
Eric M
11,547 PointsEric M
11,547 PointsI don't think you should remove the X, I'm arguing for more feedback about what is happening and what's expected next, not less c:
I'm just saying that after "oh I failed" my brain is expecting to start from scratch. Like if you lose a fight in a videogame you try the fight again. The fact that the sequence continues should be communicated in the instructions somehow if that's the intended flow.
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsMichael Cook
Full Stack JavaScript Techdegree Graduate 28,975 PointsAbsolutely. Accessibility is something I will prioritize for this. My goal is to actually get developers and students first and foremost acquainted with dual n-back because of the cognitive benefits applicable to the craft, so making sure I help users understand how the game works and how to approach it is key!