Mark-based code practice method

Abstract

The invention discloses a mark-based code practice method, which comprises the following steps of: firstly, constructing a code mark sequence for practice, displaying the mark sequence on a graphical interface, selecting marks, displaying a corresponding editing action menu, and modifying the mark sequence by selecting editing actions which are gradually displayed in the editing action menu in groups according to a practice sequence until the practice is finished. The code editing method provided by the invention is suitable for operation of a touch screen and a mouse, and codes can be edited on a mobile phone and a tablet computer conveniently; codes are edited through menu editing actions, prompting and limiting effects are achieved, more editing actions are gradually displayed from shallow to deep, and a beginner can conveniently learn programming from simple to complex.

Description

Technical Field

[0001] The invention relates to a code practice method based on marking, belonging to the technical field of code editing. Background Art

[0002] Currently, most code editors edit code texts through keyboards. However, when editing code on touch screen devices such as mobile phones and tablets, it is necessary to connect an additional keyboard or use the soft keyboard on the touch screen, which is not convenient enough. At the same time, when beginners learn programming, they lack intuitive prompt tools and are prone to grammatical errors. Although the patent application "A Marking-Based Code Editing Method" (Publication No.: CN109542420A) proposes a code editing method based on an editing action menu, the editing action menu is too complicated for beginners and is not suitable for learning from the shallow to the deep. Summary of the invention

[0003] In order to solve the above problems, the purpose of the present invention is to provide a code practice method based on marking, first construct a code marking sequence for practice, display the marking sequence on a graphical interface, select a mark, display a corresponding editing action menu, and modify the marking sequence by selecting the editing actions that are gradually displayed in the editing action menu according to the practice sequence, until the practice is completed. The code editing method provided by the present invention is suitable for touch screen and mouse operation, and is convenient for editing code on mobile phones and tablet computers; editing code with menu editing actions has prompts and restrictions, and gradually displays more editing actions from shallow to deep, which is convenient for beginners to learn programming from simple to complex.

[0004] The technical solution adopted by the present invention to solve the technical problem is: a code practice method based on marking, characterized by comprising:

[0005] The tagging step constructs a code tag sequence according to the grammatical rules of the code programming language. The types of code tags include keywords, identifiers, literals, operators, separators, and pending tags. Identifiers include variable names and function names. Literals include numbers, strings, and Boolean values. Pending tags are tags waiting for users to enter. This tag sequence represents the code that users need to practice editing.

[0006] Rendering step: on the graphical interface, the line break separator mark is displayed as a line break, the space and tab separator marks at the beginning of the line are displayed as a certain distance of blank space, the space separator mark between other types of marks is ignored, the pending mark is displayed as a blank button, and the remaining marks are displayed on a button respectively, and finally the code mark sequence is rendered as a combination of buttons arranged from left to right in one or more rows;

[0007] In the editing step, the practitioner selects the corresponding code mark by clicking or touching the mark button. According to the mark currently selected by the practitioner and the editing actions completed by the practitioner, an editing action menu is displayed to the practitioner. After the practitioner selects one of the editing actions, the practitioner modifies the code mark sequence according to the meaning of the editing action and the grammatical rules of the code programming language;

[0008] Repeat the editing steps until you have completed the exercise;

[0009] In the editing step, an editing action menu is displayed to the practitioner according to the mark currently selected by the practitioner and the editing actions completed by the practitioner, the editing action menu contains editing actions displayed in groups, one or more editing actions constitute an editing action group, and the editing action groups are arranged in order as an editing action group sequence, the editing actions in the editing action group located at the first position in the editing action group sequence are displayed in the editing action menu by default, and the editing actions in the remaining editing action groups are hidden by default, and after the practitioner completes at least one editing action in the previous editing action group in the editing action group sequence, the editing actions in the next editing action group are displayed in the editing action menu, that is, the editing actions in the editing action group are displayed in the order of sequence completion;

[0010] By default, the editing action group sequence consists of the following editing action groups arranged in order:

[0011] Digital Edit Action Group: When the selected tag is a literal, an identifier, or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the following editing actions: Enter a number, Replace with the number 101, Replace with the number 12.34. When entering a number, the entered digital tag replaces the selected tag. The Digital Edit Action Group is at the first position in the sequence by default and will be displayed in the Edit Action Menu by default.

[0012] Binary math operator editing action group: When the selected mark is a binary operator, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with addition operator, Replace with subtraction operator, Replace with multiplication operator, Replace with division operator, Replace with modulus operator;

[0013] String Editing Action Group: When the selected tag is a literal, an identifier, or a pending tag, the editing actions are displayed in the order of completion. This group includes the editing actions: enter a string, and replace it with the string Helloworld! When entering a string, the entered string tag replaces the selected tag.

[0014] Unary mathematical expression editing action group: When the selected token is a numeric literal, an identifier, or a pending token, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Add positive sign, Add negative sign;

[0015] Binary expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add left value, add right value; when adding left value, a pending tag as the left operand and a binary operator tag are automatically added to the left of the selected tag to form a binary expression; when adding right value, a binary operator tag and a pending tag as the right operand are automatically added to the right of the selected tag to form a binary expression;

[0016] Bracket expression editing action group: When the selected token is a literal, identifier, pending token, or operator, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Add brackets; when adding brackets, add expression left and right brackets around the minimum expression of the currently selected token or token sequence;

[0017] Statement editing action group: When the selected mark is any mark, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add a line above, add a line below, move a statement up, move a statement down, and delete a statement. When adding a line above or adding a line below, the new line contains a pending mark. When there is only one pending mark in a line of code, this pending mark is called a line pending mark.

[0018] Print statement editing action group: When the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with print statement; Replace with print statement, that is, replace the selected tag with the print statement tag sequence, and the parameters of the print function in the print statement are represented by pending tags;

[0019] Variable name editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: enter a variable name, and replace with an existing variable name; when entering a variable name, the entered variable name tag replaces the selected tag; when replacing with an existing variable name, select a variable name from the existing variable name list to replace the selected tag;

[0020] Variable definition statement editing action group: When the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with variable definition statement; Replace with variable definition statement, that is, replace the selected tag with the variable definition statement tag sequence, and the left value and right value of the statement are both represented by pending tags;

[0021] New variable name editing action group: When the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes editing actions: enter a new variable name; when entering a new variable name, the entered variable name tag replaces the selected tag;

[0022] Variable assignment statement editing action group: When the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with variable assignment statement; Replace with variable assignment statement, that is, replace the selected tag with the variable assignment statement tag sequence, and the left value and right value of the statement are both represented by a pending tag;

[0023] Boolean value editing action group: When the selected token is a literal, identifier, or pending token, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with true value and Replace with false value.

[0024] Comparison operator editing action group: When the selected mark is a binary operator, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with equal operator, Replace with not equal operator, Replace with greater than operator, Replace with greater than or equal to operator, Replace with less than operator, Replace with less than or equal to operator, Replace with strict equality operator, Replace with strict inequality operator;

[0025] Conditional statement editing action group: when the selected tag is a line pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: replace with if conditional statement, replace with if-else conditional statement, replace with if-else if conditional statement, and replace with if-else if-else conditional statement. When replacing a conditional statement, the selected tag is replaced with a conditional statement tag sequence. The conditional expression in the conditional statement tag sequence is represented by a pending tag, and the internal statement of the conditional branch is represented by a line pending tag and the required separator tag.

[0026] Conditional branch editing action group: When the selected tag is the if, else or elif keyword, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add else if or elif conditional branch at the end, add else conditional branch at the end, and delete conditional branch. When adding a conditional branch, the conditional expression in the conditional branch is a binary logical expression, in which the operands are represented by pending tags, and the internal statements of the conditional branch are represented by a line pending tag and the required separator tags.

[0027] Logical Operator Edit Action Group: When the selected mark is a binary operator, the edit actions are displayed in the order of completion. This group includes the edit actions: Replace with Logical AND Operator, Replace with Logical OR Operator;

[0028] Unary expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add a positive operator, add a negative operator, and add a logical negation operator. When the unary expression editing action group is displayed, the unary mathematical expression editing action group is hidden.

[0029] Ternary expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add a ternary expression; when adding a ternary expression, the currently selected tag is used as the conditional expression in the ternary expression, and other operators and operands required to form a ternary expression in the current code programming language are added to the right of it in sequence. The newly added operands are represented by pending tags;

[0030] Switch statement editing action group: When the selected tag is a line pending tag, the editing actions are displayed in the order of sequence completion. This group includes editing actions: Replace with switch statement; When replaced with a switch statement, the selected tag is replaced with a switch statement tag sequence, where the switch expression is represented by a pending tag, the case value of the case branch statement is identified by a pending tag, and the case branch statement code block is represented by a line pending tag, a break statement, and the required delimiter tags;

[0031] Case branch editing action group: When the selected tag is the case keyword, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add case branch at the beginning, add case branch at the end, and delete case branch. When adding case branch at the beginning or end, the case value is marked with a pending tag, and the case branch statement code block is represented by a line pending tag, a break statement, and the required separator tag.

[0032] Loop statement editing action group: When the selected tag is a line pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: replace with for statement, replace with while statement, replace with do while statement, replace with break statement, and replace with continue statement. When replacing with for, while, and do while statements, the operands in the loop condition expressions of these three loop statements are represented by pending tags in the tag sequence, and the code block inside the loop statement is represented by a line pending tag and the required separator tags.

[0033] Function call statement editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with function call statement, Replace with function call statement with one parameter, Replace with function call statement with two parameters, Replace with function call statement with three parameters; When replacing a function call statement, the function name and parameter name in the function call tag sequence are represented by pending tags;

[0034] Function name editing action group: when the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: enter a function name and replace with an existing function name; when entering a function name, the entered function name tag replaces the selected tag; when replacing with an existing function name, select a function name from the existing function name list to replace the selected tag;

[0035] Function definition statement editing action group: When the selected tag is a line pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with function definition statement, Replace with function definition statement with return value; When replacing with function definition tag sequence, the function name in the function definition tag sequence is represented by a pending tag, the code block in the function body is represented by a line pending tag and the required separator tag, and the return value in the return statement is marked with a pending tag;

[0036] New function name editing action group: when the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes editing actions: enter a new function name; when entering a new function name, the entered function name tag replaces the selected tag;

[0037] Function expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of completion. This group includes the following editing actions: Replace with function expression, Replace with function expression with one parameter, Replace with function expression with two parameters, Replace with function expression with three parameters. When replacing with function expression, the function name and function parameters in the function expression are represented by pending tags.

[0038] Attribute expression editing action group: When the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add attribute expression; when adding an attribute expression, add an object member operator and a pending tag representing the attribute name after the selected tag;

[0039] Object creation expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with object creation expression, Replace with object creation expression with one parameter, Replace with object creation expression with two parameters, and Replace with object creation expression with three parameters. When replacing with an object creation expression, the class name and parameter name in the object creation expression are represented by pending tags.

[0040] Class name editing action group: When the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: enter a class name and replace with an existing class name; when entering a class name, the entered class name tag replaces the selected tag; when replacing with an existing class name, select a class name from the existing class name list to replace the selected tag;

[0041] Class definition statement editing action group: When the selected mark is a pending mark, the editing actions are displayed in the order of sequence completion. This group includes editing actions: Replace with class definition statement; When replacing with class definition statement, the class name is represented by a pending mark;

[0042] New class name editing action group: when the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes editing actions: enter a new class name; when entering a new class name, the entered class name tag replaces the selected tag;

[0043] Method expression editing action group: When the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add method expression, add method expression with one parameter, add method expression with two parameters, and add method expression with three parameters. When adding a method expression, an object member operator and a method call tag sequence are added after the selected tag, in which the method name is represented by a pending tag and the method parameters are represented by a pending tag.

[0044] Index expression editing action group: When the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add index expression; when adding an index expression, add the index operator and array index value after the selected tag, where the array index value is represented by a pending tag;

[0045] Array editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with array, Replace with array of three elements. When Replace with array, the selected tag is replaced with the array tag sequence, where the array elements are represented by pending tags.

[0046] It is characterized in that, in the editing step:

[0047] If the current programming language does not support the corresponding syntax of a certain editing action, remove the editing action from the editing action group;

[0048] If the current programming language does not support the syntax corresponding to all the editing actions in a certain editing action group, then remove the editing action group from the editing action group sequence;

[0049] According to the current practice needs, the order of the editing action groups in the editing action group sequence can be adjusted.

[0050] The beneficial effects of the present invention are as follows: the code practice method provided by the present invention is to construct a tag sequence, provide various editing actions that comply with the code grammar rules on various tags, automatically complete the corresponding code grammar structure modification, reduce the dependence on the full keyboard during code editing, and facilitate programming practice anytime and anywhere; for beginners who are not familiar with code grammar, the editing actions have a prompting effect, and are gradually displayed from simple to complex, which is convenient for practitioners to learn programming from shallow to deep. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] Figure 1 It is a diagram of an edit tab interface of a code editor in an embodiment of the present invention, which includes a combination of mark buttons arranged from left to right for one or more lines to be edited.

[0052] Figure 2 It is a preview tab interface diagram of a code editor in an embodiment of the present invention, which includes code preview text.

[0053] Figure 3 It is a diagram of the run tab interface of a code editor in an embodiment of the present invention, which includes code running results.

[0054] Figure 4 It is a diagram of the edit tab interface of a code editor in an embodiment of the present invention, which includes an edit action menu that pops up after clicking the mark "100", and the edit actions are divided into edit action tabs such as "literal", "identifier", "expression", and "statement", and are grouped in the edit action tabs. The left side is the edit action group name, and the right side is the edit action list in the group.

[0055] Figure 5 It is a diagram of an editing action menu interface of a code editor in an embodiment of the present invention. At this time, there is no selectable editing action in the "Identifier" editing action tab.

[0056] Figure 6 , Figure 8 , Fig. 9 It is a diagram of the edit tab interface of a code editor in one embodiment of the present invention.

[0057] Figure 7 , Figures 10 to 42 It is a diagram of an editing action menu interface of a code editor in an embodiment of the present invention. DETAILED DESCRIPTION

[0058] The present invention can be used for practitioners to learn various programming languages ​​from scratch.

[0059] Embodiment 1:

[0060] The present invention is described in detail below by learning JavaScript programming from scratch on a touch screen. JavaScript programming is gradually learned in multiple exercises in the order of numeric literals, binary mathematical operators, pending tags, string literals, statements, etc., and the editing actions of the relevant tags are gradually displayed in the editing menu.

[0061] First, construct the editing action group sequence as follows:

[0062] Digital editing action group,

[0063] Binary math operator editing action group,

[0064] String editing action group,

[0065] Unary mathematical expression editing action group,

[0066] Binary expression editing action group,

[0067] Bracket expression editing action group,

[0068] Statement editing action group,

[0069] Print statement editing action group,

[0070] Variable name editing action group,

[0071] Variable definition statement editing action group,

[0072] New variable name editing action group,

[0073] Variable assignment statement editing action group,

[0074] Boolean edit action group,

[0075] Comparison operator editing action group,

[0076] Conditional statement editing action group,

[0077] Conditional branch editing action group,

[0078] Logical operator editing action group,

[0079] Unary expression editing action group,

[0080] Ternary expression editing action group,

[0081] Switch statement editing action group,

[0082] case branch editing action group,

[0083] Loop statement editing action group,

[0084] Function call statement editing action group,

[0085] Function name editing action group,

[0086] Function definition statement editing action group,

[0087] New function name editing action group,

[0088] Function expression editing action group,

[0089] Attribute expression editing action group,

[0090] Object creation expression editing action group,

[0091] Class name edit action group,

[0092] Class definition statement editing action group,

[0093] New class name edit action group,

[0094] Method expression editing action group,

[0095] Index expression editing action group,

[0096] Array editing action group.

[0097] The editing actions included in the editing action group are as described above.

[0098] Next, learn JavaScript programming step by step through some exercises:

[0099] In Exercise 1, first tokenize the steps and construct the following token sequence, with tokens separated by spaces:

[0100] console.log(100+200);

[0101] There are 9 markers in total.

[0102] This code prints the sum of 100+200 on the console.

[0103] The rendering step then displays the marked sequence on a graphical interface, such as Figure 1 In the Preview tab, you can view the code in normal text form, such as Figure 2 In the Run tab, the practitioner can run the current code, such as Figure 3 .

[0104] Users can click Figure 1 Click the button marked with the number "100" in the dialog box to display the edit action menu. The edit action menu contains edit actions displayed in groups. By default, the first numeric edit action group is displayed. Figure 4. In the Literal tab, the number editing action group is displayed as the "Number" menu group, and on the right is the list of editing actions contained in the menu group: the text box on the upper right is used to enter numbers, and clicking the "Replace" button will replace the selected mark with the entered number, which is the "Enter Number" editing action; the two editing action menu items below are "Replace with Number 101" and "Replace with Number 12.34".

[0105] In the Identifier and Expression tabs that have not yet been learned, no editing actions are displayed, such as Figure 5 Here, the editing action groups are divided into several categories such as literals, identifiers, expressions, statements, etc., and displayed in different tabs, which makes it easier for users to find editing actions by category and deepen their understanding of programming concepts.

[0106] In this embodiment, the left side of the tab is a menu group list, and the right side is the editing actions included in the selected menu group. In order to facilitate users to find editing actions, the editing actions in an editing action group may be classified and displayed in one or more menu groups.

[0107] The user selects an action in the number editing action group, such as "Replace with number 101", to replace the selected 100 in the code with 101. The result is as follows Figure 6 .

[0108] At this point, the digital editing action group has been completed. The user clicks Figure 6 After the mathematical operator + plus sign in the edit action menu, the binary mathematical operator edit action group is displayed as the "Binary Mathematical Operators" menu group, such as Figure 7 .

[0109] The user selects an action, such as "Replace with subtraction operator", to replace the plus sign in the code with a minus sign. The result is as follows Figure 8 .

[0110] After modifying the code, the user can run the code in the Run tab and observe the running results.

[0111] In this way, users who are new to programming can easily simulate a calculator and gain a preliminary understanding of programming concepts.

[0112] In Exercise 2, construct and display the following token sequence:

[0113] console.log(___);

[0114] Here, the pending mark is represented by three consecutive underscores ___, such as Fig. 9 .

[0115] At this point, the binary math operator editing action group has been completed, and the subsequent string editing actions will be displayed on the edit menu, that is, the editing action group and editing actions are displayed in the order of completion. After the user clicks the pending mark, the string editing action group in the Literal tab of the edit menu, that is, the "String" menu group, can be seen. Fig.10 , the text box on the upper right is used to enter a string. Click the "Replace" button to replace the selected tag with the entered string, which is the "Enter String" editing action. Click the editing action "Replace with string Hello world!" below it to replace the pending tag with the string tag "Hello world!", and the tag sequence becomes:

[0116] console.log("Hello world!");

[0117] In Exercise 3, construct and display the following token sequence:

[0118] console.log(100);

[0119] Click on the mark 100, and you can see the unary mathematical expression editing action group in the Expression tab, namely Fig.11 .

[0120] Select the "Add minus operator" editing action in the "Unary Expression" menu group, and the token sequence will become:

[0121] console.log(-100);

[0122] In Exercise 4, construct and display the following token sequence:

[0123] console.log(100);

[0124] Click on the mark 100, and you can see the binary expression editing action group in the Expression tab, namely Fig.12 In the "Binary Expression" menu group, select the "Add right value" editing action, and the token sequence will become:

[0125] console.log(100+___);

[0126] In Exercise 5, construct and display the following token sequence:

[0127] console.log(100+200*5);

[0128] Click the plus sign, and the bracket expression editing action group will be displayed in the "Expression" tab of the editing action menu, such as Fig.13In the "Bracket Expression" menu group, select the "Add Bracket" editing action on the right, and the tag sequence becomes:

[0129] console.log((100+200)*5);

[0130] In Exercise 6, construct and display the following token sequence:

[0131] console.log("Hello world!");

[0132] Click any mark and you can see the editing actions in the statement editing action group in the statement tab, such as Fig.14 , the editing actions in the statement editing action group are classified and displayed in three menu groups: the "Add Line" menu group contains the "Add Line Above" and "Add Line Below" editing actions, the "Move" menu group contains the "Move Statement Up" and "Move Statement Down" editing actions, and the "Delete" menu group contains the "Delete Statement" editing action group. Here, select the "Add Line Below" editing action in the "Add Line" menu group, and the mark sequence will become:

[0133] console.log("Helloworld!");

[0134] ___

[0135] Click the pending line mark, and in the "New Statement" tab, you can see the "Print Statement" menu group, such as Fig.15 , select the "Print Statement" edit action, and the tag sequence becomes:

[0136] console.log("Helloworld!");

[0137] console.log(___);

[0138] In Exercise 7, construct and display the following token sequence:

[0139] varlength=100;

[0140] console.log(___);

[0141] Click the pending mark in the second row, and the variable name editing action group will be displayed in the "Identifier" tab, such as Fig.16 , you can directly enter the variable name in the text box on the right and click "Replace", that is, the "Enter variable name" editing action. Here, directly select the "Replace with existing variable name length" editing action below it, and the tag sequence becomes:

[0142] varlength=100;

[0143] console.log(length);

[0144] In Exercise 8, construct and display the following token sequence:

[0145] ___

[0146] Click the pending mark on this line, and in the "New Statement" tab, you can see the "Variable Definition" group, which is the variable definition statement editing action group, such as Fig.17 , select the "Replace with variable definition statement" edit action, and the tag sequence becomes:

[0147] var___=___;

[0148] After the user clicks the ___pending mark after the var keyword, the new variable name editing action group will be displayed in the "Variable Definition" tab, such as Fig.18 , enter a new variable name such as "length" in the text box on the right side of the "Enter new variable name" menu group, and then click Replace to replace the selected pending tag with the length tag, completing the "Enter new variable name" editing action, and the tag sequence becomes:

[0149] varlength = ___;

[0150] The user can fill in the pending tokens on the right side of the equal sign, and the token sequence becomes:

[0151] varlength=100;

[0152] After that, click on any marker to add a new row through the edit action menu, and the marker sequence becomes:

[0153] varlength=100;

[0154] ___

[0155] Click the pending line mark, and the variable assignment statement editing action group will be displayed in the "New Statement" tab, such as Fig.19 In the "Variable Assignment Statement" group, select the "Replace with Assignment Statement" edit action, and the tag sequence becomes:

[0156] varlength=100;

[0157] ___=___;

[0158] The user can continue to fill in the pending marks on both sides of the equal sign, assigning different values ​​to length, and complete the exercise.

[0159] In Exercise 9, construct and display the following token sequence:

[0160] console.log(___);

[0161] Click the pending mark, and a new Boolean value editing action group will be added to the "Literal" tab of the editing action menu, such as Fig. 20 , that is, the "Boolean Value" menu group, select the "Replace with True Value true" edit action on the right, and the tag sequence becomes:

[0162] console.log(true);

[0163] In Exercise 10, construct and display the following token sequence:

[0164] console.log(100+101);

[0165] When the user clicks the plus operator, a new comparison operator editing action group will be added to the "Operator" tab of the edit action menu, such as Fig.21 In the "Comparison Operator" menu group, select the "Replace with Greater Than Operator" edit action, and the tag sequence becomes:

[0166] console.log(100>101);

[0167] When the user runs the program, false will be printed so that the user understands the concept of logical values.

[0168] In Exercise 11, construct and display the following token sequence:

[0169] vara=100;

[0170] varb = 101;

[0171] ___

[0172] When the user clicks the pending line mark, a new conditional statement editing action group will be added to the "New Statement" tab, such as Fig. 22 In the "Conditional Statement" menu group, select the "if conditional statement" editing action, and the mark sequence becomes:

[0173]

[0174] The user can use the editing actions that have been learned to complete the code, and the tag sequence becomes:

[0175]

[0176]

[0177] Click the if keyword, and a new display conditional branch mark action group will be added to the edit action menu, such as Fig.23, where the "Add" menu group contains the "Add elseif conditional branch after" and "Add else conditional branch after" editing actions, and the "Delete" menu group contains the "Delete conditional branch" editing action. Here, select the "Add else conditional branch after" editing action, and the tag sequence becomes:

[0178]

[0179] In Exercise 12, construct and display the following token sequence:

[0180] vara = true;

[0181] varb = false;

[0182] console.log(a+b);

[0183] Click the + sign to add a new logical operator editing action group to the edit action menu, such as Fig.24 In the "Logical Operator" menu group, select the "Replace with Logical AND Operator" edit action, and the tag sequence becomes:

[0184] vara = true;

[0185] varb = false;

[0186] console.log(a&&b);

[0187] Click the variable a in the last row to display the unary expression editing action group in the editing action menu. Fig.11 The unary mathematical expression editing action group in Fig.25 In the "Unary Expression" menu group, select the "Add Logical Not Operator" edit action, and the token sequence becomes:

[0188] vara = true;

[0189] varb = false;

[0190] console.log(!a&&b);

[0191] In Exercise 13, construct and display the following token sequence:

[0192] console.log(___);

[0193] Click the pending mark, and a new ternary expression editing action group will be displayed in the "Expression" tab of the edit action menu, such as Fig.26 , that is, the "Ternary Expression" menu group, select the "Add Ternary Expression" edit action on the right, and the tag sequence becomes:

[0194] console.log(___?___:___);

[0195] In Exercise 14, construct and display the following token sequence:

[0196] ___

[0197] Click the pending line mark, and the switch statement editing action group will be displayed in the "New Statement" tab, such as Fig. 27 In the "Switch Statement" menu group, click the "Replace with Switch Statement" edit action, and the tag sequence becomes:

[0198]

[0199]

[0200] Click the case mark, and the edit action menu will display the case branch edit action group in the "Case Branch" tab, such as Fig.28 As shown in the figure, the "Branch" menu group contains the "Add case branch before" and "Add case branch after" editing actions, and the "Delete" menu group contains the "Delete case branch" editing action. Here, select the "Add case branch after" editing action, and the tag sequence becomes:

[0201]

[0202] In Exercise 15, construct and display the following token sequence:

[0203] ___

[0204] Click the pending line mark, and the loop statement editing action group will be displayed in the "New Statement" tab, such as Fig.29 In the "Loop Statement" menu group, click the "Replace with for statement" edit action, and the tag sequence becomes:

[0205] for(var___=___;___<___;___++){

[0206] ___

[0207] }

[0208] Users can use the editing actions they have learned to complete the code.

[0209] In Exercise 16, construct and display the following token sequence:

[0210]

[0211] Click the pending line mark, and the function call statement editing action group will be displayed in the "New Statement" tab, such as Fig.30 In the "Function Call Statement" menu group, select the "Replace with Function Call Statement" edit action without parameters on the right, and the tag sequence becomes:

[0212]

[0213] Click the pending mark in the last row, and the function name editing action group will be displayed in the "Identifier" tab, such as Fig.31 In the Enter Function Name menu group, enter the function name in the text box on the right, and then click the "Replace" button to replace the selected tag with the entered function name, that is, the "Enter Function Name" editing action, and the "Replace Existing Function Name" editing action below it. Here, select the "Replace Existing Function Name hello" editing action, and the tag sequence becomes:

[0214]

[0215]

[0216] In Exercise 17, construct and display the following token sequence:

[0217] ___

[0218] Click the pending line mark, and the function definition statement editing action group will be displayed in the "New Statement" tab, such as Fig.32 The function definition statement menu group in contains the "Replace with function definition statement" and "Replace with function definition statement with return value" editing actions. Here, select the "Replace with function definition statement" editing action, and the tag sequence becomes:

[0219] function ___(){

[0220] ___

[0221] }

[0222] Click the pending mark after the function keyword, such as Fig.33 , the "Function Definition" tab will display the new function name editing action group. Enter the new function name, such as "hello", in the text box on the right side of the "Enter New Function Name" menu group, and then click the "Replace" button to replace the selected pending tag with the hello tag. The "Enter New Function Name" editing action is completed, and the tag sequence becomes:

[0223] function hello(){

[0224] ___

[0225] }

[0226] In Exercise 18, construct and display the following token sequence:

[0227]

[0228] Click the pending mark on the last row, and the function expression editing action will be displayed in the "Expression" tab, such as Fig.34 In the Function Expression menu group, select the "Replace with a function expression with two parameters" edit action, and the tag sequence becomes:

[0229]

[0230] Users can continue to practice completing the code and complete the function call of sum(x,y).

[0231] In Exercise 19, construct and display the following token sequence:

[0232] console.log(___);

[0233] Click the pending mark, and the attribute expression editing action group will be displayed in the "Expression" tab, such as Fig.35 In the "Attribute Expression" menu group, select the "Add Attribute Expression" editing action, and the tag sequence becomes:

[0234] console.log(___.___);

[0235] In Exercise 20, construct and display the following token sequence:

[0236]

[0237] Click the pending mark in the last row, and the object creation expression editing action group will be displayed in the "Expression" tab, such as Fig.36 In the "new expression" menu group, the new expression in JavaScript is the object creation expression. Select the "Replace with an object creation expression with one parameter" edit action, and the tag sequence becomes:

[0238]

[0239] Click the pending mark after the new keyword, and the class name editing action group will be displayed in the "Identifier" tab, such as Fig.37 In the Enter Class Name menu group, enter the class name in the text box on the right, and then click the "Replace" button to replace the selected tag with the entered class name, that is, the "Enter Class Name" edit action, and the "Replace Existing Class Name" edit action below. Here, select the "Replace Existing Class Name MyObject" edit action, and the tag sequence becomes:

[0240]

[0241] In Exercise 21, construct and display the following token sequence:

[0242] ___

[0243] var myObject = ___;

[0244] Click the pending line mark, and the class definition statement editing action group will be displayed in the "New Statement" tab, such as Fig.38 The Class Definition Statement menu group in the , contains two "Replace with Class Definition Statement" editing actions, the first of which defines a class in function syntax:

[0245] function ___(x){this.x=x;}

[0246] The second one defines a class with the class keyword:

[0247] class___{constructor(x){this.x=x;}}

[0248] Here, select the second "Replace with function definition statement" editing action, and the tag sequence becomes:

[0249]

[0250] Click the pending mark after the class keyword, such as Fig.39 , the "Class Definition" tab will display the new class name editing action group. Enter the new class name, such as "MyObject", in the text box on the right side of the "Enter New Class Name" menu group, and then click the "Replace" button to replace the selected pending tag with the MyObject tag. The "Enter New Class Name" editing action is completed, and the tag sequence becomes:

[0251]

[0252] Afterwards, users can use what they have learned to create instances of the MyObject class.

[0253] In Exercise 22, construct and display the following token sequence:

[0254] console.log(___);

[0255] Click the pending mark, and the method expression editing action group will be displayed in the "Expression" tab, such as Fig.40 In the "Method Expression" menu group, select the "Add Method Expression" editing action, and the tag sequence becomes:

[0256] console.log(___.___());

[0257] In Exercise 23, construct and display the following token sequence:

[0258] vararray1 = [1,2,3];

[0259] console.log(___);

[0260] Click the pending mark in the second row, and a new index expression editing action group will be added to the "Expression" tab of the edit action menu, such as Fig.41 In the "Index Expression" menu group, select the "Add Index Expression" editing action on the right, and the tag sequence becomes:

[0261] vararray1 = [1,2,3];

[0262] console.log(___[___]);

[0263] In Exercise 24, construct and display the following token sequence:

[0264] vararray1 = ___;

[0265] console.log(___);

[0266] Click the pending mark in the first row, and a new display array editing action group will be added to the "Literal" tab of the editing action menu, such as Fig.42 , that is, the "Array" menu group, select the "Replace with array of three elements" edit action on the right, and the tag sequence becomes:

[0267] vararray1 = [___,___,___];

[0268] console.log(___);

[0269] Finally, the user can complete the code to create the array and print its elements.

[0270] The above sequence order only reflects one programming practice path. You can adjust the practice order and edit the action group order according to the situation to adapt to different learning ideas. For example, you can learn logical operators first and then conditional statements.

[0271] Embodiment 2:

[0272] When a practitioner uses the present invention to learn the Python programming language, since there is no concept of variable definition in Python, the definition statement editing action group and the variable definition editing action group will be removed from the editing action sequence, and the subsequent steps are similar to those in Example 1. The editing action group will be adjusted based on the Python syntax, for example, the array editing action group will be converted into the list editing action group corresponding to the Python language.

[0273] You can also adjust the order of the exercises, for example, putting array-related editing actions before object-related editing actions.

[0274] You can also add more editing action groups to the editing action sequence according to the needs of the exercise, such as the tuple editing action group and dictionary editing action group in the Python language.

[0275] The above description is only a specific embodiment of the present invention and is not intended to limit the present invention. The present invention may be modified and varied in various ways, and any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall fall within the protection scope of the present invention.

Claims

1. A tag-based code practice method, characterized in that: include: The tagging step constructs a code tag sequence according to the grammatical rules of the code programming language. The types of code tags include keywords, identifiers, literals, operators, separators, and pending tags. Identifiers include variable names and function names. Literals include numbers, strings, and Boolean values. Pending tags are tags waiting for users to enter. This tag sequence represents the code that users need to practice editing. Rendering step: on the graphical interface, the line break separator mark is displayed as a line break, the space and tab separator marks at the beginning of the line are displayed as a certain distance of blank space, the space separator mark between other types of marks is ignored, the pending mark is displayed as a blank button, and the remaining marks are displayed on a button respectively, and finally the code mark sequence is rendered as a combination of buttons arranged from left to right in one or more rows; In the editing step, the practitioner selects the corresponding code mark by clicking or touching the mark button. According to the mark currently selected by the practitioner and the editing actions completed by the practitioner, an editing action menu is displayed to the practitioner. After the practitioner selects one of the editing actions, the practitioner modifies the code mark sequence according to the meaning of the editing action and the grammatical rules of the code programming language; Repeat the editing steps until you have completed the exercise; In the editing step, an editing action menu is displayed to the practitioner according to the mark currently selected by the practitioner and the editing actions completed by the practitioner, the editing action menu contains editing actions displayed in groups, one or more editing actions constitute an editing action group, and the editing action groups are arranged in order as an editing action group sequence, the editing actions in the editing action group located at the first position in the editing action group sequence are displayed in the editing action menu by default, and the editing actions in the remaining editing action groups are hidden by default, and after the practitioner completes at least one editing action in the previous editing action group in the editing action group sequence, the editing actions in the next editing action group are displayed in the editing action menu, that is, the editing actions in the editing action group are displayed in the order of sequence completion; By default, the editing action group sequence consists of the following editing action groups arranged in order: Digital Edit Action Group: When the selected tag is a literal, an identifier, or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the following editing actions: Enter a number, Replace with the number 101, Replace with the number 12.

34. When entering a number, the entered digital tag replaces the selected tag. The Digital Edit Action Group is at the first position in the sequence by default and will be displayed in the Edit Action Menu by default. Binary math operator editing action group: When the selected mark is a binary operator, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with addition operator, Replace with subtraction operator, Replace with multiplication operator, Replace with division operator, Replace with modulus operator; String Editing Action Group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of completion. This group includes the editing actions: enter a string, and replace it with the string Hello world! When entering a string, the entered string tag replaces the selected tag. Unary mathematical expression editing action group: When the selected token is a numeric literal, an identifier, or a pending token, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Add positive sign, Add negative sign; Binary expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add left value, add right value; when adding left value, a pending tag as the left operand and a binary operator tag are automatically added to the left of the selected tag to form a binary expression; when adding right value, a binary operator tag and a pending tag as the right operand are automatically added to the right of the selected tag to form a binary expression; Bracket expression editing action group: When the selected token is a literal, identifier, pending token, or operator, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Add brackets; when adding brackets, add expression left and right brackets around the minimum expression of the currently selected token or token sequence; Statement editing action group: When the selected mark is any mark, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add a line above, add a line below, move a statement up, move a statement down, and delete a statement. When adding a line above or adding a line below, the new line contains a pending mark. When there is only one pending mark in a line of code, this pending mark is called a line pending mark. Print statement editing action group: When the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with print statement; Replace with print statement, that is, replace the selected tag with the print statement tag sequence, and the parameters of the print function in the print statement are represented by pending tags; Variable name editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: enter a variable name, and replace with an existing variable name; when entering a variable name, the entered variable name tag replaces the selected tag; when replacing with an existing variable name, select a variable name from the existing variable name list to replace the selected tag; Variable definition statement editing action group: When the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with variable definition statement; Replace with variable definition statement, that is, replace the selected tag with the variable definition statement tag sequence, and the left value and right value of the statement are both represented by pending tags; New variable name editing action group: When the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes editing actions: enter a new variable name; when entering a new variable name, the entered variable name tag replaces the selected tag; Variable assignment statement editing action group: When the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with variable assignment statement; Replace with variable assignment statement, that is, replace the selected tag with the variable assignment statement tag sequence, and the left value and right value of the statement are both represented by a pending tag; Boolean value editing action group: When the selected token is a literal, identifier, or pending token, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with true value and Replace with false value. Comparison operator editing action group: When the selected mark is a binary operator, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with equal operator, Replace with not equal operator, Replace with greater than operator, Replace with greater than or equal to operator, Replace with less than operator, Replace with less than or equal to operator, Replace with strict equality operator, Replace with strict inequality operator; Conditional statement editing action group: when the selected tag is a line pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: replace with if conditional statement, replace with if-else conditional statement, replace with if-elseif conditional statement, and replace with if-elseif-else conditional statement. When replacing a conditional statement, the selected tag is replaced with a conditional statement tag sequence. The conditional expression in the conditional statement tag sequence is represented by a pending tag, and the internal statement of the conditional branch is represented by a line pending tag and the required separator tag. Conditional branch editing action group: When the selected tag is the if, else or elif keyword, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add else if or elif conditional branch at the end, add else conditional branch at the end, and delete conditional branch. When adding a conditional branch, the conditional expression in the conditional branch is a binary logical expression, in which the operands are represented by pending tags, and the internal statements of the conditional branch are represented by a line pending tag and the required separator tags. Logical Operator Edit Action Group: When the selected mark is a binary operator, the edit actions are displayed in the order of completion. This group includes the edit actions: Replace with Logical AND Operator, Replace with Logical OR Operator; Unary expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add a positive operator, add a negative operator, and add a logical negation operator. When the unary expression editing action group is displayed, the unary mathematical expression editing action group is hidden. Ternary expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add a ternary expression; when adding a ternary expression, the currently selected tag is used as the conditional expression in the ternary expression, and other operators and operands required to form a ternary expression in the current code programming language are added to the right of it in sequence. The newly added operands are represented by pending tags; Switch statement editing action group: When the selected tag is a line pending tag, the editing actions are displayed in the order of sequence completion. This group includes editing actions: Replace with switch statement; When replaced with a switch statement, the selected tag is replaced with a switch statement tag sequence, where the switch expression is represented by a pending tag, the case value of the case branch statement is identified by a pending tag, and the case branch statement code block is represented by a line pending tag, a break statement, and the required delimiter tags; Case branch editing action group: When the selected tag is the case keyword, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add case branch at the beginning, add case branch at the end, and delete case branch. When adding case branch at the beginning or end, the case value is marked with a pending tag, and the case branch statement code block is represented by a line pending tag, a break statement, and the required separator tag. Loop statement editing action group: When the selected tag is a line pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: replace with for statement, replace with while statement, replace with do while statement, replace with break statement, and replace with continue statement. When replacing with for, while, and do while statements, the operands in the loop condition expressions of these three loop statements are represented by pending tags in the tag sequence, and the code block inside the loop statement is represented by a line pending tag and the required separator tags. Function call statement editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with function call statement, Replace with function call statement with one parameter, Replace with function call statement with two parameters, Replace with function call statement with three parameters; When replacing a function call statement, the function name and parameter name in the function call tag sequence are represented by pending tags; Function name editing action group: when the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: enter a function name and replace with an existing function name; when entering a function name, the entered function name tag replaces the selected tag; when replacing with an existing function name, select a function name from the existing function name list to replace the selected tag; Function definition statement editing action group: When the selected tag is a line pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with function definition statement, Replace with function definition statement with return value; When replacing with function definition tag sequence, the function name in the function definition tag sequence is represented by a pending tag, the code block in the function body is represented by a line pending tag and the required separator tag, and the return value in the return statement is marked with a pending tag; New function name editing action group: when the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes editing actions: enter a new function name; when entering a new function name, the entered function name tag replaces the selected tag; Function expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of completion. This group includes the following editing actions: Replace with function expression, Replace with function expression with one parameter, Replace with function expression with two parameters, Replace with function expression with three parameters. When replacing with function expression, the function name and function parameters in the function expression are represented by pending tags. Attribute expression editing action group: When the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add attribute expression; when adding an attribute expression, add an object member operator and a pending tag representing the attribute name after the selected tag; Object creation expression editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with object creation expression, Replace with object creation expression with one parameter, Replace with object creation expression with two parameters, and Replace with object creation expression with three parameters. When replacing with an object creation expression, the class name and parameter name in the object creation expression are represented by pending tags. Class name editing action group: When the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: enter a class name and replace with an existing class name; when entering a class name, the entered class name tag replaces the selected tag; when replacing with an existing class name, select a class name from the existing class name list to replace the selected tag; Class definition statement editing action group: When the selected mark is a pending mark, the editing actions are displayed in the order of sequence completion. This group includes editing actions: Replace with class definition statement; When replacing with class definition statement, the class name is represented by a pending mark; New class name editing action group: when the selected tag is a pending tag, the editing actions are displayed in the order of sequence completion. This group includes editing actions: enter a new class name; when entering a new class name, the entered class name tag replaces the selected tag; Method expression editing action group: When the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add method expression, add method expression with one parameter, add method expression with two parameters, and add method expression with three parameters. When adding a method expression, an object member operator and a method call tag sequence are added after the selected tag, in which the method name is represented by a pending tag and the method parameters are represented by a pending tag. Index expression editing action group: When the selected tag is an identifier or a pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: add index expression; when adding an index expression, add the index operator and array index value after the selected tag, where the array index value is represented by a pending tag; Array editing action group: When the selected tag is a literal, identifier, or pending tag, the editing actions are displayed in the order of sequence completion. This group includes the editing actions: Replace with array, Replace with array of three elements. When Replace with array, the selected tag is replaced with the array tag sequence, where the array elements are represented by pending tags.

2. A tag-based code practice method according to claim 1, characterized in that: In the editing step: If the current programming language does not support the corresponding syntax of a certain editing action, remove the editing action from the editing action group; If the current programming language does not support the syntax corresponding to all the editing actions in a certain editing action group, then remove the editing action group from the editing action group sequence; According to the current practice needs, the order of the editing action groups in the editing action group sequence can be adjusted.

Images