Exploration of the Online Practical Teaching Model Based on Project-Driven and Twi-Flipped—Taking the Course “Web Front-End Technology Foundation” as Example ()
1. Background of the Study Heading
The rapid development of computer network technology and the wide application of new information technology such as artificial intelligence and big data technology make education globalized, intelligent and accurate, provide necessary conditions for the reform of education and teaching, and make ubiquitous learning inevitable. At the same time, the global outbreak of the new crown epidemic has impacted the normal production, life, and teaching order. Students are the hope of the society’s future, and their education has become a key concern of the world. In order to ensure the normal education of students during the epidemic, a common practice in countries around the world is to take advantage of the fast transmission speed, wide coverage, and good security of computer networks. Online teaching is carried out on the online platform, with both remote live teaching and asynchronous teaching based on online recorded MOOC and SPOC course resources, so as to realize non-stop teaching and non-stop suspension of classes. As of the end of October 2021, the number of online MOOCs in China exceeded 47,500, registered users were 364 million, the number of elective courses reached 755 million, and the number of students receiving MOOC credits was 291 million.
2. Research Questions
In addition to the teacher’s academic level, teaching attitude, teaching methods and skills, the factors that affect the teaching effect of teachers, the expressions, movements, attitudes, postures and other postures of teachers are also important auxiliary means for teachers to carry out classroom teaching. The cross-space and cross-time online teaching of teachers and students weakens the physical performance of teachers and reduces the emotional communication between teachers and students. Students cannot obtain timely learning supervision, which affects the effect of online teaching. Scholar Wang Zhan conducted a research on the emotional factors of female college teachers in online teaching under the background of the epidemic, and believed that teachers need to be emotionally involved in teaching activities. She conducted data analysis on 280 questionnaires of female college teachers, and 74% of female college teachers “Often” or “Always” communicate or interact with students emotionally to improve the effect of online teaching.
On the other hand, students’ study includes not only instructional courses such as education, humanities, and management, but also practical courses such as science and engineering and medicine. Different courses have different influences on online teaching. Relatively speaking, online teaching has a greater influence on the teaching of courses that require practical operations. Searching for the topics “practical courses” and “online teaching” in journals through How Net, a total of 1047 articles have been published as of October 31, 2021, of which 61 articles have been published in core and CSSCI journals. Through the analysis of the titles of 61 articles, it mainly focuses on the construction of online practical courses, models, informatization teaching, platforms, etc. to conduct macro-research. Computer-related programming, art design and other practical teaching are more, and there are very few practical courses such as medicine, engineering, and agronomy.
There has always been a problem of emphasizing theory and neglecting practice in the teaching of practical courses of engineering-related majors in colleges and universities (Lin, 2020). Especially for students majoring in computer science, from the examination results of the course, they have a good grasp of basic knowledge, but their comprehensive practical application ability is relatively poor. From the perspective of course design and graduation design, it is manifested as a lack of systematic design thinking for the project. Project development is more difficult, and there is the problem of “knowing but not using, using but not creating”.
3. Research Methods
Literature method: Reading, analyzing, and sorting out the China Knowledge Network database, Education Research Complete, Education Resource Information Center in the EBSCO database and other related literature materials on flipped classrooms, practical teaching, online teaching, MOOC, etc., to provide evidence and research methods for research topics, Clarify the research direction of the subject.
Action research method: Construct a three-stage and two-flip online practice teaching model, conduct online teaching, verify the model, and test the teaching effect.
Investigation and analysis method: Design questionnaires, investigate students’ attitudes and effects of online learning, and conduct data processing and analysis.
4. Purposes of Research
After the text edit has been completed, the paper is ready for the template. Duplicate the template file by using the Save As command, and use the naming convention prescribed by your journal for the name of your paper. In this newly created file, highlight all of the contents and import your prepared text file. You are now ready to style your paper.
“Fundamentals of Web Front-end Technology” is a core course for undergraduate software engineering majors. Its goal is to cultivate innovative talents of Web front-end development who are intelligent, skilled and dedicated to their jobs. This course is of strong theoretical and practical nature, and the knowledge and skills are updated quickly. From the original development of websites only for PC terminals to the development of various screen sizes including mobile terminals, that is, the “all-terminal adaptation” website, which gives users the best reading experience (Dark Horse Programmer, 2017). For students who are new to computer science, it is relatively difficult to learn. As a basic course, it has an important influence on the study of subsequent courses and professional identity.
In order to adapt to the development of new computer technology and the demand for innovation capabilities of developers, to meet the characteristics of online practical teaching, and to solve the problem of students “knowing but not using, using but not creating” during online practical learning. The course team takes moral education as the foundation, curriculum ideology and politics as the main line, project-driven as the orientation. The curriculum team takes the new engineering talents of understanding virtue and mastering engineering as the training target, effectively integrates project-driven and flipped classrooms, builds an online practical teaching model, promotes the effective integration of students’ “learning, thinking, research, practice, and creativity”, and strives to practice Teaching achieves the golden lesson goals of “high-level”, “innovative” and “challenging” (Ministry of Education, 2018).
5. Process of Research
5.1. Build a Project-Driven Two-Flip Model
The key to improving the effect of online teaching of practical courses is to motivate students to “clear goals, set tasks, solve problems, and produce results.” In order to enable students’ online learning to reach the leap from internalization of knowledge to practical application, the teaching team has constructed an “online practical teaching model based on project-driven two flips”, as shown in Figure 1.
1) Ideological and political leadership, project-driven
The course integrates the four ideological and political modules of “Keeping in mind the spirit of the iron army”, “Promoting traditional culture”, “Building a beautiful hometown”, and “Being a qualified front-end development engineer”, from mainstream thinking, thinking quality, industry requirements, professionalism, etc. Regarding the ideological and political content of the system design
![]()
Figure 1. Online practice teaching mode based on project-driven two flips.
course, 15 webpage production practice projects are designed, as shown in Table 1. Reconstruct the knowledge and ability system of HTML, CSS and JavaScript in the form of projects, through [Project Description and Analysis] → [Project Knowledge Points Decomposition] → [Knowledge Points Analysis] → [Knowledge Points Detection] → [Project Skill Points Analysis] → [Project Discussion] → [Project Implementation] → [Project Summary] → [Ability Development] and other links to set up corresponding activities, which are closely linked. Because the development of each project requires the comprehensive use of multiple knowledge points or skill points, it not only effectively avoids the fragmentation of online learning knowledge, but also realizes the high-level leap of knowledge from memory understanding to practical application, and promotes students’ understanding virtue and mastering engineering develops simultaneously.
2) Two flips, integration of learning, thinking, research, practice and creation
The core concept of the flipped classroom is to learn first and then teach (Rong & Peng, 2015). At the same time, in order to meet the actual needs of students’ online practical learning, the first flip of this model is the online independent learning of basic knowledge points before class. During class, teachers
![]()
Table 1. Course modules and projects.
organize discussion on problems, complete the internalization of knowledge required by the project, and solve the problem that students “know but don’t use”. The second flip is that the teacher in the class guides students to learn practical skills online independently, through remote discussions of teachers, students, students, groups, etc., to establish a project problem support, form a problem-solving knowledge and skills connection map, and complete the planning and design of the practical project. The innovative application of core technology solves the practical problem of “use but not create”. Practical development is carried out after class, so that students can complete practical tasks with high quality and innovation.
5.2. The Organization and Implementation of the Project-Driven Two-Reversal Model
In online teaching, teaching is organized according to the project-driven two-flip model. The following takes the project design of the homepage of the “People’s Iron Army” website as an example to describe the implementation process.
This project organizes the page structure based on DIV and SPAN elements, and uses float and position to locate and layout. It is the most classic way of web page layout. At the same time, through the collection and sorting of the resources of the People’s Iron Army, students are guided to realize the spirit of the Iron Army that is brave and good at fighting, fearless of sacrifice, and indomitable (Sun, 2015). Keep in mind the historical mission and encourage students to become “aspirational, capable, and responsible” young people in the new era (People’s Daily Online, 2017).
1) The first flip to complete the internalization of knowledge
a) Teacher preparation
Improve the project case. Before class, teachers are reconstructing the knowledge points and skill system of the “People’s Iron Army” project, as shown in Table 2 and Table 3, and at the same time perfecting the case design of the practical project, the effect diagram is shown in Figure 2.
Prepare teaching resources. Record basic knowledge points and practical skills micro-classes, and prepare electronic textbooks, case homework, expansion resources, etc., and then publish them. In this case, the knowledge of “standard document flow” is relatively simple, and it is more convenient for students to master it by reading related corresponding electronic textbooks; while the knowledge of “float method” is relatively difficult, and students may not be able to rely on micro-video explanations alone. They have a thorough understanding and need to provide case work and expand resources for them to explore independently. In the practice skill point of “multi-box layout”, different setting of factor box floating and positioning attribute values will form a variety of layout effects, so it is necessary to publish matching case assignments in time for intensive exercises.
Design online teaching activities. Teachers and students are divided into different spaces, and students’ adaptability, self-learning ability and self-discipline have become important factors affecting the teaching effect (Sohu Education, 2020). Whether you can learn online and whether you can really learn online has always been the pain point of online teaching. Aiming at the phenomenon of students watching videos and thinking about problems in depth, designing a variety of online activities is the most effective method of monitoring and teaching guidance, including Platform discussion, knowledge test, group discussion, homework self-evaluation or mutual evaluation, etc. Judging from the postings of MOOC students participating in the discussion in Chinese universities, many students are mostly coping with people, and lack of thinking (Zhang & Chen, 2018), so try to avoid finding the original answers in micro-videos or electronic textbooks, or discussing the only answers. Give students room for question thinking and speech organization, and also reduce the chance of repetition of answers to discussion questions. For example, the discussion of “Four boxes arranged in parallel to the left, how to move the last box to the right side of the page?” There are multiple solutions. Among them, the resolution process and method of using absolute positioning and relative positioning must be inconsistent.
Publish learning tasks. Because online learning lacks the real-time supervision of teachers, in order to enable students to learn effectively, the project learning task list with clear tasks, clear learning goals, prominent key and difficult points, and clear knowledge points has become an indispensable resource for students to learn online, including learning objectives, learning content, academic resources, learning methods, learning tasks and learning puzzles (Chen, 2018).
b) Students learn independently according to the order
According to the practical project learning task list, students analyze the project tasks, collect the relevant materials of the People’s Iron Army and do classification and preliminary optimization; independently learn knowledge points and complete homework; think about the problems encountered in the study, and pave the way for flipped teaching.
c) Online seminars promote internalization
In class, teachers conduct pre-class learning effect testing through Mu Classroom. Students find problems and check learning videos or online resources to check for deficiencies.
For the students’ self-study, homework, test questions, as well as key and difficult questions, teachers will conduct live discussions and exchanges between teachers and students, students and students through the live broadcast of Tencent conferences. Questions are closely tied to project practice, and try to avoid the uniqueness of answers and the mechanicalness of memory. For example, “Describe the display effect when the display property of the box is set to different values”. Guide students to explore the ideas and methods for solving this classic problem, broaden the breadth and depth of knowledge, and realize the internalization of knowledge.
2) The second flip to complete the project structure
a) In class, students study independently to form project knowledge and skill mapping
The teacher constructs a cognitive map of the framework of the practical project, and provides students with basic skills and mini-classes, such as “How to transform the title text of a webpage into an image”, that is, replace the title text of “People’s Iron Army” with the inscription of Commander Zhu, the map is shown in Figure 3. Students learn micro-videos online and practice code writing, forming practical project knowledge and skills mapping, and making technical preparations for project development.
b) Online teacher-student interactive discussion to form project planning and scheme design
Internalized knowledge can only be transformed into competence when it is applied in the process of practice (Sun & Bai, 2020). In the class, teachers guide students to design project problems independently, and then use Tencent meetings or QQ groups to conduct online brainstorming to form a project problem support, and finally form the overall design plan of the project. In the practice of this project, we need to add a border to the parent box. You will find that the border becomes a straight line and placed on top of all elements, which naturally leads to the classic “parent box collapse” problem, and guides students to use online collaboration and discussion in the group, and use brainstorming to form Solution to the problem.
c) Remote assistance for communication and display, immediate feedback on the process and results of the practice
As the project practice progresses, the progress and completion quality of each student varies. The teacher guides the students to check the implementation of the project in real time through the QQ sharing screen, and supervise, guide, and record. Encourage students in the group to use QQ remote assistance or Tencent meeting screen sharing to solve the problems encountered in the practice development; and to show the practical results, exchange the confusion and problem solving experience encountered in the implementation process, and the teachers comment on the advantages and disadvantages of each group design, answer common problems in the project implementation, and assign innovative practical tasks.
3) After-school project improvement and personalized innovation
After class, students improve practical projects and encourage students to make individualized innovations. Teachers list the web sites of excellent front-end works for students to imitate and inspire students to innovate thinking. Teachers timely check students’ practical results, including the richness and fullness of ideological and political elements. And so on, as well as the accuracy and innovation of the technology, and feedback the evaluation details to the students through QQ. Common questions can be answered in the group by voice or screen recording. According to the characteristics of each student or each group of webpage design, targeted expansion tasks are proposed, and finally a unique project design is formed. Part of the team project works are shown in Figure 4.
5.3. Evaluation of Online Practical Learning
Selection, fill-in-the-blank, judgment and other forms in knowledge point test and unit test measure students’ mastery of low-level knowledge, which can only bring up students’ coping learning (Zheng & Lu, 2017). The project-driven two-reversal model must embody a procedural, dynamic, and continuous evaluation system, that is, the overall principle of evaluation is to be oriented to project results, centering on the goal of establishing moral integrity in cultivation of people, and specifically from “learning”, “thinking”, and “thinking”. It is constructed in five aspects: research, practice, and innovation, and three perspectives: self-evaluation, mutual evaluation, and teacher evaluation. The evaluation process emphasizes the evaluation of students’ project knowledge points, skill points, learning experience and project actual operation process, emphasizes the evaluation of project technical performance and ideological and political performance, emphasizes project practice and innovation, and promotes students’ real and effective learning.
In addition, the results that can be evaluated include explicit and implicit results (Gao, 2018). In addition to the results of the course knowledge point assessment, unit test, final theory exam, etc., the obvious results also include the collection, sorting, classification, and optimization of the materials in the learning process, and then display them on the page in an accurate form, and finally form the project work. These procedural results reflect to a certain extent the students’ ideological purpose, professional attitude, professional ability, and aesthetic qualities. The hidden results also include the division of labor, information literacy, way of thinking, coordination and communication in the learning process, which are also necessary factors in the project practice process.
In the evaluation of the online practical learning effect of 15 projects, the SPOC platform, Tencent conference and QQ group are given full play to record the behavior data of students’ self-evaluation, mutual evaluation and teacher evaluation in real time, so as to construct comprehensive, accurate and multidimensional learning portraits for students and accurately evaluate the practical learning effect. Promote the development of students’ individuality and innovation and promote the synchronized development of students’ understanding virtue and mastering engineering.
6. Teaching Effect
Since the implementation of the “Web Front-end Technology Foundation” course based on the project-driven two-flip online practice teaching model for one semester, 59 students in two classes of the 18th grade of software engineering have achieved good learning results.
6.1. High Quality of Project Tasks
Judging from the evaluation results of the learning effects of 15 projects, students completed each web design project task with high quality, reflecting their solid theoretical foundation in the front-end web and rich practical experience. Some students have also practiced on the basis of applying what they have learned. Innovation can effectively integrate “learning, thinking, research, practice, and innovation”.
6.2. Good Effect of Final Examination
The final exam for online learning is consistent with previous offline semester exams, including designing a website and designing a webpage by imitating screenshots. In contrast, this examination pays more attention to the comprehensive application capabilities of front-end development, and it is more difficult to imitate screenshots. However, compared with previous semesters, the results of the examination show that students have improved their ability to control page layout, expressiveness of page elements, and ideological and political expression.
Based on the usual project tasks, unit tests, in-class exams, and final exams, 16 of 59 students (27.11%) scored excellent, 40 (67.80%) scored good, and the learning effect was good.
6.3. High Student Survey Evaluation
In order to understand students’ views on the effectiveness of the project-driven two-flip online practice teaching reform, a questionnaire survey was conducted among all students in the two classes before the final exam. The results of the questionnaire survey show that although students think that the course has long learning time and heavy tasks, they have a 96.61% recognition of teaching methods and evaluation programs. They believe that the online practice teaching model and evaluation method are scientific, comprehensive and effective, which has changed the learning from the source. has greatly improved project practice and innovation ability; in the evaluation of online learning performance, 25.43% of the students think that they can be excellent, and 66.1% of the students think that they can be good, which is similar to the final actual results, indicating that students not only have a better understanding of the project-driven two-flip online practice teaching model, but also have a clearer understanding of self-learning.
7. Summary
The online practice teaching reform based on the project-driven two flips, which is oriented by practical results and project-driven, reconstructs the cognitive map of the curriculum and the support of practical problems. The two flips make knowledge from fragments to systems, from understanding to application, and practical projects. From imitation to innovation, this model is also applied in other courses, such as “Advanced Language Programming (C)”, “Digital Audio and Video Technology”, etc. From the perspective of students’ learning process, project results, and final assessment, satisfactory teaching results have been achieved, and difficult and challenging teaching goals have been achieved. The online practice teaching model based on project-driven two flips is a concrete manifestation of the deep integration of information technology and new engineering education under Internet + education, and realizes the effective integration of “learning, thinking, research, practice and creation”. It is a feasible method to cultivate high-level and innovative engineering talents with bright morality, precision and dedication.
Funds
The special project of “university quality education and digital course construction” in Jiangsu colleges and universities “Research on the construction and application of computer online practice gold course” (2020jdkt073); The 2020 project of the 13th Five-Year Plan of Education Science of Jiangsu Province “Application research of Blended Teaching Mode based on SPOC Curriculum in The Cultivation of New Talents in Colleges and Universities” (C-c/2020/01/06).