Final Exam

When I wanted to revise a project for this class, I knew without a doubt that I wanted to revise the “Remix a story” project I recently completed. I was satisfied with how the project turned out on final submission, but I knew there was still so much more I could do. Honestly, it feels like a project that I could forever tweak to get as perfect as possible. However, for this revision plan, I aim to turn the static chatroom webpage into an animated, seemingly-real chatroom experience. This revision will make the chatroom really seem like a chat, and turn the page into a real-time event that the user can be apart of and follow along.

I actually plan to possibly use this project to show to employers in the future, so I actually went ahead and made these revision changes in my spare time. The link to the site ( should somewhat reflect these changes as I was able to go through with them.


Audience Analysis, Revisted

In terms of my rhetorical choices, I think I mostly am ok from my original submission. However, there is something here worth noting that involves how I’m approaching the revision. While I’m perfectly satisfied with the target audience I produced this project for, I believe I missed a general theme that the entire audience shares, and that is the need for stimulation. The current page loads and then everything is there; no animation, no interactivity, nothing. This is bad. My revision will include interactivity and animation, making this page feel like a real chatroom, a real live chat, and give the user a feeling of “being there”.

I liked how the original page looked, but there were definitely a few weaknesses. This included boring font styles, a lot of empty space, and the aforementioned lack of a “real” chat experience.

Adding Animation

My first goal was animation of the chat. This is what made the chat “live” and much more real and entertaining. This was accomplished by creating an animated .GIF image using Photoshop. I found that you could use a feature called “Timeline” in Photoshop to create frame-by-frame animations. By combining different frames for each new message in the chat, I created a long animation that appears like an on-going chatroom. The user can now follow along much easier, and the chat itself feels more life-like.

Creating a .gif animation in Photoshop using the "Timeline" window.

Creating a .gif animation in Photoshop using the “Timeline” window.

Adding on to this, I would also (and may also) add animation to the users bar as well. Using the same Photoshop “Timeline” method, I could create an animation that syncs with the main chatroom graphic. Essentially, each user would appear on the sidebar at the same time that they first “login” per say into the main chat. Of course, they would also be removed from the sidebar once they are booted or leave. This would be a bit trickier to work with since I would need to play around with the different timing lengths for each frame to match the main chat, but I think it wouldn’t be too hard to figure out.

Adding interactivity

My second goal was to make the page interactive. I didn’t want everything to load all at once when a user enters the URL. Additionally, I originally had an “initialization” line at the beginning of the page, but again, it was static. The solution for these problems: jQuery. jQuery is a Javascript framework and it’s great for adding page animations. I knew a little jQuery, so I put what I had learned to the test and was able to make each element on the page load in the specific order I wanted them to. On top of this, the elements fade in or slide in, giving the page a cool effect and making it feel like the chat is really “loading” or initializing. A little animation occurs when the page first loads, and then the user has the ability to open the chat by clicking a button. This adds to the stimulation factor and makes the user more involved.

Some really simple jQuery. I wrote all of this during my intro to communication class.

Some really simple jQuery. Looks complicated buts its like the simplest jQuery you could possibly write.

Adding an Aural Component

A third goal was to add some music to the page. In the original scene, a song called “The Rains of Castamere” begins playing by Frey’s musicians, signaling for the guards to begin the murders. This song has since become iconic in the Game of Thrones community for that reason. I wanted to implement this into my page as well, triggering it using jQuery and based off the HTML5 audio element, which allows for music to autoplay in the background of a webpage. At the moment, I have the song playing when the user clicks the button, but I want it to play when the “booting” begins happening in the chat. I’m not sure how to sync these two together; perhaps there is a delay attribute I can call on the jQuery function for getting the audio to play.

Using jQuery to create an HTML audio element. This makes the audio play once the button is clicked.

Using jQuery to create an HTML audio element. This makes the audio play once the button is clicked.

Adding Some Style

Lastly, I just wanted to add some styling changes to make the page have more appeal. I wanted the main header to have a better font, as well as to jump out more. I found some fonts via Google Fonts that I thought matched the medieval aspect of Game of Thrones, and applied them to the main headers. I also added a text shadow to the two main headers so they stand out more and possess better visual appeal.

These are the three main goals that I have been able to complete. If given more time, I would:
– Add little chat noises each time a new message appears in the chat
– Craft fake ads to take up space in the page and make it look more like a real page
– Add a chat toolbar. On any sort of WYSIWYG editor, whether it be a chatroom or WordPress or Scholar, there is a toolbar with a ton of font and text options. I would add one of these to the textarea I have at the bottom of the chat. This would make the chat, again, seem more realistic.
– Add a plug for HBO into the page. Like I said, this could be a portfolio piece and possibly work as a way to advertise Game of Thrones and HBO. Even just a link to the HBO website would probably suffice and get a few users to consider getting HBO if they don’t have it already.


I really liked how the revision went and enjoyed to continually think about ways to improve upon this project. I think its good practice to never settle with a final product, and instead always try to find ways to better serve the user. I’m especially glad that I made this project on the web, because the web is such a blank canvas for creating literally anything you could desire, with the ability to make changes easily. In this case, I was so stoked on the possible revisions that I was actually went through with a lot of them. It’s a lot easier to make revisions when you have a web-based application, and I personally feel that there are infinitely more types of revisions you could make than, say, working with a video or working through an application like Prezi. The web allows you to build what you want from complete scratch, which though has its disadvantages at first, pays off tremendously down the road.

Leave a Reply

Your email address will not be published. Required fields are marked *