CN113360147B - Interactive code display and teaching tool - Google Patents
Interactive code display and teaching tool Download PDFInfo
- Publication number
- CN113360147B CN113360147B CN202110259686.6A CN202110259686A CN113360147B CN 113360147 B CN113360147 B CN 113360147B CN 202110259686 A CN202110259686 A CN 202110259686A CN 113360147 B CN113360147 B CN 113360147B
- Authority
- CN
- China
- Prior art keywords
- page
- demonstration
- block
- presentation
- code
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 230000002452 interceptive effect Effects 0.000 title claims abstract description 17
- 239000003086 colorant Substances 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 7
- 238000000034 method Methods 0.000 description 6
- 239000003973 paint Substances 0.000 description 5
- 238000010422 painting Methods 0.000 description 5
- 101710129069 Serine/threonine-protein phosphatase 5 Proteins 0.000 description 2
- 101710199542 Serine/threonine-protein phosphatase T Proteins 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 229920000470 poly(p-phenylene terephthalate) polymer Polymers 0.000 description 2
- 230000001105 regulatory effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09B—EDUCATIONAL OR DEMONSTRATION APPLIANCES; APPLIANCES FOR TEACHING, OR COMMUNICATING WITH, THE BLIND, DEAF OR MUTE; MODELS; PLANETARIA; GLOBES; MAPS; DIAGRAMS
- G09B19/00—Teaching not covered by other main groups of this subclass
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Business, Economics & Management (AREA)
- Entrepreneurship & Innovation (AREA)
- Educational Administration (AREA)
- Educational Technology (AREA)
- Controls And Circuits For Display Device (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses an interactive code display and teaching tool, which comprises a plurality of block demonstration pages and is divided into an editing mode and a demonstration mode; the editing mode is to edit the content of the block demonstration page and set three marks for each block demonstration page: newly opening a page, continuing to upper the page, and skipping the page. The demonstration mode is to page according to the page number of the independent demonstration pages, each independent demonstration page and all the block demonstration pages of the continuous upper page spliced by the independent demonstration pages are used as independent pages, and demonstration and play are carried out according to the page sequence. In the play of the presentation mode, the block that skips this page is hidden to present the page content. In the tool provided by the invention, when the demonstration page is played, the demonstration page is organized by three simple types on the basis of supporting the writing and the displaying of the rich media content and the multi-format text and also supporting the writing and the displaying of codes and code running results, so that the layered demonstration of the content in the demonstration mode by paging and segmenting is realized.
Description
Technical Field
The invention relates to the field of code teaching, in particular to an interactive code display and teaching tool.
Background
Based on teaching and demonstration purposes, if the code content is to be demonstrated and described, the common practice at present is as follows:
scheme 1: using a traditional slide, using a flow chart in the slide to make visual display of a code flow and an operation result, and then screenshot the code and pasting the code in the slide;
scheme 2: directly entering a code editor, reducing the resolution of a computer, and displaying codes and operation results by using larger fonts.
The main defects of the scheme are as follows:
scheme 1: although the code flow can be embodied, the display mode is too dead and can not demonstrate different operation effects after modifying the code in the process, and the output change generated by code adjustment can be completely demonstrated only by repeatedly intercepting the content in different states and adding the content into slides and dividing the content into a plurality of pages of slides for display;
scheme 2: the problem that the scheme 1 is inconvenient to rewrite the codes is solved, but the code flow cannot be analyzed by directly looking at the codes, and the code running results cannot be displayed together with the codes, so that the analysis and the display are required to be matched and switched to a slide.
Disclosure of Invention
The invention aims to overcome the defects of the prior art, and provides an interactive code display and teaching tool, in particular to a teaching tool which combines executable codes capable of being operated and modified in real time, texts with various types, rich media contents and code operation results and displays the codes together.
The aim of the invention is realized by the following technical scheme: an interactive code display and teaching tool comprises a plurality of block demonstration pages, and is divided into an editing mode and a demonstration mode;
the editing mode is to edit the content of the block demonstration page, and three marks are set for each block demonstration page: newly opening a page, continuing to upper the page, and skipping the page. The block demonstration page of the newly opened page is an independent demonstration page, and the block demonstration page of the continuous upper page is spliced below the independent demonstration page adjacent to the block demonstration page, specifically: each independent display page can splice n block demonstration pages of the continuous upper page, the block demonstration page of the ith continuous upper page is spliced below the block demonstration page of the (i-1) continuous upper page, and the block demonstration page of the (1) continuous upper page is spliced below the independent display page adjacent to the block demonstration page. The block presentation page that skips this page has a hidden flag that will hide the contents of the block presentation page that skips this page.
The demonstration mode is characterized in that the pages of the independent demonstration pages are paged according to the page numbers of the independent demonstration pages, each independent demonstration page and all the block demonstration pages spliced by the independent demonstration pages and continuing to be the upper page are used as independent pages, and demonstration and playing are carried out according to the paging sequence. If the block demonstration page marked with the page skipped is provided, hiding the content of the block demonstration page skipped in the playing of the demonstration mode.
Further, the block presentation page type includes two types of a rich text block into which contents such as text, pictures, videos and the like with patterns are inserted and a code block from which a code execution result is browsed in real time.
Further, the independent display pages and the spliced block demonstration pages of the continuous upper page have the same ground color, the ground colors of different independent display pages are different, and the block demonstration pages of the upper page are skipped without the ground color.
Further, the tool comprises a front-end web interface and a back-end code server, wherein the back-end code server runs the environment on which the code blocks depend, a websocket service waiting for input and a file storage and reading service. The contents of each tile presentation page will be stored in Json's format in the file of the back-end code server, while the marked tile presentation page type will be stored in Json as a field at the same time. The editing mode mainly reads the Json to display, and modifies the corresponding content in the Json according to the change of the sequence, the content and the type of the block demonstration page and sends the modified content back to the back-end code server to store.
Further, for the content of the block presentation page of codes, rich media and the like, the front-end web interface is presented in an HTML and CSS mode, and the block presentation page is an element of the HTML. For code running, the code is sent back to the back-end code server using Websocket with the support of the back-end code server, which executes the code and passes the result back to the front-end web interface through Websocket.
Further, the editor can adjust the position of the presentation page by dragging each block presentation page up and down, so as to adjust the play order, and the block presentation page continuing to the upper page must be spliced after the block presentation page newly opened or the block presentation page continuing to the upper page, so that the block presentation page continuing to the upper page cannot be placed at the head of the play order.
Further, the method switches from the editing mode to the demonstration mode, carries out HTML element operation corresponding to the block demonstration page through JavaScript, adjusts CSS modes of elements, specifically comprises block size adjustment, font size and typesetting adjustment, enables the adjusted content to be more convenient to view in the full-screen demonstration mode, places the same page, namely the block demonstration page of the newly opened page and all the block demonstration pages of the continuous upper page spliced with the newly opened page into the same page element, and uses CSS to hide the block demonstration page element of the page skipped. When the demonstration mode starts, the current block demonstration page element is displayed in full screen through adjustment of CSS style, and the internal element is enlarged, so that the demonstration page element is suitable for playing during demonstration.
Further, the page turning arrow is arranged in the web interface of the demonstration mode, the CSS can be operated to enlarge the current demonstration page to be switched to before and after, and the demonstration page displayed before is hidden, so that the front and back switching of the demonstration page is carried out.
Further, in the demonstration mode, if pictures, videos, audios, PPTs and the like are encountered, the pictures, videos and audios can be directly displayed and played, the pictures, videos and audios are directly supported by HTML elements, and the PPTs adopt Microsoft online PPT display services; if the code block is encountered, the code block can be clicked to enter an editing mode, online editing is carried out on the code, then an operation button is clicked to operate the code, and the operation result is displayed in a web interface through websocket service and a back-end code server. The edited code is returned to the file service on the back-end code server for storage.
Furthermore, the tool also has a brush mode, which is realized by adding a transparent canvas (HTMLcanvas) on the original demonstration page, and then realizes the tracking and displaying of the brush handwriting by tracking the JavaScript event of the mouse moving track under the state of pressing the left key.
The invention has the beneficial effects that:
1. the interactive code display and teaching tool provided by the invention can display rich media, texts with formats and codes on the same screen, and display the contents in a full-screen paging mode, and the codes can also execute and view running results in real time in the display process.
2. In the interactive code display and teaching tool provided by the invention, an intuitive editing mode is provided, various blocks can be arranged by dragging, and three simple block demonstration types are used for organizing demonstration pages, so that the demonstration of paging and sectioning of the display content and layering demonstration in the demonstration mode is realized.
Drawings
FIG. 1 is a block class selector schematic;
FIG. 2 is a schematic diagram showing the combination of the two blocks in a staggered arrangement;
FIG. 3 is a schematic diagram of an edit mode and a presentation mode button;
FIG. 4 illustrates a type selector button schematic;
FIG. 5 is a schematic diagram of a type of presentation of the blocks;
FIG. 6 illustrates a page paging scheme;
FIG. 7 illustrates a schematic diagram of shadow join and partition for page types in edit mode;
FIG. 8 is a schematic diagram of a demonstration mode;
FIG. 9 continues the upper page style switching diagram;
FIG. 10 illustrates a page code running schematic;
FIG. 11 illustrates code modification and operation in a demonstration mode;
FIG. 12 is a schematic drawing of a brush mode in a demonstration mode;
FIG. 13 is a schematic diagram of code services and file storage.
Detailed Description
The following describes the embodiments of the present invention in further detail with reference to the drawings.
The invention provides an interactive code display and teaching tool, which simultaneously supports rich media, texts with various styles, codes and writing and displaying of code running results, and then organizes the content in an intuitive way and then performs full-screen enlarged display in a paging mode (each page formed after paging is called a presentation page, and the following is the same); the tool comprises a plurality of block demonstration pages, and is divided into an editing mode and a demonstration mode, wherein the two modes can be switched, as shown in figure 3; the editing mode is to edit the content of the block demonstration page, and three marks are set for each block demonstration page: newly opening a page, continuing to upper the page, and skipping the page. The block demonstration page of the newly opened page is an independent demonstration page, and the block demonstration page of the continuous upper page is spliced below the independent demonstration page adjacent to the block demonstration page, specifically: each independent display page can splice n block demonstration pages of the continuous upper page, the block demonstration page of the ith continuous upper page is spliced below the block demonstration page of the (i-1) continuous upper page, and the block demonstration page of the (1) continuous upper page is spliced below the independent display page adjacent to the block demonstration page. The block presentation page that skips this page has a hidden flag that will hide the contents of the block presentation page that skips this page. The demonstration mode is characterized in that the pages of the independent demonstration pages are paged according to the page numbers of the independent demonstration pages, each independent demonstration page and all the block demonstration pages spliced by the independent demonstration pages and continuing to be the upper page are used as independent pages, and demonstration and playing are carried out according to the paging sequence. If the block demonstration page marked with the page skipped is provided, hiding the content of the block demonstration page skipped in the playing of the demonstration mode.
The basic flow of the invention is as follows:
(1) Compiling rich media, text, codes and code running results in different blocks;
(2) Arranging the blocks according to the demonstration sequence;
(3) Marking each block with a new page, a continuous page or a skip page;
the basic unit is called a block demonstration page, and the block demonstration page is also divided into two types, namely a rich text block into which contents such as text, pictures, video and the like with patterns can be inserted; a code block that can be written and executed and that can view the results of code execution in real time is shown in fig. 2.
The editing mode and the presentation mode are described specifically as follows:
editing mode:
in the edit mode, two kinds of block presentation pages can be switched to each other by a block category selector above the editor, and in this mode, the two kinds of block presentation pages are presented in a tiled manner on the pages, see fig. 1. The sequence of dragging and modifying the blocks can be performed by selecting the blocks with the mouse and pressing the left button of the mouse.
After editing the type, content and sequence of each block, a selection of the type of presentation page is required for each block in order to be able to demonstrate in a section-by-section page in the presentation mode.
In edit mode, a presentation page type selector is displayed over each tile, see fig. 4.
The presentation page types of the block are classified into three categories, "newly opened page", "continue to upper page" and "skip this page", see fig. 5.
In the presentation mode, the blocks in the edit mode are played in a paging manner, and the paging manner is determined by three presentation types in the edit mode, see fig. 6.
If the presentation page type of a block is "newly opened page", it means that the current block is separated from the above block, and the newly opened page is presented in the presentation mode.
The presentation page type selection "continue up" of a block indicates that the block will be spliced as a bar to the lowest of the last "newly opened" parent presentation pages. A plurality of blocks of 'continuing up' below the block of 'newly opened page' are spliced below the last 'newly opened page' in display order.
The type of the presentation page of the block is "skip the page", which means that the content of the one block is hidden during the presentation and the content of the next block is directly played.
In the editing mode, the block is marked as a block which can be played and displayed by adding the same base color, namely, the demonstration type of being selected as 'newly opened page' or 'continuously on page'; the block without the base color is the block that will not be played and displayed, i.e. the block selected as "skip this page". The "new open page" and the next "continue to page" blocks are indicated by consecutive base colors to indicate that they are content within a full presentation page, with different individual presentation page base colors, see fig. 7.
The editor can adjust the position of the presentation page by dragging each block up and down, thereby adjusting the play order.
It should be noted that the block "continue upper page" cannot be placed at the top of the editor, and must be spliced after the newly opened block presentation page or the continue upper page block presentation page, so the continue upper page block presentation page cannot be placed at the top of the play order because it has no parent presentation page that can be spliced.
The invention consists of a front-end web interface and a back-end code server, see fig. 13, in which the environment on which the code blocks depend and a websocket service waiting for input and a file storage and reading service run. The contents of each chunk are stored in the file of the code server in Json format, while the marked chunk presentation page type is stored in Json as a field at the same time. The editing mode mainly reads the Json to display, and modifies the corresponding content in the Json according to the sequence of the block demonstration pages, the content and the change of the type and sends the modified content back to the code server to store. For block contents such as codes, rich media and the like, the front end is displayed in an HTML and CSS mode, and the block presentation pages are all elements of the HTML. For code running, the invention has the support of a code server at the back end, the code server runs the environment on which the code block depends and a Websocket service waiting for input, the invention uses the Websocket to send the code back to the code server, the server executes the code and transmits the result back to the front end through the Websocket, and the result is displayed in the front end web interface by using HTML and CSS.
Demonstration mode:
in the demonstration mode, the blocks in the editing pages of the tiled display are divided into a plurality of demonstration pages according to the three demonstration types introduced in the 'editing mode', and then the demonstration is carried out by paging.
The method is characterized in that the method is switched from an editing mode to a demonstration mode, HTML element operation corresponding to a block demonstration page is mainly carried out through JavaScript (JS for short below), CSS modes of the elements are regulated, specifically, the method comprises block size regulation, font size and typesetting regulation, so that the regulated contents are more convenient to view in the full-screen demonstration mode, and the elements of the page are hidden by CSS by putting the same page, namely a new page and all the blocks of the page continuing to be opened below, into the same demonstration page element.
When entering the presentation mode, each "new page" tile element is operated using JS, with the topmost tile element of a new presentation page being placed, and the next "continue page" tile being placed next under the last "new page", see fig. 6. When the demonstration mode starts, the current demonstration page element is displayed in full screen through adjustment of CSS style, and the internal element is enlarged, so that the demonstration page element is suitable for playing during demonstration.
The lower right corner of the web interface in the presentation mode has a page turning arrow, and the CSS can be operated to zoom in on the presentation page to be switched to the current presentation page before and after, and to hide the presentation page displayed before, thereby switching the presentation page before and after, see fig. 8.
When a new page of demonstration page is entered, the 'continue upper page' block is hidden by a style first, and when page turning switching is carried out, the 'continue upper page' block is displayed below the 'newly opened page' block in sequence by changing the style, and after the 'continue upper page' block of the current demonstration page is displayed, the right arrow is clicked to switch to the demonstration page of the next 'newly opened page', as shown in fig. 9.
The left and right arrows in the demonstration mode can also be replaced by clicking the left and right arrows on the keyboard.
In the demonstration mode, the default is a common demonstration mode, if pictures, videos, audios, PPT (MicrosoftPowerpoint) and the like are encountered, the pictures, videos and audios can be directly displayed and played, the pictures, the videos and the audios are directly supported by HTML elements, and the PPT adopts Microsoft online PPT demonstration service; if the code block is encountered, the code can be run by clicking the run code button directly, and the running result is seen directly below, the running principle is the same as that described in the editing mode, and the websocket service and the back-end code server are used for displaying the running result in the web interface, see fig. 10.
Meanwhile, in the common demonstration mode, the code block is double-clicked, the editing mode of the code block can be entered, see fig. 11, the code is modified, and the modified code can be operated by clicking an operation code button. The edited code is also transmitted back to the file service on the code server for storage.
Clicking the brush mode button turns on the brush mode, see FIG. 12. The mode is realized by adding a transparent canvas (HTMLcanvas) on the original demonstration page, and then tracking and displaying the handwriting of the painting brush by tracking the JS event of the mouse moving track under the state of pressing the left key.
After the mode is started, the mouse cursor is displayed in a shape of a painting brush, and a left button of the mouse can be pressed to paint on a demonstration page. Clicking the brush mode button again, or clicking the back to presentation mode button, can turn off the brush mode back to normal play mode.
Clicking the blackboard mode button opens the blackboard mode, in which a solid-colored page is displayed, the mouse cursor is in the shape of a chalk, the left mouse button is pressed to paint the solid-colored page, or clicking the blackboard mode button again or clicking the back-to-demonstration mode button, the blackboard mode can be closed to return to the normal demonstration mode.
The blackboard mode is similar to the painting brush mode in implementation, and is realized by adding a canvas on an original demonstration page, and tracking and displaying of painting brush handwriting are realized by tracking a mouse moving track under the state that a left key is pressed, except that the canvas is used by a black background and is not transparent.
Clicking the clear paint button clears the paint in the current page brush mode if in the brush mode and clears the paint in the current page blackboard mode if in the blackboard mode.
In the blackboard mode and the brush mode, the right button of the mouse is pressed, the mouse pointer is displayed as an eraser, and the handwriting covered by the pointer can be erased by dragging on the painting handwriting in the brush mode or the blackboard mode.
The invention uses jupyterNotebook as an editor for simultaneously writing rich media, multi-format text and code, but the invention is not limited in form and any editor supporting these three types of content can be substituted. The present invention uses Markdown to support presentation of rich media and multi-format text, but is not limited in its form and any presentation and editing means that support presentation of both content may be used, such as a rich text editor.
The above-described embodiments are intended to illustrate the present invention, not to limit it, and any modifications and variations made thereto are within the spirit of the invention and the scope of the appended claims.
Claims (8)
1. The interactive code display and teaching tool is characterized by comprising a front-end web interface, a back-end code server and a plurality of block demonstration pages, wherein the types of the block demonstration pages comprise two types of code blocks for inserting rich text blocks with patterns of texts, pictures and video contents and browsing code execution results in real time; the tools are divided into an editing mode and a demonstration mode;
the editing mode is to edit the content of the block demonstration page, and three marks are set for each block demonstration page: newly opening a page, continuing to page up and skipping the page; the block demonstration page of the newly opened page is an independent demonstration page, and the block demonstration page of the continuous upper page is spliced below the independent demonstration page adjacent to the block demonstration page, specifically: each independent display page can splice n block demonstration pages of the upper page, the block demonstration page of the i-th upper page is spliced below the block demonstration page of the i-1 th upper page, and the block demonstration page of the 1 st upper page is spliced below the independent display page adjacent to the block demonstration page; the block demonstration page which skips the page is provided with a hiding mark, and the content in the block demonstration page which skips the page is hidden;
the demonstration mode is characterized in that the pages of the independent demonstration pages are paged according to the page numbers of the independent demonstration pages, each independent demonstration page and all the block demonstration pages spliced by the independent demonstration pages and continuing to be the upper page are used as independent pages, and demonstration and play are carried out according to the paging sequence; if the block demonstration page marked with the page skipped is provided, hiding the content of the block demonstration page skipped in the playing of the demonstration mode;
the back-end code server runs the environment on which the code block depends and a websocket service waiting for input, and also has a file storage and reading service; the content of each block presentation page is stored in the file of the back-end code server in Json format, and the marked block presentation page type is stored in Json as a field at the same time; the editing mode mainly reads the Json to display, and modifies the corresponding content in the Json according to the change of the sequence, the content and the type of the block demonstration page and sends the modified content back to the back-end code server to store.
2. The interactive code display and teaching tool according to claim 1, wherein the independent display pages and the spliced upper page block demonstration pages have the same ground color, the ground colors of different independent display pages are different, and the upper page block demonstration page is skipped without ground color.
3. The interactive code presentation and teaching tool according to claim 1, wherein for code, rich media tile presentation page content, front web interface is presented using HTML and CSS, the tile presentation pages are elements of HTML; for code running, the code is sent back to the back-end code server using Websocket with the support of the back-end code server, which executes the code and passes the result back to the front-end web interface through Websocket.
4. The interactive code display and teaching tool according to claim 1, wherein the editor adjusts the play order by dragging each block presentation page up and down to adjust the position of the presentation page, and the block presentation page continuing to the upper page must be spliced after the block presentation page newly opened or the block presentation page continuing to the upper page, so that the block presentation page continuing to the upper page cannot be placed at the head of the play order.
5. The interactive code presentation and teaching tool according to claim 1, wherein the HTML element operation corresponding to a tile presentation page is performed by JavaScript from an edit mode to a presentation mode, and the CSS style of the element is adjusted, specifically including tile size adjustment, font size and typesetting adjustment, so that the adjusted content is more convenient to view in a full-screen presentation mode, by placing a tile presentation page of a same page, i.e., a newly opened page, and all tile presentation pages of a continued upper page spliced thereto, into a same page element, and hiding the tile presentation page element of the skipped page with the CSS; when the demonstration mode starts, the current block demonstration page element is displayed in full screen through adjustment of CSS style, and the internal element is enlarged, so that the demonstration page element is suitable for playing during demonstration.
6. The interactive code display and teaching tool according to claim 1, wherein the web interface of the presentation mode has a page turning arrow, and the CSS is operated to zoom in and out on a current presentation page, and to hide a presentation page displayed before, thereby performing the front-back switching of the presentation page.
7. The interactive code presentation and teaching tool according to claim 1, wherein in the presentation mode, if a picture, video, audio, PPT is encountered, the picture, video, audio are directly presented and played, the picture, video, audio are directly supported by HTML elements, and the PPT is an online PPT presentation service by microsoft; if the code block is encountered, clicking the code block to enter an editing mode, editing the code online, clicking an operation button to operate the code, and displaying an operation result in a web interface through websocket service and a back-end code server; the edited code is returned to the file service on the back-end code server for storage.
8. The interactive code display and teaching tool according to claim 1, further comprising a brush mode, wherein the brush mode is implemented by adding a transparent canvas to an original presentation page, and the brush handwriting is tracked and displayed by tracking JavaScript events of a mouse moving track in a left-click state.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110259686.6A CN113360147B (en) | 2021-03-10 | 2021-03-10 | Interactive code display and teaching tool |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110259686.6A CN113360147B (en) | 2021-03-10 | 2021-03-10 | Interactive code display and teaching tool |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113360147A CN113360147A (en) | 2021-09-07 |
| CN113360147B true CN113360147B (en) | 2024-04-05 |
Family
ID=77525014
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110259686.6A Active CN113360147B (en) | 2021-03-10 | 2021-03-10 | Interactive code display and teaching tool |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113360147B (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20140019627A (en) * | 2012-08-06 | 2014-02-17 | 인크로스 주식회사 | An authoring tool for web applications and the authoring method thereof |
| CN104049978A (en) * | 2014-06-27 | 2014-09-17 | 北京思特奇信息技术股份有限公司 | Method and system for achieving visualized edition and combination of codes |
| CN110049364A (en) * | 2019-03-26 | 2019-07-23 | 乐佰科(深圳)教育科技有限公司 | A kind of method and electronic equipment for editing code in teaching programming video |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100251143A1 (en) * | 2009-03-27 | 2010-09-30 | The Ransom Group, Inc. | Method, system and computer program for creating and editing a website |
-
2021
- 2021-03-10 CN CN202110259686.6A patent/CN113360147B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20140019627A (en) * | 2012-08-06 | 2014-02-17 | 인크로스 주식회사 | An authoring tool for web applications and the authoring method thereof |
| CN104049978A (en) * | 2014-06-27 | 2014-09-17 | 北京思特奇信息技术股份有限公司 | Method and system for achieving visualized edition and combination of codes |
| CN110049364A (en) * | 2019-03-26 | 2019-07-23 | 乐佰科(深圳)教育科技有限公司 | A kind of method and electronic equipment for editing code in teaching programming video |
Non-Patent Citations (2)
| Title |
|---|
| 数据结构算法演示系统的设计;王玢;李冬梅;李华颖;姚佳璐;王仁生;;教育教学论坛;20160713(第28期);全文 * |
| 浅谈Markdown在程序语言类教学演示中的应用;曹天泽;潘家志;;科学技术创新;20200115(第02期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113360147A (en) | 2021-09-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7334026B2 (en) | Collaborative remote operation of computer programs | |
| AU2005266901B2 (en) | System and method for electronic presentations | |
| Monserrat et al. | Notevideo: Facilitating navigation of blackboard-style lecture videos | |
| CN101295313B (en) | Display control apparatus and display control method | |
| US20060048058A1 (en) | System and method for electronic presentations | |
| US20080158261A1 (en) | Computer user interface for audio and/or video auto-summarization | |
| US20090177995A1 (en) | Computer User Interface for Calendar Auto-Summarization | |
| CN113504852A (en) | Control method of recording and broadcasting integrated intelligent comprehensive screen blackboard system | |
| CN103020237B (en) | A kind of webpage update method and device | |
| JPH07182365A (en) | Device and method for assisting multimedia conference minutes generation | |
| Wempen | PowerPoint 2010 Bible | |
| US20020093496A1 (en) | Computer user interface with non-salience deemphasis | |
| Ziewer | Navigational indices and full text search by automated analyses of screen recorded data | |
| CN113360147B (en) | Interactive code display and teaching tool | |
| US20210042464A1 (en) | Playable text editor and editing method therefor | |
| CN113177026B (en) | Live-broadcasting bullet screen learning note management method based on teaching video | |
| JP2011095809A (en) | Presentation support system | |
| CN113626621A (en) | Course content generation system and editing device for online interactive teaching | |
| CN1168030C (en) | Synchronous broadcast method and device of speed and text | |
| Kramer | Enhancing biology lectures with videodisc | |
| CN212302771U (en) | Touch multimedia teaching all-in-one machine | |
| Pitkänen | Creating illustration portfolio on a digital platform | |
| Gerantabee et al. | Flash Professional CS5 Digital Classroom | |
| BOARD | THE SOCSD SMART BOARD START-UP GUIDE | |
| POINT | Computer Application |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |