Showing posts with label FITS. Show all posts
Showing posts with label FITS. Show all posts

Tuesday, June 23, 2009

Quest Log: "Elephants are minor details"

I have kind of left out some minor details. If you have been following this quest you should know by now what the different item types are (Question Banks, Subjects, Levels, Questions, Annotations, Templates and Quiz Items). I believe there has been some neglect in the second half of this list. So I would like to go over those now.

Annotations
These are rich text elements that allow the user to add notes, descriptions, narratives, ect. on the quiz. Pretty basic and straight forward.

Templates
Very similar to questions. When editing a template it is indiscernible from editing a question. The purpose behind templates is that when making a new question the user picks a template to base the new question off of. Basically it allows the user to enter in any common detail and keep DRY (Don't Repeat Yourself).

An example of this would be making the basic True/False setup of a question in the template and avoid typing it out every time they decide to add a T/F question. The user can also enter other details about the author, keywords, ...ect.

Quiz Items
In my last post I went over this item type in detail except for skipping out on the Lock/Unlock concept. This concept was in the works for a long time but was only recently implemented completely. When an item is added to the quiz it is "Locked" to the original item in the Question Bank. They are one and the same - "Our minds are one." Consequently editing one reference will be reflected on the other. This keeps the data centralized.

With locked items a quiz will only store the question reference. Because of this, quiz files are usually very small. Also this makes updating a single question in several quizzes very easy. Keeping DRY once again!

Unlocking an item breaks the mind meld, and the quiz item becomes its own. This is useful for when a small edit specific to a quiz is needed. Once a question is unlocked that lock cannot be restored. So take care when unlocking an item (don't worry though, there is a prompt window).

Besides the unlocking/locking business I think that the items are fairly straightforward and really easy to grasp. At the same time the user is empowered with versatility and is able to easily and quickly create quizzes (and question banks too!).

*saved game*

Note: "Elephants are minor details" is from the song Elephants As Big As Whales by PlayRadioPlay!

Sunday, June 21, 2009

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*

Tuesday, June 16, 2009

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*

Thursday, June 11, 2009

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*

Tuesday, June 9, 2009

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*

Friday, June 5, 2009

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*

Tuesday, June 2, 2009

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*

Sunday, May 31, 2009

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*

Saturday, May 30, 2009

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*

Thursday, May 28, 2009

Obtained Quest: Application Development

My first real quest! I have had several mini quests before this one, but they were just that - mini. And this is why I start off in this story/blog as a level 7 programmer and not level 1. This may also be a clue to why in some games your characters do not start at level 1. I know I once wondered this but lets avoid from getting completely distracted from what's really important - The Quest!

So this quest was presented to me by the NPC, Matthew Muldoon, the CEO of FITS (Fire Instructor Testing Software) aka my father in law. Once thing I would like to clear up is that I was not presented this quest because I married his wonderful/beautiful/lots of other good things daughter but because, like in all games, only the hero can receive quests. Moving along, Here is an overview of the FITS products.

"With the FITS Quiz Generator and Question Files, you can assemble, customize and print a multiple choice test in minutes instead of hours. Sold only to Fire Service instructors and trainers- not to your trainees.
" - FITS Website

The mentioned Quiz Generator is the software FITS and their clients use. Basically, it allows users to both create questions and store them in a question bank as well as make quizzes using the questions from a question bank. The developer of the Quiz Generator became too busy to continue supporting it and this is where I come in.

I was presented this quest to develop a new Quiz Generator that would shake the very foundation of this world...or at least provide the user with a fresh and simple interface to carry out more or less the same task as the predecessor.

I actually received this quest in about November of 2008; however, development did not really start until sometime in February 2009. I have been working on this quest while I finished up my final semester at San Jose State University and just last week I received the key item "diploma" (BSCS). With lots of hard work and many hours of playtime put into this quest I am finally nearing the completion of it.

The next number of posts will focus on the development of this project and what really went into both designing and developing this application from the ground up. Stay tuned!

*saved game*