HTML-Supported EAP Learning: Designing Interactive Web Activities for Engagement and Academic Skill Development in the GenAI Era
Abstract
The rapid uptake of generative AI (GenAI) and large language models has accelerated material production in English for Academic Purposes (EAP), while also intensifying concerns about material reliability and learner overreliance (Kasneci et al., 2023; Yan et al., 2024). This practice paper documents the design rationale and classroom use of HTML-based learning activities developed in a Year-1 EAP context at Xi’an Jiaotong-Liverpool University (XJTLU). Three activity designs are used as examples: (1) four-level graded listening practice HTML materials that progressively scaffold a pathway from lexical- and phrase-level processing to structured note-taking and post-listening comprehension checks; (2) a Monopoly-style HTML board game that supports collaborative talk and topic-based question retrieval for Speaking Coursework (SCW) preparation; (3) A series of HTML vocabulary practice tests providing students with immediate feedback upon submission. Across these designs, GenAI is used primarily to accelerate drafting and coding, while teachers retain responsibility for appropriacy, level control, and alignment with learning outcomes (Crompton & Burke, 2024; Law, 2024). Drawing on the classroom implementation of these activities, the paper offers practical tips and brief classroom cases illustrating how HTML-based activities can enhance engagement and support language skill development.
Keywords
Generative AI; EAP; HTML activities; gamification; language development
1. Introduction
GenAI has shifted the practical boundaries of what teachers can produce, adapt, and distribute at speed. Recent reviews suggest that ChatGPT-mediated interventions may be particularly effective in language-related contexts, where tasks like language translation, question answering and text generation rely heavily on text processing and production, and are associated on average with gains in academic performance (Deng et al., 2025; Cotton et al., 2024). At the same time, there are risks that are particularly salient for language education: unreliable outputs, formulaic language and limited stylistic variation, raising further questions about technology readiness, replicability, and privacy in classroom adoption (Raffini et al., 2025; Yan et al., 2024). In EAP contexts, these concerns are particularly acute; learning and assessment depend on students demonstrating process-based competencies such as active listening, selective note-taking, summarizing, rhetorical speaking, and paraphrasing. If GenAI substitutes for the practice of these core skills rather than supporting their acquisition, they remain underdeveloped. This creates a performance gap during high-stakes, AI-free assessments where such ‘AI-assisted rehearsal’ offers no support, ultimately heightening academic integrity risks (Cotton et al., 2024).
This paper complements broader discussions of GenAI in EAP by focusing on an operational layer of practice: how lightweight HTML activities can structure process-focused rehearsal (e.g., listening-to-note-taking and speaking organisation), reduce classroom management load, and create more consistent opportunities for engagement across classes and self-study. The aim is not to present HTML as a “solution” in itself, but to show how simple web-based interaction patterns (immediate feedback, progressive constraints, randomised retrieval) can support skill practice when aligned with learning outcomes and teacher mediation. This aligns with a design-oriented approach to GenAI adoption, where the benefits depend on how tasks are purposefully adapted and embedded within the curriculum rather than the mere novelty of the tool (Law, 2024; Yan et al., 2024).
2. Design Rationale
Four principles guided the activity design.
2.1 Web-based language learning
All activities were developed as lightweight, browser-based HTML materials to enable low-friction access for classroom and self-study use (e.g., no installation and easy distribution via the VLE). Web-based language learning is often described as convenient and time-saving, providing rich exercises and resources that attract learners’ attention and support English learning through diverse practice opportunities; web-based environments also facilitate resource sharing and collaborative learning beyond class (Muftah, 2022). In the GenAI era, these advantages can be further amplified because teachers can use LLMs to rapidly draft and adapt web-delivered practice (e.g., level-adjusted variants, prompts, and feedback), enabling faster iteration and redistribution as well as more tailored practice for different learner needs, provided that teacher review safeguards accuracy and pedagogic fit (Kasneci et al., 2023; Crompton & Burke, 2024; Law, 2024).
2.2 Process-focused practice through progressive scaffolding
To foreground “process” rather than product, the graded listening materials were designed as a progression of constraints that gradually release responsibility: learners move from lexical- and phrase-level processing to structured note-taking, and then to post-listening comprehension checks. The sequencing is intended to reduce extraneous load at earlier stages while stabilising attention to key ideas and organisation, consistent with instructional perspectives on managing cognitive load during complex learning (Sweller et al., 2011). Across the levels, learners receive immediate answer-key feedback after each task, which is consistent with evidence that immediate feedback can be beneficial in second language learning contexts, particularly in form-focused tasks (Lu et al., 2021).
2.3 Gamification to prompt repeated retrieval and collaborative talk
The Monopoly-style board game uses game mechanics (turn-taking, chance/variation, time pressure, and peer-facing accountability) to increase opportunities for low-stakes repetition, topic-based question retrieval, and spontaneous elaboration during speaking preparation. This design draws on research suggesting that gamified and game-based approaches can support motivation, engagement, and oral-language practice when interaction is structured and goal-directed (Zakaria et al., 2024).
2.4 Retrieval Practice and the Testing Effect
A series of HTML vocabulary practice tests are a direct application of retrieval practice. Unlike passive review, the act of answering 50 diverse questions forces students to actively "pull" information from their memory. Roediger and Karpicke (2006) demonstrated that frequent low-stakes testing, often called the "testing effect," leads to better long-term retention than repeated studying. This activity's use of immediate scoring further strengthens this effect by allowing students to correct misconceptions the moment they occur.
3. Demonstration
3.1. Graded Listening HTML Materials for Final Exam Preparation
3.1.1 Design
The graded listening materials are organised into four levels, designed to support final-exam-oriented listening processes, moving from constrained (e.g., selective note-taking) form-focused tasks to freer note-taking and post-listening comprehension checks. Each level is delivered as a standalone HTML page (audio + task + feedback element), allowing flexible use in class or as self-study. GenAI was used mainly to accelerate technical production (e.g., transcript formatting, initial cloze generation, and HTML templating). However, the pedagogic value of the sequence depends on teacher mediation, especially selecting genuinely “note-worthy” items, calibrating difficulty across levels, and editing unnatural or overly dense language to maintain accessible input and ensure reliability and pedagogic fit (Kasneci et al., 2023; Law, 2024; Raffini et al., 2025; Yan et al., 2024).
3.1.2 Classroom case
In XJTLU Year 1 EAP, learners are streamed into four levels (foundation, pre-intermediate, intermediate, and advanced), and listening profiles vary substantially both across and within cohorts. In practice, foundation and pre-intermediate students often benefit from entering the sequence at Levels 1–2, where word- and segment-level completion provides targeted support for lexical recognition and chunking before note-taking demands increase. By contrast, some advanced learners require greater challenge. For example, in the four advanced classes taught by me (AY25–26 S1), two students (2/101) could retain and reproduce key content from a 6–7-minute listening text with minimal note-taking, maintaining over 80% accuracy on comprehension items without previewing questions. For these learners, Levels 1–2 offered limited added value, whereas Level 3–4 were more productive because it required sustained attention, self-directed note-making, and post-listening question access. In the same cohort, in informal end-of-cycle feedback, over half of the students who had used this HTML activity reported using Level 3 and/or Level 4 as their main practice route, as these levels more closely resembled test-like demands for organising ideas and relying on notes. At the same time, around one fifth of students repeatedly returned to Levels 1–2, noting that these tasks helped them check spelling and improve the accurate capture of key information before moving on to freer note-taking. This case suggests that differentiation does not necessarily require separate materials for different groups; it can be achieved through a shared activity sequence that allows learners to enter at different points. This is consistent with motivation research suggesting that appropriately challenging tasks—often supported by interaction in learning settings—can help sustain engagement over time (Dörnyei, 2005).
3.2. Monopoly Game for Speaking Coursework Preparation
3.2.1 Design
The Monopoly-style board game was designed to support the EAP Speaking Coursework (SCW) preparation by increasing opportunities for topic-based question retrieval, spontaneous elaboration, and peer-facing accountability with light time constraints. The activity is provided in two formats: a printable PDF board for rapid in-class group play and a playable HTML version for in-class or self-study use, allowing teachers to choose between faster setup and reduced classroom-management load. In line with the approach described earlier, GenAI was used mainly to speed up technical production. Here, it supported the HTML game build (e.g., generating the template and drafting on-screen instructions). The game’s pedagogic value still depends on teacher mediation, including calibrating question difficulty and relevance to unit themes, editing overly formulaic or unnatural prompts, and ensuring that questions elicit the target speaking moves required in SCW (Kasneci et al., 2023; Raffini et al., 2025; Yan et al., 2024).
In-class PDF version
The PDF board follows a snake-route layout with clearly marked start and finish points. Topic spaces cycle through key SCW themes and are interleaved with function spaces (e.g., move forward/back, skip a turn) to sustain pacing and variation. Each topic space is paired with a bank of prompts designed to elicit description, suggestion, explanation, and argumentation, encouraging elaboration through reasons and examples. For in-class use, turns can be time-bounded (teacher-set) to maintain pace, and a printable question pack is provided.
Playable HTML version after class
The HTML version includes a dice roller, turn-taking support, and basic game tracking, making it easier for student groups to run the activity independently outside class. When a player lands on a topic, the system retrieves a random prompt from the tagged bank automatically, increasing variety across groups and reducing the need for teacher-led distribution of questions. Turns are time-bounded (teacher-set), and peers are required to ask a follow-up or request clarification, keeping talk goal-directed and discouraging overly scripted delivery.
3.2.2 Classroom case
Before the HTML version was introduced, the Monopoly activity was implemented using the printable board during supervised class time. While in-class engagement was strong, attempts to extend the activity into out-of-class speaking practice revealed a transfer constraint: students reported missing basic materials (e.g., dice/tokens) and some tended to skip the gameplay by selecting prompts manually, which reduced the intended structure (turn-taking, pacing, and topic cycling).
The HTML version was therefore developed to minimise practical obstacles and preserve the activity logic for autonomous reuse (integrated dice rolling, turn management, and automated topic-tagged prompt delivery). After the file was shared for optional self-study, several students reported using the tool informally as a practice routine for SCW preparation with their peers, such as roommates, classmates, or friends from student clubs. These comments suggest that embedding core mechanics within the interface may not only increase reuse beyond class time but also foster peer interaction central to sustained engagement in EAP contexts.
3.3 Online Interactive Vocabulary Mock Exams
3.3.1 Design
The Unit 1 vocabulary practice materials are structured into five distinct parts, designed to bridge the gap between word-level recognition and high-stakes contextual application. This progression supports in class task (vocabulary quiz) preparation by moving from form-focused definitions to cognitively demanding inference and cloze tasks. Delivered as a single, comprehensive HTML interface, the tool integrates interactive feedback mechanisms that allow for both guided classroom instruction and autonomous self-study. Additionally, a 30-minute time limit is explicitly stated at the beginning of the test to encourage students to develop effective time management strategies under exam-like conditions.
3.3.2 Classroom Use
In the context of XJTLU’s Year 1 EAP curriculum, the implementation of HTML-based vocabulary mock exams has facilitated a highly flexible approach to both guided and autonomous learning. In practice, teachers often utilize the tool as a supplementary lead-in task to gauge prior review progress, while others employ it as an "exit ticket" to reinforce newly acquired lexis. In informal feedback sessions, a majority of students reported that these interactive quizzes were highly effective in helping them retain vocabulary, noting that the ability to test themselves repeatedly solidified their memory of complex academic terms. For these learners, the immediate feedback provided by the automated scoring system acted as a powerful motivator; they felt that knowing their results instantly helped them correct errors in real-time rather than waiting for teacher correction.
4. Limitationsand Tips for Teaching
4.1 Limitations
Although these HTML-based activities can work well on laptops, the user experience on mobile devices may be less smooth due to screen size and interaction limits (e.g., scrolling, typing, drag-and-drop). As a result, T may need to remind their students to bring laptops if they want to use the HTML-based activities in class. To accommodate students who may find bringing extra devices inconvenient, teachers may choose to position the activities as optional supplementary materials, or schedule the tasks to be completed in a dedicated computer lab or at home.
4.2 Tips
4.2.1 Practical tips for EAP teaching
Cross-skill applicability and needs-led design
Lightweight HTML activities can be designed to support any EAP skill focus (e.g., reading, writing, listening, speaking, vocabulary, grammar), with task format and constraints selected according to learners’ needs and the intended performance conditions.
Constructive alignment through observable targets
Teachers can define a small set of observable behaviours for each activity (e.g., identifying key ideas, selecting note-worthy information, producing a justified response), and ensure prompts and feedback directly cue these targets.
Progressive constraint design.
Where appropriate, teachers can sequence tasks from more constrained support to greater learner control (e.g., guided input → freer production; immediate checks → later verification) to stabilise attention and reduce unproductive load.
4.2.2 Practical tips across modules / departments
Reusable interaction-pattern library
Different modules can maintain a shared set of lightweight HTML templates (e.g., immediate feedback checks, guided input fields, delayed verification, randomised retrieval) so teams substitute localised content rather than rebuilding mechanics. Archive prompt sets and key design decisions in a shared repository to support maintenance and iterative updates.
Standardised quality assurance checkpoint
Activity designers can implement a brief peer-review step before publishing, focusing on accuracy, level/appropriacy, naturalness, learning-outcome alignment, and privacy/ethical considerations.
Portability beyond class
Activity designers can embed low-friction supports (e.g., answer keys, automated prompt delivery, basic tracking) to enable consistent self-study use without increasing teacher management.
5. Conclusion
This practice paper has documented the design rationale and classroom use of lightweight HTML-based activities for Year-1 EAP teaching in the GenAI era, using a four-level graded listening sequence, a Monopoly-style speaking game, online interactive vocabulary mock exams as illustrative cases. These examples demonstrate how low-threshold web interactions, characterised by immediate feedback, progressive constraints, and randomised prompt delivery, can support process-visible rehearsal, reduce avoidable set-up barriers, and extend opportunities for peer practice beyond class time. Across designs, GenAI was positioned as a rapid drafting and coding aid within a teacher-led, human-centred workflow, where decisions about level calibration, naturalness, and learning-outcome alignment remained essential. Rather than claiming causal learning gains, the paper contributes reusable design patterns and practical tips that may help EAP teams develop scalable, maintainable activities while safeguarding pedagogic fit and responsible use. Given the rapid evolution of GenAI tools, ongoing review and adaptation are also necessary to ensure that materials remain level-appropriate and that students understand responsible use boundaries.
References:
Cotton, D. R. E., Cotton, P. A., & Shipway, J. R. (2024). Chatting and cheating: Ensuring academic integrity in the era of ChatGPT. Innovations in Education and Teaching International, 61(2), 228–239. https://doi.org/10.1080/14703297.2023.2190148
Crompton, H., & Burke, D. (2024). The educational affordances and challenges of ChatGPT: State of the field. TechTrends. https://doi.org/10.1007/s11528-024-00939-0
Deng, R., Jiang, M., Yu, X., Lu, Y., & Liu, S. (2025). Does ChatGPT enhance student learning? A systematic review and meta-analysis of experimental studies. Computers & Education, 227, 105224. https://doi.org/10.1016/j.compedu.2024.105224
Dörnyei, Z. (2005). The psychology of the language learner: Individual differences in second language acquisition. Lawrence Erlbaum.
Kasneci, E., Sessler, K., Küchemann, S., Bannert, M., Dementieva, D., Fischer, F., et al. (2023). ChatGPT for good? On opportunities and challenges of large language models for education. Learning and Individual Differences, 103, 102274. https://doi.org/10.1016/j.lindif.2023.102274
Law, L. (2024). Application of generative artificial intelligence (GenAI) in language teaching and learning: A scoping literature review. Computers and Education Open, 6, 100174. https://doi.org/10.1016/j.caeo.2024.100174
Lu, X., Sales, A., & Heffernan, N. T. (2021). Immediate versus delayed feedback on learning: Do people's instincts really conflict with reality? Journal of higher education theory and practice, 21(16), 188-198. https://doi.org/10.33423/jhetp.v21i16.4925
Muftah, M. (2022). The effects of web-based language learning on university students' translation proficiency. International Journal of Innovative Research in Education, 9(2), 106-117. https://doi.org/10.18844/ijire.v9i2.8496
Raffini, D., Macori, A., Porcaro, L., Catarci, T., & Angelini, M. (2025). How persuasive could LLMs be? A first study combining linguistic-rhetorical analysis and user experiments. arXiv. https://arxiv.org/abs/2508.09614
Roediger, H. L., Karpicke, J. D. “Test-Enhanced Learning: Taking Memory Tests Improves Long-Term Retention.” Psychological Science, vol. 17, no. 3, Mar. 2006, pp. 249–255, pubmed.ncbi.nlm.nih.gov/16507066/. https://doi.org/10.1111/j.1467-9280.2006.01693.x.
Sweller, J., Ayres, P., & Kalyuga, S. (2011). Cognitive load theory. Springer. https://doi.org/10.1007/978-1-4419-8126-4
Yan, L., Sha, L., Zhao, L., Martinez-Maldonado, R., Jin, Y., & Gašević, D. (2024). Practical and ethical challenges of large language models in education: A systematic scoping review. British Journal of Educational Technology, 55(1), 90–112. https://doi.org/10.1111/bjet.13370
Zakaria, A., Addanan, F. A., Khalili, N. N. M., Zakaria, Y. K., & Mohamad, M. (2024). A Systematic Literature Review of the Impact of Game-Based Learning on English Learners. International Journal of Academic Research in Business and Social Sciences, 14(8). http://dx.doi.org/10.6007/IJARBSS/v14-i8/22462
