Computers, Software, Web

The Ramp Problem, Redux

For those that don’t know what the “Ramp problem” is, take a look here. This problem is one that exists on every OS, and in every application. It is partially about accessing advanced information in an easy-to-understand presentation.

I have been tasked with building an online registration for the Testing Center at Clayton State. As with many websites, the administrators need to be able to quickly find information in the database the website uses. I have finalized an interface style that displays many options with very little irrelevant information. I have taken a screencast of the website below so that you can see the work flow:

http://video.google.com/googleplayer.swf?docId=-2898392293652715906&hl=en

A higher quality video can be downloaded here.

To accomplish this, I have created a C# public class that takes an array of radio buttons, and an array of HTMLControls (in this case Div tags). The function automatically attaches Javascript events for what elements to show or hide when an “onclick” event occurs. Also, this fuction initially determines what is hidden and what is shown, based on postback selections. The script is below:

The Function:

   public void BuildSubOptionAccess(RadioButton[] Options, HtmlGenericControl[] SubOptions) {

      for (int x = 0; x < SubOptions.GetLength(0); x++) {
        //step through options and hide
        SubOptions[x].Style.Add("display", "none");

        //unless the parent item is checked
        if (Options[x].Checked == true) {
          SubOptions[x].Style.Add("display", "block");
        }

        //autobuild show / hide jscript
        string _hideThis = "[";
        for (int y = 0; y < SubOptions.GetLength(0); y++) {
          if (SubOptions[y] != SubOptions[x]) {
            //add all items to string of things to hide except its own subvalue
            _hideThis += "'" + SubOptions[y].ClientID + "',";
          }
        }

        //close array string
        _hideThis = _hideThis.Substring(0, _hideThis.Length - 1) + "]";
        Options[x].Attributes.Add("onClick", "HideThis(" + _hideThis + "); ShowThis('" + SubOptions[x].ClientID + "');");

        //special case - show all
        _hideThis = "[";
        for (int y = 0; y < SubOptions.GetLength(0); y++) {
          //add all items to string of things to hide except its own subvalue
          _hideThis += "'" + SubOptions[y].ClientID + "',";
        }

        //close array string
        _hideThis = _hideThis.Substring(0, _hideThis.Length - 1) + "]";
        Options[SubOptions.GetLength(0)].Attributes.Add("onClick", "HideThis(" + _hideThis + ");");
      }
    }

Calling the function:

      RadioButton[] Options = { DateRangeCreated, LakerID, TestName, SpecificTest, PaidStatus, DateRangeTest,All };
      HtmlGenericControl[] SubOptions = { OptionalDatesCreated, OptionalLakerID, OptionalTestName, OptionalSpecificTest, OptionalPaidStatus, OptionalDatesTest };
      
      //Javascript on click events and display states
      generic.BuildSubOptionAccess(Options, SubOptions);
Advertisements

One thought on “The Ramp Problem, Redux

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s