Work Plan

The set up and registration page, in it's first iteration, will not be too complex. The front end web page will be built by team members Alex and Mitch and Carter will handle the back end database integration.

The set up and registration page will be initially created and potentially improved upon down the road if time and bandwidth allow. The first iteration will be an HTML form that collects user data. This page will be linked to from the user login page by a link to set up an account. This HTML form will include a checkbox indicating that the user accepts the site's terms of service. Once the user submits the form with the checkbox checked, the data from the form will be transferred to the back end database and an entry for a new user will be created. This entry will contain all the information they entered, including; a student's name, email address, student number, the school they attend, phone number, and their expected graduation year. This HTML form will be created as a static mockup before being integrated with the back-end server.

The second phase of the design process is a lower priority but will make the site more usable. Javascript features can be added such as live error checking for password and student ID dissimilarities. Additionally, we will want to check the student ID the user inputs against the W&L or Rollins database, depending on the school, to verify that the user is actually a student.

Our team have broken down our features to three main areas:

1. Student User Login Page (Pan)
2. Forgot Password (Tina)
3. My Progress Page (Ruinan)

Pan will make the appearance of the login form enjoyable using HTML and CSS. Ruinan will explore the various ways ChemTutor can display the progress. He will first look at how other website does the my progress page (self-service, Leet Code, and etc). Upon having an idea of what the interface should look like, Ruinan will then create the static mock up, and the connection to the database and etc.

1. Phase 1: Research During the first phase, Pan and Tina will discuss with the “set up” group about how to fetch and compare the password from an ID entered. Tina will also discuss with them how to hash and store a new set of ID+password. Then, she will research ways to send out email from the ChemTutor website. Ruinan will research ways to create pie charts (javaScript pi charts, maybe?). How to connect to the database, and communicating with the registration team to make sure all the information needed is in the database.
2. Phase 2: Mock up In the second phase, Pan will make a good-looking login page using servelet. There will be a link to the forgot password page. Tina will make a “enter your email” page, which will send the user's ID and link to reset password page to this email address. Next, Tina will create a reset password page and record the ID with this new password. Ruinan will create the static mock up for his my progress page. This process includes a static web page that have the various clickable modules. And within each modules, there will be problem set questions. The problem sets are also clickable, but they will only show how a static webpage since it is not connected to the database yet. Ruinan will also create a static pie chart or other displaying tools in this phase.
3. Phase 3: Implementation In the last phase, Ruinan will implement the static mock up pages he has created. Ruinan will connect the static webpage with the database and display the correct information that is needed. Ruinan will also test the webpage to see whether the information displayed is accurate and correct.

For each team member we have listed the main first role of each person. Initially we are going to focus on finding an open source software code to implement the feature of math formula presentation. There are many various already built programs we can use thus we have divided up some of the parts here to help streamline the process of finding our main framework for our feature. It is important we each understand our own role, but we will need to be ready to understand each others' roles when proceeding to other parts of the project.

• George Barker: explore the possibilities of MathJax in implementing our functionality
• Rinn: explore the possibilities of MathML in implementing our functionality
• Coletta: explore other programs able to implement our functionality and possible combinations

1. Exploratory Phase: We need to look at MathJax and MathML and determine whether one or another program is the best program for our needs. We will need to discuss further questions with our client to determine more accurately the needs of our program. This will help in choosing the programs we would like to consider, as well as aid in the next step in determing which program to actually choose and eventually implement.
2. Selection Phase: Here we will use the results of our exploratory phase plan to determine an open source framework or multiple frameworks to work with on our feature. There are several issues we will need to consider in the choosing phase. We want to be able to convert a sentence in the following format: 'Solve for x in the following equation. Remember to include the correct number of significant figures in your answer.\nx/5.904 + x/6.0 = 5.803'. This is not a very complicated equation and we need to be sure that the program we implement is relevant for an intro level chemistry practice problem. In addition to the previous example of representing fractions, we need to be able to represent trig functions. The technologies to implement this representation may not need to be too intensive. During exploratory phase we will contact our client to figure out more specifically how intensive of a program we need. It may also be important to easily incorporate new symbols and expressions, perhaps as the scope of chemtutor expands. We also must be aware of the input to our framework. We should find a framework that can take the above example and easily convert it to a professional math formula.
3. Implementation Phase: This is the part where we will use the python scripts developed by our client and transform the output of those scripts to a professional looking question that will be displayed to the student by the program. We will need to consider details here. We will need to consider the details of what we are receiving as input from our client. What is our client capable of doing to make our formulas properly display. Also how can we minimize the work required to do so on everyone's end. It will be essential for the previous two steps to be done correctly for implementation to go smoothly. Some considerations in this phase are making sure the special math text is properly scalable and fit smoothly into regular text.

We divided the work amongst ourselves in terms of the user end of the periodic table and the back end of the various operations/mechanisms/views.

• Connor: He will be working on the appearance of the table which is mostly going to be HTML and CSS
• Abhi and Utkrist: Since the back end of the project will be harder and have a larger workload, we decided to have two people work on JavaScript.

Lastly, all three of us are going to work on improving the final appearance of the periodic table. We will review and analyze everything at the end together as a team.

Our design involves the appearance of the periodic table in the webpage and the integration of the periodic table with various different exercises along with other minor adjustments. We will also be adding the options of user color selection, partial view of the periodic table (individual elements, a single category of elements, or the entire periodic table). Furthermore, exercises and users themselves will be able to restrict view in terms of the chemical name of the elements (the chemical symbols will always be displayed). Our project does not have an exploratory phase since we already have a base to work on. Therefore, for the most part, we will be adding, updating and adjusting the HTML and CSS codes for adding/updating features relating to the appearance of the table. For integration, we will be making changes to the JavaScript code. For features like changing colors of categories, partial views of the table, font colors, font sizes etc., we will have to adjust the HTML and CSS along with the JavaScript code.

For now, I (Alex W) am the only person working on the practice modules. The Practice Modules are high-priority because they will help us understand the design of the application as a whole- thus it is important for other groups to finish their features first so we can put a lot of energy into to this feature. This is how I divided up the different parts of the project in the design outline:

1. HTML/CSS of a slide: Just working on the front-end looks of an individual slide to make sure it matches the examples on the Chem Tudor mock-up.
2. Storing Questions/Answers: Begin back-end of the project. How will we store the questions, answers options, and answers corrections?
3. Attaching Question to Slide: Assigning questions to slides, and making sure that they are in random order.
4. User Input/Verification: Includes back-end part of what happens when user clicks on an answer (comparing their answer to the correct one, keeping track of correct answers, etc.) and front-end (the appearance of the green check or red x, the appearance of the next button, the final result slide).

One thing that we will also need to incorporate is multi-step problems. However, I believe that we should first finish the program for just single-step problems and then go back and modify for multi-step problems if we have time.