Exploration and Practice of Hybrid Teaching Mode of Web Front-end Development Technology Based on OBE

: To address the problems of traditional lecture-based teaching in the “Web Front-end Development Technology” course, in which students lack practical problem-solving ability and enterprises lack satisfaction with the front-end development talents cultivated by universities, this paper proposes a hybrid teaching mode for the Web Front-end Development Technology course based on OBE, with the educational outcomes of students as the main objective. The OBE teaching concept is used to reform the teaching mode; the teaching design is based on the framework of activity theory; the SPOC hybrid teaching mode is used to learn the theoretical basics and complete the corresponding experiments and exercises online; the task-driven method and project-based teaching are used to enhance students’ practical skills and innovative thinking offline. The method is then applied to our school’s teaching and learning programs. Subsequently, the model was applied to the teaching of "Web Front-end Development Fundamentals" course in our 2021 and 2022 computer science classes, and the experimental data were analyzed using multiple linear regression methods. The experimental results show that the OBE-based hybrid teaching model studied in this paper has achieved significant results.


Introduction
With the rapid development of Internet technology, the market demand for Web front-end development technology talents is rising sharply. However, enterprises are not highly satisfied with the Web front-end development talents cultivated by universities, and graduates need a long period of training to be competent for their jobs. Therefore, how to use appropriate teaching modes and teaching strategies in the teaching process to improve students' ability to solve practical problems has become the focus of teaching reform nowadays. A comprehensive analysis of the current teaching situation of the Web Front-end Development Technology (WFDT) course in colleges and universities reveals that the reasons for the low satisfaction of enterprises are as follows: Firstly, colleges still follow the structure of the book layout to carry out "duck-fill" teaching; secondly, due to the limitation of class time, the coverage of teaching content is small; thirdly, there is less connection with practical applications, and students are not equipped with the practical problem-solving ability and innovation ability. Because of this, this paper addresses the problems of the current WFDT course and builds a hybrid online and offline teaching mode based on SPOC. The mode follows the three basic concepts of professional engineering education accreditation: "student-centered, result-oriented, and continuous improvement". The teaching mode not only plays the leading role of teachers * dxh@nwnu.edu.cn in guiding, inspiring, and monitoring the teaching process but also stimulates the initiative, enthusiasm, and creativity of students and improves their ability to solve practical problems [1] .  [2] . SPOC applies high-quality MOOC resources to small groups in schools, classrooms, and similar settings ， effectively extending and complementing moocs in terms of increasing course completion rates, improving practicality, and updating teaching concepts. Usually, when teachers adopt SPOC for teaching, they first select a high-quality MOOC for online teaching and then conduct face-to-face discussions, question-and-answer sessions, and tests in offline classes to enhance the teaching effectiveness through the organic combination of online and offline. In this paper, the SPOC hybrid teaching mode is divided into three stages, namely: online independent learning, offline in-class teaching, and offline out-of-class learning. Each teaching stage designs activities for both students and teachers separately and carries out distinctive and differentiated teaching under the guidance of activity theory, which can play the subjective role of students, mobilize students' initiative and enthusiasm, and fully enhance the teaching effect.

OBE concept
Outcome-based education (OBE) was introduced by Sapdy et al [3] . The OBE concept is no longer about positive knowledge transfer, but about organizing and developing teaching and learning around the final 'outcomes' of students. It reverses the design of the teaching process with the goal of clear, comprehensive ability mastery, and ultimately contributes to the achievement of learning outcomes. It emphasizes the knowledge, competencies, and qualities that students acquire as a result of their studies [4] . This paper uses OBE as a core teaching guideline, aiming to address the lack of practical application skills among students. By increasing the output of students' learning outcomes, students can enhance their sense of achievement and ability to solve practical problems.

Activity Theory
Activity theory is the study of human activity in a particular socio-cultural and historical context. Activity is its basic unit of analysis. An activity system consists of six elements: subject, tools, objects, division of labor, community, and rules [5] . Activity theory focuses on the activities in which people engage-how they use tools in the activities, the relationships between collaborators in the activities, the purpose and intention of the activities, and the objects and outcomes of the activities. It emphasizes the central role of subjects, objects, communities, and tools in the process of knowledge and skill formation. The theory is instructive for SPOC teaching activities, and it can be used to examine teachers' and students' participation in activities, use of tools, achievement of objectives, and provide a basis for analyzing teachers' and students' activity behavior. This paper uses activity theory as a practical framework for constructing teaching activities and realizing the organic integration of online and offline teaching.

Constructivism
The theoretical foundations of constructivism were laid by Piaget and Vygotsky et al, and in particular, Piaget's theory of cognitive development further enriched the constructivist learning theory [6] . Piaget pointed out that learners construct their own knowledge structures and cognize the world of experience in which they are located by interacting with their own surroundings. The theory places special emphasis on student-centered; it requires students to change from passive recipients of knowledge to active constructors of information processing and teachers to change from transmitters and instillers of knowledge to assisters and facilitators of students' active construction [7] . This paper takes constructivist theory as one of the guiding theories of thought in constructing teaching activities, and takes full account of the individual characteristics of each student. Teachers conduct teaching work guided by students' inherent experience and knowledge structure, conduct a comprehensive analysis of knowledge structure and comprehension. Teachers teach content according to students' individual aptitudes and focus on enhancing students' enthusiasm and initiative in participating in education.

SPOC based on OBE Hybrid Teaching Model Construction
The teaching model developed in this paper is based on the concepts of 'student-centeredness, results-orientation, and continuous improvement'. First, it is student-centered. Constructivism believes that students are constructors of knowledge, and it encourages students to link current learning content with prior knowledge and experience and to construct knowledge through exploratory and discovery methods. Therefore, in the teaching process, the main role of students should be highlighted, with students' independent learning, hands-on practice, and practical application as the main focus. In the teaching process, teachers play a guiding and supporting role to realize the transformation of the teaching mode from "teaching with an emphasis on learning" to "teaching with emphasis". At the same time, the design of teaching activities should consider the individual differences of students, meet the expectations of different students' abilities, and consider teaching tasks of different levels of difficulty to effectively achieve a "student-centered" approach. Secondly, it is oriented toward learning outcomes. OBE is organized, implemented, and evaluated in terms of expected learning outcomes.
Learning outcomes should be clearly articulated, and directly or indirectly measure students' abilities. The needs and expectations of the various educational stakeholders should be fully considered when defining learning outcomes [8] .Thirdly, Continuous improvement is one of the core concepts of OBE. The teaching mode is analyzed through the evaluation of student learning outcomes and learning feedback. Appropriate adjustments and improvements are made at the appropriate stage to continuously refine and improve the teaching mode.
Based on the above concept, combined with the teaching objectives of the WFDT course, the teaching mode is constructed with the activity theory framework as shown in Figure 1. Among them, the main body of the activity is the students; the collaborators are the teachers and learning partners; the National Quality University (MU) is the main tool for learning; and the learning outcomes are the objects of the activity. In the teaching activities, the whole process of teaching evaluation is used as the activity rule to guide and promote students' independent and cooperative learning to improve the teaching effect. The teaching venues of the teaching model include online and offline, inside and outside the classroom, and it adapts to students' diverse learning styles. Teaching activities cover online independent learning, laboratory exercises, discussions, offline time-limited quizzes, experiments, discussions, mutual evaluation of assignments, project practice, and innovation competitions, thus forming a stable and effective teaching

Online teaching activities
The online teaching and learning activities focus on theoretical knowledge. The main activities include learning tasks, learning communities, and the design of learning task divisions. First, the design of learning tasks. Teachers analyze the learning situation and course standards comprehensively according to the teaching objectives and set reasonable teaching objectives, marking rules, teaching courseware, teaching videos and extension resources. This course uses the China University MOOC platform as a learning platform.
Second, the design of the learning community and the division of learning tasks. After the teaching videos are released by the teacher on the MOOC platform, students log on to the MOOC platform to browse the teaching objectives and grading rules, study the content of the teaching videos independently according to the teaching arrangements, complete the post-lesson experimental exercises, and use the extension resources to conduct extended investigations. Students and students, students and teachers form a learning community together. For difficult problems in the learning process, teachers and students discuss them through the MOOC platform, and students cooperate and communicate with each other to help each other and make progress together. The teacher plays a coordinating and organizing role in the creation of the learning community and the division of tasks; they assign learning tasks reasonably and collaborate to complete the whole learning activity.

Offline teaching activities
Offline teaching activities are designed in two parts, inside and outside the classroom, with the MU classroom as the main interaction tool for teachers and students. Firstly, the offline classroom tests students based on what they have learned online, using a task-driven approach to help students solve problems face-to-face and improve their hands-on practical skills. Firstly, the teacher releases a time-limited quiz on the relevant learning content in the MU classroom. Students complete the quiz and submit it to the MU classroom platform. Teachers explain the key points and difficulties in detail according to the data submitted by the platform. Afterwards, timelimited experiments are released, and those who have difficulties or questions are given guidance and assistance. After students have completed their training tasks, a question-and-answer discussion is held, and students are organized to self-assess and inter-assess, giving full play to the subjectivity of students. In addition, lectures can also be extended to cover knowledge points that need to be extended in class. This stage promotes learning through practice, motivates students to learn, consolidates their knowledge, and improves their practical programming skills.
Secondly, the offline classroom is oriented towards using the knowledge acquired to solve real-world problems; teachers use a project-based approach to collaborative learning in small groups or teams. When students form learning teams to work on projects, the teacher establishes rules in the teaching design to ensure that each team member is involved in the learning activities, and that each member is given the appropriate task. Through the promotion of learning, learning output is improved, as is students' ability to work in teams, combine theory with practice, and solve problems in a practical way.

Teaching and learning assessment activities
The teaching mode in this paper provides multi-level assessment of students' learning processes, including process and stage assessment. With the help of the MOOC platform of Chinese universities, we collect learning data, eliminate the simple evaluation of learners' surprise exams, and promote students' mastery of teaching content and comprehensive application of the knowledge they have learned.
Firstly, process evaluation activities include video learning, unit quizzes, and assignments for the China University MOOC. Indicators for evaluation include data on the length and number of video learning sessions, discussion board participation rates, online unit quizzes, and homework scores. At the same time, the evaluation is combined with student self-assessment and student-https://doi.org/10.1051/shsconf/202317401010 , 01010 (2023) SHS Web of Conferences 174 SEAA 2023 student mutual assessment. This enables an objective and fair evaluation of the student's learning process.
Secondly, stage-based assessment includes timelimited quizzes, time-limited tasks, and comprehensive project assessments. Time-limited quizzes are exams issued by the teaching organizers in offline classrooms, that learners are required to complete within a specified period of time. Teachers test the effectiveness of learners' learning; lab tasks test learners' independent hands-on skills; comprehensive project assessments include project practice; mainstream technology stacks; and innovation competitions that test students' ability to apply their knowledge in an integrated manner.

Data sources
The research data in this paper were obtained from the learning data and total final grades of the WTDT course of our computer science students in Classes 2021 and 2022 on the China University Catechism Platform and MU Classroom Platform. Using the PyCharm platform to conduct a multiple linear regression analysis of students' final grades, six activities of the WFDT course taken by students in two years of the program under this SPOC teaching model were selected from the data for analysis: They are video, quiz, discussion, assignment, exam and extraterritorial achievement (project practice, innovation competition).

Regression mode construction
This study uses the Python language to construct a linear regression model for in-depth analysis. Regression analysis is a statistical analysis method to determine the quantitative interdependent relationship between two or more variables, and it is often used to measure and gauge the importance of indicator variables. The logical premise is whether there is an explanatory and explained relationship between the variables. The key influences of the explained variables are determined quantitatively based on the magnitude or sign of the regression coefficients and their associated indicators [9] . By constructing a multiple linear regression model to form a functional relationship between students' final grades in the Web Front End Development Technology course studied in this SPOC teaching model and the factors influencing each of its activities to test whether each variable is statistically significant, the constructed model is shown in Equation (1): ∑ (1) where y is the explanatory variable; (i=1,2,...,6) are the explanatory variables; is the constant term; (i=1,2,...,6) is the regression coefficient term; and ε is the random error term.
The data for this model was selected from the original data for quantitative data, with a total of 6 attribute columns. The attributes video, quiz, discussion, homework, exam, and extra-domain grades (project practice, innovation competition), were chosen as independent variables in the model, and the G1 attribute was the dependent variable of the model. Bringing all data into the multiple linear regression model leads to the following model results: 3.56 0.087 0.063 0.048 0.067 0.065 0.073 (2) The attributes corresponding to each variable in the model, are shown in Table 1.

Evaluation of regression coefficients and model results
linear regression was performed on the valid grades through Python. The regression analysis was conducted with the six activities of students in both grades in this SPOC teaching model as the independent variables. The regression equation was introduced with the students' course final grades as the dependent variable. The evaluation analysis was conducted through a linear regression model, and the model evaluation results are shown in Table 2, and the regression model regression coefficient results are shown in Table 2. As can be seen from the data in Table 2, this multiple linear regression equation of R^2=0.830 indicating that 83% of the G1 attribute data can be well explained by the above equation, in which the student's final grade increases (decreases) by 0.087 units for each unit increase (decrease) in the experimental exercise and discussion when other variables are held constant, and so on for other influencing factors, when the values of all influencing factors are zero, the student's grade is 3.56, corresponding to a failing grade . It shows that the regression model fits the observed values well and the regression model is significant.
As can be seen from the data in Table 3, the tolerance (Tol) and variance inflation factor (VIF) of the respective variables are within a reasonable range, i.e., Tol > 0.1 and VIF < 10, indicating that the model has no multicollinearity problems and the model is well constructed. the significance values of all six variables are below 0.05, indicating that these six activities have a significant effect on students' final grades in the WFDT course, and all of them are positively correlated with the final grades. and all of them are positively correlated with the final grade.

Summary
This paper addresses the problems that students' practical ability is not strong in the traditional lecture-based teaching in the WFDT course, and enterprises are not highly satisfied with the front-end development talents cultivated by universities. The course is designed around the principles of "student-centered, output-oriented and continuous improvement", with the main objective of improving learners' learning output, forming a teacher-led and student-centered SPOC hybrid teaching mode. The teaching activities are designed from the framework of activity theory. Learners learn the theoretical basics independently online, teachers use the task-driven method and project-based teaching methods for practical training offline. The mode adopts a teaching evaluation system that combines process and stage evaluation to comprehensively analyze the learning outcomes and satisfaction obtained by learners to continuously improve the teaching mode. The teaching mode is continuously improved. The mode can play the leading role of teachers fully and promote students' initiative, motivation, and creativity fully. However, there are still shortcomings that need to be improved in this study, such as: Students have poor preclass preparation, weak autonomy, too little guidance in offline courses, and insufficient practice, which is our motivation and direction for future improvement.