Periodic table on school computer science

(Control cards)
(Dedicated to the International Year of the Periodic Table of Chemical Elements)
(Last additions made on April 8, 2019. List of additions right under the cut)

(Flower of Mendeleev, Source)

I remember we passed the duck. It was three lessons at once: geography, natural science and Russian. In a science lesson, a duck was studied like a duck, what wings it has, what paws it has, how it swims, and so on. In a 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. In Russian, Serafima Petrovna taught us to write "u-t-k-a" and read something about ducks from Brem. In passing, she informed us that in German the duck is so-and-so, and in French so-and-so. I think it was then called "complex method". In general, everything came out "in passing".

Veniamin Kaverin, Two captains

In the above quote, Veniamin Kaverin skillfully showed the shortcomings of the integrated teaching method, however, in some (perhaps quite rare) cases, elements of this method are justified. One of these cases is the Periodic Table of D.I. Mendeleev at the lessons of school computer science. The task of software automation of typical actions with the periodic table is clear 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 in a simple form to demonstrate the method of control cards, which can be attributed to graphical programming, understood in the broad sense of the word as programming with the help of graphic elements.

(April 8, 2019 additions made:
Addendum 1: how the chemical calculator works
Addendum 2: examples of tasks for filters)

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

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, let's draw the Periodic Table the way we want to see it in the program. Save the result in a graphic file table01.bmp.

For the second drawing, use the first. We will sequentially fill the table cells 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 drawing will be our control map, which we will save to a file under the name table2.bmp.

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

Place a class component on the form TImage. Get Image1. Note that, in general, for large projects, automatically generated names of the form ImageNWhere N can reach several tens or more - not the best programming style, and more meaningful names should be given. But in our little project where N will not exceed 2, you can leave it as generated.

To property Image1.Picture upload file table01.bmp. We create Image2 and upload our control card there table2.bmp. At the same time, we make the file small and invisible to the user, as shown in the lower left corner of the form. We add additional controls, the purpose of which is obvious. The second stage of GUI programming in Delpi-7 IDE is finished.

Let's move on to the third stage - writing code in the Delpi-7 IDE. The module consists of only five event handlers: form creation (FormCreate), cursor movement along Image1 (Image1MouseMove), clicking LMB on a cell (Image1Click) and exit the dialog using the OK buttons (OKBtnClick) or Cancel (CancelBtnClick). The headers of these handlers are generated in a standard way by 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 (constant size). Obviously, this size can be increased. Element designations (chemical symbols) are written to an array TableSymbols. However, for reasons of compactness of the source code, it seems appropriate to write the sequence of these notations in the form of string constants PeriodicTableStr1..., PeriodicTableStr4so that when the form is created, the program itself scatters these designations among the array elements. Each element designation consists of one or two Latin letters, with the first letter capitalized and the second (if any) lowercase. This simple rule is implemented when loading an array. Thus, the sequence of notation can be written in a compressed way without spaces. Splitting the sequence into four parts (constant PeriodicTableStr1..., PeriodicTableStr4) is due to the consideration of readability of the source code, since a string that is too long may not fit entirely on the screen.

On the event of moving the mouse cursor over Image1 handler Image1MouseMove of this event determines the value of the blue component of the color of the control map pixel Image2 for the current cursor coordinates. By construction Image2 this value is equal to the element number if the cursor is inside the cell; zero if on the border, and 255 otherwise. The rest of the actions performed by the program are trivial and do not require explanation.

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

OKBtnClick, Image1MouseMove, FormCreate, Image1Click, CancelBtnClick.

Maybe not very noticeable, but it will become a little more difficult to read and understand. If there are not five methods, but dozens of times more and in the section implementation they have a completely different order than in the descriptions of the classes, then the chaos will only increase. Therefore, although rigorous proof is difficult and may even be impossible, it is hoped that introducing additional order will improve the readability of the code. This additional order is facilitated by the logical grouping of several methods that perform similar tasks. Each group should be given a heading, for example:

// работа с таблицей: указание и выбор

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

end; // FormCreate

and, secondly, in branched statements with program brackets begin - end, mark the statement to which the closing bracket refers:

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

To highlight group headers and ends of method bodies, you can add lines that exceed the length of most operators and consist, for example, of the characters "=" and "_" respectively.
Again, we need to make a reservation: our example is too simple. And when the code of a method does not fit on one screen, it can be difficult to figure out the six consecutive end to make changes to the code. In some old compilers, for example, Pascal 8000 for OS IBM 360/370, a service column of the form

B5
…
E5

This meant that the closing brace on line E5 matched the opening brace on line B5.

Of course, programming style is a very controversial issue, so the ideas expressed here should be taken as nothing more than food for thought. It can be very difficult for two fairly experienced programmers who have developed and become accustomed to different styles over many years of work to agree. Another thing is a student of programming, a schoolboy 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 to them, that the success of the program largely depends on the style in which its source code is written. The student may not follow the recommended style, but at least let him 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 over a table cell, an information window appears containing additional information on the specified element. Further development - filters. For example, depending on the setting, the information window will contain only: the most important physical and chemical 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, a name in a foreign language, etc. e. Recalling Kaverin's "duck" with which this article begins, we can say that with such a development of the program we will get a complete training complex in the natural sciences: in addition to computer science, physics and chemistry - biology, economic geography, history of science and even foreign languages.

But the local database is not the limit. The program naturally connects to the Internet. When an element is selected, a link is triggered, and a Wikipedia article about this element is opened in the web browser window. Wikipedia is not known to be an authoritative source. You can set links to authoritative sources, for example, a chemical encyclopedia, TSB, abstract journals, order queries in search engines for this element, etc. That. students will be able to complete simple but meaningful tasks on the topics of DBMS and the Internet.

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

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

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

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

To solve this problem, it is necessary, by writing down the chem. reaction and placing the coefficients in it, calculate the molecular weights of calcium carbonate and hydrogen chloride, then draw up and solve the proportion. A calculator based on our basic program will be able to 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 already chemistry, not computer science.
Addendum 1: how the chemical calculator worksLet's analyze the operation of the calculator using the example of the above problem of chalk and "hodgepodge". Let's start with the reaction:

CaCO3 + 2HCl = CaCl2 + H2O

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. Still on the free space of the form tableDlg put two fields. In the first field it is originally written: “The first reagent is given”, in the second - “Second reagent find x”. Let's 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 field reagent1 changes: “First reagent 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 LMB on the cell of the table with the symbol Ca. The inscription in the field reagent1 changes: “First reagent Ca 40.078 given 10 g”.

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

Press LMB on the cell of the table with the symbol O. The inscription in the field reagent1 changes: “First reagent CaCO 68.088 given 10 g”. The calculator added the atomic weight of oxygen to the sum.

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

Press LMB on the cell of the table with the symbol O. The inscription in the field reagent1 changes: “First reagent CaCO3 100.086 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 field reagent2. Note that in this example, we provide a minimal version. If you wish, you can easily organize multipliers of atoms of the same type, so that, for example, you do not have to click on the oxygen cell seven times in a row when entering the chrompical formula (K2Cr2O7).

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

Click LMB on the cell of the table with the symbol Cl. The inscription in the field reagent2 changes: “Second reagent HCl 36.458 find x”. The calculator added the atomic weights of hydrogen and chlorine. In the above reaction equation, hydrogen chloride is preceded by a coefficient of 2. Therefore, we press LMB on the field reagent2. Molecular weight doubles (triples when pressed twice, etc.). The inscription in the field reagent2 changes: “Second reagent 2HCl 72.916 find x”.

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

Which is what you need to find.

Note 1. The meaning of the resulting proportion: for dissolution 100.086 Da chalk needs 72.916 Da acid, and to dissolve 10 g of chalk you need x acid.

Note 2. Collections of similar problems:

Khomchenko I. G., Collection of tasks and exercises in chemistry 2009 (grades 8-11).
Khomchenko G. P., Khomchenko I. G., Collection of problems in chemistry for applicants to universities, 2019.

Note 3. To simplify the task, you can simplify the entry of the formula in the initial version and simply append the element symbol to the end of the formula line. Then the formula for calcium carbonate will look like:
CaCOOO
But such a record is unlikely to please a chemistry teacher. It is not difficult to make the correct entry - for this you need to add an array:

formula : array [1..size] of integer;

where the 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 set to zero). The order in which atoms are written in the formula, adopted in chemistry, should be taken into account. For example, few people will like O3CaC either. Let's shift the responsibility to the user. Making an array:

 formulaOrder : array [1..size] of integer; // можно взять покороче

where we write the number of the chemical element according to the index of its appearance in the formula. Adding an atom currNo into the formula:

if formula [currNo]=0 then //этот атом встретился первый раз
 begin
 orderIndex := orderIndex+1;//в начале ввода формулы orderIndex=0
 formulaOrder [orderIndex] :=  currNo;
 end;
formula [currNo]:=formula [currNo]+1;

Writing 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 possibility of alternative input of 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 versions of the table, while scientists offer more and more new options. (Wikipedia)

Students can be smart in this direction too, implementing one of the already proposed options or trying to make their own original one. 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 buttons. TButton. The spiral shape of the table (where the cells are of different shapes) will more clearly demonstrate the advantages of the solution proposed here.

(Alternative system of elements by Theodore Benfey, Source)

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

Addendum 2: Sample Tasks for FiltersUsing filters, you can solve, for example, the following tasks:

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

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

3) Identify seven elements that alchemists considered metals.

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

5) Select all elements that are in a liquid state at n.o.s.

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

7) Select all the elements that can be in the air for a long time without noticeable changes at n.o.s.

8) Select all metals that dissolve in hydrochloric acid.

9) Select all metals that dissolve in sulfuric acid at n.o.s.

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

11) Select all metals that dissolve in nitric acid.

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

13) Select all metals.

14) Select elements that are widespread in nature.

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

16) Select the elements that play the most important role in the human and animal body.

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

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

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

20) Select precious metals.

21) Highlight items that cost more than precious metals.

Notes

1) It makes sense to ensure the operation of several filters. For example, if you turn on the filter for solving problems 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 will not be selected). opened in 1803).

2) It makes sense to ensure that several filters work in such a mode that each filter highlights 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 sets discovered in the Middle Ages and precious metals, as well as elements that belong only to the first and only to the second sets, will be visible. Those. precious metals unknown in the Middle Ages, and elements known in the Middle Ages but not being precious metals.

3) It makes sense after applying the filter to provide the possibility of other work with the results obtained. For example, having selected elements known in the Middle Ages, the user presses LMB on the selected element and gets into the Wikipedia article about this element.

4) It makes sense to provide the user with the ability to remove the selection by clicking LMB on the selected cell of the table. For example, to remove already viewed items.

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

We have used a static predefined control map, but there are many important applications where dynamic control maps can be used that change as the program runs. An example would be a graph editor, in which the user uses the mouse to indicate the positions of the vertices in the window and draw edges between them. To remove a vertex or edge, the user must point to it. But if it is quite easy to point to a vertex marked with a circle, then it will be more difficult to point to an edge drawn with a thin line. A control map will help here, where vertices and edges occupy neighborhoods that are wider than in the visible figure.

An interesting side question is related to the complex learning method mentioned: can this method be useful in teaching AI?

Source: habr.com