Software Requirements Specification Template

Final Project Documentation

Educational Array

Prepared by Group 4:

Jonathan King

Maria Paramita

Suronapee Phoomvuthisarn

William P Reichl

April 26, 2006

Final Project Documentation: Educational Array Page 1

Table of Contents

Table of Contents 1

1. Introduction 2

1.1 Purpose 2

1.2 Project Scope 2

1.3 Team Members Contribution 2

1.4 References 2

1.5 Related Documents 2

2. User Requirement 2

2.1 Overall Description 2

2.2 Characteristics and Features 2

3. Analysis and Design 2

3.1 Methodology 2

3.2 Product Features 3

3.2.1 Step by Step Tutorial 3

3.2.2 Topic selection 3

3.2.3 User Profile 3

3.3 User Classes and Characteristics 4

3.4 Hardware and software requirements 4

4. Implementation 5

4.1 Environments and Tools 5

4.2 Limitations 5

4.3 Implemented Features 5

4.3.1 Topic selection 5

4.3.2 User Profile 6

4.3.3 Step by Step Tutorial 9

1. Introduction

1.1 Purpose

To document the software development process of final project assignment of group 4 : develop an educational application to visualize the work of arrays and loops in a programming language. The application is named “Educational Array”.

1.2 Project Scope

The project covers the software development stages of this application, including :

· Gather user’s requirement

· Analyze and design

· Implementation

· Documentation and presentation

1.3 Team Members Contribution

Final Project Documentation: Educational Array Page 1

· All members :

o discussing initial requirements

o contributes initial screen design

o testing

· Jonathan King :

o providing algorithm for each tutorials

o implementing user profile feature

o doing the presentation

· Maria Paramita :

o designing the user profile feature

o documentation

· Suronapee Phoomvuthisarn :

o designing and implementing screens

o preparing presentation

· Wil Reichl :

o implementing back end engine

o integrating the system

Final Project Documentation: Educational Array Page 1

1.4 References

· Rogers,Yvonne. Sharp, Hellen. Preece, Jennifer.

Interactive Design : Beyond Human-Computer Interaction, chapter 8 : Design, Prototyping, and Construction

· Wiegers, Karl E. Software Requirements Specification Template : http://www.processimpact.com/process_assets/srs_template.doc

1.5 Related Documents

Final Project Documentation: Educational Array Page 1

· Design Ver.1 : Initial Design

· Design Ver 2 : Revised Design

· Design Ver 3 : Revised Design

· Presentation Slides

· Tutorial Algorithms

· Profiling Questions

Final Project Documentation: Educational Array Page 1

2. User Requirement

2.1 Overall Description

Teachers and students need a web-based educational application to explain the concept and work of array and loop, by providing a visual step by step explanation. The application shows an example code of array and loop functions, such as find a minimum item in a two-dimensional array.

The application explain the code line by line, similar to debugging system. The application shows all variables involved in the code and visualize how the variable changes as the cursor move from one line to another.

This application is expected to help teachers to explain concepts more clearly and to help students to better understand the work and concept of arrays and loops.

2.2 Characteristics and Features

· Simple and Natural Interface : The interface should be simple and natural for users to use

· Interactive application: Users should be able to interact with the application.

· Adaptive - Users should be able to choose suitable tutorials based on their level of knowledge Choices to make the application adaptive are :

o By providing a level selection

o By providing a pre-test

3. Analysis and Design

3.1 Methodology

After user requirement is collected by conducting an interview with the users, in this case Dr. Brusilovsky, the process is continued with analysis and design phase using prototyping. Prototyping is defined as a limited model of the design, that varies from a paper storyboard through a software, to give the users the vision of the product, enable them to explore it, and give them some experience of using it. (Rogers,Yvonne. Sharp, Hellen. Preece, Jennifer).

Prototyping is chosen because it is a powerful communication tool to use between users and developers, and among the developers themselves. In our analysis and design phase, we use screen mock up as a prototyping tool. Screen mock up is drawn and evaluated by our group. As the consequences, the design is changed for several times.

Detail design such as screen design and class design is attached in the Appendix A, B, and C.

3.2 Product Features

3.2.1 Step by Step Tutorial

3.2.1.1 Description and Priority

This is the core function of the application. The application will display lines of codes of array/loop functions. Users are able to trace the lines forward and backward, and the application provides explanation for each line, such as what is the value of array elements and variables used in the code.

3.2.1.2 Stimulus and Response Sequence

· The application displays lines of codes, the array element values, and variable values.

· User trace the lines forward and backward.

· Everytime user trace forward or backward, the variable values will be refreshed.

3.2.2 Topic selection

3.2.2.1 Description and Priority

This is a high priority feature. Topic selection enables user to select what topic to cover in the tutorial. The application provides two type of array : one dimensional array and two dimensional array, and five different functions of array/loops for each type. The functions are

· Find minimum value in an array

· Find maximum value in an array

· Calculate the sum of array elements

· Search a given value in an array

· Sort array elements

3.2.2.2 Stimulus and Response Sequence

· The topic selection is displayed on the initial screen.

· The user chooses one of the topics and one type of array

· The application bring on the tutorial with the selected topic.

3.2.2.3 Data design

Each selected topic and array type correspond to a tutorial. A class is designed to store the selected topic , the selected array, and the corresponded tutorial.

3.2.3 User Profile

3.2.3.1 Description and Priority

As addition to topic selection, the application enables users to select tutorials based on their level of expertise. User profile feature has two options :

· Selecting a level of expertise (beginner, intermediate, or expert) :

· Taking a pre-test to determine user’s level of expertise:

This is a low priority feature.

3.2.3.2 Stimulus and Response Sequence

· The initial screen displays user profile selections.

· If user chooses level of expertise:

o The application decides which tutorial is best matched with user’s expertise

o The application starts the tutorial based on selected level.

· If user chooses to take a pre-test to determine user’s level of expertise:

o The application displays a set of questions.

o User submits the answers of questions.

o The application checks the answers and gives a score based on the test result.

o The application decides which tutorial is best for the user based on the score.

o The application starts the tutorial.

3.2.3.3 Data Design

For users who select to take a pre-test, a class is designed store the pre-test score. The class has a method to determine user level based on the score.

3.3 User Classes and Characteristics

Teachers and students are the target users of this application.

The first user group, teachers, uses this application to visually demonstrate the concepts and works of arrays and loops. They are experts in programming, and they know what topics they want to demonstrate. Thus, they tend to use option to select functions.

The second group, students, has different characteristics. They are not experts users, so they are probably not sure about their level of knowledge. First and third selection features (selecting level and taking pre-test) is purposed for this group.

3.4 Hardware and software requirements

The application should run on x86 machine, with this minimum specification:

Processor : Pentium, Memory : 256 MB

To run the application, Java Run-Time Environment should be installed.

4. Implementation

4.1 Environments and Tools

We use NetBeans 4.1 to implement the application.

4.2 Limitations

· The application is not implemented as an applet

· The initial design includes a post-test (a test to take after users do the tutorial). Our final product doesn’t include this feature.

· The application only includes 4 questions for the pre-test.

4.3 Implemented Features

4.3.1 Topic selection

Topic selection is displayed on the initial screen. To use topic selection, user should select an array type and a function, then click start button. Figure 1 displays the topic selection.

Figure 1 : Topic selection on the initial screen

4.3.2 User Profile

User profile is displayed on the initial screen. User can select their level or take a pre test. Figure 2 shows the user profile on the initial screen.

Figure 2 : User profile on the initial screen

If user select a level and click the “start” button, the application activates the tutorial based on the selected level. If user selects to take a pre-test, application displays 4 questions to answers, as showed in figure 3 and figure 4.

Figure 3 : Pre test page (top area)

Figure 4 : Pre test page (bottom area)

User submits the answer, and the application shows test result and question answers, and suggests users to select a level based on the test result, as displayed on Figure 5. To do that, user needs to click “Back to main menu” button and go to suggested tutorial. However, user is able to select tutorial other than the suggested one.

Figure 5 : Pre test result.

4.3.3 Step by Step Tutorial

Figure 6 shows the main function. The left section displays line of codes, with a highlight to show where is the current cursor. At the right of lines of codes, the application displays the content of the array used in the code. At the very right, the application displays the variables used in the code. The bottom – right section shows the output value of the code.

User moves the cursor by clicking “back” and “forward” button. As user moves from one line to another, the variables are changed. At the end of the code, application displays the output at the bottom-right section.

To help user better understands the code, a tool tip is provided for each line, explains what the code does at that line.

Figure 6 : Tutorial screen.

Every time user does a tutorial, the application saves user’s level or selected topic, so when user click “back to menu button” and select the same level, the application will not activate the same tutorial.