%% This is an example first chapter.  You should put chapter/appendix that you
%% write into a separate file, and add a line \include{yourfilename} to
%% main.tex, where `yourfilename.tex' is the name of the chapter/appendix file.
%% You can process specific files by typing their names in at the 
%% \files=
%% prompt when you run the file main.tex through LaTeX.
\chapter{How the Application Works}
This CDS application was designed for use by a lecturer to present the
mathematical concepts of adding random variables and convolution (in
the classroom, the application is displayed with an Athena Vax workstation
and a projection device for high resolution monitors.) It can
also be used by students to explore these concepts further on their 
own. Since the users are not assumed to be computer experts,
the interface is designed to be as self-explanatory as possible, with
an organized and clear visual layout. Interacting with the 
application should require as little user input as possible,
preventing users from 
giving input that results in unexpected behavior from the
application. The philosophy behind the interface is to
give consistent and natural feedback to the user at all times,
tailoring the interface to the pedagogical task at hand.

\section{Running the Application}
To run the CDS convolution application, log into any Vax2000 or Vax3100
Athena workstation at MIT. At the prompt, type
\begin{singlespace}
\begin{verbatim}
athena% setup cds
\end{verbatim}
\end{singlespace}

This will create a new window, which will read:

\pagebreak

\begin{singlespace}
\begin{verbatim}
>>>> Courseware Development System (CDS) <<<<

[1]  Run CDS on file help.cds
[2]  View CDS user manual
[3]  View CDS programmers manual
[4]  Run devcds (developer's script)
[5]  Run newcds (latest beta version of CDS)

[q]  Quit

*** Enter selection (or any unix command) ->
\end{verbatim}
\end{singlespace}

At the prompt, enter selection {\tt 5}. This will start up CDS.

Next, from within the CDS program, goto to the {\tt FILE} menu
and select {\tt Open...} \linebreak
A dialog box will appear for opening files.

Open the file
{\tt /mit/cds/6.041/convolution.cds}.
This will load in the application described in this document
into CDS. Once the file is fully loaded, resize the window to fill
the entire screen.

\section{Layout of the Application}
\subsection{Introductory Screens}
\begin{figure}[t]
\PSbox{/mit/cds/theses/johnnyp/conv.PS hoffset = -36 hscale = 0.8 vscale = 0.8}
{6in}{4.5in}
\caption{The convolution operation displayed within CDS.}
\end{figure}

The application is spread among six screens, which are displayed
one at a time. One of the first two screens is displayed in Figure
3-1 below. It displays the convolution
operation in both continuous and discrete forms. These screens
allow the lecturer
running the application for a class to display the mathematical 
definition and expand upon it without having to go from the
blackboard to the computer screen. It also introduces
the pedagogical goal of the application in mathematical terms, as a
precursor to the more visual concepts to come in the following screens.

\subsection{Defining and Adding Independent Random Variables}
The third screen of the application demonstrates how to
add random variables by enumerating all points in sample space. 
It is titled ``Defining and Adding Independent Random Variables''.
As shown in Figure 3-2, the screen starts up with two pre-defined
PMFs, and three push buttons from which the lecturer may choose.
 When the user clicks upon one of the buttons,
all three buttons are hidden, and new objects appear on the screen
to carry out the  selected action, along with a button marked ``DONE''.
In each case, the ``DONE'' button will return the screen
to how it looks in Figure 3-2.

\begin{figure}[t]
\PSbox{/mit/cds/theses/johnnyp/fig1.PS hoffset = -36
hscale = 0.8 vscale = 0.8}{6in}{4.5in}
\caption{Defining and adding independent random variables, at start-up.}
\end{figure}

If the user selects the ``Define PMF's'' button, the three buttons
disappear and an array of sliders and labels is revealed, as shown in 
Figure 3-3. There are two sets of sliders, one for each graph.
The left graph displays PMF A, a probability mass function
for some random variable {\it a}, and the right graph displays 
PMF B, a probability mass function for some random variable {\it b}.
The sliders set the values for the PMFs. Each graph has a horizontal
slider, which shows how many possible values the random
variable can take on; the maximum is four. If, in figure
four, the slider labeled ``\# of possible values for random
variable A'' were to be slid to the left to read value 3, then
the rightmost bar in the PMF A barchart would disappear. In addition,
the number of sliders displayed matches the number of points in 
the PMF. That is why there are four sliders for PMF A in the picture
and only three for PMF B.

Beneath the sliders is a label showing the sum of the probabilities
for all points in each PMF. The label is updated whenever the user
adjusts a slider. When the user adjusts a vertical slider,
the bar in the barchart to which it corresponds is immediately
updated. The user can see
that the PMF is being defined as soon as the vertical slider is
adjusted; its corresponding bar is affected, and the sum in the
label below is affected.

\begin{figure}[t]
\PSbox{/mit/cds/theses/johnnyp/fig2.PS hoffset = -36 hscale = 0.8
vscale = 0.8}{6in}{4.5in}
\caption{Defining PMFs for two random variables using sliders.}
\end{figure}

In Figure 3-3, the label for PMF A shows the PMF is 
summing to 1.9, while PMF B sums to 1.0. Since PMFs must sum to
1, PMF A is not valid (see section 2.1). 
The label showing PMF B's sum is highlighted, to indicate that
its sum is valid. These border widths
are updated interactively. When the user
has adjusted the sliders to a valid positioning, the border is thick;
when the user an invalid PMF, the border is thin.

The ``DONE'' button returns to the start-up state of the screen only
if both PMFs are valid. If they are not, a warning label is
shown, and the user is forced to continue redefining the PMFs
until they are both valid. Figure 3-4 displays the warning message.
This allows the user to make a mistake in setting the input,
and then be trapped into reaching a warning message to emphasize
the pedagogical point. Since the message covers all the input
sliders, it makes it impossible for the user to proceed until the
PMFs correctly sum to 1.

\begin{figure}[t]
\PSbox{/mit/cds/theses/johnnyp/yoda.PS hoffset = -36 hscale = 0.8 vscale = 0.8}
{6in}{4.5in}
\caption{A warning message displayed when bad user input is received.}
\end{figure}

Figure 3-5 shows the screen when the ``Show Statistics'' button
is selected. In this state, a table is generated displaying all 
points in sample space for random variables {\it a} and {\it b}. 
The left column
shows the sample point as an ordered pair of the value of 
random variable {\it a} and random variable {\it b}, 
respectively. The second
column shows the probability of that point in sample space
after the outcome of each experiment, and is based on the
values previously defined by the user. For example,
sample point [0,0] occurs when {\it a} = 0 and {\it b} = 0.
${\it p}_a(0) = 0.7$, and ${\it p}_b(0) = 0.5$, and this is shown
in the graph as well. Thus the probability of this sample
point ${\it P}_{{\it a},{\it b}}(0,0) = {\it p}_a(0) * {\it p}_b(0) 
= 0.7 * 0.5 = 0.35$, as is shown on the label. The third
column displays the sum of the values of random variables {\it a} and {\it b}
at that sample point.

\begin{figure}[t]
\PSbox{/mit/cds/theses/johnnyp/fig3.PS hoffset = -36 hscale = 0.8
vscale = 0.8}{6in}{4.5in}
\caption{A table enumerating all points in the sample space and PMF C.}
\end{figure}

The fourth column shows the new
random variable {\it c} defined by enumerating all the points in the
sample space generated by PMFs A and B. 
At each point, all the probabilities where the
values of {\it a} and {\it b} equal that value of {\it c} are added
and the sum is displayed for each value.
Having all this information in one place,
the lecturer can show all the enumerated points in 
the sample space, and how they create PMF C. 
By scanning the first table for all the
values where {\it a} and {\it b} sum to a particular value, 
one can pick out all the
probabilities which contribute to that value of {\it c}. 

The number of points in the sample space
is limited to sixteen; as a result, each random variable to be added can have
from one to four points. The table generated is complete for any sample
space the user can define;
if PMF A has two points and PMF B has three, then a six-row table
is generated. If both PMFs have four
possible values, then a sixteen-row table is generated. By limiting
the size of the sample space, computational power is
sacrificed, but the screen layout is clearer, since there
is less information to display. Thus the insight gained by the user is
actually greater when the computational power is reduced.

The third button in Figure 3-2, labeled ``Show PMF C'', simply
displays PMF C on a third barchart directly below PMF A. It also shows
a label which lists the values for all three PMFs.

\subsection{The Convolution Algorithm At Work.}
Figure 3-6 displays the fourth page in the application, and shows
how the convolution algorithm works graphically. PMF A and PMF B
are still in the same place on the screen as they were before, but
now their bars have different colors. A third barchart, labeled
``Convolving PMF A and PMF B'', shows the two barcharts overlapping,
with one of the barcharts mirrored across the y-axis and 
translated to the right.
A slider, labeled C(w), reads how many points to the right that the
mirrored PMF has been translated; adjusting the slider will slide the
PMF left and right. When C(w) = 0, the mirrored PMF's rightmost
value is located at x = 0.


\begin{figure}[t]
\PSbox{/mit/cds/theses/johnnyp/fig5.PS hoffset = -36 hscale = 0.8
vscale = 0.8}{6in}{4.5in}
\caption{The convolution algorithm at work - sliding PMF A.}
\end{figure}

Two toggle buttons are present, exactly one of which is selected
at any given time. The choose whether PMF A or PMF B is to be mirrored and
slid across the x-axis. These buttons exist to show the symmetry of the
convolution operation. Selecting PMF A to be slid
across the axis to compute PMF C corresponds to this form
of the convolution operation:

\begin{center}
${\it p}_c({\it w}_0)=\sum_{{\it x}_0=-{\infty}}^{\infty}{\it p}_a
({\it w}_0-{\it x}_0)*{\it p}_b({\it x}_0)$
\end{center}

Because the parameter ${\it w}_0$ is what is changing in the equation,
we can see that PMF A will be mirrored and translated
across the axis. If the toggle button ``Slide PMF B'' is selected, the
symmetrical case holds,

\begin{center}
${\it p}_c({\it w}_0)=\sum_{{\it x}_0=-{\infty}}^{\infty}{\it p}_a({\it x}_0)*{\it p}_b({\it w}_0-{\it x}_0)$
\end{center}
and now it is PMF B which is slid across the axis. This symmetry is also
displayed in Figure 3-7. The only difference between the two pictures
is that from one to the next, the ``Slide B'' button was selected
instead of the ``Slide A'' button. Notice that the barcharts in the
``Convolving PMF A and PMF B'' graph have exchanged roles; in Figure
3-7, now it is PMF B which has been reversed and translated across the axis,
rather than PMF A as in Figure 3-6.

The product of the two PMFs in the operation is a vector dot 
product. In Figure 3-6,
the vector dot product is displayed by the overlapping barcharts. 
Overlapping
bars are multiplied together when computing the dot product.

\begin{figure}[t]
\PSbox{/mit/cds/theses/johnnyp/fig6.PS hoffset = -36 hscale = 0.8
vscale = 0.8}{6in}{4.5in}
\caption{The convolution algorithm at work - sliding PMF B.}
\end{figure}

The fourth graph displays the PMF C that in gray.
In addition, the probability of the value of random variable {\it c}
which is currently being computed (as indicated in the slider) is
drawn in black.

Below these graphs is a series of labels. These present exactly the same
information as the barcharts do, but in a different way. The label
to the right of the label marked ``PMF A'' in Figure 3-6 
is PMF A, reversed and translated 
two steps to the right. The label next to ``PMF B'' lists
PMF B's values in their correct order, and remains stationary,
as it does on the graph. The 
values on each label line up as they did on the barchart, and form
columns. Below each lined-up column is the product of the
two values; in Figure 3-7, 

\begin{itemize}
\item  0.70 and 0.20 are lined up to form the product 0.14.
\item 0.30 and 0.30 are lined up to form the product
0.09, and
\item 0.00 and 0.50 are lined up to
form the product 0.00, 
\item 0.14 + 0.09 + 0.00 = 0.23, the value of PMF C at w = 2.
\end{itemize}

Notice in Figure 3-7 how the labels reposition themselves. Now PMF B's label
is the one that is translated, and the same sum is shown below
the two PMFs' listings,
except that now the values in the sum are in reverse order from before.
This shows the symmetry of the convolution operation to the viewer.

Finally, at the bottom of the screen, we see the partial listing
of the values of PMF C as they are being calculated. All these labels
and barcharts are controlled through the actions of a single slider
and two toggle buttons.

\subsection{Play Time!}
Figure 3-8 shows the appearance of the fifth screen. Again we have graphs
for PMF A and PMF B, but they can take up to ten points each now. 
There are two toggle buttons, marked ``Define PMF A'' and
``Define PMF B'', which work similarly to the toggle buttons 
on the screen discussed above. When a toggle button is selected, the 
corresponding PMF graph's border is highlighted, showing that this
PMF is currently being defined. PMF C is shown at the
lower left corner, representing the convolution of PMF A and PMF B.
It is updated in real time; as soon as PMF A or B is altered, 
PMF C is immediately shown on the third graph.

\begin{figure}
\PSbox{/mit/cds/theses/johnnyp/binomial.PS hoffset = -36 hscale = 0.8
vscale = 0.8}{6in}{4.5in}
\caption{Defining and convolving binomial PMFs.}
\end{figure}

In Figure 3-8, note the menu bar, 
where a new menu pane, labeled ``PMFs'' has now
appeared. This menu appears when this screen is entered for the
first time. The menu items are deactivated when the screen is exited,
and are reactivated when the screen is returned to. The menu pane
has seven items:

\begin{itemize}
\item Bernoulli - generates a Bernoulli PMF, with parameter P.
\item Binomial - generates a Binomial PMF, with parameters P and N.
\item Geometric - generates a Geometric PMF, with parameter P.
\item Pascal - generates a Pascal PMF, with parameters P and R.
\item PMFC - generates a PMF from what is in the PMF C graph.
\item Random - generates a random PMF, whose values still sum to 1.
\end{itemize}

(See \cite{jab} for more details about these types of PMFs.)

For item ``PMFC'', the updating is handled slightly differently. This
item allows the user to set PMF A or PMF B to be equal
to some portion of PMF C. The portion of PMF C selected is
controlled by the sliders ``...starting at'' and ``\# points...''. 
As Figure 3-9 shows, there is an additional button labeled ``Set To This''. 
Setting the parameters for the number of points and where they start
do not update any of the charts until the button 
``Set To This'' is clicked upon. (This is
because of the infinite loop that would be created when setting PMF A
to PMF C, then updating PMF A, which updates PMF C again, which
updates PMF C again, etc...) This is the only one of the six possible
PMFs that can be defined that does not automatically update
the convolved PMF while PMFs A and B are being defined.

\begin{figure}[t]
\PSbox{/mit/cds/theses/johnnyp/pmfc.PS hoffset = -36 hscale = 0.8
vscale = 0.8}{6in}{4.5in}
\caption{Setting PMF A to a section of PMF C.}
\end{figure}

\section{Design Philosophy}
Users of courseware at MIT often have problems with software that
takes longer to learn how to use than it does to learn
what it is trying to teach.
Courseware applications need to be easy to use; this way, lecturers will
be able to work them into their classes easily, and students can
get their homework done by concentrating on the content, not the
mechanics of the program.
This is achieved by creating a sensible interface through three
main guidelines:

\begin{itemize}
\item Visual feedback in the application needs to be immediate. 
\item The screen should not be cluttered.
\item The input required of the user should be spare and robust.
\end{itemize}

The first guideline, concerning visual feedback, 
is implemented in many places. On the screen shown in
Figure 3-3, where the PMFs are defined, the barcharts and the labels change
whenever the sliders are moved by the user, in real time.
Updating is constant. In addition, when the user
has a correct PMF, it is signaled immediately, by highlighting the
borders around the sum. This communicates to the user that something
significant has happened: a correct assignment for the PMF has been found.

The screen in Figure 3-8, where different types of PMFs are defined and
convolved, the feedback is immediate. For the binomial PMF shown, the
highlighted graph, which is indicated also by the toggle buttons,
changes as the parameters change. At the same time, the
convolution of PMF A and PMF B is updated as well, giving constant feedback.
If a menu
item is selected, the proper sliders immediately appear on the screen. 
This way, the user can understand immediately the effects of any input
given to the program.

The second guideline emphasizes clarity over power. By not cluttering
the screen, less information is communicated to the user. On the
other hand, what is communicated is done so with greater clarity and visual
appeal. An example of this in the interface
design has to do with the precision of the PMFs displayed 
in Figure 3-7, the screen where the convolution algorithm
is displayed with the sliding labels. 
For example, a greater decimal precision could have
been used; the maximum precision is
2 decimal places. While 4 decimal places would have been less trivial
and computationally more powerful, it also would have cluttered the 
screen with too many digits, making it
actually more difficult to gain an understanding of what is
happening on the screen.

The third guideline is about user input. Parsing input is a complex
process; many courseware applications recognize limited syntaxes,
and if the user deviates slightly from that syntax, the
application falters. By limiting the user input
to setting parameters in sliders, and performing actions 
with single push buttons,
it is insured that the user cannot create program states
necessitating excessive error handling. Sliders also provide
automatic range-checking for the user input, 
so the user cannot select an illegal value, or a value that
will throw off the range of a plot.

Overall, the application should be self-explanatory.
If the screen is uncluttered, it will be obvious 
what choices of action the user has.
If input is limited, then
there are fewer decisions about input that the user needs to make.
If feedback
is immediate and logical, then the user quickly understands how things work.
Thus, the clarity of the interface has been paramount to the design
of this project, and the editing environment CDS offers is ideal
for developing such an interface quickly.

The code structure that went into developing the actions in the application
are the topic of the next chapter.








