Quest Log: Item Dissection

Nearly everything is a process and designing the items (ListBoxItems) in the Quiz Generator is no exception. These items are the pivot to the user interaction and overall experience with the application. Consequently they are vital to the overall success of the application and must be good!

This item represents what question banks, subjects, levels, annotations, and templates. As you can see there are several components that make up a single item. There are 3 buttons on all items. The large + button adds the item to the current quiz. The hammer button next to it is the Edit Button that allows the user to edit the item. The third button is the delete button which deletes the item permanently (there is a prompt window to avoid accidental deletions). There is one additional button on Question Banks when they or any items within have been edited since saved last (not shown). This button is directly to the right of the Edit Button.

Everything else is fairly self-explanatory. Moving from left to right, there is a icon and some text representing the item type. Next is the title, "Aerial Sample", and subtitle "test" of the item. Last there are 2-3 items giving details on the item; author, total question, and just question banks have the third item is Last Revised.



Editing an item is very straightforward and fast. This is what an item looks like in edit mode. It simple changes to text entry fields. Originally I had a window pop up to edit the item but that was inconvenient for such simple changes. Questions on the other hand have a separate window for editing. I will go over this on a later date.



Questions are a little different from all of the other items, but not too much. Instead of displaying information about the question, it only displays what the user going to care 95% of the time - the actual question. Because of this, going through a question bank and selecting appropriate items for a quiz is both easy and fast!


Last of all are the items in the quiz. Similar to the other items, they have buttons and vital text. You are already familiar with two of the buttons (edit and delete buttons). The third button, the most left button, is the Unlock button. The function of this button will be described in detail on my next post. Besides these buttons are two pieces of text; the question number on the top and then the actual question in full directly below it. This is RichText and is displayed exactly as it will on the printed quiz (WYSIWYG).

Overall the items are fairly basic. They only display the essential information to keep things clean and elegant. I am very pleased with how they turned out.

*saved game*

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*