Quest Log: Skinning the Beast

As you read this post keep in mind that I am a perfectionist. Because of this, I have so often found myself restarting a project or a portion of a project over and over again - always trying to improve what I have. This has been a major cause for why I have so few completed projects. Fortunately, I have been able to tame this in some respect but for the most part I have learned to work around it. One example of this taming/work around is the visual aspect of the Quiz Generator.

Throughout the course of the project I have been tempted several times to scheme up a "skin" for the application. However, each time I would take a deep breath, suppress the temptation and pressed onward with development. Because I knew that it is hard to please me when it comes to a GUI and I would redo it several times if I allowed myself. So it was until I had finished the major functionality of the Quiz Generator (slayed the beast) that I decided it would be a good time to finally do the skinning.

I found myself chanting a mantra throughout this process, "Simple Simple Simple". Keeping the user interface and experience as simple as possible was key. At the same time I was constantly pushing for a rich user interface and experience, which is one of the major improvements I wanted to make from the predecessor. Fortunately, simple and a rich UI/UX are strongly correlated and I was able to accomplish this after much Consideration, Implementation, and Alteration (CIA... yeah, I'm not going to lie. I made this up...).

Moving along, I would like to first show off the face of the application. Prepare yourself!

1. This is the Browser section of the application. The user searches through the question banks here.
2. A beautiful breadcrumb navigation strip that functions very similar to the Vista breadcrumb navigation. With this navigating the browser is easy and the user always knows exactly where they are at.
3. This is basically a toolbar. It provides the user with quick access to the browser's features. This includes basic navigation, searching and adding a new item.
4. Contains the question banks (navigational), Annotations and Templates (will be discussed in a future post).
5. This can be many things depending upon what tab is selected in #4 as well as where the user is located inside of a question bank - Question Bank, Subject, Level, Question, Annotation, Template.
   
6. This is the Quiz section of the application. The user is able to manage their quizzes in this.
7. This is an item inside of a quiz. Quiz items are either a question or annotation (simply text).

In case you are wondering at this point. I did everything except for the little question icon (and other items icons), which my wonderful wife made. Everything besides the item icons were made using Microsoft Expression Blend. This is a very powerful tool that I have come to love as a developer.


Blend is a GUI development tool, which basically allows developers to work on the visual aspect of an application without getting their hands dirty with code. The user is able to arrange and modify the elements and XAML code is generated. This can be extremely useful; however, I find that since I worked with writing XAML code by hand for so long before using Blend that while I use Blend I am writing and editing the XAML code by hand more than using the code generation. Blend is undoubtedly useful nontheless.


In my next few posts I will go into more detail on the ListBox Items (Browser and Quiz Items) as well as go over the different elements of the Quiz Generator and much much more!

*saved game*