An instant feedback type AI practical training split-screen interactive teaching system and method

Abstract

This invention discloses a split-screen interactive teaching system and method based on real-time feedback AI training, belonging to the field of online education. The method includes: teachers constructing course chapters through a visual course editor, configuring teaching mode enumeration parameters, binding teaching resources, and defining interaction rules and trigger points. When learners access the course, the split-screen rendering engine divides the browser into independent left and right areas, generates a split-screen rendering strategy based on the teaching mode enumeration parameters, loads teaching resources on the left screen and embeds mode switching anchors, and loads corresponding training tools on the right screen. Simultaneously, a state synchronization bus enables state linkage between the left and right screens and synchronization of trigger point events. When a mode switching anchor or chapter switch is triggered, the system re-parses the current section's teaching mode enumeration parameters, dynamically updates the split-screen rendering strategy, and adjusts the content of the left and right screens. This invention achieves an integrated adaptive interactive display of teaching and training, significantly improving operational coherence and learning smoothness.

Description

Technical Field

[0001] This invention belongs to the field of online education, specifically relating to a split-screen interactive teaching system and method based on real-time feedback AI training. Background Technology

[0002] The rapid development of artificial intelligence (AI) technology has made AI application development capabilities a core competitive advantage across industries, driving an explosive growth in demand for AI education. AI education, as a key pathway to cultivating AI talent, is widely applied in higher education, vocational training, and corporate training. Currently, AI teaching methods can be broadly categorized into traditional classroom teaching, online video courses, programming training platforms, and blended learning models. Early research primarily employed online course systems based on MOOC platforms, using video lectures and quizzes to transfer knowledge. Subsequently, interactive programming environments such as Jupyter Notebook and Kaggle were gradually introduced into teaching scenarios, allowing learners to experiment in real-world code environments. Building on this foundation, in recent years, technologies such as automated evaluation systems, intelligent recommendation algorithms, and virtual laboratories have been applied to AI teaching platforms, improving teaching effectiveness by providing immediate feedback or personalized learning paths. Other methods include utilizing low-code platforms, visual programming tools, or online collaborative environments to lower the learning threshold.

[0003] However, all of the above methods suffer from the fundamental flaw of "separation of teaching and practice," meaning that the transmission of theoretical knowledge and hands-on practice are disconnected, making it difficult for learners to complete the full loop from theoretical understanding to code implementation within a unified platform. Existing research shows that artificial intelligence learning is highly practical, and simple video lectures or text tutorials cannot effectively cultivate learners' model debugging, problem analysis, and engineering implementation abilities. Furthermore, while interactive programming environments (such as Jupyter Notebook) support code execution, their specialized interfaces and complex configuration processes pose a significant barrier to learners without a computer science background. Traditional MOOC platforms, while lowering the learning threshold, only provide one-way content transmission and lack an immediate practical training feedback mechanism, resulting in a fragmented learning experience and failing to meet the diverse needs of learners with different technical levels.

[0004] Existing technologies include some solutions that attempt to integrate teaching content with practical training environments, such as embedding code editors in online courses, providing cloud computing resources, or using low-code tools to simplify the development process. However, these solutions still have significant shortcomings: First, embedded code editors are often limited in functionality and cannot support complex AI model training and debugging; second, the allocation and management of cloud computing resources rely on manual configuration and lack an automated mechanism for linking them with teaching content; third, while low-code tools lower the programming threshold, they sacrifice flexibility and scalability, making it difficult to meet the full spectrum of practical training needs, from zero-based knowledge to professional development. More importantly, existing solutions lack a unified technical framework, making it impossible to achieve deep integration of teaching resources, practical training environments, and evaluation systems within a single platform, and they also fail to provide an adaptive mechanism that can dynamically adjust the practical training mode based on the learner's technical background and learning stage.

[0005] In summary, existing technologies have shortcomings such as the inability to effectively integrate theoretical teaching and programming training on a unified platform, the inability to solve the compatibility problem between professional development tools and teaching scenarios, and the inability to provide a differentiated training system that covers learners with different technical levels. Summary of the Invention

[0006] To address the existing technical problems, this invention proposes a split-screen interactive teaching system and method based on real-time feedback AI training.

[0007] Firstly, this invention proposes a split-screen interactive teaching method for AI training based on real-time feedback, including: S1. Create a course structure containing course chapters and course sections on the visual course editor, and configure the corresponding teaching mode enumeration parameters for each course section according to the requirements. Further associate and bind the teaching mode enumeration parameters with the specified teaching resources, and define the interaction rules, configure the mode switching anchor point and the trigger point. S2, When a learner accesses the current course section, the split-screen rendering engine first divides the browser window into two independent rendering areas, the left screen and the right screen. Then, it enumerates parameters according to the teaching mode of the current course section and generates the split-screen rendering strategy for the current moment. S3, based on the current split-screen rendering strategy, loads the associated specified teaching resources in the left screen area and embeds the mode switching anchor point in the specified position, and loads the corresponding training tools in the right screen area. S4. Establish a state synchronization bus between the left and right screens. When the left screen reaches the trigger point, it publishes a progress change event. The right screen receives the progress change event through the state synchronization bus and performs a state update. S5: When the learner reaches the mode switching anchor point or enters the next course segment, the mode switching process is triggered. At this time, the teaching mode enumeration parameters corresponding to the target mode pointed to by the anchor point in the current course segment or the teaching mode enumeration parameters of the next course segment are re-parsed to generate the split-screen rendering strategy for the next moment. The left and right screens are re-rendered using a dynamic adjustment method, and S3-S5 are repeated.

[0008] Furthermore, in S1, the teaching mode enumeration parameters include four types: pure text and image mode, text and image plus webpage mode, text and image plus low-code mode, and complete development mode.

[0009] Furthermore, when the teaching mode enumeration parameter is a graphic and low-code mode, the right screen area in the split-screen rendering strategy loads an embedded low-code IDE through Web Component technology and overlays a teaching control layer including a step locking mechanism, an operation tracking mechanism, and an intelligent prompting mechanism, thereby achieving a balance between tool professionalism and teaching applicability.

[0010] Furthermore, the step locking mechanism monitors the status of the functional modules in the low-code IDE and sets unlocking conditions on specific functional modules. Only when the learner meets the conditions will the corresponding functional module change from a disabled state to an available state. The operation tracking mechanism injects data collection hooks into key operation nodes in the low-code IDE. Whenever a learner performs an operation, the tracking hooks capture the operation type, operation time, operation object, and operation result, and send the corresponding data to the backend data collection interface for storage. The intelligent prompting mechanism is based on a knowledge graph constructed between teaching steps and prompting information. When the system detects that the learner stays in a certain teaching step for more than the preset time or performs an incorrect operation, the intelligent prompting mechanism retrieves the prompting information corresponding to the current teaching step from the knowledge graph and displays it in the sidebar or pop-up window of the right screen tool interface.

[0011] Furthermore, in S4, the status update includes loading code templates, switching runtime environments, and adjusting tool configurations.

[0012] Furthermore, in S4, the state synchronization bus is based on the browser's custom event mechanism or a third-party message bus library, and adopts a publish-subscribe pattern to achieve decoupled communication between the left and right screens, with the left screen acting as the event publisher and the right screen as the event subscriber.

[0013] Furthermore, in S5, the mode switching process is specifically as follows: S501, parse the corresponding teaching mode enumeration parameters and generate the left screen rendering strategy and the right screen rendering strategy respectively; further combine the left screen rendering strategy and the right screen rendering strategy to obtain the split screen rendering strategy for the next moment. If the teaching mode enumeration parameter is pure image and text mode, then in the left screen rendering strategy, the left screen is used to load the specified image and text teaching resources, and in the right screen rendering strategy, the right screen area is hidden or displays the same content as the left screen. If the teaching mode enumeration parameter is text and image plus webpage mode, then in the left screen rendering strategy, the left screen is used to load the specified text and image teaching resources, and in the right screen rendering strategy, the right screen is used to create a sandboxed webpage container and embed a third-party site; the left screen and the right screen; If the teaching mode enumeration parameter is a graphic and low-code mode, in the next moment's split-screen rendering strategy, the left screen in the left screen rendering strategy is used to load the specified graphic and text teaching resources, and the right screen in the right screen rendering strategy is used to load the embedded low-code IDE and overlay the teaching control layer. If the teaching mode enumeration parameter is the full development mode, then in the left screen rendering strategy, the left screen is used to load the specified graphic teaching resources, and in the right screen rendering strategy, the right screen provides a fully functional code editor and runtime environment. S502, the left and right screens are re-rendered using a dynamic adjustment method, including: comparing the teaching mode enumeration parameters of the next moment's split-screen rendering strategy with the teaching mode enumeration parameters of the current moment's split-screen rendering strategy; if the type of the teaching mode enumeration parameters changes, the mode dynamic parser calculates the layout change scheme and generates a transition animation; after the animation is completed, S3-S5 are looped; if the type of the teaching mode enumeration parameters does not change, S3-S5 are looped directly.

[0014] Furthermore, in S5, when the learner interacts with the left screen, the learner's browsing behavior data is collected in real time; when the learner interacts with the right screen, the learner's practical operation data is collected in real time; and a learning behavior profile of the learner is generated based on the browsing behavior data and the practical operation data.

[0015] Secondly, this invention proposes an AI training split-screen interactive teaching system based on real-time feedback, which is used to implement the aforementioned AI training split-screen interactive teaching method based on real-time feedback.

[0016] The beneficial effects of this invention are: By using a split-screen architecture, teaching content and training tools can be displayed in parallel on the same screen. Learners do not need to switch between multiple windows or systems. The number of interface switching times for a single training task is reduced from 5-10 times in the traditional solution to 0 times, which significantly improves the continuity of operation and the smoothness of learning.

[0017] By establishing a real-time communication channel between the left and right screens through a state synchronization bus, changes in the teaching content progress can drive the status update of the training tools within milliseconds. Compared with the data lag in traditional solutions, this solution achieves real-time association and continuous collection of teaching behavior data and training operation data.

[0018] Through the end-to-end data acquisition interface, the system can capture the complete behavioral trajectory of learners from content browsing to practical training operations. Compared with traditional solutions that only collect test scores or final code submission results, this solution effectively increases the dimensions of the data collected, providing data support for precise teaching intervention. Attached Figure Description

[0019] Figure 1 This is an overall framework diagram of the present invention.

[0020] Figure 2 This is a schematic diagram of the process of the present invention. Detailed Implementation

[0021] To make the above-mentioned objects, features, and advantages of the present invention more apparent and understandable, the specific embodiments of the present invention will be described in detail below with reference to the accompanying drawings. Many specific details are set forth in the following description to provide a thorough understanding of the present invention. However, the present invention can be practiced in many other ways different from those described herein, and those skilled in the art can make similar modifications without departing from the spirit of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below. Technical features in the various embodiments of the present invention can be combined accordingly without mutual conflict.

[0022] First, this invention proposes a split-screen interactive teaching system based on real-time feedback AI training, such as... Figure 1 As shown, it includes: (1) Course configuration module, which provides a visual course editor to support teachers in creating course structures, selecting teaching modes, associating and binding resources, configuring trigger points, and defining interaction rules. The course configuration module includes the following sub-modules: Mode selector: Provides a drop-down menu or radio button group for an enumerated list of teaching modes; Resource Selector: Provides a resource library browsing interface and resource preview function, and supports batch import and version management of resources. Teachers can upload rich media resources in batches through ZIP archives. The system automatically parses the directory structure in the archive and generates a resource index. A new version record is created each time a resource is updated, and version rollback is supported. Anchor Editor: Provides a WYSIWYG interface for inserting and configuring anchor points; Rule Configurator: Provides a visual interface for configuring parameter mapping and state synchronization rules; (2) Split-screen rendering engine, used to receive the section configuration data output by the course configuration module, responsible for parsing the teaching mode enumeration parameters, generating split-screen rendering strategies, creating layout containers and instantiating rendering layer components. The split-screen rendering engine includes the following sub-modules: Dynamic pattern parser: Implements the mapping logic from teaching pattern enumeration parameters to split-screen rendering strategy; Layout Manager: Responsible for creating DOM containers, applying styles, and controlling transition animations; Component loader: Responsible for the dynamic loading and lifecycle management of components in the content rendering layer and tool rendering layer; (3) Content rendering layer, mounted on the left screen container, is responsible for loading and rendering rich media resources, binding anchor events and publishing content progress events. The content rendering layer includes the following sub-modules: Rich text renderer: Supports rendering content in Markdown and HTML formats; Video player: Supports HTML5 video playback, progress control, and event listening; Interactive component container: Supports embedding interactive components in the form of iframe or Web Component; (4) Tool rendering layer, mounted on the right screen container, is responsible for loading the corresponding training tools according to the enumeration parameters of the teaching mode. The tool rendering layer includes the following sub-modules: Web Container Manager: Responsible for creating sandboxed iframes, instantiating adapter layers, and handling cross-domain communication. It comes pre-loaded with adapters for various commonly used websites, such as MLPlaygroundAdapter (supports adjusting hyperparameters such as learning rate, number of hidden layers, and activation function), SDWebUIAdapter (supports passing generation parameters such as prompt words, negative prompt words, and sampling steps), CozeAgentAdapter (supports configuring agent roles, knowledge bases, and tool access permissions), and TensorFlowPlaygroundAdapter (supports adjusting neural network topology and training parameters). Low-code IDE integrator: responsible for loading third-party low-code platform SDKs, initializing editor components, and overlaying tutorial control layers; Code editor integrator: responsible for instantiating Monaco Editor or CodeMirror, integrating the code execution engine, and providing debugging tools; (5) The teaching control layer, overlaid on the tool rendering layer, provides step locking, operation tracking, and intelligent prompting functions. The teaching control layer includes the following sub-modules: Step Lock Manager: Maintains the step dependency graph, listens for step completion events, and dynamically updates the lock status of functional modules; Operation tracking collector: Injects event listeners, constructs operation data objects, and calls data collection interfaces at key operation nodes; Intelligent prompt engine: Loads knowledge graph data, detects operation pauses and errors, retrieves and displays prompt information, and supports hierarchical prompt strategies. L1 prompt (first pause): Provide brief guiding text, such as "Try adjusting the learning rate parameter"; L2 prompt (secondary pause): Provides detailed operation steps, such as "Click the parameter panel on the left and set learningRate to 0.01"; L3 hint (three pauses): Provide a complete example, such as displaying reference code or playing a demonstration video; (6) State synchronization bus, used to realize decoupled communication between the left screen content rendering layer and the right screen tool rendering layer. Based on the publish-subscribe pattern, it supports event registration, publishing, subscription and distribution; (7) Data acquisition module, responsible for collecting learners' browsing behavior data and practical training operation data, sending the data to the backend service through a unified data acquisition interface, and triggering the learning profile generation task. The data acquisition module includes the following sub-modules: Behavior tracker: Inject tracking scripts into the left and right screen components to listen for user interaction events; Data aggregator: Aggregates collected data periodically or in real time and sends it to the backend in batches; Profile Generator: Reads historical data from the database, calculates learning depth, training quality and teaching effectiveness indicators, and generates visual reports; Based on the above system architecture, this invention proposes an artificial intelligence education and training method based on a split-screen architecture, the overall process of which is as follows: Figure 2 As shown, starting with the configuration of course content, the process gradually progresses to the selection of split-screen rendering strategies, collaborative display of left and right screens, dynamic adaptation of tool status, and collection of learning behavior data, ultimately achieving deep integration of teaching content and training environment and automated support for differentiated learning paths.

[0023] Step S1: Course Structure Configuration and Mode Binding Teachers create course structures through the course management platform. These structures are organized in a two-tiered manner, with each section serving as an independent knowledge point carrier that carries specific teaching content and practical training tasks.

[0024] In the section configuration interface, teachers can select the teaching mode type for the section at the course section level through the visual course editor. The teaching mode type is represented by enumeration parameters and includes four types: pure text and image mode, text and image plus web page mode, text and image plus low code mode, and full development mode.

[0025] Each mode type corresponds to different left and right screen layout strategies and interaction mechanisms. Among them, the pure text and image mode (TextOnly) is used for pure theoretical explanations, in which the right screen area is hidden or displays the same content as the left screen; the text and image plus webpage mode (TextPlusWeb) is used for experiential learning, in which the right screen embeds a third-party AI tool website for learners to directly experience; the text and image plus low-code mode (TextPlusLowCode) is used for visual development training, in which the right screen provides a simplified low-code development environment; and the full development mode (FullDevelopment) is used for full programming training, in which the right screen provides a fully functional code editor and runtime environment.

[0026] After the teaching mode enumeration parameters are determined, the teacher first selects or creates associated teaching resources from the course resource library. The course resource library is classified and managed according to resource type, including rich media resource library, practical training resource library, question bank resource library and template resource library.

[0027] The rich media resource library stores teaching materials such as rich text documents, video courseware, and interactive H5 components. The practical training resource library stores auxiliary resources such as code templates, datasets, and configuration files. Based on the selected teaching mode, corresponding auxiliary resources are selected from the practical training resource library, including web-based resources (i.e., third-party site URLs, such as MLPureGround and Stable Diffusion WebUI); low-code resources (i.e., pre-configured application templates, such as Coze agent templates and Dify workflow templates); and complete development mode resources (i.e., code templates, dataset files, and environment configuration scripts). The question bank resource library stores exercises and quizzes, while the template resource library stores pre-configured low-code application templates and agent templates.

[0028] Secondly, in the configuration interface, teachers associate and bind the selected teaching resources with the teaching mode enumeration parameters, and define interaction rules by configuring the data binding relationship between the left-screen content and the right-screen tools. This enables the system to automatically call the corresponding resources based on the mode type. The interaction rules include parameter mapping rules (defining how variables in the left-screen content are mapped to the input parameters of the right-screen tools) and state synchronization rules (defining the state update operations that the right-screen tools should perform when the progress of the left-screen changes). Finally, teachers insert mode-switching anchors or progress trigger points at specific locations in the rich media resources to complete the trigger point configuration, including: anchor type definition (selecting hyperlink, button, or pop-up anchor styles), anchor target setting (specifying the target section to jump to or the target mode to switch to after clicking the anchor), and trigger condition configuration (setting automatic trigger conditions, such as video playback reaching a specific time point or rich text scrolling to a specific chapter). After configuration, the system serializes the teaching mode enumeration parameters, teaching resource index, trigger point configuration, and interaction rules into JSON or XML format and stores them in the section configuration table of the course database as input for subsequent rendering processes.

[0029] The core value of this stage lies in giving teachers the power to choose teaching models. Teachers can configure diverse practical training scenarios through a visual interface without writing code, thereby lowering the barrier to entry for the teaching platform and increasing the flexibility of course design.

[0030] Step S2: Initialize the split-screen rendering engine Next, the split-screen rendering engine is started. When a learner accesses a course section, the system reads the teaching mode enumeration parameters for that section and starts the split-screen rendering engine, thereby obtaining the split-screen rendering strategy.

[0031] As a core technology module, the split-screen rendering engine is responsible for dividing a single browser window into two independent rendering areas: the left screen area carries the content rendering layer for displaying teaching resources, and the right screen area carries the tool rendering layer for loading training tools.

[0032] The rendering engine includes a dynamic mode parser that reads the teaching mode enumeration parameters and determines the split-screen rendering strategy based on these parameters. The split-screen rendering strategy defines the width ratio of the left and right screens, layout, visibility control, and interaction permissions. For example, when the teaching mode enumeration parameter is a pure text and image mode, the parser outputs a rendering strategy that sets the left screen width to occupy 100% of the display area, and the right screen width to zero or mirror the content of the left screen. When the parameter is a text and image plus webpage mode or a text and image plus low-code mode, the parser outputs a rendering strategy that sets the left screen width to occupy 40% to 60% of the display area, and the right screen width to occupy 40% to 60% of the display area, with both screens displayed side-by-side. When the parameter is a full development mode, the parser dynamically adjusts the left and right screen ratios according to the learner's operating habits, and even supports a full-screen tool mode.

[0033] The introduction of a dynamic mode parser enables the system to quickly adjust the interface layout as the course progresses or learners actively switch modes, without reloading the page or interrupting the learning process.

[0034] After parsing, the system outputs the split-screen rendering strategy to the rendering engine's layout manager. The layout manager dynamically calculates the CSS style properties of the left and right screen containers based on the strategy parameters and applies them to the DOM structure, thus presenting the split-screen layout in the browser interface. This stage ensures the parallel display of teaching content and training tools in physical space, laying the foundation for subsequent collaborative interaction.

[0035] Step S3: Rendering the content on the left screen During the left-screen content rendering phase, the content rendering layer loads the rich media resources associated with the current section according to the split-screen rendering strategy. These rich media resources are retrieved from the course resource library and rendered according to a preset teaching order.

[0036] If the resource type is rich text, it is rendered using a rich text editor, supporting Markdown syntax, HTML tags, and custom styles, enabling teaching explanations to flexibly present various formats such as text, images, tables, and formulas. First, rich text content (Markdown or HTML format) is retrieved from the course resource library via an HTTP request; second, a rich text rendering library (such as Marked.js or React Markdown) is used to convert the content into an HTML DOM, and the rendered DOM is inserted into the left-hand container, applying a preset style theme; finally, anchor elements are inserted at predefined positions, and click event listeners are bound.

[0037] If the resource type is video, it is rendered through a video player component, supporting progress control, playback speed adjustment, subtitle display, and playback status tracking. First, create an HTML5 file. <video>First, set the `src` attribute of the element to the video resource URL. Second, add a playback control bar, including play / pause buttons, a progress bar, volume control, and speed selection, and bind a video playback event listener to listen for events such as play, pause, timeupdate, and ended. Finally, when the video reaches the trigger point time, publish a progress event through the state synchronization bus.

[0038] If the resource type is an interactive H5 component, the interactive component is rendered using embedded iframe or Web Component technology, supporting interactive functions such as animation demonstrations, parameter adjustment, and simulation experiments. First, embed the interactive component using iframe or Web Component technology; second, configure the component's input parameters and callback interfaces; finally, listen for the component's interactive events, such as parameter adjustments and simulation completion.

[0039] During the rendering of rich media resources, the system embeds mode switching anchors at specific content locations according to the course design, and binds click event handling functions to all embedded mode switching anchors.

[0040] The mode-switching anchor points are presented in the form of hyperlinks, buttons, or tooltips. When a learner clicks a mode-switching anchor point, a mode-switching event is triggered, enabling the system to smoothly transition from a pure text-and-image mode to a text-and-image plus webpage mode or a text-and-image plus low-code mode. This mechanism transforms the learning path from linear and unidirectional to flexible and controllable, allowing learners to freely switch between theoretical learning and practical operation according to their own needs.

[0041] The event handler executes the following logic: prevent the default jump behavior (preventDefault), read the target section identifier or target mode type of the mode switching anchor point, and trigger the mode switching process (i.e., step S7).

[0042] The embedding position of the mode switching anchor point is preset by the teacher during the course configuration stage. For example, after explaining the theoretical knowledge, the "Start Experience" anchor point is inserted to guide learners into the practical training session; or after the practical training task is completed, the "Continue Learning" anchor point is inserted to guide learners back to the theoretical content.

[0043] After the content on the left screen is rendered, the system outputs the rendered DOM structure and embedded anchor objects to the state management module for subsequent event listening and state synchronization.

[0044] Step S4: Rendering with the right-side tool During the right-screen tool rendering phase, the tool rendering layer loads the corresponding training tools based on the enumerated parameters of the teaching mode.

[0045] When the teaching mode enumeration parameter indicates a pure text and image mode, the right screen area is either hidden or displays the same content as the left screen. When the teaching mode enumeration parameter indicates Full Development mode, the right screen provides a fully functional code editor and runtime environment.

[0046] When the teaching mode enumeration parameters indicate a text and image plus webpage mode, the tool rendering layer creates a sandboxed webpage container and embeds a third-party website. This sandboxed webpage container is implemented using the HTML iframe element, and its sandbox attribute restricts the permissions of the embedded content, preventing malicious script execution, unauthorized form submissions, or cross-domain data theft. The iframe's src attribute points to a third-party website URL pre-set by the teacher during the course configuration phase. This URL can point to machine learning visualization tools such as TensorFlow Playground, generative AI experience platforms such as Stable Diffusion WebUI, or large model interaction tools such as the self-developed MBTI agent.

[0047] When the teaching mode enumeration parameter indicates a graphic and low-code mode, the tool rendering layer loads the embedded low-code IDE and overlays the teaching control layer.

[0048] Embedded low-code IDEs encapsulate third-party low-code platforms using Web Component technology. These platforms include agent building platforms like ByteCoze, workflow orchestration platforms like Bisheng and Zion, and AI application development platforms like Dify. Web Component technology encapsulates the core components of these third-party platforms as custom HTML tags, allowing them to be embedded into the right-side container like native HTML elements, while maintaining component style isolation and functional independence.

[0049] After embedding, the system overlays a teaching control layer on top of the low-code IDE. The teaching control layer includes three sub-modules: a step locking mechanism, an operation tracking mechanism, and an intelligent prompting mechanism.

[0050] The step-locking mechanism monitors the status of functional modules in the low-code IDE and sets unlocking conditions for specific modules. Only after the learner completes the preceding steps will subsequent functional modules transition from a disabled to an enabled state. For example, in the agent building task, learners must complete the "Select Model" step before unlocking the "Configure Prompts" function, and only after completing "Configure Prompts" can the "Add Knowledge Base" function be unlocked, thus forcing learners to progress step-by-step according to the instructional design. The implementation of the step-locking mechanism relies on dynamically modifying the DOM structure of the low-code IDE, adding the disabled attribute or overlaying a transparent mask on the unlocked functional module elements, and removing the restrictions when the unlocking conditions are met.

[0051] The operation tracking mechanism injects data collection hooks into key operation nodes in the low-code IDE. These key operation nodes include component drag-and-drop events, parameter input events, connection creation events, code writing events, and application testing events. Whenever a learner performs an operation, the tracking hooks capture the operation type, operation time, operation object, and operation result, and send this data to the backend data collection interface for persistent storage. The core value of the operation tracking mechanism lies in enabling the system to record the learner's complete behavioral trajectory during practical training, including correct operations, incorrect operations, repeated operations, and skipped operations. This fine-grained data provides a basis for subsequent learning path analysis, knowledge gap diagnosis, and personalized intervention.

[0052] The intelligent prompting mechanism constructs a mapping relationship between teaching steps and prompt information based on a knowledge graph. The knowledge graph represents teaching steps as nodes and edges as edges representing prerequisite dependencies between steps. Each step node is associated with a set of prompt information, including operation instructions, explanations of common errors, and reference examples. When the system detects that a learner has been stuck at a step for more than a preset time or has performed an incorrect operation, the intelligent prompting mechanism retrieves the corresponding prompt information for the current step from the knowledge graph and displays it in the sidebar or pop-up window of the right-screen tool interface. The prompt information adopts a progressive disclosure strategy: the initial prompt only provides a brief guide; if the learner continues to be stuck, detailed operation steps are provided; if the problem is still not solved, complete example code or a demonstration video is provided. The intelligent prompting mechanism avoids learners interrupting the training process due to operational difficulties, while maintaining learners' space for independent exploration through on-demand prompts, thus achieving a balance between lowering the threshold and cultivating abilities.

[0053] Furthermore, to enable data interaction between the teaching content on the left screen and the third-party tools on the right screen, the system encapsulates an adapter layer outside the sandboxed web page container iframe. The adapter layer implements cross-domain communication through the postMessage API. When the progress of the content on the left screen changes or the learner clicks a specific anchor point, the adapter layer sends a message to the iframe, carrying parameter configuration instructions or status update signals. After receiving the message, the third-party site inside the iframe performs the corresponding operation, such as adjusting model parameters, switching display cases, or resetting the runtime environment.

[0054] The adapter layer further pre-configures specific communication protocols for different types of third-party sites. For example, the machine learning visualization site adapter supports transmitting hyperparameter values ​​and training iteration counts; the generative AI experience site adapter supports transmitting prompts and generation configurations; and the large model interaction site adapter supports transmitting dialogue history and role settings. Through the mediating role of the adapter layer, the system avoids the need to directly modify the source code of third-party sites, enabling the platform to quickly integrate external tools while maintaining the original functionality of those tools.

[0055] Step S5: Establishment of the state synchronization bus After the left and right screens are rendered, the system establishes a state synchronization bus to achieve dynamic coupling between them. The state synchronization bus is implemented based on the browser's custom event mechanism or a third-party message bus library such as EventBus, and uses a publish-subscribe pattern to achieve decoupled communication. The publisher pushes event objects to the message queue by calling the event dispatch interface. The event object contains the event type, event timestamp, event source identifier, and event payload data. The left screen content rendering layer acts as the event publisher, publishing corresponding event messages when the teaching content playback progress changes, knowledge point annotations are triggered, or task anchors are clicked. Subscribers register callback functions and specify the types of events they want to listen for by calling the event listener interface. The message bus matches subscribers based on the event type and executes the callback functions to pass the event objects. The right-screen tool rendering layer acts as an event subscriber, registering listener callback functions for specific event types. When it receives an event message, it performs the corresponding tool state update operation.

[0056] This architecture eliminates the need for the left and right screens to directly reference each other's instances or call each other's internal methods, thereby reducing coupling between modules and improving the system's scalability and maintainability.

[0057] When the content progress on the left screen reaches a preset trigger point, such as when a video reaches a certain point in time, a learner scrolls through rich text to a certain chapter, or clicks on an interactive component, the content rendering layer publishes a progress change event. The event payload carries the current progress value, associated knowledge point tags, and tool status parameters that need to be updated. After receiving the event, the right screen tool rendering layer executes a status update instruction based on the payload data. The status update instruction includes operations such as loading code templates, switching runtime environments, or adjusting tool configurations.

[0058] For example, when the video on the left screen reaches the "Convolutional Neural Networks" topic, the low-code IDE on the right screen automatically loads the CNN model building template and pre-fills the configuration code for convolutional, pooling, and fully connected layers in the code editing area. When the rich text display on the left screen reaches the "Hyperparameter Tuning" section, the machine learning visualization tool on the right screen automatically switches to the hyperparameter adjustment interface and highlights key parameters such as learning rate and batch size. The state synchronization bus ensures that the progress of teaching content automatically drives the state changes of training tools, eliminating the need for learners to manually search for corresponding resources or configure tool environments, thus significantly reducing cognitive load and operational complexity. The system outputs the synchronized state of the left screen and the tool state of the right screen to the log recording module to track the collaboration process between content and tools and provide a basis for troubleshooting.

[0059] Step S6: Learning Behavior Data Collection During the interaction between the learner and the split-screen system, the data acquisition module continuously collects learning behavior data. This learning behavior data is divided into two categories: left-screen browsing behavior data and right-screen practical operation data.

[0060] Left-screen browsing behavior data is obtained through a behavior tracking script injected into the content rendering layer. This script listens for page scrolling events, mouse click events, video playback events, and interactive component trigger events, and records metrics such as content viewing time, video replay counts, anchor point click records, and interactive component usage frequency. Content viewing time is calculated by measuring the time learners spend in a specific content area. Timing starts when the content area enters the visible range and stops when it leaves the visible range; the accumulated time reflects the learner's level of attention to the content. Video replay counts are obtained by listening to the video player's seek event; the count increases when learners drag the progress bar back to a previously played segment, and the number of replays reflects the learner's difficulty in understanding the knowledge points. Anchor point click records track the timing and frequency of learners switching anchor points in their click patterns, used to analyze the learner's timing for transitioning from theoretical learning to practical training.

[0061] The training operation data on the right screen is obtained through the operation tracking mechanism of the teaching control layer and the tool's native log interface. This data includes indicators such as code submission records, execution results, debugging process, and operation completion rate. Code submission records track each save or submission operation performed by the learner in the code editor, recording the submission time, code content, and code differences, used to analyze the learner's programming thought process evolution. Execution results record the output content, execution time, and error messages of each code execution, used to assess the learner's mastery of knowledge points and debugging ability. The debugging process tracks the learner's debugging operations such as setting breakpoints, viewing variable values, and single-stepping, used to identify the learner's strategy choices during problem-solving. Operation completion rate is calculated by comparing the learner's operation sequence with the standard operation process, reflecting the quality of the learner's completion of the training task.

[0062] The data acquisition module associates and stores left-screen browsing behavior data and right-screen training operation data through a unified data acquisition interface. The data acquisition interface is implemented based on RESTful API or WebSocket protocol. The front-end acquisition script serializes data objects into JSON format periodically or in real time and sends them to the back-end data acquisition service. The back-end service writes the data into a relational database or time-series database and adds metadata such as learner identifier, course identifier, section identifier and timestamp to each data record to ensure the traceability and analyzability of the data.

[0063] Based on the collected end-to-end data, the system generates a learning behavior profile, which includes learning depth indicators, training quality indicators, and teaching effectiveness indicators.

[0064] The learning depth metric is calculated by analyzing content browsing heatmaps and content-tool switching frequency. The content browsing heatmap visually presents the distribution of learners' time spent in each chapter of the course; the darker the color, the higher the attention. By identifying the highlighted and unremarkable areas in the heatmap, learners' points of interest and areas of weak understanding can be determined. The content-tool switching frequency counts the number of times learners switch between the left and right screens. Too high a switching frequency indicates that learners need to frequently refer to the teaching content, reflecting a weak grasp of the knowledge; too low a switching frequency indicates that learners may skip theory and go directly to operation, reflecting a learning strategy that leans towards trial and error.

[0065] The training quality indicators are calculated by statistically analyzing the completion rate of operations, operational efficiency, and the number of operational errors. The completion rate of operations reflects the quality of the learner's execution of the training task. Operational efficiency is obtained by calculating the number of operation steps completed per unit of time. The number of operational errors is calculated by counting the number of error prompts or abnormal information triggered by the learner during the training process.

[0066] The teaching effectiveness index is calculated by analyzing the correlation between in-class exercise scores and right-screen operation scores. In-class exercise scores are derived from test results in the question bank resources, while right-screen operation scores are based on a comprehensive evaluation of operation completion, code quality, and execution results. The correlation coefficient between the two reflects the promoting effect of practical training on the mastery of theoretical knowledge. Learning behavior profiles provide teachers with a basis for analyzing student learning, and also provide data support for the system's personalized recommendations and intelligent interventions.

[0067] Based on learning depth metrics and training quality metrics, the K-means algorithm can be used to further cluster learners into: rapid mastery type (short review time, high operation completion rate, few errors), steady progress type (moderate review time, moderate operation completion rate, moderate number of replays), and struggling type (long review time, low operation completion rate, many errors, high number of replays), thereby recommending differentiated learning strategies or intervention measures for each type of learner; Step S7: Dynamic Mode Switching When a learner triggers a mode switching anchor point or the teaching progress naturally advances to the next lesson, the system executes the mode switching process.

[0068] The mode switching process first detects the triggering conditions, which include learners actively clicking the embedded mode switching anchor, automatically jumping to the next section after the video finishes playing, clicking the continue button displayed when the rich text scrolls to the end, or forced jumping triggered by a timer, etc. The target section identifier or target mode type carried by the triggering event is taken.

[0069] Once the triggering conditions are met, the system obtains the configuration data of the target section through an API request, extracts the teaching mode enumeration parameters of the target section from the configuration data, re-parses the teaching mode enumeration parameters through the mode dynamic parser, and generates a new split-screen rendering strategy.

[0070] The new split-screen rendering strategy is compared with the current strategy. If the mode type remains unchanged, the rendering engine directly applies the new split-screen rendering strategy. If the mode type changes, the resolver calculates the layout change scheme and generates transition animation parameters. The layout change scheme defines the target value of the left and right screen width ratio, the target state of visibility, and the unloading and loading order of content. The transition animation parameters define the duration of the layout change, the easing function type, and the keyframe sequence.

[0071] The rendering engine dynamically adjusts the CSS styles of the left and right screen containers based on the layout change scheme and transition animation parameters, and achieves smooth width changes and fade-in / fade-out effects through CSS Transition or Web Animations API, avoiding visual discomfort caused by sudden interface changes.

[0072] During animation execution, the system unloads tool components in the current mode and releases related resources, while preloading tool components and related resources in the target mode to ensure that the new tools are ready when the animation is completed.

[0073] After the animation is completed, the rendering engine updates the DOM structure, the left screen content rendering layer loads the rich media resources of the target section, the right screen tool rendering layer loads the corresponding training tools according to the parameters enumerated by the new teaching mode, the state synchronization bus re-establishes the communication connection between the left and right screens, and the data acquisition module records the mode switching event and marks the learning status at the time of the switch.

[0074] Through a mode-switching process, the system achieves a multi-level, progressive transition from pure text-and-image mode to text-and-image plus webpage mode, from text-and-image plus webpage mode to text-and-image plus low-code mode, and from text-and-image plus low-code mode to a complete development mode. This allows learners to smoothly switch between training environments of varying complexity based on their own technical level and learning stage, thus meeting the differentiated training needs from pure theoretical understanding to code development practice. The system outputs the split-screen status after the switch to the front-end interface and notifies the back-end service to update the learner's current progress record, ensuring the continuity and recoverability of the learning path.

[0075] This implementation method, through the aforementioned chain-like technical process, enables the teaching content and training tools to be presented in a native integrated manner in the interface space, achieves full-link connectivity in the data flow, and realizes automated collaboration of content-driven tools in the interaction mechanism. It solves the problems of structural separation between teaching platforms and training systems, poor adaptability between professional tools and teaching scenarios, and lack of differentiated training support in the existing technology. It has the characteristics of clear architecture, feasible implementation, and strong adaptability.

[0076] Furthermore, the effectiveness of the method of the present invention is further demonstrated through two specific embodiments.

[0077] Example 1: A Training Scheme for Building Intelligent Agents Based on the Coze Platform This embodiment addresses the "Basic Introduction to Intelligent Agents" knowledge point in the Introduction to Artificial Intelligence course, using a combination of text, graphics, and low-code to implement practical training on building intelligent agents.

[0078] The configuration is as follows: Set the teaching mode enumeration parameter to TextPlusLowCode; associate the left screen resource with the rich text document "Explanation of the Working Principle of Intelligent Agents.md", which contains the definition, components (perception, decision-making, execution) and typical application scenarios of intelligent agents; associate the right screen resource with the Coze intelligent agent building template "Customer Service Assistant Template", which is pre-configured with the role "Customer Service Specialist", with an empty knowledge base and an empty tool list; insert the mode switching anchor "Start Building" in the "Practice" section of the rich text document, and after clicking it, the Coze editor will be displayed on the right screen; set the interaction rules so that when the left screen plays the "Role Setting" section, the Coze editor on the right screen will automatically highlight the "Role Configuration" panel; The step-locking mechanism is configured, including five steps: Step 1: Select model (GPT-4o), unlock condition is completion of operation; Step 2: Configure role, unlock condition is completion of Step 1; Step 3: Add knowledge base, unlock condition is completion of Step 2; Step 4: Configure tool call, unlock condition is completion of Step 3; Step 5: Test agent, unlock condition is completion of Step 4; Steps S2-S4 are implemented in detail, unlock condition is split-screen rendering.

[0079] When learners access this section, the split-screen rendering engine parses the teaching mode enumeration parameter TextPlusLowCode and outputs the split-screen rendering strategy: the left screen occupies 45% of the width, and the right screen occupies 55%. The left screen content rendering layer loads the rich text document and renders the Markdown content, while inserting the "Start Building" anchor button; the right screen tool rendering layer loads the CozeSDK, initializes the Coze editor component and passes the template ID "customer_service_template", and overlays the teaching control layer, locking the configuration according to the steps. Initially, only the "Select Model" step is available, while the other steps are grayed out.

[0080] After rendering of the left and right screens is completed, the system establishes a state synchronization bus to achieve decoupled communication.

[0081] When a learner scrolls to the "Character Setting" section on the left screen, the left screen content rendering layer publishes an event via the state synchronization bus. The Coze editor on the right screen subscribes to this event and performs a highlighting operation. When the learner completes the "Select Model" operation in the Coze editor, the instructional control layer detects the model selection and publishes an event; the step lock manager subscribes to this event and unlocks the next step.

[0082] During the learning process, the data collection device continuously records learning behavior data. For example, at t=0s, the learner enters the section and begins to browse the content on the left screen; at t=45s, the learner scrolls to "Practice Section" and clicks the "Start Building" anchor point; at t=48s, the Coze editor on the right screen finishes loading and the learner clicks the "Select Model" drop-down menu; at t=52s, the learner selects the GPT-4o model to complete step 1 and unlock step 2; at t=60s, the learner clicks the "Role Configuration" panel and enters the role description "You are a professional customer service specialist"; at t=90s, the learner completes the role configuration to complete step 2 and unlock step 3.

[0083] The data aggregator sends the collected data to the backend in batches every 30 seconds. The log data sent includes user identifiers, course identifiers, section identifiers, left screen browsing data (viewing time of each chapter, anchor click records) and right screen operation data (low-code operation sequence, operation completion score), etc.

[0084] After the learner completes the agent setup, clicking the "Continue Learning" anchor on the left screen triggers the mode switching process. Upon detecting the trigger condition, the system reads the configuration of the target section, "Advanced Applications of Agents," whose teaching mode enumeration parameter is TextPlusWeb. The split-screen rendering engine re-parses the parameters and outputs a new split-screen rendering strategy, with the left screen width occupying 50% and the right screen width occupying 50%. Subsequently, a layout transition animation is executed, smoothly changing the right screen width from 55% to 50%.

[0085] After the animation is complete, the system uninstalls the Coze editor component, loads a sandboxed web page container on the right screen and embeds the intelligent agent demo site, and at the same time re-establishes the state synchronization bus connection, thereby achieving a smooth switch from text and image plus low-code mode to text and image plus web page mode.

[0086] This solution has been piloted in an introductory AI course at a university, involving 120 non-computer science students. The results of comparing the traditional MOOC solution (pure video lectures + independent experiments) with this invention's split-screen training solution are as follows: Practical training participation rate: 58% for the traditional method, 92% for this method; Task completion rate: Traditional method 45%, this method 78%; Average completion time: 38 minutes for the traditional method, 25 minutes for this method; Student satisfaction rating: Traditional solution 3.2 / 5, this solution 4.5 / 5; Example 2: Machine Learning Visualization Training Scheme Based on TensorFlow Playground This embodiment focuses on the knowledge point of "neural network basics" and uses a combination of text, images, and web pages to implement experiential training on parameter adjustment.

[0087] Teachers create the corresponding course sections in the course editor and configure them as follows: Set the teaching mode enumeration parameter to TextPlusWeb; associate the left screen resource with the video courseware "Neural Network Principle Animation.mp4", which is 8 minutes long and explains the forward and backward propagation process in detail; associate the right screen resource with the TensorFlow Playground site, whose URL is "https: / / playground.tensorflow.org"; in the trigger point configuration, set it to automatically publish a progress event when the video plays to 2 minutes and 30 seconds (when explaining the role of hidden layers), and the number of hidden layers on the right screen will be adjusted to 2 accordingly; when the video plays to 4 minutes and 50 seconds (when explaining the impact of learning rate), automatically publish a progress event, and the learning rate on the right screen will be adjusted to 0.03 accordingly; at the same time, establish interaction rules so that the video progress on the left screen is mapped to the parameter status on the right screen in real time; feed back the training results (accuracy) from the right screen to the left screen and display them in the form of real-time indicator cards; the unlocking condition for the detailed implementation of steps S2-S5 is split-screen rendering and state synchronization.

[0088] When learners access this section, the split-screen rendering engine starts and generates a split-screen rendering strategy based on the TextPlusWeb enumeration parameters according to the teaching mode, with each screen occupying 50% of the width. The right screen tool rendering layer loads an iframe and embeds the TensorFlowPlayground site, while instantiating the TFPlaygroundAdapter adapter. This adapter listens for the timeupdate event of the left screen video. When the video plays for 150 seconds, the adapter calls the setHiddenLayers(2) method; when the playback time reaches the interval between 290 and 291 seconds, it calls the setLearningRate(0.03) method. The adapter sends configuration instructions to the iframe via the postMessage API, such as sending a message; the iframe listens for the message event and updates the interface parameters after receiving the instruction.

[0089] During the learning process, the data acquisition module records detailed behavioral data: at t=150 seconds, the system automatically sets the number of hidden layers on the right screen to 2; at t=165 seconds, the learner manually adjusts the number of hidden layers to 3; at t=180 seconds, the learner clicks the "Train" button to start model training; at t=200 seconds, training is complete, the accuracy reaches 85%, the adapter captures this result and publishes it to the left screen through the status synchronization bus; at t=205 seconds, the left screen displays the accuracy indicator card, and the learner then continues to adjust the learning rate parameter.

[0090] All behavioral data is sent to the backend in real time through a unified data collection interface to generate learning behavior profiles.

[0091] This experimental example, through split-screen collaboration and state synchronization mechanisms, enables learners to operate visualization tools and observe the effects of parameter changes in real time while watching theoretical videos, significantly improving the learning experience and the depth of knowledge understanding.

[0092] This invention also compared the effectiveness of traditional video courses (without practical training) with the proposed solution, and the results are as follows: Knowledge retention rate (tested after 1 week): 62% for the traditional method, 81% for this method; Parameter comprehension accuracy rate: 54% for the traditional method, 89% for this method; Furthermore, learners reported that they could immediately see the impact of parameter changes and had a deeper understanding.

[0093] The above embodiments fully verify the feasibility and effectiveness of the technical solution of the present invention. Through the synergistic effect of split-screen architecture, dynamic mode parsing, state synchronization bus and teaching control layer, the deep integration of teaching content and training tools has been successfully achieved, significantly improving learning efficiency and learning experience. It is particularly suitable for online teaching scenarios in artificial intelligence education and related fields.

[0094] For the system embodiments, since they basically correspond to the method embodiments, relevant details can be found in the descriptions of the method embodiments; the implementation methods of the modules will not be repeated here. The system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of the present invention according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0095] The system embodiments of the present invention can be applied to any device with data processing capabilities, such as a computer or other similar device. The system embodiments can be implemented in software, hardware, or a combination of both. Taking software implementation as an example, as a logical device, it is formed by the processor of any data processing device loading the corresponding computer program instructions from non-volatile memory into memory for execution.

[0096] The embodiments described above are merely preferred embodiments of the present invention and are not intended to limit the invention. Those skilled in the art can make various changes and modifications without departing from the spirit and scope of the invention. Therefore, all technical solutions obtained through equivalent substitution or transformation fall within the protection scope of the present invention.< / video>

Claims

1. A split-screen interactive teaching method for AI training based on real-time feedback, characterized in that, include: S1. Create a course structure containing course chapters and course sections on the visual course editor, and configure the corresponding teaching mode enumeration parameters for each course section according to the requirements. Further associate and bind the teaching mode enumeration parameters with the specified teaching resources, and define the interaction rules, configure the mode switching anchor point and the trigger point. S2, When a learner accesses the current course section, the split-screen rendering engine first divides the browser window into two independent rendering areas, the left screen and the right screen. Then, it enumerates parameters according to the teaching mode of the current course section and generates the split-screen rendering strategy for the current moment. S3, based on the current split-screen rendering strategy, loads the associated specified teaching resources in the left screen area and embeds the mode switching anchor point in the specified position, and loads the corresponding training tools in the right screen area. S4. Establish a state synchronization bus between the left and right screens. When the left screen reaches the trigger point, it publishes a progress change event. The right screen receives the progress change event through the state synchronization bus and performs a state update. S5: When the learner reaches the mode switching anchor point or enters the next course segment, the mode switching process is triggered. At this time, the teaching mode enumeration parameters corresponding to the target mode pointed to by the anchor point in the current course segment or the teaching mode enumeration parameters of the next course segment are re-parsed to generate the split-screen rendering strategy for the next moment. The left and right screens are re-rendered using a dynamic adjustment method, and S3-S5 are repeated.

2. The split-screen interactive teaching method for AI training based on real-time feedback as described in claim 1, characterized in that, In S1, the teaching mode enumeration parameters include four types: pure text and image mode, text and image plus webpage mode, text and image plus low-code mode, and complete development mode.

3. The AI ​​training split-screen interactive teaching method based on real-time feedback as described in claim 2, characterized in that, When the teaching mode enumeration parameter is a combination of text and graphics with low-code mode, the right screen area in the split-screen rendering strategy loads an embedded low-code IDE through WebComponent technology and overlays a teaching control layer that includes a step locking mechanism, an operation tracking mechanism, and an intelligent prompting mechanism, thereby achieving a balance between tool professionalism and teaching applicability.

4. The AI ​​training split-screen interactive teaching method based on real-time feedback as described in claim 3, characterized in that, The step locking mechanism monitors the status of the functional modules in the low-code IDE and sets unlocking conditions on specific functional modules. Only when the learner meets the conditions will the corresponding functional module change from a disabled state to an available state. The operation tracking mechanism injects data collection hooks into key operation nodes in the low-code IDE. Whenever a learner performs an operation, the tracking hooks capture the operation type, operation time, operation object, and operation result, and send the corresponding data to the backend data collection interface for storage. The intelligent prompting mechanism is based on a knowledge graph constructed between teaching steps and prompting information. When the system detects that the learner stays in a certain teaching step for more than the preset time or performs an incorrect operation, the intelligent prompting mechanism retrieves the prompting information corresponding to the current teaching step from the knowledge graph and displays it in the sidebar or pop-up window of the right screen tool interface.

5. The split-screen interactive teaching method for AI training based on real-time feedback as described in claim 1, characterized in that, In S4, the status update includes loading code templates, switching runtime environments, and adjusting tool configurations.

6. The split-screen interactive teaching method for AI training based on real-time feedback as described in claim 1, characterized in that, In S4, the state synchronization bus is based on the browser's custom event mechanism or a third-party message bus library, and adopts a publish-subscribe pattern to achieve decoupled communication between the left and right screens. The left screen is the event publisher, and the right screen is the event subscriber.

7. The split-screen interactive teaching method for AI training based on real-time feedback as described in claim 1, characterized in that, In S5, the mode switching process is as follows: S501, parse the corresponding teaching mode enumeration parameters and generate the left screen rendering strategy and the right screen rendering strategy respectively; further combine the left screen rendering strategy and the right screen rendering strategy to obtain the split screen rendering strategy for the next moment. If the teaching mode enumeration parameter is pure image and text mode, then in the left screen rendering strategy, the left screen is used to load the specified image and text teaching resources, and in the right screen rendering strategy, the right screen area is hidden or displays the same content as the left screen. If the teaching mode enumeration parameter is text and image plus webpage mode, then in the left screen rendering strategy, the left screen is used to load the specified text and image teaching resources, and in the right screen rendering strategy, the right screen is used to create a sandboxed webpage container and embed a third-party site; the left screen and the right screen; If the teaching mode enumeration parameter is a graphic and low-code mode, in the next moment's split-screen rendering strategy, the left screen in the left screen rendering strategy is used to load the specified graphic and text teaching resources, and the right screen in the right screen rendering strategy is used to load the embedded low-code IDE and overlay the teaching control layer. If the teaching mode enumeration parameter is the full development mode, then in the left screen rendering strategy, the left screen is used to load the specified graphic teaching resources, and in the right screen rendering strategy, the right screen provides a fully functional code editor and runtime environment. S502, the left and right screens are re-rendered using a dynamic adjustment method, including: comparing the teaching mode enumeration parameters of the next moment's split-screen rendering strategy with the teaching mode enumeration parameters of the current moment's split-screen rendering strategy; if the type of the teaching mode enumeration parameters changes, the mode dynamic parser calculates the layout change scheme and generates a transition animation; after the animation is completed, S3-S5 are looped; if the type of the teaching mode enumeration parameters does not change, S3-S5 are looped directly.

8. The split-screen interactive teaching method for AI training based on real-time feedback as described in claim 1, characterized in that, In step S5, when the learner interacts with the left screen, the learner's browsing behavior data is collected in real time; when the learner interacts with the right screen, the learner's practical operation data is collected in real time; and a learning behavior profile of the learner is generated based on the browsing behavior data and practical operation data.

9. A split-screen interactive teaching system for AI training based on real-time feedback, used to implement the split-screen interactive teaching method for AI training based on real-time feedback as described in claim 1, characterized in that, include: The course configuration module is used to create a course structure containing course chapters and course sections on the visual course editor, and to configure the corresponding teaching mode enumeration parameters for each course section according to the requirements. It further associates and binds the teaching mode enumeration parameters with the specified teaching resources, and defines the interaction rules, configures the mode switching anchor point and the trigger point. The split-screen rendering engine module is used to divide the browser window into two independent rendering areas, the left screen and the right screen; it enumerates parameters according to the teaching mode of the current section and generates the split-screen rendering strategy at the current moment. The rendering layer module is used to load the associated specified teaching resources in the left screen area and embed the mode switching anchor point in the specified position based on the current split-screen rendering strategy, and load the corresponding training tools in the right screen area. The status synchronization bus module is used to establish a status synchronization bus between the left and right screens. When the left screen reaches the trigger point, it publishes a progress change event. The right screen receives the progress change event through the status synchronization bus and executes the corresponding status update. The mode switching module is used to trigger the mode switching process when the learner reaches the mode switching anchor point or the course enters the next lesson segment. At this time, the teaching mode enumeration parameters corresponding to the target mode pointed to by the anchor point in the current lesson segment or the teaching mode enumeration parameters of the next lesson segment are re-parsed to generate the split-screen rendering strategy for the next moment. The left and right screens are re-rendered using a dynamic adjustment method.

10. A split-screen interactive teaching system for AI training based on real-time feedback, as described in claim 9, is characterized in that... The rendering layer module includes a content rendering layer and a tool rendering layer; The content rendering layer is used to load associated specified teaching resources in the left screen area and embed mode switching anchors at specified positions based on the current split-screen rendering strategy. The tool rendering layer is used to load the corresponding training tools in the right screen area based on the teaching mode enumeration parameters according to the current split-screen rendering strategy.

Images