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*

Quest Log: Question Bank I/O

Occasionally, the topic of a post requires detail and precision and consequently I feel it is necessary to take a serious tone. Such as the topic of this post was a major learning process for me and I feel I would be doing it injustice to obfuscate it in any way.

The saving and loading of question banks seemed easy enough at first but like many thing was much more complex than I had originally anticipated. A question bank consists of subjects and each subject consists of levels and each level consists of questions. Everything except for the questions are basically folders and therefor only contain a title, subtitle and author (type string). The meat of a question bank are the questions. Each question consists of several fields all of which are string or int type except for the query (the actual question) and the answer. These both need to contain richtext and at first were being held in System.Windows.Documents.TextRange.

The TextRange class has a Load and Save method that allows to read/write from a stream in a specific format with one being RTF. These methods were my keys to being able to save/load a Question Bank or so I thought. The first problem I quickly came up against was that TextRange.Load() will read from a stream but reads from the current position to the end of the stream. This was was a problem because each question bank file contains many RTF sections not to mention all of the other data.

With my experience in Streams being extremely limited, I was stumped on how solve this issue. Fortunately at my favorite programming site, StackOverflow I was able to get some help. The solution is pretty straight forward. I simply had to take each RTF section of the file (the query and answer of each question) and put that into its own MemoryStream. Now when using TextRange.Load() it could read to the end of the MemoryStream and everyone would be happy. Problem solved! ... right?

I continued on with development under the assumption that the I/O had been completely taken care of. As I was completing the implementation of the Question Bank Importer I attempted to import a real FITS Question Bank that has 1703 questions in it. It took about a minute or two to import but that would soon be improved upon so at least it worked! I was excited... but my excitement was short lived. Soon afterward, I found myself going to test something else. I ran the debugger and waited for the application to run...and waited...and waited some more and then finally it opened up. It took about a total of 3 minutes!

Remeber that all Question Banks are loaded at startup. Up until this point of development I had been testing everything with two test Question Banks and each of these had about 5-10 questions in them. Everything worked great with these small Question Banks; however, the reality is that FITS writes Question Banks that can have over 2000 questions in them. This is 200 times more than my question bank. In other words, I had a real problem.

The first thing that came to mind was that I needed to get my hands on a profiler. I had actually never used a profiler before and only had heard about them. After doing a little research I found RedGate's ANTS Profiler. I love this piece of software. After running the profiler I quickly found the culprit. TextRange.Load() was taking an absurd amount of the CPU time, about 83%, with another 10% was being devoted to getting the RTF from the FileStream into the MemoryStream (I was parsing it...).

I quickly realized that there was no way to change the speed of TextRange.Load() and that I needed to find another way to do the I/O for the RTF sections of the file. I once again looked to StackOverflow for some guidance. A few suggestions were made, but ultimately I decided to change the type of Query and Answer from TextRange to simply byte[]. This is a MUCH better approach. In retrospect I can see that TextRange was a horrible design decision. It is designed to be used for selecting a section of a FlowDocument and not for storing data. With the byte[] it simply hold what would go into the MemoryStream and then whenever the text of a query or answer need to be displayed this byte[] is loaded with TextRange.Load().

With this alteration the two major sections of the load time were completely cut out and loading went from 2-3 minutes to an unnoticeable load time (1~ second). Needless to say this was a victory for me. It was quite an issue but with it being solved I was glad to have gone through it. It was afterall a great learning experience.

Code samples can be found in the links to the StackOverflow questions.

Because this was such a huge learning process for me I think I deserve a...

Level Up!
Jasson grows to Level 9 Programmer.
Jasson's HP increases by 20.
Jasson's INT increases by 4.
Jasson learns skill "Profiler".

That's more like it!

*saved game*

Quest Log: Redesign

If there was ever an incarnation of WPF it would probably be a beautiful and graceful ballerina. ...ironically this ballerina would have absolutely no clue what WPF is actually. Also like a ballerina, WPF is very flexible. Because of this flexibility, I decided I would do some tweaking to enhance the UIX (User Interface and experience. I made this up) of my application. (You can refer to the basic design in this post.)

First of all I thought it would be cool to have a Breadcrumb navigation for the Browser section of the application. This would make navigating much easier. If you don't know how breadcrumbs work, then you can read about them here. Here is what it looked like.


One of the desired features for this application was to have basic text editing for the questions. So I designed a window that would be used for editing questions - this includes the actual question, the answer to the question and the "details". Here is a screenshot of what I had come up with.


One of the major issues with the original design of this application as well as the predecessor is that you could not see the content of a question without selecting it. Using WPFs powerful Data Templates and Control Templates, I redesigned the items in both the browser and quiz to solve this issue. They take up a little more room, but contain much more information. Here is an early prototype of what a question bank would look like.


A question itself would have a preview of the actual question - Ingenious! So this solved the issue and has a much cleaner feel to it. In both the browser and quiz the items are stacked vertically. The user is able to scroll through the items by double clicking to explore the content of question banks, subjects and levels (all of these are folder type items) and double clicking on a question opens up the question editing window.

Soon after the above screenshot was taken I decided to add buttons onto the individual items for saving, editing and deleting the item. In a few posts I will show a screenshot.

I was finally beginning to be pleased with how things were turning out. It was starting to look nice and it was even working!

*saved game*

Quest Log: Power Overwhelming

The moment I took WPF up in hand, I was hit with a surge of power. Once I gained some control I realized there was much much more to WPF than I had initially thought. Not to mention that I also moved to .NET 3.5 SP1 which had a number of new things as well.

I had never used Routed Commands. Never heard of Dependency Properties. Had no concept of Data Templates, Control Templates, and Styles! Bindings? I will admit it was fairly difficult to completely grasp everything and I am actually still learning.

I definitely would have not been able to do it without the help of fellow bloggers, miscellaneous forum posts and one of my new favorite sites, StackOverflow. Unfortunately I do not have everything bookmarked, but here are some of the sites that were very useful.

StackOverflow
This has been the most helpful site for me. It is basically a website were users can post questions and answer questions. That's it!

Dr. WPF - Items Control Series
A blog series by Dr. WPF. It was what really helped me start to learn how WPF actually works and was the inspiration for some of the UI.

Bea Stollnitz Blog
This blog wasn't as helpful to me as some other blogs because of what I was doing, but it definitely has HQ Content (High Quality).

Official Microsoft WinForms and WPF Website
Very useful. I watched many of the videos on the site and plan to watch some more.

Some Site
I don't remember how much I used of this site, but I had it bookmarked and it looks pretty good...

The weekend I made the switch to WPF I did some major grinding. I would say that I was at it for almost 40 hours in the three days. (I had Fridays off... yes, heroes get days off.) Once I returned to the town "SJSU", I couldn't help but to walk up to all of the NPCs and tell them about WPF. But still they all repeated the same thing they always say. I suppose that should have been expected.

Needless to say, I gained a lot of XP from this...

Level Up!
Jasson grows to Level 8 Programmer.
Jasson's HP increases by 1...
Jasson's STR increases by -5... >.>;
Jasson learns skill "Basic WPF"

*saved game*

Quest Log: Weapon of Choice

I was pleased with the UX for the most part but not the UI. One thing about me is that I expect only the best from myself and wont settle for anything less. Such as when I am developing software, I constantly strive for a professional level regardless if it is an application or game.

As I began to push WinForms in attempt to create a rich UI/UX, I realized that maybe WinForms did not have the stats I needed for this project. Thus I began to consider alternatives. The two alternatives I considered were...

1. Qt
2. Windows Presentation Foundation (WPF)

I had heard of Qt through some job searching and had researched it some. So one day I set out to test the strength of Qt. I started off with some easy low level monsters - probably slimes. Before I had gather much XP (experience points) with Qt, I remembered hearing of something called 'WPF'.

I had heard of WPF a few times before while talking to NPCs but had never seen what it could do. After a little researching, I saw that WPF has some amazing power and versatility when it comes to creating a good UI/UX. Here are a few screenshots of WPF applications that I found on the web.

Screenshot 1

Screenshot 2

With WPF I would be able to continue development with C#, Visual Studio, and of course the .NET Framework, but I would have a more flexible UI. This was exactly what I was looking for! Needless to say, I quickly cast aside WinForms and decided to take up this new found power. Now all I had to do was learn how to wield it...

*saved game*

Quest Log: Beginning Design and Implementation

Design Design Design! This has to be the most important step. Planning everything out before implementation is vital - I wish I knew this before. The first thing I had to keep in mind is that the new interface needed to be "brain-dead idiot-proof." The FITS NPCs reiterated this several times. ...Well, there goes my plans to have the UI (User Interface) look like a cockpit.

At first, the UI and UX (User Experience) was planned to be relatively the same as the predecessor (link has a screenshot). If you look at the screenshot you will see that all of the content is displayed in one window with tabs. The user can only work on one quiz at a time. If multiple question banks are desired to be used, then the user must open up another question bank which will appears in a separate window. All windows have the same functionality, they are just a different question bank. You can even look at the current quiz in multiple locations which can be confusing at first. Overall, the predecessor is a good program and has done well over the years; however, as you can see, it shows its age.

It was at this point that I realized I could design the application however I wanted, as long as it fit the requirements. Consequently, I became consumed with coming up with a more intuitive UX. I immediately got to brainstorming and before too long I had something. I would have the layout of the entire application would be split up into 3 parts.

1. Browser - At startup, all of the question banks the user has will be loaded and be explorable much like folders in windows explorer.
2. Question View - If a question was selected in the browser, then the full details of the question would be displayed.
3. Quizzes - Multiple quizzes could be open at a time and displayed in tabs.

After working on it for a few days I came up with this.

I submitted it to the FITS NPCs for some feedback on the new UX and overall received positive feedback. I was glad that they liked it, but I was not exactly enthralled by it myself. It was too bland and was not exactly professional looking. Something was going to have to change...

*saved game*

Quest Log: First Glance

Before accepting the quest, I had a rough idea of how I would go about completing it. With a little bit of application development under my belt, I figured I could take the quest on as I was without any level grinding or obtaining new equipment required. My plan was simple. Take up WinForms (Window Forms) as my sword with C# as my shield. The .NET Framework would be my magic and Visual Studio 2008 as one of my skills.

Before I set out on my journey with sword in hand, my quest giver included some requirements. I wont bore you by going over these in detail right now but I will mention them as I come across them in development. With these requirements in mind, I made an experienced estimate that, from start to finish, development would be about two weeks. Now I was ready to start some designing!

*saved game*