Prompt Engineering and Web Artifact Generation in Mathematics Education: Investigating In-Service Teachers’ AI-TPACK Development

1. Introduction

1.1. Literature Review

One early model assessing teacher competency is Shulman’s [1] Pedagogical Content Knowledge (PCK), which consists of two core elements: Content Knowledge (CK) and Pedagogical Knowledge (PK). CK refers to knowledge of the syllabus-specified subject matter (i.e., what to teach), while PK covers the development of pedagogical principles grounded in cognitive and learning theories (i.e., how to teach). Shulman argues that these two elements, rather than acting in isolation, requires a synthesis, i.e., “an understanding of how to represent subject content with suitable teaching methods” [2] (p.5).

Although PCK remains foundational to the field of educational research, as technological advancements brought unprecedented changes to the nature of education, it failed to explicitly theorize technology as a distinct knowledge domain that has potentially transformative effects on how teachers teach. Thus, the explanatory scope of PCK, per se, became limited. Motivated by Shulman’s work as a primitive construct, Mishra and Koehler [3] proposed the Technological Pedagogical Content Knowledge (TPACK) framework. Their main contribution is the explicit addition of Technological Knowledge (TK), including the familiarity with and the ease at which a teacher adopts new technologies. The three primitive fields, CK, PK and TK, intersect to form PCK, TCK, TPK, and TPACK. TCK requires an understanding of how “technology and content are reciprocally related” [3] (p.1028). TPK refers to teachers’ knowledge of how pedagogy strategies can be enhanced by utilizing technology, to achieve teaching goals. TPACK exhibits an attainment of all three core domains: “using various technologies to teach and/represent and/facilitate knowledge creation of specific subject content” [4] (p.33).

In Mishra and Koehler’s conceptualization, TPACK is technology agnostic [5], where TK is considered the most dynamic domain: “since technology is continually changing, the nature of TK needs to shift with time as well” [3] (pp.1027-1028). In recent years, artificial intelligence (AI) has become increasingly embedded in many aspects of everyday life, leading to growing interest in its use across educational contexts. The emergence of Large Language Models (LLMs) has broadened the ways in which AI can be used to support teaching and learning. Beyond serving as information tools, these systems can assist educators in developing learning materials, exploring ideas, and supporting instructional design. Such developments are consistent with the Teacher-as-Designer (TaD) perspective [6], whereby teachers actively adapt technological tools to address particular pedagogical goals and classroom contexts [7]. Previous studies have reported positive effects of Generative Artificial Intelligence (GenAI) on teachers’ professional competence [8] and the development of Technological Pedagogical Content Knowledge (TPACK) [9]. However, the constructivist assumption in TPACK, that technology is an instrument that teachers have full control over, is violated [10], as GenAI is potentially disrupting in the ethical sense, with transparency, bias and hallucinations cited as concerns [11]. In mathematics and STEM education, the use of AI is complicated by the need to maintain accuracy in mathematical procedures, representations, and notation. Therefore, the successful development of AI-enhanced learning tools requires educators to understand both the opportunities offered by these technologies and the practical challenges associated with their use.

As the tripartite architecture of teacher knowledge under TPACK is insufficient under GenAI-based technological integration [10], a re-interpretation of the framework is necessary to better assess teacher competencies. Ning et al. [12] proposed an evolution of TK to AI-TK, bringing forth Artificial Intelligence-Technological Pedagogical Content Knowledge (AI-TPACK). Similarly, TPK becomes AI-TPK, TCK into AI-TCK, and TPACK into AI-TPACK. Particularly noteworthy is that the core competencies are interdependent; enhanced TK also fundamentally alters how educators view content and pedagogy [13]. Within the AI-TPACK framework, AI-TCK refers to teachers’ ability to use AI tools in ways that support the accurate representation of subject-specific knowledge and concepts. AI-TPK, in contrast, concerns teachers’ capacity to employ AI to support teaching and learning processes, including the provision of scaffolding, questioning techniques, and differentiated learning activities.

AI-TK extends beyond basic digital literacy to include the effective use of AI tools for educational purposes. This encompasses developing appropriate prompts, evaluating and refining AI-generated outputs, and creating digital teaching resources such as interactive applets and visualization tools. In practice, teachers apply a range of strategies to guide AI-generated responses, including assigning specific roles, clarifying requirements, and specifying desired output formats [14]. These strategies enable teachers to use AI tools more effectively in the design and implementation of learning activities.

1.2. Research Questions

Despite the rich body of AI-TPACK research in the literature, several gaps remain. Although pre-service teachers’ TPACK has been widely studied, in-service teachers’ competence is relatively neglected [10]. It has been argued that “in-service teachers’ TPACK acquisition in their workplaces remains an under-explored context” [15] (p.1772). This necessitates a different methodological approach, since in-service teachers build on existing PCK and TK through accumulating experience, while pre-service counterparts begin with minimal levels of competencies [16,17]. A systematic literature review revealed that only 13 out of 74 papers addressed the Asia-Pacific region, with none from Hong Kong [4], reflecting that studies made specifically in the backdrop of Hong Kong secondary mathematics is severely underexplored. Furthermore, despite ongoing developments in AI-TPACK theory, there remains limited empirical evidence on the practical processes through which in-service teachers create, troubleshoot, and integrate generative AI outputs within collaborative digital learning environments.

Hence, we direct inquiry towards the following research questions (RQs):

• RQ.1: How do in-service secondary mathematics teachers employ prompt engineering to co-design and generate educational artifacts, and how do these design workflows reflect their AI-TPACK configurations?
• RQ.2: How does a professional learning network facilitate teachers' collaborative troubleshooting of LLM technical constraints to cultivate AI-TK?

2. Methodology

This study adopts embedded single-case design [18], focusing on the human–AI interaction patterns, prompt engineering, and functional software outputs produced by practicing educators. In this design, the ICT-enabled professional learning circle—comprising fifteen in-service secondary school mathematics teachers in Hong Kong and the research team—serves as the primary, holistic case of inquiry. This professional network is conceptualized as an ICT-enabled learning infrastructure in which teachers co-inspect AI-generated episodes, share prompt designs, and negotiate subject-specific applications of AI in their daily duties; its arrangement consists of a WhatsApp group set up to facilitate the frequent exchange of ideas and peer-learning, and researcher-mediated monthly meetings through Zoom to further coordinate teachers’ efforts.

Within this overarching single-case environment, the investigation operationalizes a two-level embedded unit structure [18]. The primary unit of analysis is the collaborative professional learning network itself—focusing on the socio-technical interactions, knowledge-sharing dynamics, and peer-support mechanisms that evolved across the WhatsApp and Zoom platforms. Embedded within this primary case are three distinct subunits of analysis, comprising exemplary artifact-generation episodes authored by Teachers A, B, and C. Rather than conducting a comparative cross-case analysis, purposeful sampling of information-rich cases [19] was employed to select these three embedded subunits to represent distinct technological archetypes: (i) client-side algorithmic tutoring (Single-Page Applications), (ii) parametric 3D geometric visualization (WebGL/Three.js), and (iii) automated typographical scaffolding (LaTeX/PDF generation). Auditing these embedded subunits in depth allows the empirical study to evaluate how specific technical constraints and prompt architectures govern the enactment of AI-TPACK within the broader professional community.

Semi-structured one-on-one Zoom interviews with two teachers, who actively participated in the learning circle discussions and authored the core interactive applets, were conducted. Interviewees shared their AI integration practices, demonstrated effective uses, and provided their insights on using AI in assessment and activity design. Probing for concrete examples was carried throughout. Interviews lasted 33–36 minutes, were conducted in Cantonese, recorded, and transcribed in written Chinese and English. Transcription consistency was verified using iFLYTech, Oak, and SubEasy, with subsequent validation by research team members and subject to a second round of review. Pseudonyms (e.g., Teacher A, Teacher B) are used to protect confidentiality.

Written materials, including teachers’ messages and prompts, were translated into English for analysis. Relevant features of other artefacts, such as worksheets and applets, were documented through screenshots. Translation and verification procedures followed those described earlier. Teachers’ prompts, chat interactions, and generated code files were examined using qualitative document and artefact analysis [20]. Interview transcripts, WhatsApp conversations, and artefacts were then analyzed through deductive qualitative content analysis [21], using the AI-TPACK domains (AI-TK, AI-TCK, and AI-TPK) as the coding framework. Trustworthiness was strengthened through triangulation of multiple data sources, including code artefacts, chat records, and interview data. Two researchers independently coded the data and resolved differences through discussion until agreement was reached. Where available, representative prompts from teachers’ demonstrations are provided to support transparency and facilitate replication.

3. AI-TPACK in the Secondary School Learning Circle

Teachers in the learning circle actively engaged in generative AI exploration across three core instructional domains. To evaluate these practices, our findings are structured around the three embedded subunits of analysis, each capturing a distinct technological modality and prompt engineering paradigm:

• Embedded Subunit 1 (section 3.1): Client-side Socratic tutoring via an event-driven single-page application (Teacher A);
• Embedded Subunit 2 (section 3.2): Parametric 3D calculus visualization via WebGL and Three.js (Teacher B); and
• Embedded Subunit 3 (section 3.3): Automated examination-aligned worksheet tiering and mathematical typesetting (Teacher C).

Together, these embedded subunits illustrate the operational breadth of the learning circle. Across these applications, teachers engaged in an iterative design process that can be conceptualized as a sequence of interconnected stages:

Pedagogical Goal / DSE Curriculum Requirements →

Prompt Development →

AI Tool Interaction →

Digital Resource Generation (HTML, JavaScript, PDF) →

Revision and Improvement

In this workflow, teachers enacted the Teacher-as-Designer paradigm [6] by assuming direct ownership over the technical specifications of their instructional tools. They framed syllabus-aligned boundary constraints, steered Gemini's code generation, evaluated the executable scripts in local sandbox environments, and iteratively debugged behavioral discrepancies to ensure mathematical and pedagogical accuracy.

3.1. Design of Interactive Learning Activities

Interactive classroom teaching activities integrating both AI-generated applications and formal instruction were developed by participants in the learning circle.

Episode 1: Teacher A used Gemini to create the applet in Figure 1, which is designed to be a mathematics tutor that does not give solutions directly to students. Students can enter a mathematics problem in the prompt box, and the applet guides them through solving it step-by-step. Figure 1 is supplemented with Teacher A’s explanation of the pedagogical rationale behind its design, shown in Table 1.

From a technical perspective, the artifact is engineered as a self-contained, client-side single-page application (SPA) comprising HTML5 markup, responsive CSS, and native JavaScript. Gemini was prompted to generate an event-driven front-end script that manages conversational state locally within the browser, which serves as a sandbox. Running entirely in the web browser without an external server or database, the JavaScript code tracks student progress through Pólya’s four problem-solving steps, controls interactive features like the yellow “H” hint button, updates the digital whiteboard when steps are factored correctly, and checks student answers against expected intermediate steps.

In Panel (a) of Figure 1, the following question is fed to the AI-based tutor: “Factorize the following polynomial: $x^3-3x^2-4x+12$”; the tutor analyzed tricky parts of the question (e.g., taking the negative sign in the common term), provided reminders to students, and asked them to consider factorizing the first two terms. Upon entering the correct answer of the first step, $x^2\left(x-3\right)$, in Panel (b), the steps are updated on the whiteboard interface, and when the student asks for a stepwise hint (i.e., the yellow “H” button), the tutor gave two options for students to choose from; once the user selected the correct intermediate step “-4”, the full steps thus far are synchronized on the whiteboard interface again, and so on, until the problem is solved.

In the professional network, Teacher A exchanged ideas with other teachers in the learning circle. Teacher A then noted that the applet quality is better when the prompt is fed to Canvas HTML rather than using GEMS; this demonstrates AI-TK considerations as Teacher A understands the limitations and advantages of different AI platforms; the technical expertise informs his pedagogical decision-making. Specifically, Teacher A recognized that while conversational wrappers like Google Gems restrict interaction to standard chat streams, generating raw HTML5/JavaScript artifacts provides granular control over user interface architecture, deterministic execution flow, and input scaffolding necessary for interactive pedagogy. The design specifications documented in Table 1 provide empirical evidence of Teacher A's AI-TPK competencies. Teachers synthesized technical constraints (AI-TK) with core pedagogical principles (PK) which enforced Socratic questioning and an empathetic conversational tone to preserve student problem-solving autonomy. Furthermore, AI-TCK is exemplified in that the teacher can specify the purpose and describe the main directives (AI-TK) that the applet is to follow (e.g., guide students step-by-step), in relation to the subject matter (CK).

3.2. Visualization of Abstract Concepts

Teachers also represent subject content in innovative ways by using AI tools, such as visualizations in a dimensional space.

Episode 2: Students enrolled in Extended Module 2 (M2) of the Hong Kong Diploma of Secondary Education (HKDSE) are required to understand the disc method in solving for the volume of a solid of revolution formed by rotating a function against an axis. Teacher B used Gemini to create a web visualizer for illustrating the formula, as shown in Figure 2. It allows him to enter an arbitrary function $f\left(x\right)$, then select the number of discs ($n$) to illustrate how, as $n$ increases, the solid of revolution becomes “smoother”, and its volume can then be approximated as the sum of the volumes of discs with infinitesimal width. The purpose is to give a simple intuition of the formula

$$V=\pi {{\displaystyle \int }}_a^b{\left[f\left(x\right)\right]}^{2}dx$$

that students are required to learn.

Table 2 presents the prompt used by Teacher B to generate the Disc Method visualizer application. The prompt was developed through several rounds of interaction with Gemini and subsequently reconstructed by the researchers to improve clarity and reproducibility.

The application was developed using the Three.js JavaScript library and embedded within an HTML5 environment to provide an interactive three-dimensional visualization of the Disc Method. Based on the mathematical function entered by the user, the program divides the interval [a, b] into a specified number of subintervals and generates a series of discs representing the corresponding Riemann approximation. Interactive controls allow users to adjust parameters such as the angle of revolution, the number of discs, and the display settings. Changes are reflected immediately within the visualization, enabling users to explore the relationship between the mathematical function and the resulting solid of revolution in real time.

The episode illustrates the following competencies: (i) AI-TK, as Teacher B specifies technical details such as the revolution angle and opacity, along with the functionality of highlighting a particular disc to aid visualization; (ii) AI-TCK, as he uses the visualizer to emphasize the intuition behind abstract subject content, and (iii) AI-TPK, as the teacher is able to use AI tools to support his pedagogical strategy; rather than encouraging rote memorization of formulae, Teacher B hoped that students could understand the concept as well. Combined, they are exemplary of an integrated AI-TPACK. Teacher B uses AI tools (AI-TK) competently to aid him in his teaching of the subject content (CK), and his methods are in line with pedagogical ideals (PK).

3.3. Pedagogical Tiering

The secondary education system in Hong Kong is characterized by intense university entrance test preparation, motivating teachers’ shift of pedagogical focus towards efficiency, especially for senior-form (Secondary Four to Six) cohorts. Senior students are expected to hone problem-solving speed and accuracy in preparation for upcoming university entrance tests. AI-augmented teaching improves the effectiveness of pedagogical differentiation for students with varying mathematical maturity and ability.

Episode 3: Episode 3 directs attention to Teacher C’s applications of AI on pedagogical tiering, and is comprised of Figure 3, Table 3, and Table 4. For senior-form students enrolled in M2 in the HKDSE, in the topic involving applications of differentiation, he created teaching materials such as in-class process-tiered worksheets, to cater for students’ needs. Students who found themselves unfamiliar with problem-solving procedure when they first encountered this topic used the worksheet to guide their thinking through breaking down the question into steps and the provision of hints, while other students tackled the same question directly; parts of the worksheet are shown in Figure 3. Table 3 reproduces Teacher C’s underlying prompt used to create the tiering worksheet. Teachers in the learning circle held exchanges over the material created by Teacher C, and an excerpt of their discussion is documented in Table 4.

A tiered pedagogical strategy is indicative of AI-TPK. Teachers recognize the differential of ease at which students grasp subject content; accordingly, this justifies their pedagogical decision of tiered teaching to improve student performance. Teacher C created a tiered worksheet for weaker students so that they can follow mathematical steps more closely, hence, the learning gap between students in the same class can be narrowed and the potential incompatibility of teaching speed with student progress could be mitigated.

Additionally, in determining the document typesetting conventions and notations, Teacher C clearly stated what is to be expected in the output (e.g., no plain-text, vertical fractions); the regulation of the principles governing AI behavior is consistent with AI-TK competencies in the framework. Table 4 further reinforces AI-TK as teachers understand inherent limitations in AI output and make the best decision under technical constraints.

3.4. Potential Concerns

Teachers report a significant difficulty involved in generating output pertaining to geometry or graphs. Teacher A described the risk of degradation in output quality, especially after many rounds of prompt revision have been carried out. Teacher B held similar concerns, quoting from his experience of getting graphs that were either too easy or too complicated for the topic they were teaching, unless he pre-defined how the graph is to be drawn specifically.

The challenges reported by Teacher B demonstrate the limitations of current large language models when applied to geometry-related tasks that require precise spatial representations. Without built-in mechanisms for verifying graphical accuracy, generated outputs may contain errors in coordinates, proportions, or intersections. Furthermore, Teacher A’s observations suggest that maintaining consistency across extended prompt sequences can be challenging, as earlier instructions may exert less influence over subsequent responses.

There were comments on the inconsistency of output. Table 4 in Episode 3 illustrates this potential concern, as Teacher C opted against generating the worksheet in Microsoft Word as it might make equations and notations messy. There is a risk of hindering understanding as high school students (unlike university students) generally do not use typesetting software and might find the markdown incomprehensible. This inconsistency is also evident from Teacher B’s reflection of algebraic questions in AI-generated quizzes being formatted in markdown: “sometimes it [the applet] can execute it and show them [the math equations] in the handwritten form we usually see, but unfortunately this time [during the interview] it only shows as code.”

These formatting issues arise from differences in how AI-generated content and software applications process mathematical notation. Mathematical expressions may not always be generated in a format that can be interpreted consistently across platforms, leading to errors or display problems. In addition, many web browsers require specialized tools to render complex mathematical expressions correctly. Without such support, equations may appear as raw notation rather than properly formatted mathematics. Similar difficulties can occur when content is transferred to Microsoft Word, which uses its own equation-formatting conventions. These findings highlight the importance of using appropriate tools and carefully checking mathematical content when developing instructional materials with AI.

4. Analysis and Discussion

Based on the findings, we provide a short exposition analyzing the results.

RQ.1: In addressing RQ.1, the three embedded subunits demonstrate that in-service mathematics teachers operationalize GenAI across three complementary instructional domains: (i) constructing interactive single-page web applications to guide procedural reasoning (section 3.1), (ii) rendering dynamic 3D parametric simulations to visualize abstract calculus concepts (section 3.2), and (iii) automating the layout of exam-aligned tiered worksheets to scaffold problem solving (section 3.3). Across these tasks, the emergence of AI-TPACK was characterized by teachers moving beyond descriptive prompts to enforce rigorous behavioral directives, variable parameters, and output bounds in the generated code.

The episodes featured in the findings above demonstrate relatively strong AI-TPACK competencies from teachers in the learning circle. Particularly noteworthy is the observation that the AI-TK “primitive” is also evident through learning circle discussions on purely technical considerations (such as what tools to use and operational knowledge of AI), and the regulation of AI output through system prompts that define its boundaries and role. When subsequently taken into the classroom context, with AI-TK, teachers confidently apply AI to subject-specific and student-specific scenarios, and AI-TK merges with PK and CK. For example, creating AI-based applets with a clear teaching focus is in line with AI-TCK competencies, while adopting tiered differentiation is indicative of AI-TPK. Together, the materials developed and used by teachers exhibit AI-TPACK.

RQ.2 Consistent with the embedded single-case design, findings from the three subunits demonstrate how individual learning experiences contributed to the collective development of the learning community [18]. When teachers encountered challenges during resource development, the learning circle served as a collaborative space for sharing expertise, exchanging solutions, and refining practice. Examples included difficulties with AI platform features, three-dimensional visualization, and the formatting of mathematical notation. It has been found that further enhanced AI-TK could benefit teachers even more, especially pertaining to how AI-TK can be leveraged to address the classroom and institutional context that teachers face. Although students without mobile devices or access to classroom or learning technology risk exclusion from active participation [22], our examples shed light on the fact that disparity arises not primarily due to technological barriers, but from the observation of a differential in learning progress and outcome among students, even if they receive equitable access. They illustrate fundamental issues in teaching beyond technical concerns that require a teacher’s pedagogical judgement, such as scaffolding, tiering, or visualization, to narrow the learning gap. Given how teachers’ pedagogical preferences (and attitudes) are dependent on the level of AI-TPACK competency they possess, which itself hinges critically on AI-TK [13], professional development and training is hence crucial [23]. Without adequate AI-TK to serve as the technical foundation supporting teachers’ design of AI tools, AI-based tiering and scaffolding would not be possible, and the differential cannot be efficiently reduced. Peer-learning through discussion and reflection is also argued to be essential for teachers as they are empowered to find the most pedagogically appropriate teaching strategies based on the unique context that each faces [15].

Discrepancies in mathematical notation underline the foundational role of AI-TK in automated resource generation. Achieving precise mathematical typesetting within generative AI workflows requires robust prompt engineering to prevent formatting degradation between raw LaTeX string outputs and client-side rendering engines. Converting notation from TeX into editable Word equations used to be time-consuming, as teachers had to operate manually. AI tools, such as Underleaf and Mathpix, automate the conversion between different formats. This also illustrates one of the primary advantages of a learning circle arrangement, in that it facilitates peer learning and collaborative technical debugging, as shown again in Table 4 of Episode 3. One may not have the AI-TK to support one’s pedagogy in using AI in teaching, but in a learning circle, other teachers’ sharing and demonstrations bring continued exposure to new technology and improves one’s efficiency. The teacher can then apply the improved competency to practice in his/her teaching. Support mechanisms embedded in the learning circle help improve peer-to-peer learning [24,25].

These findings further reveal that the boundaries between competency domains (TK, CK, and PK) in the TPACK framework often remain fuzzy in practice. Mishra and Koehler [3] acknowledged this conceptual subtlety, describing the paradigm as existing in a state of “dynamic equilibrium”. In practice, teachers demonstrate an integrated application of multiple dimensions rather than experiencing the domains in isolation. For instance, from Episode 1, Teacher A’s system prompt (Table 1) and the resulting AI–student interaction (Figure 1) calls for identifying tricky mathematical concepts in the question that test students’ understanding of algebraic manipulation and offers specific problem-solving suggestions as the next intermediate step. This is a display of the simultaneous achievement of more than one domain, as the identification of content-specific conceptual pitfalls requires teachers’ AI-TCK; while scaffolding through step-by-step hinting represents the teacher’s AI-TPK. The diagnosis cannot be separated from the guidance as they are two sides of the same instructional coin, inherently functioning as complementary facets. Ultimately, these findings suggest that AI-TPACK is developed not solely through the acquisition of technical skills, but through the effective integration of teachers’ pedagogical and subject knowledge with AI-supported tools. In this process, teachers play a central role in determining the instructional goals, evaluating outputs, and ensuring that generated resources align with curriculum and learning objectives.

5. Conclusions

This study explored how in-service secondary mathematics teachers use AI to support teaching and learning. Drawing on an embedded single-case analysis of the professional learning network and its digital artifacts, the findings suggest that participants demonstrated a satisfactory level of AI-TPACK. Teachers primarily used AI to design interactive learning activities that promoted student engagement, develop alternative representations of abstract mathematical concepts to support understanding, and create differentiated instructional resources to address diverse learning needs.

Several limitations remain to be acknowledged. Because this study was designed as an embedded single-case investigation focusing on the fine-grained technical audit of specific prompt structures and client-side code artifacts within a single professional network, the qualitative sample was deliberately targeted. The sample size is rather limited, and hence the individual-level results obtained might not be representative of the true scenario should a larger sample be employed. A study conducted on a larger scale with a more general sample might uncover other patterns. The theoretical justification for using a larger sample is that TPACK is not merely a framework determined by individual competencies, but also dependent on demographic factors. A number of these factors have been identified in the literature, such as cultures, institutions, and school-based factors [22,25,26,27,28]. Future research could be directed at uncovering the specific AI-TPACK patterns in other educational contexts. Moreover, the preliminary results we report from the study are only indicative of the AI-TPACK competencies in broad strokes, and have yet to be validated against a well-established scale of AI-TPACK competencies, such as those developed in [12,13]. Deductive content analysis or rubric-based assessment could be carried out to enhance methodological rigor and provide more concrete findings on how teachers perform against the specific items laid forth in the scales.