Tag Web challenge 2011

Basic Chemical Stoichiometry Website

Theme: Engaging Students in STEM Learning

Radhika Sharma and Gabriella Cobian- Soccer Fanz

Collins Hill High School

3/27/2011

2

B A S I C CH EM I CA L S T OI C H I OM ET RY DO C UM EN T A T I O N

PLANNING PHASE

Targeted Learning Topic:

This website focuses on the Science aspect of the universal STEM theme for this particular competition. My partner and I chose science, specifically the chemistry branch, because of the practical application it has in our everyday lives. Knowing this fact, we were intrigued, and our curiosity for this subject enabled us to make it our strength. In addition, we had great teachers from our science department who we knew would be of aid to our website.

Target Audience and Level:

This website is intended as a guide for any student taking high school or college chemistry and is struggling (or wants to learn from the start) with the basic principles of stoichiometry. It is also for any inquisitive person who wants to commence on learning a little bit about stoichiometry.

Learning Goals:

This website will aim to give a better understanding of the following:

- The concept of the Mole and Avogadro’s Number- How to calculate molar mass - Manipulation techniques of the molar mass to calculate percent composition, and

empirical and molecular formulas. - Finding Moles and Mass of Reactants and Products- Finding Limiting Reactants - Calculating Percent Yield

Determination of Application and its Purpose:

Once the audience of this website has read the information on the website (or necessary sections as needed), there is going to be a set of practice problems corresponding to each section for the audience to master. If they get the problems correct, then that means they understand the basics of chemical stoichiometry!

3

Lessons Learned:

We came across many issues on settling for the correct chemistry topic, but we used reasoning and persuasion to come to an agreement about a topic that we were capable of doing. Deciding the goals was also a concern. Mainly, the issues were pertaining to the best quality of the application that could be produced in the amount of time that was available for this project. However by avoiding procrastination and allotting ourselves enough time, we were able to tackle our issues.

CONSTRUCTING PHASE

Requirement Analysis and Definition:

A more specific goal for this website is that this website will target the essential topics in stoichiometry, and through simple, yet succinct numbered steps, help us understand how to do the basic stoichiometry calculations. For most chemistry calculations, everyone needs to know some basics of stoichiometry, and this website can serve as a refresher/learning aid. All the user needs is Internet Explorer (or any other web browsing software), a calculator to do the practice problems, and a positive attitude so they can be able to learn or refresh this information.

Functional Design: www.cuttingedgeeagles.org

4

Web Challenge Link

\

If needed, do the following or skip down these two steps:

1) Enable images (internet explorer)

Tools Internet Options Advanced Tab Scroll down to Multimedia and check, “Show pictures”

5

Click this link to access main website.

1) 2)

3)

2) Enable ActiveX Controls

Appears at the top of your screen. Click for options.

6

Allow Blocked Content

Say “Yes” to the security risk. There is no security risk associated with this application.

Navigate to any needed part of the website using the CSS Navigation Bar

The outline above is the most useful part of the website and contains numbered steps on stoichiometric calculations, and the last tab contains practice problems to reinforce what the

audience learns.

Application Tools Used:

The main program used to assemble this website was using HTML coding in Microsoft ® Notepad Version 5.1. Notepad was easier to work on the website at home because we did not have Dreamweaver (an easy program to create websites) on either of our home computers. The files could be easily managed between home and school without worrying about the unity of the programs.

To edit JPEG pictures, Microsoft ® Paint Version 5.1 was used. Not many changes had to be done to JPEG pictures, and it was the simplest photo-editing software available to us.

7

For our GIF images, we used Microsoft ® Word 2007 to create the equations in an equation editor and then we transferred them to Corel Paint Shop Pro X2, Version 12. From there we used the GIF Optimizer Export Wizard Feature to convert them to web-compatible GIF images. We had to resort to using Corel Paint Shop Pro X2, Version 12 because Microsoft ® Paint Version 5.1 did not provide an excellent GIF image conversion. Figuring out how to transfer JPEG images to a good quality GIF image was new technology that we learned. It took us several days.

We had to use Microsoft ® Word 2007 because we could not find any HTML codes that would enable us to put the mathematical division sign. So, instead, the images had to be created of the equation (in the only equation editor that we knew) and made as GIF images.

Lessons Learned:

The major lesson that we learned was to always use GIF images when working with websites. Those kinds of images are transparent (therefore having low color quality), so when a background color is added, it does not leave a white box around the image like it does for JPEG. Originally, all our images were JPEG, but we had to retype, and reconvert to GIF images, which took up lots of valuable time.

Another lesson we learned was to ask math teachers of a good equation editor. In the website, most of the equations look a little funny and pixilated. Microsoft ® Word 2007 was stubborn, and would not let us change the default font of the equations, thus making our graphics look fuzzy.

A key issue that was tackled was how to cite images. After emailing the TAG director and learning that many people had not raised the issue, the issue was addressed. For all intents and purposes, since images did not serve as a main area of learning and were for mostly decorative purposes, only the links of the images are cited. The cited page, along with a citation of the textbook that we used to reference the information, is on a separate page on the website that you can access by clicking the last tab on the navigation bar.

TESTING

Testing Methodology:

8

To review our website once it was completed, we proofread it three times. We did

come up with some errors, mostly typos and spelling errors when we were initially typing our code.

After fixing those errors, to make sure everything else was perfect, we showed the website to our AP chemistry teacher. Some of the errors the teacher pinpointed and had us correct, involved changing the initial diagrams and equation graphics. We also had some problems with the wording that we were not able to fix when we proofread. After four times of correcting it, we showed it to the teacher once more, and there were no errors.

Lastly, we showed the website to each of our family members, asking for suggestions to improve the overall look of the website. The family members recommended we change some wording on the home page. After changing the wording, we looked over it a seventh time making sure the website defined our objective, had a good appearance, and we were ready to submit.

Lessons Learned:

We made sure to show it to several other people, outside our team, so we could get input. We also made sure to proofread it several times to make sure there were not any mistakes, so we could avoid error.

IMPLEMENTATION

Specific Instructions for Teachers/Judges/Audience:

As stated in our functional design images, the only instructions are to make sure graphics are turned on whatever web browser that is being used. Also, please make sure on the home page that ActiveX control is enabled, so the JavaScript slideshow can be viewed.

It is highly recommended for participants that are new to learning stoichiometry (but want to learn it in a simplified manner) click and read the pages in order of the navigation bar from left to right, as that will sequentially teach you and help you understand stoichiometry concepts better.

Usefulness of Application:

This application was meant to be concise, letting the audience know of the important details of stoichiometry, yet be a simple way of explaining the concept. Many

9

learners, especially students, do not prefer lengthy passages of information that can tend to get boring and have them lose their focus.

This website engages the learner because of the use of numbered steps to explain calculations, which substitutes the idea of using long wordy concepts and the confusion that can come with it. In addition, this website contains a section full of practice problems of the topics that were covered (to immediately reinforce the knowledge) with answers just one click away.

Hopefully after the interested learner uses this application, they will feel that they have mastered this concept easily with minimal to no trouble at all. Budget:

In any step throughout this web application development, there was no need for money at all. Everything was developed at no cost.

Systematic Approach:

The idea of using a systematic approach was utilized very well in our group. We knew that designing a website required lots of planning beforehand. While we were constructing the website, a lot of attention was required (especially when typing in HTML codes), we created several outlines and modified them as we were developing the website.

We made sure that both people on our team did equal work to alleviate stress. If something messed up, we would collaborate and problem solve. Using the systematic approach enabled us to complete this website with little stress as possible, and we are really glad that we used it.

Lessons Learned:

We made sure the implementation phase also was executed to the best of our abilities because the purpose and accessibility (the two heavy components in the website) depended upon this phase. In addition, to save ourselves stress, we made sure we employed the systematic approach so we could complete this website application with the least amount of errors and troubles as possible.

Overall Lessons Learned:

One of the key lessons learned was to not use JPEG images when creating websites. However, that issue was fixed immediately when encountered.

10

Another issue for this website is the pixilated graphics. We certainly would make

sure that next time we talk to a math teacher about an appropriate equation editor that does not mess up when converted to a graphic.

If we were to do this project again, we would make sure to add a cascading style sheet (CSS) to the whole website, not just the navigation bar. CSS improves the overall look of the website and definitely makes the website more interesting.

We would also use Adobe Dreamweaver to assemble the website because it certainly provided the ease of tedious and long hours of HTML coding that was put into this website. Dreamweaver would let us do many more things to the application, so it would have been further improved.

However, despite the issues that pertained to this website, we did enjoy this project very much. Our stoichiometry skills were refreshed, and we learned a little bit more about HTML coding. We would like to thank TAG for giving us the opportunity to develop this simple, yet succinct application.

11