Quarter 1 Final Project: Update/Reflections.
The first fourth of my education with Galvanize is complete!
On Friday, we presented our Q1 projects, and let me tell you, the G45 cohort knocked it out of the proverbial park.
Jaws were dropped, applause was given, wows were murmured, and I even heard a few “WHAT!?!”s.
We killed it guys. The G45 Jaw Droppers. I like it.
But this blog is not about my awesome classmates, it’s about me.
I’m not one to boast too often, but given all of the outside issues I had to over come, on top of the myriad of issues I ran into within the project, I am incredibly proud of what I was able to accomplish during the week.
I created a hilarious/rather annoying movie trivia game, and the best part is, it WORKS.
My original plan was to use the YoutTube API to generate and play random obnoxious videos while the user was presented with a riddle. The only way to stop the video from playing was to input the correct answer. The user would have no way to manually pause, skip, or mute the video. Sounds fun right?
In the end, the basic idea of my game was realized, but the road there was full of detours and closures.
The first issue was the YouTube API.
Google has outstanding documentation for their API’s, however after 2 full days of attempting to conquer the YouTube API beast, I had my instructor take a look at it, and to my peril inform me that the implementation of their API has changed in the past couple of years and I actually did not yet have the knowledge to be able to use it.
At first I was bummed, but I realized even though I had to forgo implementing the API I wanted to use, I still learned a heck of a lot about it, and a whole lot about how Google goes about allowing the use of their API’s, which should help me immensely with the plans I have for upcoming projects.
Still, I had to figure out another way to randomize videos in an embedded player, or my game would never work.
It took some time, but the code I came up with involved dissecting the embed code for a youtube player, and using string interpolation to randomize the video IDs. (Screenshot below)
Since I needed to use an API, I thought I’d search for a trivia API to generate the riddles or questions. Once again, after a few hours of research, I found the only real trivia API out there only gave multiple choice, or true or false answers.
These types of answers would have killed the whole idea of the annoying youtube video game, as the user would have had to just select answers until they had the right one to make the video stop. It wouldn’t work.
So I came up with a way around that. I decided to use OMDB (The IMDB API) to generate my questions and answers. Pulling the plot synopsis from movies, and making the user guess the title of the movie from the given synopsis. It worked, VERY well, and given my love of movies was actually the perfect subject matter for my game.
Those were the first, and probably the largest hurdles along the way.
There were other issues that arose while coding. The biggest of which was a silly scoping issue that taught me a great deal about the subject. Basically, I needed a conditional to have access to the data I was pulling from the OMDB API, but in giving it that data, the entire function would create multiple click events, causing the game to not work correctly. It was a puzzler that I eventually overcame with the solution of also taking away a click event using .off.
After I had the basics for the game working and ready to go, I wanted to add some features.
I added a score board, which keeps track of correct and incorrect scoring. Basically just reacting the the conditionals.
I also wanted to add a timer.
One of my favorite things about this project was letting friends play the game, and seeing what needed to be changed about the user experience. While I wanted the game to be annoying, I didn’t want it to get to the point of the user just navigating away from the page.
So I decided to add a 3 minute time limit to the game. No matter what, the user would only have to listen to the same annoying video for a max of 3 minutes. However, if they got it right, the video would change to another random video. Still being obnoxious, but at least giving the user a reprieve from hearing the same video over and over.
It also allows the user to see how they did over the course of the 3 minutes, and give them a goal to beat if they decide to play again.
This was probably my most proud piece of code. It took a while, and some hand holding from the good folks of the coding community on youtube, MDN, and stackoverflow, but I eventually figured it out, and how to incorporate it into the game.
After those features were added, I began styling.
The week of CSS and HTML lessons was the week I was hit by a car.
I missed a lot of classes that week, so I wanted to do all of the styling on my own.
It took a good amount of time, but I am very please with how it turned out. I wanted to colors to looks nice, but to also fit the obnoxious theme of the game, and I think I nailed it. What do you think?
Here’s to second quarter! Let’s hope I don’t get run over this time.