Control method, device and storage medium of classroom interaction system

Abstract

The application discloses a control method and device of a classroom interaction system and a storage medium, and belongs to the technical field of classroom education. The method comprises the following steps: in response to an activity starting instruction, a first state container corresponding to a first student and a second state container corresponding to a second student are created; the first state container and the second state container are respectively associated with a first rendering area and a second rendering area in a display interface; operation information of the first rendering area and / or the second rendering area is acquired; the operation information is sent to the first state container and / or the second state container; and the display interface is updated according to the operation information by the first state container and / or the second state container to update the answering state information of the first student and / or the second student. The application avoids mutual interference caused by multi-person operation by maintaining the state container during the answering of the students.

Description

Technical Field

[0001] This application relates to the field of classroom education technology, and in particular to a control method, device and storage medium for a classroom interactive system. Background Technology

[0002] In multi-platform classroom teaching systems, teachers typically use a large touchscreen in the classroom, while students participate in classroom interactions via their personal mobile phones, tablets, or computers. When two-person competitive quiz is required, the technology usually embeds two parallel iframe subpages within the browser page on the teacher's large screen. Each subpage loads an independent quiz page file, serving two students respectively. Each subpage maintains its own quiz status, countdown, and score data, communicating with the main page via the postMessage interface. The main page then sends the status data of both students to the server and simultaneously synchronizes the data to the other students' mobile phones or tablets via WebSocket.

[0003] However, because the two subpages run in isolated browser contexts, when real-time progress synchronization and score display are required in two-player competitions, the main page must frequently communicate bidirectionally with both subpages via `postMessage`. Simultaneously, it must handle other classroom data pushed from the server that needs to be synchronized to students' mobile devices. As the activity progresses, the communication link between the subpages and the main page becomes increasingly complex. Coupled with the need for multi-terminal data synchronization, issues such as event loss, state overwriting, and data contention easily arise. This leads to mutual interference between the two students' operations, incorrect score calculations, and abnormal display of the competition progress bar, making it difficult to guarantee state isolation and data consistency when two people are simultaneously operating on the screen.

[0004] The above content is only used to help understand the technical solution of this application and does not represent an admission that the above content is prior art. Summary of the Invention

[0005] The main purpose of this application is to provide a control method, device and storage medium for a classroom interactive system, which aims to solve the technical problem that it is difficult to guarantee state isolation and data consistency when two people are operating on the screen at the same time in a classroom teaching system.

[0006] To achieve the above objectives, this application provides a control method for a classroom interaction system, the method comprising the following steps:

[0007] In response to the activity start command, create a first state container for the first student and a second state container for the second student;

[0008] Associate the first state container and the second state container with the first rendering area and the second rendering area in the display interface, respectively.

[0009] Obtain operation information for the first rendering region and / or the second rendering region, and send the operation information to the first state container and / or the second state container accordingly;

[0010] The answer status information of the first student and / or the second student in the display interface is updated according to the operation information through the first state container and / or the second state container.

[0011] In one embodiment, the step of associating the first state container and the second state container with the first rendering area and the second rendering area in the display interface, respectively, includes:

[0012] Instantiate the first state container and the second state container in the display interface;

[0013] The first state container is marked as associated with the first student identifier, and the second state container is marked as associated with the second student identifier;

[0014] The answer states in the first state container are initialized to a first set of initial values, and the answer states in the second state container are initialized to a second set of initial values.

[0015] Establish a data association between the first state container and the first DOM subtree in the display interface, and a data association between the second state container and the second DOM subtree in the display interface.

[0016] In one embodiment, the step of updating the answer status information of the first student and / or the second student in the display interface according to the operation information through the first state container and / or the second state container includes:

[0017] When the first state container and / or the second state container receive the operation information through the state update interface, the answer progress data maintained by the first state container and / or the second state container is updated according to the operation information.

[0018] The answer status information of the first student or the second student in the first rendering area and / or the second rendering area is updated by updating the first DOM subtree associated with the first state container and / or the second DOM subtree associated with the second state container.

[0019] In one embodiment, the step of obtaining operation information of the first rendering region and / or the second rendering region, and sending the operation information to the first state container and / or the second state container accordingly, includes:

[0020] Determine the original event object generated by the display interface, and extract the corresponding event coordinates and event type from the original event object;

[0021] The target DOM element hit by the original event object is determined based on the event coordinates using the element from the point detection interface.

[0022] Traverse the ancestor chain of the target DOM element upwards to determine the DOM container element carrying the region identifier attribute, and determine the rendering region to which the original event object belongs based on the region identifier attribute;

[0023] The original event object is encapsulated into operation information corresponding to the rendering region, and the state update interface provided by the state container associated with the rendering region is called to pass the operation information into the corresponding state container.

[0024] In one embodiment, after the step of updating the answer status information of the first student and / or the second student in the display interface according to the operation information through the first state container and / or the second state container, the method further includes:

[0025] Extract a first answer progress snapshot from the first state container, and extract a second answer progress snapshot from the second state container;

[0026] The first and second answer progress snapshots are packaged into a synchronization data packet, and the synchronization data packet is sent to the server via a network socket;

[0027] The system receives a snapshot of the peer's answering progress sent by the server and outputs the snapshot to the display interface. The snapshot includes the peer's answering status information on other terminal devices.

[0028] In one embodiment, the step of associating the first state container and the second state container with the first rendering area and the second rendering area in the display interface, respectively, further includes:

[0029] Insert a first branch node and a second branch node into the virtual DOM tree of the display interface. The first branch node corresponds to the first rendering area, and the second branch node corresponds to the second rendering area.

[0030] The first state container is used as the context data source for the first branch node, and the second state container is used as the context data source for the second branch node.

[0031] Update the answer status information in the first state container and the second state container according to the operation information;

[0032] The updated answer status information is sent to the first terminal device and the second terminal device respectively via network socket.

[0033] In one embodiment, the control method of the classroom interaction system further includes:

[0034] In response to the activity start command, a first canvas and a second canvas are drawn in the display interface, the first canvas is assigned to the first rendering area, and the second canvas is assigned to the second rendering area;

[0035] Read the first question data from the first state container, and draw the first falling icon sequence corresponding to the first question data on the first canvas;

[0036] Read the second question data from the second state container, and draw the second falling icon sequence corresponding to the second question data on the second canvas;

[0037] Based on the first falling icon sequence and the second falling icon sequence, looping animations are created for the first canvas and the second canvas respectively. The frame update function of the first canvas reads the animation parameters of the looping animation in the first state container, and the frame update function of the second canvas reads the animation parameters of the looping animation in the second state container.

[0038] In one embodiment, after the step of updating the answer status information of the first student and / or the second student in the display interface according to the operation information through the first state container and / or the second state container, the method further includes:

[0039] In response to the activity end command, settlement data is generated based on the answer status information in the first state container and the second state container;

[0040] An activity report is generated based on the settlement data, and the activity report is displayed on the display interface;

[0041] Destroy the data association between the first state container and the second state container and the display interface, and release the memory resources occupied by the first state container and the second state container.

[0042] In addition, to achieve the above objectives, this application also provides a control device for a classroom interaction system, the device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the control method for the classroom interaction system as described above.

[0043] In addition, to achieve the above objectives, this application also provides a storage medium, which is a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, it implements the steps of the control method of the classroom interactive system as described above.

[0044] One or more technical solutions proposed in this application have at least the following technical effects:

[0045] This application creates independent first and second state containers for two students in memory, and associates the corresponding first and second rendering areas on the display interface with these state containers. This ensures that the display content of each rendering area only responds to data changes in the associated state container. When touch operation information is obtained from the first or second rendering area, the operation information is sent to the associated state container. The state container then independently updates the corresponding student's answer status based on the operation information and triggers a refresh of the corresponding rendering area. This creates a completely isolated dual-instance runtime environment within the same browser page. The memory isolation mechanism of the state containers fundamentally avoids data competition and state overwriting issues caused by cross-instance communication. Each student's operation only affects their own state container and rendering area. Progress data is accurately distributed to the corresponding state container based on the student's identifier, ensuring independent maintenance of the answer status and strict data consistency when two people are operating on the screen simultaneously. Attached Figure Description

[0046] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0047] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0048] Figure 1 This is a flowchart illustrating the first embodiment of the control method for the classroom interaction system of this application;

[0049] Figure 2This is a flowchart illustrating the second embodiment of the control method for the classroom interaction system of this application;

[0050] Figure 3 This is a flowchart illustrating the third embodiment of the control method for the classroom interaction system of this application;

[0051] Figure 4 This is a flowchart illustrating the fourth embodiment of the control method for the classroom interaction system of this application;

[0052] Figure 5 This is a schematic diagram of the structure of the control device of the classroom interactive system in the hardware operating environment involved in the embodiments of this application.

[0053] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0054] It should be understood that the specific embodiments described herein are merely illustrative of this application and are not intended to limit this application.

[0055] To better understand the above technical solutions, the following will provide a detailed explanation of the technical solutions in conjunction with the accompanying drawings and specific implementation methods.

[0056] The main solution of this application embodiment is as follows: In response to the activity start command, a first state container corresponding to the first student and a second state container corresponding to the second student are created. The first state container and the second state container are associated with the first rendering area and the second rendering area in the display interface, respectively. The operation information of the first rendering area and / or the second rendering area is obtained, and the operation information is sent to the first state container and / or the second state container accordingly. The answer status information of the first student and / or the second student in the display interface is updated according to the operation information through the first state container and / or the second state container.

[0057] In existing classroom teaching systems, two parallel iframe subpages are typically embedded within the teacher's browser on the main screen to enable two-person competitive quiz. Since these two subpages run in isolated browser contexts, real-time progress synchronization and score display during the quiz require frequent bidirectional communication between the main page and the two subpages via `postMessage`. Simultaneously, the main page must handle other classroom data pushed from the server and synchronized to students' mobile devices. As the activity progresses, the communication link between the subpages and the main page becomes increasingly complex. Coupled with the need for multi-terminal data synchronization, issues such as event loss, state overwriting, and data contention can easily arise. This leads to interference between the two students' actions, incorrect score calculations, and abnormal progress bar display, making it difficult to guarantee state isolation and data consistency when two students are simultaneously operating on the screen.

[0058] This application creates independent first and second state containers for two students in memory, and associates the corresponding first and second rendering areas on the display interface with these state containers. This ensures that the display content of each rendering area only responds to data changes in the associated state container. When touch operation information is obtained from the first or second rendering area, the operation information is sent to the associated state container. The state container then independently updates the corresponding student's answer status based on the operation information and triggers a refresh of the corresponding rendering area. This creates a completely isolated dual-instance runtime environment within the same browser page. The memory isolation mechanism of the state containers fundamentally avoids data competition and state overwriting issues caused by cross-instance communication. Each student's operation only affects their own state container and rendering area. The progress data is accurately distributed to the corresponding state container based on the student's identifier, ensuring independent maintenance of the answer status and strict data consistency when two people are operating on the screen simultaneously. This achieves a real-time competitive experience without interference.

[0059] To better understand the above technical solutions, exemplary embodiments of this application will be described in more detail below with reference to the accompanying drawings. Although exemplary embodiments of this application are shown in the drawings, it should be understood that this application can be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided to enable a more thorough understanding of this application and to fully convey the scope of this application to those skilled in the art.

[0060] It should be noted that the executing entity in this embodiment can be a teacher-side device, or a computing service device with data processing, network communication, and program execution functions, such as a tablet computer, personal computer, or mobile phone, or an electronic device or control device of a classroom interaction system capable of the above functions. This embodiment does not specifically limit the specific implementation. The following description uses a teacher-side device as an example to illustrate this embodiment and the following embodiments.

[0061] Based on this, embodiments of this application provide a control method for a classroom interaction system, referring to... Figure 1 , Figure 1 This is a flowchart illustrating the first embodiment of the control method for the classroom interaction system of this application.

[0062] In this embodiment, the control method of the classroom interaction system includes steps S10 to S40:

[0063] Step S10: In response to the activity start command, create a first state container corresponding to the first student and a second state container corresponding to the second student;

[0064] Step S20: Associate the first state container and the second state container with the first rendering area and the second rendering area in the display interface, respectively;

[0065] In this embodiment, the classroom interaction system can be deployed on the teacher's device or a server. Responding to the teacher's device, and through the instruction generated by clicking the "Start Activity" button on the large-screen computer interface, it creates independent state containers for at least two students participating in the two-person quiz activity. These two independent state containers are associated with the left and right rendering areas of the large-screen display interface, respectively, achieving bidirectional association between data and view. The display interface refers to the user interface presented by the browser window running on the teacher's large-screen computer. The first and second rendering areas are two clearly defined independent visual areas in the display interface, typically using Cascading Style Sheets (CSS) layout techniques such as Flexbox or Grid to achieve left-right splitting. The state containers are used to store and manage the students' real-time states during the classroom interaction activity, encapsulating each student's dynamic information, including identity, answering progress, score, preparation status, and current question index. The state containers are isolated from each other in memory and provide data update and query interfaces, ensuring that the data operations of the two students do not interfere with each other, laying the data foundation for subsequent real-time interaction. Through data association, the system can establish a data association relationship between the state container and the rendering area, so that any change in the data in the state container can automatically trigger the interface update of the corresponding rendering area. At the same time, events generated by user interaction in the rendering area can also be passed to the correct state container through the association relationship.

[0066] Optionally, the Classroom Cool Action system can output the rendered display interface on the classroom screen or send it to students' terminal devices, allowing students to achieve real-time classroom interaction across multiple platforms on their terminal devices.

[0067] It's important to note that the Document Object Model (DOM) is a standard programming interface for Extensible Markup Language (EXPLAIN). It's the interface through which browsers parse HTML documents into a tree structure. In this tree structure, each HTML element, such as div, button, or p, becomes a node, called an element node. Through the application programming interface provided by the DOM, scripting languages ​​can access, create, modify, or delete any node in the tree, thereby dynamically changing the content, structure, and style of the webpage. When a user clicks within the rendering area, the event object contains information about the target node where the event occurred. The system determines the rendering area to which the event belongs by traversing the ancestor chain of that node.

[0068] Specifically, after receiving the activity start command from the teacher, the classroom interaction system parses the command content and extracts the activity type identifier, question dataset, and student identifiers. When the activity type identifier indicates a two-person adversarial activity, the system creates independent state container instances for the two participating students. Each state container instance initializes default answer status values, such as initial score set to zero, ready state set to not ready, and current question index set to zero, and loads the question dataset into the container. The system then associates each state container with the corresponding student's unique identifier and stores the association in the activity session mapping table. Two rendering areas are created in the display interface, defining two container elements with unique identifiers (e.g., div) using HTML, and assigning CSS classes to each container to control layout and style. Through the front-end framework's data association mechanism, the system connects the first state container to the DOM tree of the first rendering area, and the second state container to the DOM tree of the second rendering area. This connection ensures that when the data in the state container changes, the corresponding rendering area can automatically re-render to reflect the latest state, and events within the area can be correctly routed to the associated state container.

[0069] In one embodiment, a first state container and a second state container are instantiated in the display interface. The first state container is marked as associated with a first student identifier, and the second state container is marked as associated with a second student identifier. The answer state in the first state container is initialized to a first initial value set, and the answer state in the second state container is initialized to a second initial value set. A data association relationship is established between the first state container and the first DOM subtree in the display interface, and a data association relationship is established between the second state container and the second DOM subtree in the display interface.

[0070] Optionally, the classroom interaction system uses Redux as the front-end state management library. Two independent store instances are created as state containers by calling the `createStore` method provided by Redux twice. Each store has its own independent reducer tree and initial state tree. The reducer defines pure functions that handle operation information, and when an operation occurs, a state update is triggered by dispatching an action. The two store instances are stored in different variables and managed through a mapping table with the student ID as the key, ensuring that the corresponding state container can be quickly retrieved based on the student identifier.

[0071] Optionally, the classroom interaction system can also utilize Vue's reactive system to build a state container. Two independent reactive objects are created using Vue's `reactive` function, each containing all the student's state properties, such as `score`, `ready`, and `currentQuestion`. These objects are defined in the parent component's `setup` function and injected into the entire component tree via the `provide` function, allowing any child component to access the corresponding state container through `inject`. Furthermore, leveraging Vue's reactive tracking mechanism, all components that depend on the state object's properties will automatically re-render when those properties change.

[0072] In one example, the classroom interaction system uses the React framework to implement the association. The root component maintains a first state container and a second state container using `useState` or `useReducer`, storing the state containers as `state` variables. Then, through component composition, the first state container is passed as props to the `Player` child component responsible for rendering the first area, and the second state container is passed as props to another `Player` component responsible for rendering the second area. Internally, the `Player` component renders UI elements such as the student's name, score, question options, and a "ready" button based on the passed props. When the data in the state containers changes, React's virtual DOM diff algorithm automatically updates the corresponding child component tree, thus refreshing the interface. Simultaneously, the `Player` component internally calls the callback function passed from the parent component through event handlers to update the state containers.

[0073] In another example, the classroom interaction system uses the Vue framework to implement the association. Two independent component tags are defined in the parent component's template, for example...<player:state="stateXiaoming" / > and<player:state="stateXiaohong" / > The `v-bind` directive associates the state container object with the props of child components. Inside the child component, template syntax such as double curly brace interpolation and the `v-for` directive renders the state properties onto the DOM element, and the `v-on` directive listens for user events, allowing direct modification of the state object passed to the props within the event handler. Because the state object is reactive, Vue's dependency tracking mechanism automatically detects changes and updates the relevant DOM parts, achieving fine-grained re-rendering.

[0074] Step S30: Obtain operation information for the first rendering area and / or the second rendering area, and send the operation information to the first state container and / or the second state container accordingly;

[0075] In this embodiment, the classroom interaction system continuously detects user operations on the display interface and messages from external devices, captures interactive events generated by students in the first or second rendering area, converts these events into standardized operation information, and sends the operation information to the corresponding state container for processing based on the area where the event occurred. Operation information refers to the interactive data generated by students within the rendering area through mouse clicks, touchscreen gestures, or keyboard input. It typically includes the operation type (e.g., clicking an answer, pressing a ready button), the target object of the operation (e.g., the identifier of the answer option), and metadata such as the timestamp of the operation.

[0076] As an optional implementation, the original event object generated by the display interface is determined. The corresponding event coordinates and event type are extracted from the original event object. Using an element-from-point detection interface, the target DOM element hit by the original event object is determined based on the event coordinates. The ancestor chain of the target DOM element is traversed upwards to identify the DOM container element carrying the region identifier attribute. Based on the region identifier attribute, the rendering region to which the original event object belongs is determined. The original event object is encapsulated into operation information corresponding to the rendering region. The state update interface provided by the state container associated with the rendering region is called, and the operation information is passed to the corresponding state container.

[0077] For example, the system determines the original event object generated by the display interface, extracts the corresponding event coordinates and event type from the original event object. The event coordinates are usually clientX and clientY values ​​relative to the viewport, and the event type includes click, touchstart, etc. Using the document.elementFromPoint application programming interface provided by the browser, the system obtains the deepest DOM element at the event location based on the event coordinates and uses this element as the target DOM element hit by the original event object. Starting from the target DOM element, the system traverses the entire ancestor chain upwards by repeatedly accessing its parentNode property. In each iteration, it checks whether the current node has a custom attribute such as data-region, which pre-marks the rendering region identifier, such as left or right. When a DOM container element carrying a region identifier attribute is found, the system determines the rendering region to which the original event object belongs based on the value of this attribute. The system then constructs a standardized operation information object based on the event type and specific characteristics of the event target, such as the data-answer attribute value carried on the target element. This object contains fields such as operation type, operation value, and timestamp. Finally, the system calls the state update interface exposed by the state container associated with the rendering area, such as the dispatch method in Redux or the direct assignment operation in Vue, to pass the encapsulated operation information to the corresponding state container and trigger the business logic processing inside the container.

[0078] As another optional implementation, a first branch node and a second branch node are inserted into the virtual DOM tree of the display interface. The first branch node corresponds to the first rendering area, and the second branch node corresponds to the second rendering area. The first state container is used as the context data source of the first branch node, and the second state container is used as the context data source of the second branch node. The answer status information in the first state container and the second state container is updated according to the operation information. The updated answer status information is sent to the first terminal device and the second terminal device respectively through a network socket.

[0079] For example, during the construction of the virtual DOM tree in the display interface, the system inserts two independent branch nodes through the componentization mechanism of the front-end framework. The first branch node corresponds to the first rendering area, and the second branch node corresponds to the second rendering area. Each branch node has its own independent component instance and scope. The system uses the first state container as the context data source for the first branch node. Specifically, this is done by passing the state container using `Context.Provider` in React, or by providing the state container to descendant components using the `provide` function in Vue. Similarly, the second state container is used as the context data source for the second branch node. When the system obtains operation information through event listeners or network reception, it calls the update method of the corresponding state container according to the student identifier or area identifier carried in the operation information, thereby updating the answer status information in the first and second state containers. After each status update, the system immediately extracts the latest answer status data from the two state containers, serializes it into JSON format, and sends the updated answer status information to the first terminal device (such as the student's mobile phone) and the second terminal device respectively through a pre-established WebSocket connection, ensuring that the display interface on all participating devices remains consistent. At the same time, the system also receives status confirmation messages from these terminal devices to achieve two-way synchronization.

[0080] Optionally, the system sets an event listener on the root element of the display interface to capture all user events using event delegation. When an event occurs, the system extracts information such as the event type, event coordinates, and target element from the event object. Using the event coordinates, it calls the browser's built-in `document.elementFromPoint` method to obtain the deepest DOM element at the event location. Then, it traverses upwards through the ancestor nodes of that element, searching for a container element with a custom attribute such as `data-region`. The value of this attribute indicates whether the event belongs to the first or second rendering region. Once the region is determined, the system constructs an operation information object based on the event type and the content of the target element. For example, for an event like clicking the answer button, the operation information might include `type` as `answer`, `value` as the option value, and `timestamp` as the current timestamp. Next, the system uses the previously established relationships to find the state container associated with that rendering region and calls the update method exposed by that state container, passing in the operation information.

[0081] Step S40: Update the answer status information of the first student and / or the second student in the display interface according to the operation information through the first state container and / or the second state container.

[0082] In this embodiment, the classroom interaction system responds to received operation information through business logic defined within the state container, updates the answer status information stored in the container, and drives the display interface to refresh in real time using previously established relationships. Simultaneously, the updated status is synchronized to other terminals, ultimately achieving dynamic feedback and result presentation during the two-person competition. Answer status information refers to the student's dynamic progress during the activity, including visual indicators such as current score, number of questions answered, remaining time, accuracy rate, and answer progress. These indicators are stored in the state container and reflected on the display interface through data association or manual drawing.

[0083] As an optional implementation, when the first state container and / or the second state container receive the operation information through the state update interface, the answer progress data maintained by the first state container and / or the second state container is updated according to the operation information. The answer status information of the first student or the second student in the first rendering area and / or the second rendering area is updated by updating the first DOM subtree associated with the first state container and / or the second DOM subtree associated with the second state container.

[0084] Specifically, when the state container receives an operation message, it first executes the corresponding state update logic based on the type of the operation message. If the operation message is a preparation operation, the state container sets the preparation state to true, and then checks whether the preparation states of both students are true. If so, a countdown is triggered. If the operation message is an answer selection, the state container compares the current student's answer with the correct answer to the question. If they match, the score is increased and recorded as correct; otherwise, no score is awarded, and the current question index is incremented. If all questions have been answered, the activity ends. After the state update, because the state container establishes a data association with the rendering area, the interface will automatically re-render and display the new score and progress. For components that need to be displayed across areas, such as the answer progress bar, the system will read the current score from both state containers, calculate the difference, and update the progress bar UI at the top of the screen. The system also needs to synchronize the updated state to other terminals via WebSocket to ensure consistent display across multiple devices.

[0085] Optionally, to adapt to network fluctuations and performance differences across multiple terminals in a classroom environment, such as teacher's large screen, student tablets, and mobile phones, the control method of the classroom interaction system also includes a differentiated synchronization strategy for state data. Specifically, after the first state container and / or the second state container update the answer status information according to the operation information, they do not directly send the full data to the server, but instead generate a lightweight incremental data packet containing state change feature values. This incremental data packet only records the state change portion relative to the previous synchronization cycle, for example, the score changes from 80 to 90, or the answer progress bar advances by 10%. After sending this incremental data packet to the server via a network socket, the server distributes it to the peer device according to the subscription relationship. For student terminal devices with lower performance or poor network conditions, the display interface, upon receiving the incremental data packet, automatically and smoothly renders the change process of the answer status using a preset interpolation algorithm or animation tweening function.

[0086] This application embodiment creates independent first and second state containers for two students in memory, and associates the corresponding first and second rendering areas on the display interface with these state containers. This ensures that the display content of each rendering area only responds to data changes in the associated state container. When touch operation information is obtained from the first or second rendering area, the operation information is sent to the associated state container. The state container then independently updates the corresponding student's answer status based on the operation information and triggers a refresh of the corresponding rendering area. This creates a completely isolated dual-instance runtime environment within the same browser page. The memory isolation mechanism of the state container fundamentally avoids data competition and state overwriting issues caused by cross-instance communication. Each student's operation only affects their own state container and rendering area. The progress data is accurately distributed to the corresponding state container based on the student's identifier, ensuring independent maintenance of the answer status and strict data consistency when two people are operating on the screen simultaneously. This achieves a real-time competitive experience without interference.

[0087] Based on the same inventive concept, this application also provides a second embodiment, referring to... Figure 2 , Figure 2 This is a flowchart illustrating the second embodiment of the control method for the classroom interaction system of this application.

[0088] In this embodiment, the control method of the classroom interaction system further includes steps S41-S43:

[0089] Step S41: Extract the first answer progress snapshot from the first state container, and extract the second answer progress snapshot from the second state container;

[0090] Step S42: Package the first and second answer progress snapshots into a synchronization data packet, and send the synchronization data packet to the server through a network socket;

[0091] Step S43: Receive the peer's answer progress snapshot sent by the server and output the peer's answer progress snapshot to the display interface. The peer's answer progress snapshot includes the peer's answer status information on other terminal devices of the second student.

[0092] In this embodiment, during a two-person activity, the classroom interaction system periodically extracts answer progress snapshots from two state containers and synchronizes the snapshot data to the server via a network socket. Simultaneously, it receives answer progress snapshots uploaded by other terminal devices from the server and updates the display accordingly. An answer progress snapshot is a complete or incremental data copy of the current answer status in the state container, containing information such as score, current question index, and number of answered questions, used to synchronize activity progress across different devices. A network socket refers to a full-duplex communication protocol such as WebSocket, enabling low-latency real-time data transmission.

[0093] Specifically, the classroom interaction system triggers a snapshot extraction operation after each update of the state container, or at fixed time intervals, such as every second. For the first state container, the system calls its provided serialization interface to encapsulate all answer status attributes stored in the container, such as score, preparation status, current question index, and answer records, into a JavaScript object, which serves as the first answer progress snapshot. Similarly, a second answer progress snapshot is extracted from the second state container. The system merges the two snapshot objects into a synchronization data packet, adds a timestamp and activity identifier, and then sends it to the server via a pre-established WebSocket connection. After receiving the data packet, the server forwards the snapshot to other relevant terminals based on the activity identifier and student identifier, for example, sending the first student's snapshot to the second student's tablet device.

[0094] Furthermore, the classroom interaction system simultaneously listens to messages sent by the server. When it receives a snapshot of the other end's answer progress, it parses out the answer status information and merges it with the corresponding data in the local status container. For example, it synchronizes the additional answer records generated by the second student on the tablet to the second status container on the large screen, and then triggers the interface update to display the synchronized status.

[0095] Optionally, to prevent state corruption caused by network interruptions or sudden high concurrency during two-player competition, the control method of the classroom interaction system also includes an abnormal behavior tracing and state rollback mechanism. While creating the first and second state containers, the system establishes a corresponding operation log chain in memory. This operation log chain records all operation information applied to the corresponding state container in chronological order, as well as a snapshot of the answer state after each operation. When a sudden data change is detected in the first or second rendering area, such as a sudden abnormal increase in score, or when a data inconsistency signal is received from other terminal devices, the system freezes the data write interface of the current state container and traces back to the most recent consistency checkpoint before the anomaly occurred based on the operation log chain. The system calls the answer progress snapshot corresponding to that checkpoint to perform an overwrite rollback of the current state container and outputs a state recovery prompt through the display interface.

[0096] This embodiment achieves real-time consistency between the teacher's and student's devices by periodically extracting and synchronizing the snapshots of the answering progress. This ensures that students can have a continuous answering experience regardless of the device they use to participate in the activity, avoiding data loss or status disorder caused by device switching, and improving the reliability and smoothness of multi-platform classroom interaction.

[0097] Since the system described in Embodiment 2 of this application is a system used to implement the method of Embodiment 1 of this application, those skilled in the art can understand the specific structure and variations of the system based on the method described in Embodiment 1 of this application, and therefore will not be described again here. All systems used in the method of Embodiment 1 of this application fall within the scope of protection of this application.

[0098] Based on the same inventive concept, this application also provides a third embodiment, referring to... Figure 3 , Figure 3 This is a flowchart illustrating the third embodiment of the control method for the classroom interaction system of this application.

[0099] In this embodiment, the control method of the classroom interaction system further includes steps S11 to S14:

[0100] Step S11: In response to the activity start command, draw a first canvas and a second canvas in the display interface, assign the first canvas to the first rendering area, and assign the second canvas to the second rendering area.

[0101] Step S12: Read the first question data from the first state container and draw the first falling icon sequence corresponding to the first question data on the first canvas;

[0102] Step S13: Read the second question data from the second state container and draw the second falling icon sequence corresponding to the second question data on the second canvas;

[0103] Step S14: Based on the first falling icon sequence and the second falling icon sequence, create looping animations for the first canvas and the second canvas respectively. The frame update function of the first canvas reads the animation parameters of the looping animation in the first state container, and the frame update function of the second canvas reads the animation parameters of the looping animation in the second state container.

[0104] In this embodiment, the classroom interaction system can use HTML5 canvas technology to create independent answer interfaces. A canvas is a web page element that dynamically draws graphics using JavaScript, enabling high-performance animation effects. The first and second canvases are respectively mounted to the first and second rendering areas. Each canvas has its own independent drawing context and animation loop, used to present its own student-specific sequence of falling icons. The sequence of falling icons refers to the visual queue of question options moving downwards from the top of the canvas in icon form. For example, students need to click the correct option before the icons fall to the bottom to complete the question.

[0105] Specifically, upon receiving the activity start command, the classroom interaction system creates two canvas elements on the display interface using `document.createElement`, sets their width and height respectively, and positions them within their corresponding rendering area containers using CSS. The system reads the question data from the first state container, which includes the question stem, option list, and correct answer identifier for each question. For the first canvas, the system generates a set of falling icons based on the question data, each icon corresponding to an option, and assigns it an initial position, falling speed, and current question index. These icon attributes are stored in the animation parameters of the first state container. The system calls the `getContext` method of the first canvas to obtain the 2D drawing context, clearing the canvas and redrawing the positions of all icons in each frame according to the animation parameters. A similar operation is performed for the second canvas.

[0106] For example, the system uses `window.requestAnimationFrame` to register an independent animation frame callback function for each canvas. The frame update function for the first canvas reads animation parameters from the first state container, updates the icon coordinates, and draws. The same applies to the second canvas. The two animation loops are independent of each other, and their frame rates do not affect each other, ensuring a smooth and uninterrupted gaming experience for both students. When a student clicks on an icon on the canvas, the system captures the click coordinates through an event listener, determines whether an icon has been clicked, and if so, sends the corresponding option as operation information to the state container. The state container verifies the answer and updates the score, while simultaneously updating animation parameters, such as removing the "answered" icon.

[0107] Optionally, to optimize the utilization of hardware resources in teacher terminal devices, especially the computational load when handling a large number of concurrent animations, the control method of the classroom interaction system further includes a dynamic resource allocation step. The system monitors in real time the frame rate parameters of the animation loops corresponding to the first and second canvases, as well as the data throughput of the corresponding state containers. When the animation frame rate of either the first or second canvas is detected to be lower than a preset threshold, the system dynamically adjusts the data update priority of the state containers corresponding to that canvas. Specifically, the system reduces the animation rendering precision of state containers with low trigger frequencies or in standby mode, or reduces the sampling rate of icon coordinate calculations, and reallocates the released computational resources to canvases currently in a highly interactive state. Simultaneously, the system uses branch nodes in the virtual DOM tree to incrementally update only the DOM subtrees of high-priority areas, while temporarily suspending the refresh of non-critical visual elements in the DOM subtrees of low-priority areas.

[0108] This embodiment achieves a highly interactive two-person interactive question-and-answer interface through an independent canvas and animation loop, giving each student a corresponding visual feedback channel. The independence of the canvas ensures the parallelism of the two people's operations, providing an immersive learning experience for classroom interaction.

[0109] Since the system described in Embodiment 3 of this application is a system used to implement the method of Embodiment 1 of this application, those skilled in the art can understand the specific structure and variations of the system based on the method described in Embodiment 1 of this application, and therefore will not be described again here. All systems used in the method of Embodiment 1 of this application fall within the scope of protection of this application.

[0110] Based on the same inventive concept, this application also provides a fourth embodiment, referring to... Figure 4 , Figure 4 This is a flowchart illustrating the fourth embodiment of the control method for the classroom interaction system of this application.

[0111] In this embodiment, the control method of the classroom interaction system further includes steps S50-S70:

[0112] Step S50: In response to the activity end instruction, generate settlement data based on the answer status information in the first state container and the second state container;

[0113] Step S60: Generate an activity report based on the settlement data and display the activity report on the display interface;

[0114] Step S70: Destroy the data association between the first state container, the second state container, and the display interface, and release the memory resources occupied by the first state container and the second state container.

[0115] In this embodiment, the classroom interaction system also performs cleanup tasks after the quiz ends, including summarizing the answer data to generate a settlement report, displaying the results to teachers and students, and thoroughly clearing the resources occupied by the state container to prepare for the next activity. The activity end command can be triggered by the countdown ending or manually clicked by the teacher. The settlement data is a quantitative statistic of the two students' performance throughout the activity, including their respective scores, accuracy, answering time, and ranking. The activity report is an interface component that presents the settlement data in a visual format, such as a pop-up window or sidebar. Data relationships refer to the data references between the state container and the rendering area; destroying these relationships prevents memory leaks.

[0116] Specifically, when the system receives the activity end instruction, it immediately stops receiving new operation information and freezes the update interface of the state container. The system reads attributes such as the final score, total number of questions answered, and number of correct questions from the first state container, and reads corresponding data from the second state container. This raw data is then processed to generate a settlement data object, such as calculating the accuracy rate and ranking difference. Based on the settlement data, the system dynamically generates the HTML content of the activity report, which may include a score bar chart, win / loss indicators, and a detailed answer record table. The report content is then rendered to a designated area of ​​the display interface, such as a floating modal. Simultaneously with the report display, the system performs cleanup operations. Using the destruction lifecycle hooks provided by the front-end framework, it unbinds the state container from the event listeners and data associations of the DOM elements. Examples include clearing the side effects of `useEffect` in React, calling the `beforeDestroy` hook in Vue, setting the state container variable to null, triggering garbage collection, clearing the canvas animation loop, and calling `cancelAnimationFrame` to stop all frame updates. After completing the above steps, the system will restore the display interface to its initial state before the event started, such as displaying the course main menu, and wait for the next event to start.

[0117] This embodiment ensures the complete retention and display of activity data through a standardized closing process, while promptly releasing memory resources to avoid performance degradation caused by prolonged operation. The intuitive presentation of the settlement report helps students understand their learning status, and teachers can also adjust their teaching strategies based on the report, thus forming a complete closed loop of classroom interaction.

[0118] Since the system described in Embodiment 4 of this application is a system used to implement the method of Embodiment 1 of this application, those skilled in the art can understand the specific structure and variations of the system based on the method described in Embodiment 1 of this application, and therefore will not be described again here. All systems used in the method of Embodiment 1 of this application fall within the scope of protection of this application.

[0119] This application provides a control device for a classroom interactive system. The device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, which are executed by the at least one processor to enable the at least one processor to perform the control method of the classroom interactive system in Embodiment 1 described above.

[0120] The following is for reference. Figure 5The diagram illustrates a structural schematic of a control device suitable for implementing the classroom interaction system of the embodiments of this application. The control device for the classroom interaction system in the embodiments of this application may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Description), PMPs (Portable Media Players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 5 The control device of the classroom interaction system shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0121] like Figure 5 As shown, the control device of the classroom interaction system may include a processing unit 1001 (e.g., a core processor, a graphics processor, etc.), which can perform various appropriate actions and processes according to programs stored in read-only memory (ROM) 1002 or programs loaded from storage device 1003 into random access memory (RAM) 1004. The random access memory 1004 also stores various programs and data required for the operation of the control device of the classroom interaction system. The processing unit 1001, ROM 1002, and RAM 1004 are interconnected via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to I / O interface 1006: input devices 1007 including, for example, touchscreens, touchpads, keyboards, mice, image sensors, microphones, accelerometers, gyroscopes, etc.; output devices 1008 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 1003 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1009. Communication device 1009 allows the control device of the classroom interactive system to communicate wirelessly or wiredly with other devices to exchange data. Although the figure shows control devices for a classroom interactive system with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented alternatively.

[0122] Specifically, according to the embodiments disclosed in this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device, or installed from storage device 1003, or installed from read-only memory 1002. When the computer program is executed by processing device 1001, it performs the functions defined in the methods of the embodiments disclosed in this application.

[0123] The control device for the classroom interaction system provided in this application, employing the control method of the classroom interaction system in the above embodiments, can solve the technical problem that it is difficult for classroom teaching systems to guarantee state isolation and data consistency when two people are operating on the screen simultaneously. Compared with the prior art, the beneficial effects of the control device for the classroom interaction system provided in this application are the same as the beneficial effects of the control method for the classroom interaction system provided in the above embodiments, and other technical features in the control device for the classroom interaction system are the same as those disclosed in the method of the previous embodiment, and will not be repeated here.

[0124] It should be understood that the various parts disclosed in this application can be implemented using hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics can be combined in any suitable manner in one or more embodiments or examples.

[0125] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

[0126] This application provides a computer-readable storage medium having computer-readable program instructions (i.e., a computer program) stored thereon, the computer-readable program instructions being used to execute the control method of the classroom interactive system in the above embodiments.

[0127] The computer-readable storage medium provided in this application may be, for example, a USB flash drive, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, radio frequency (RF), etc., or any suitable combination thereof.

[0128] The aforementioned computer-readable storage medium may be included in the control device of the classroom interaction system; or it may exist independently and not be installed in the control device of the classroom interaction system.

[0129] The aforementioned computer-readable storage medium carries one or more programs. When the aforementioned one or more programs are executed by the control device of the classroom interaction system, the control device of the classroom interaction system causes the control device to: respond to the activity start command, create a first state container corresponding to the first student and a second state container corresponding to the second student, associate the first state container and the second state container with the first rendering area and the second rendering area in the display interface, respectively, obtain the operation information of the first rendering area and / or the second rendering area, and send the operation information to the first state container and / or the second state container accordingly, and update the answer status information of the first student and / or the second student in the display interface according to the operation information through the first state container and / or the second state container.

[0130] Computer program code for performing the operations of this application can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0131] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0132] The modules described in the embodiments of this application can be implemented in software or hardware. The names of the modules do not necessarily limit the functionality of the unit itself.

[0133] The readable storage medium provided in this application is a computer-readable storage medium that stores computer-readable program instructions (i.e., computer programs) for executing the control method of the above-described classroom interaction system. This solves the technical problem that classroom teaching systems struggle to guarantee state isolation and data consistency when two people are simultaneously operating on the screen. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the control method of the classroom interaction system provided in the above embodiments, and will not be elaborated upon here.

[0134] The above description is only a part of the embodiments of this application and does not limit the patent scope of this application. All equivalent structural transformations made under the technical concept of this application and using the contents of the specification and drawings of this application, or direct / indirect applications in other related technical fields, are included in the patent protection scope of this application.

Claims

1. A control method for a classroom interaction system, characterized in that, The method includes the following steps: In response to the activity start command, create a first state container for the first student and a second state container for the second student; The first state container and the second state container are respectively associated with the first rendering area and the second rendering area in the display interface. Specifically, the first state container and the second state container are instantiated in the display interface, the first state container is marked as associated with the first student identifier, and the second state container is marked as associated with the second student identifier. The answer state in the first state container is initialized to the first initial value set, and the answer state in the second state container is initialized to the second initial value set. The data association relationship between the first state container and the first DOM subtree in the display interface, and the data association relationship between the second state container and the second DOM subtree in the display interface are established. Obtain operation information of the first rendering region and / or the second rendering region, and send the operation information to the first state container and / or the second state container accordingly. Specifically, determine the original event object generated by the display interface, extract the corresponding event coordinates and event type from the original event object, determine the target DOM element hit by the original event object based on the event coordinates using the element from point detection interface, traverse the ancestor chain of the target DOM element upwards to determine the DOM container element carrying the region identifier attribute, determine the rendering region to which the original event object belongs based on the region identifier attribute, encapsulate the original event object into operation information corresponding to the rendering region, call the state update interface provided by the state container associated with the rendering region, and pass the operation information into the corresponding state container. The answer status information of the first student and / or the second student in the display interface is updated according to the operation information through the first state container and / or the second state container.

2. The control method for the classroom interaction system as described in claim 1, characterized in that, The step of updating the answer status information of the first student and / or the second student in the display interface according to the operation information through the first state container and / or the second state container includes: When the first state container and / or the second state container receive the operation information through the state update interface, update the answer progress data maintained by the first state container and / or the second state container according to the operation information. The answer status information of the first student or the second student in the first rendering area and / or the second rendering area is updated by updating the first DOM subtree associated with the first state container and / or the second DOM subtree associated with the second state container.

3. The control method for the classroom interaction system as described in claim 1, characterized in that, After the step of updating the answer status information of the first student and / or the second student in the display interface according to the operation information through the first state container and / or the second state container, the method further includes: Extract a first answer progress snapshot from the first state container, and extract a second answer progress snapshot from the second state container; The first and second answer progress snapshots are packaged into a synchronization data packet, and the synchronization data packet is sent to the server via a network socket; The system receives a snapshot of the peer's answering progress sent by the server and outputs the snapshot to the display interface. The snapshot includes the peer's answering status information on other terminal devices.

4. The control method for the classroom interaction system as described in claim 1, characterized in that, The step of associating the first state container and the second state container with the first rendering area and the second rendering area in the display interface, respectively, further includes: Insert a first branch node and a second branch node into the virtual DOM tree of the display interface. The first branch node corresponds to the first rendering area, and the second branch node corresponds to the second rendering area. The first state container is used as the context data source for the first branch node, and the second state container is used as the context data source for the second branch node. Update the answer status information in the first state container and the second state container according to the operation information; The updated answer status information is sent to the first terminal device and the second terminal device respectively via network socket.

5. The control method for the classroom interaction system as described in claim 1, characterized in that, The control method for the classroom interaction system also includes: In response to the activity start command, a first canvas and a second canvas are drawn in the display interface, the first canvas is assigned to the first rendering area, and the second canvas is assigned to the second rendering area; Read the first question data from the first state container, and draw the first falling icon sequence corresponding to the first question data on the first canvas; Read the second question data from the second state container, and draw the second falling icon sequence corresponding to the second question data on the second canvas; Based on the first falling icon sequence and the second falling icon sequence, looping animations are created for the first canvas and the second canvas respectively. The frame update function of the first canvas reads the animation parameters of the looping animation in the first state container, and the frame update function of the second canvas reads the animation parameters of the looping animation in the second state container.

6. The control method for the classroom interaction system as described in claim 1, characterized in that, After the step of updating the answer status information of the first student and / or the second student in the display interface according to the operation information through the first state container and / or the second state container, the method further includes: In response to the activity end command, settlement data is generated based on the answer status information in the first state container and the second state container; An activity report is generated based on the settlement data, and the activity report is displayed on the display interface; Destroy the data association between the first state container and the second state container and the display interface, and release the memory resources occupied by the first state container and the second state container.

7. A control device for a classroom interaction system, characterized in that, The device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the control method for the classroom interactive system as described in any one of claims 1 to 6.

8. A storage medium, characterized in that, The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, it implements the steps of the control method of the classroom interactive system as described in any one of claims 1 to 6.

Images