📜 ⬆️ ⬇️

Periodic table on school computer science

(Management Cards)
(Dedicated to the International Year of the Periodic Table of Chemical Elements)
(The last additions were made on April 8, 2019. The list of additions is immediately under the cut)

image
( Mendeleev's Flower , Source )

I remember we were duck. These were three lessons at once: geography, natural science and Russian. In the lesson of natural science, a duck was studied like a duck, what wings it has, what legs, how it floats, and so on. In the geography lesson, the same duck was studied as a resident of the globe: it was necessary to show on the map where it lives and where it does not exist. In Russian, Serafima Petrovna taught us to write "y-t-to-k-a" and read something about ducks from Brem. In passing, she informed us that in German duck is like that, and in French that way. It seems then it was called the "complex method." In general, everything came out "in passing."
')
Veniamin Kaverin , Two Captains

In the above quotation Veniamin Kaverin skillfully showed the shortcomings of the complex teaching method, however, in some (perhaps quite rare) cases, the elements of this method are justified. One of such cases is the Periodic Table of D.I. Mendeleev at the lessons of school informatics. The task of programmed automation of typical actions with the periodic table is evident for schoolchildren who have begun to study chemistry, and is divided into many typical chemical tasks. At the same time, within the framework of informatics, this task allows us to demonstrate in a simple form the method of control cards, which can be attributed to graphical programming, understood in the broad sense of the word as programming using graphical elements.

(April 13, 2019 made additions:
Addition 3: Chemical quiz
Addition 4: Integration of several tasks in one program
April 8, 2019 made additions:
Addition 1: how the chemical calculator works
Addition 2: examples of tasks for filters)

Let's start with the basic task. In the simplest case, the Periodic Table should be displayed on the window-form, where each cell will contain the chemical designation of the element: H is hydrogen, He is helium, etc. If the mouse cursor points to a cell, then the element designation and its number are displayed in a special field on our form. If the user presses the LMB, the designation and number of this selected element will be indicated in another field of the form.

image

The problem can be solved on any universal PL. We will take a simple old Delpi-7, understandable to almost everyone. But before programming in PL, let's draw two pictures, for example, in Photoshop. First, we will draw the Periodic table as we want it in the program. Save the result in a graphic file table01.bmp .

image

For the second pattern, use the first one. We will consistently fill the cells of the table cleared of any graphics with unique colors in the RGB color model. R and G will always be 0, and B = 1 for hydrogen, 2 for helium, etc. This figure will be our management card, which we will save in a file as table2.bmp .

image

The first stage of graphical programming in Photoshop is over. Let's move on to graphical GUI programming in Delpe-7 IDE. To do this, open a new project, where we place a dialog call button ( tableDlg ) on the main form, where the work with the table will take place. Next we work with the form tableDlg .

Put the TImage class component on the form. Get Image1 . Note that in the general case, for large projects, automatically generated names like ImageN , where N can reach several dozen or more, are not the best programming style, and more meaningful names should be given. But in our small project, where N will not exceed 2, you can leave it as generated.

In the property Image1.Picture we load the file table01.bmp . Create Image2 and load our management table table2.bmp there . In this case, the component is made small and invisible to the user, as shown in the lower left corner of the form. Add additional controls, the purpose of which is obvious. The second stage of graphical GUI programming in Delpe-7 IDE is over.

image

We proceed to the third stage - writing code in the Delpe-7 IDE. The module consists of only five event handlers: creating a form ( FormCreate ), moving the cursor over Image1 ( Image1MouseMove ), pressing the LMB on a cell ( Image1Click ) and exiting the dialog using the OK buttons ( OKBtnClick ) or Cancel ( CancelBtnClick ). The headers of these handlers are generated in a standard way using the IDE.

Module source code:
unit tableUnit; //     .. // // third112 // https://habr.com/ru/users/third112/ // //  // 1)   // 2)   :    // 3)    interface uses Windows, SysUtils, Classes, Graphics, Forms, Controls, StdCtrls, Buttons, ExtCtrls; const size = 104; //   type TtableDlg = class(TForm) OKBtn: TButton; CancelBtn: TButton; Bevel1: TBevel; Image1: TImage; //   Label1: TLabel; Image2: TImage; //  Label2: TLabel; Edit1: TEdit; procedure FormCreate(Sender: TObject); //   procedure Image1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); //   procedure Image1Click(Sender: TObject); //   procedure OKBtnClick(Sender: TObject); // OK procedure CancelBtnClick(Sender: TObject); // Cancel private { Private declarations } TableSymbols : array [1..size] of string [2]; //    public { Public declarations } selectedElement : string; //   currNo : integer; //    end; var tableDlg: TtableDlg; implementation {$R *.dfm} const PeriodicTableStr1= 'HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLa'; PeriodicTableStr2='CePrNdPmSmEuGdTbDyHoErTmYbLu'; PeriodicTableStr3='HfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAc'; PeriodicTableStr4='ThPaUNpPuAmCmBkCfEsFmMdNoLrKu '; //   ================================================== procedure TtableDlg.FormCreate(Sender: TObject); //   var s : string; i,j : integer; begin currNo := 0; //    : s := PeriodicTableStr1+ PeriodicTableStr2+PeriodicTableStr3+PeriodicTableStr4; j := 1; for i :=1 to size do begin TableSymbols [i] := s[j]; inc (j); if s [j] in ['a'..'z'] then begin TableSymbols [i] := TableSymbols [i]+ s [j]; inc (j); end; // if s [j] in end; // for i :=1 end; // FormCreate ____________________________________________________ //   :    ========================================= procedure TtableDlg.Image1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); //   var sl : integer; begin sl := GetBValue(Image2.Canvas.Pixels [x,y]); if sl in [1..size] then begin Label1.Caption := intToStr (sl)+ ' '+TableSymbols [sl]; currNo := sl; end else Label1.Caption := 'Select element:'; end; // Image1MouseMove ____________________________________________________ procedure TtableDlg.Image1Click(Sender: TObject); begin if currNo <> 0 then begin selectedElement := TableSymbols [currNo]; Label2.Caption := intToStr (currNo)+ ' '+selectedElement+ ' selected'; Edit1.Text := selectedElement; end; end; // Image1Click ____________________________________________________ //    ================================================== procedure TtableDlg.OKBtnClick(Sender: TObject); begin selectedElement := Edit1.Text; hide; end; // OKBtnClick ____________________________________________________ procedure TtableDlg.CancelBtnClick(Sender: TObject); begin hide; end; // CancelBtnClick ____________________________________________________ end. 


In our version, we took a table with a size of 104 elements ( size constant). Obviously, this size can be increased. The designations of the elements (chemical symbols) are written to the TableSymbols array. However, for reasons of compactness of the source code, it seems appropriate to write the sequence of these designations in the form of string constants PeriodicTableStr1 , ..., PeriodicTableStr4 , so that at the form creation event the program itself scatters these designations over the array elements. Each element designation consists of one or two Latin letters, with the first letter in capital and the second (if any) lower-case. This simple rule is implemented when loading an array. Thus, the sequence of symbols can be written in a compressed manner without spaces. The breakdown of the sequence into four parts (the constants PeriodicTableStr1 , ..., PeriodicTableStr4 ) is due to consideration of the convenience of reading the source code, since too long a line may not fit entirely on the screen.

When the mouse cursor moves over Image1, the Image1MouseMove handler of this event determines the value of the blue color component of the Image2 control card for the current cursor coordinates. By Image2 construction , this value is equal to the element number if the cursor is inside a cell; zero if on the border, and 255 in other cases. The remaining actions performed by the program are trivial and do not require explanation.

In addition to the stylistic programming techniques noted above, the style of comments is worth noting. Strictly speaking, the considered code is so small and simple that comments do not look particularly useful. However, they were added, including for methodological reasons - a short code allows us to make some general conclusions clearer. In the submitted code, one class is declared ( TtableDlg ). Methods of this class can be interchanged and this will not affect the functioning of the program, but may affect its readability. For example, imagine the sequence:

 OKBtnClick, Image1MouseMove, FormCreate, Image1Click, CancelBtnClick. 

Maybe not very noticeable, but reading and understanding will be a little more difficult. If the methods are not five, but ten times more, and in the implementation section they have a completely different order of sequence than in class descriptions, then chaos will only increase. Therefore, although it is hard to prove strictly and it may even be impossible, it is hoped that the guidance of an additional order will improve the readability of the code. This additional order contributes to the logical grouping of several methods that perform similar tasks. Each group should be given a title, for example:

 //   :    

These titles should be copied to the beginning of the module and arranged as a table of contents. In some cases of sufficiently long modules, such tables of contents provide additional navigation options. Similarly, in the long body of a single method, procedure, or function, it is worth, first, marking the end of this body:

 end; // FormCreate 

and, secondly, in branched operators with begin-end program brackets, mark the operator to which the closing bracket belongs:

  end; // if s [j] in end; // for i :=1 end; // FormCreate 

To highlight group headers and body ends, you can add lines longer than most operators and, for example, consisting of the characters “=” and “_”, respectively.
Again, you need to make a reservation: we have too simple an example. And when the code of the method does not fit on one screen, it can be difficult to figure out the six consecutive end to sort out the code changes. In some older compilers, for example, Pascal 8000 for IBM 360/370 OS in the listing on the left printed service column of the form

 B5 … E5 

This meant that the closing program bracket on line E5 corresponds to the opening bracket on line B5.

Of course, the programming style is a very ambiguous question, so the ideas expressed here should be taken as nothing more than information for consideration. Two fairly experienced programmers who have developed and become familiar with different styles over many years can be very difficult to agree on. Another thing students learn to program a student who has not yet had time to find his own style. I think that in this case the teacher should at least convey to his students such a simple, but not obvious idea that the success of the program depends largely on the style in which its source code is written. The student may not follow the recommended style, but let him at least think about the need for "extra" actions to improve the design of the source code.

Returning to our basic task on the Periodic table: further development can go in different directions. One of the directions is for reference: when you hover the mouse cursor over a table cell, an information window appears that contains additional information on the specified element. Further development - filters. For example, depending on the installation, in the information window there will be only: the most important physical information, information on the history of discovery, information on distribution in nature, a list of the most important compounds (which includes this element), physiological properties, the name in a foreign language, etc. Recalling Kaverin's “duck” with which this article begins, we can say that with such a program development we will get a complete training complex in the natural sciences: in addition to computer science, physics and chemistry - biology, economic geography, the history of science and even nostrannye languages.

But the local database is not the limit. The program naturally connects to the Internet. When an item is selected, a link is triggered, and a Wikipedia article about the item is opened in a web browser window. Wikipedia, as you know, is not an authoritative source. You can provide links to reputable sources, such as chemical encyclopedia, TSB, abstract journals, order search requests for this element, etc. So Students will be able to perform simple, but informative tasks on DBMS and Internet topics.

In addition to queries on a separate element, you can make a functional that will mark, for example, with different colors of a cell in the table that meet certain criteria. For example, metals and non-metals. Or cells that are drained into the ponds local chemical plant.

You can also implement the functions of a notebook organizer. For example, select in the table the elements that are included in the exam. Then select the elements studied / repeated by the student in preparation for the exam.

And here, for example, one of the typical tasks of school chemistry:

Given 10 g of chalk. How much hydrochloric acid should I take to dissolve all this chalk?

To solve this problem, it is necessary, having written down chemical. the reaction and placing the coefficients in it, calculate the molecular weights of calcium carbonate and hydrogen chloride, then draw up and decide the proportion. A calculator based on our basic program can calculate and solve. True, it will still be necessary to take into account that the acid must be taken with a reasonable excess and in a reasonable concentration, but this is chemistry, not computer science.
Addition 1: how the chemical calculator works
Let us analyze the work of the calculator by the example of the above problem of chalk and “solyanka”. Let's start with the reaction:

CaCO 3 + 2HCl = CaCl 2 + H 2 O

From here we see that we will need the atomic weights of the following elements: calcium (Ca), carbon (C), oxygen (O), hydrogen (H) and chlorine (Cl). In the simplest case, we can write these weights into a one-dimensional array, defined as

 AtomicMass : array [1..size] of real; 


where the array index corresponds to the element number. We also place two fields on the free space of the form tableDlg . In the first field it is originally written: “The first reagent is given”, in the second - “The second reagent to find x”. Denote the fields reagent1 , reagent2, respectively. Other additions to the program will be clear from the following example of the calculator.

We type on the computer keyboard: 10 g. The inscription in the reagent1 field changes: “The first reagent is given 10 g”. Now we enter the formula of this reagent, and the calculator will calculate and show its molecular weight as it is entered.

Click on the table cell with the symbol Ca. The inscription in the reagent1 field changes: “The first reagent Ca 40.078 is given 10 g”.

Click LMB on the cell of the table with the symbol C. The inscription in the reagent1 field changes: “The first reagent CaC 52.089 is given 10 g”. Those. The calculator has added the atomic weights of calcium and carbon.

Click LMB on the table cell with the symbol O. The inscription in the reagent1 field changes: “The first reagent CaCO 68.088 is given 10 g”. Calculator added to the amount of atomic weight of oxygen.

Click paint on the table cell with the symbol O. The inscription in the reagent1 field changes: “The first reagent CaCO2 84.087 is given 10 g”. The calculator once again added the atomic weight of oxygen to the sum.

Click LMB on the table cell with the symbol O. The inscription in the reagent1 field changes: “The first CaCO3 reagent 100.086 is given 10 g”. The calculator again added the atomic weight of oxygen to the sum.

Press Enter on the computer keyboard. The input of the first reagent is completed and switches to the reagent2 field. Note that in this example we give the minimum version. If you wish, you can easily arrange factors of atoms of one type, for example, not to press the oxygen cell seven times in a row when entering the chromium formula (K 2 Cr 2 O 7 ).

Click LMB on the cell with the symbol H. The inscription in the reagent2 field changes: “Second reagent H 1.008 find x”.

Click LMB on the table cell with the symbol Cl. The inscription in the reagent2 field changes: “Secondary reagent HCl 36.458 find x”. The calculator added the atomic weights of hydrogen and chlorine. In the above equation, the reaction before hydrogen chloride is a factor of 2. Therefore, click on the field of reagent2 . Molecular weight doubles (double-tapped, tripled, etc.). The inscription in the reagent2 field changes: “Second reagent 2HCl 72.916 find x”.

Press Enter on the computer keyboard. The input of the second reagent is completed, and the calculator finds x from the proportion

x/72.916=10/100.086.


What was required to find.

Note 1. The meaning of the obtained proportion: for dissolving 100.086 Da of chalk, 72.916 Da of acid is needed, and for dissolution of 10 g of chalk you need x of acid.

Note 2. Collections of similar tasks:

Khomchenko IG, Collection of tasks and exercises in chemistry in 2009 (grades 8-11).
Khomchenko G. P., Khomchenko I. G., Collection of Problems in Chemistry for Entrants to Universities, 2019.

Note 3. To simplify the task, in the initial version, you can simplify entering a formula and simply append the character of an element to the end of the formula line. Then the formula of calcium carbonate will be:
CaCOOO
But such a record is unlikely to please the chemistry teacher. The correct entry is not difficult to do - for this you need to add an array:
 formula : array [1..size] of integer; 

where index is the number of the chemical element, and the value at this index is the number of atoms (initially all elements of the array are zeroed). The order of writing atoms in the formula adopted in chemistry should be taken into account. For example, O3CaC too few people like it. We will transfer responsibility to the user. Make an array:
  formulaOrder : array [1..size] of integer; //    

where we write the number of the chemical element on the index of its appearance in the formula. Adding a currNo atom to the formula:
 if formula [currNo]=0 then //     begin orderIndex := orderIndex+1;//    orderIndex=0 formulaOrder [orderIndex] := currNo; end; formula [currNo]:=formula [currNo]+1; 

Write a formula to a string:
 s := ''; //     for i:=1 to orderIndex do //   .   begin s:=s+TableSymbols [ formulaOrder[i]];//  . if formula [formulaOrder[i]]<>1 then // -  s:=s+ intToStr(formula [formulaOrder[i]]); end; 

Note 4. It makes sense to provide the ability to alternatively enter the reagent formula from the keyboard. In this case, you will need to implement a simple parser.


It is worth noting that:
Today, there are several hundred variants of the table, while scientists offer all new options. ( Wikipedia )

Pupils can show ingenuity in this direction, realizing one of the already proposed options or try to make their own original. It may seem that this is the least useful direction for computer science lessons. However, in the form of the Periodic Table implemented in this article, some students may not see the special advantages of control cards over the alternative solution using standard TButton buttons. The spiral form of the table (where cells of different shapes) more clearly demonstrate the advantages of the solution proposed here.

image
( An alternative system of elements of Theodore Benfey , Source )

We also add that a number of currently existing computer programs for the Periodic Table are described in a recent Habré article .

Addition 2: examples of tasks for filters
Using filters you can solve, for example, such tasks:

1) Select in the table all the elements known in the Middle Ages.

2) Select all elements known by the time of the discovery of the Periodic Law.

3) Select the seven elements that alchemists considered metals.

4) Select all the elements that are in a gaseous state under normal conditions (NU).

5) Select all the elements that are in a liquid state at NU.

6) Select all the elements that are in a solid state at n.

7) Select all the elements that can be on the air for a long time without noticeable changes when n.

8) Select all metals that dissolve in hydrochloric acid.

9) Select all metals that dissolve in sulfuric acid at NU.

10) Select all metals that dissolve in sulfuric acid when heated.

11) Select all metals that dissolve in nitric acid.

12) Select all the metals that react violently with water at n.

13) Select all metals.

14) Highlight elements that are widespread in nature.

15) Select the elements that occur in nature in a free state.

16) Select the elements that play a crucial role in the human body and animals.

17) Select the elements that are widely used in everyday life (in free form or in connections).

18) Select the elements, the work with which is most dangerous and require special measures and means of protection.

19) Select the elements that in free form or in the form of compounds represent the greatest threat to the environment.

20) Highlight precious metals.

21) Select the items that are more expensive than precious metals.

Notes

1) It makes sense to ensure the operation of several filters. For example, if you turn on the filter to solve problem 1 (all elements known in the Middle Ages) and 20 (precious metals), then cells with precious metals known in the Middle Ages will be highlighted (for example, by color) (for example, palladium , opened in 1803).

2) It makes sense to ensure the operation of several filters in such a mode that each filter selects the cells with its own color, but does not completely remove the selection of another filter (part of the cell with one color, part with another). Then, in the case of the previous example, elements of the intersection of the sets of open in the Middle Ages and precious metals will be visible, as well as elements belonging only to the first and only to the second sets. Those. precious metals, unknown in the Middle Ages, and elements, known in the Middle Ages, but not precious metals.

3) It makes sense after applying the filter to ensure the possibility of other works with the results obtained. For example, having selected the elements known in the Middle Ages, the user clicks on the selected element and enters the Wikipedia article about this element.

4) It makes sense to ensure that the user can remove the selection by pressing the LMB on the selected cell of the table. For example, to remove already viewed items.

5) It makes sense to ensure the preservation of the list of selected cells in the file and the download of such a file with automatic selection of cells. This will give the user the opportunity to take a break from work.

Addition 3: Chemical quiz
Unlike the multiplication table, schoolchildren are not forced to memorize the periodic table, but those who are interested in chemistry will remember almost the entire table as it is being studied. This is ensured by understanding the essence of the Periodic Law: why, for example, inert gases occupy the rightmost column, and the adjacent column is occupied by halogens. Recognizing the correct order among the same halogens helps knowledge of their chemical properties. Thus, if a student remembers by heart most of the Periodic Table, this indicates his good knowledge of chemistry. Therefore, it makes sense to compete in the form of a quiz to test such optional, but desirable knowledge.

On the free space of the form tableDlg we place the component “single item selection list”. In this list we put all the names of chemical elements in alphabetical order. In the table we clear all the cells. The quiz participant should select the LMC cell in the table and the item in the list that should be in this cell. You can do the opposite: select an item in the list and then a cell If the choice is made correctly, the program puts the chemical symbol of the element in the specified cell and deletes its list. Otherwise, the participant receives one penalty point. The score counter is placed on the free tableDlg space . The program also has a timer that counts the time taken by the participant to fill the entire table. You can provide a lightweight version: do not fill the cells of lanthanides and actinides. The winner is determined by the time spent minus penalty points. For example, the first finisher gets 10 points from which penalty points are deducted, the second 8 points, the third 5 points.

Addition 4: Integration of several tasks in one program
Above, we examined a number of possible tasks: a guide to chemical elements, a chemical calculator, a chemical quiz. ( ). , ( ), .


We used a static pre-specified control card, however there are many important tasks where dynamic control cards can be used, which change during the course of the program. An example would be a graph editor in which the user with the mouse points to the position of the vertices in the window and draws edges between them. To remove a vertex or edge, the user must point to it. But if it is rather simple to point to the vertex indicated by a circle, then it will be more difficult to indicate the edge drawn by a thin line. This will help the management map, where the peaks and edges occupy a neighborhood wider than in the visible figure.

An interesting side-question is connected with the affected method of integrated learning: can this method be useful in teaching AI?

Source: https://habr.com/ru/post/446836/


All Articles