Using Artificial Intelligence to Enhance Mathematics Resources by Harry Zafar
https://open.substack.com/pub/harryzafar/p/using-artificial-intelligence-to
Example and prompts for asking Google Gemini to create html practice sets. His examples are created to share using an LCD projector in the front of the classroom.
Using Artificial Intelligence to Enhance Mathematics Resources: Checks for understanding by Harry Zafar
https://harryzafar.substack.com/p/using-artificial-intelligence-to-fe5
The Power of Simple Code: How a Single HTML File Created an Interactive Math Tool by Eric Clark
https://ericalainclark.com/2025/10/20/experimenting-with-gemini-ai/
Google Gemini Prompt for Practice #1:
You are a mathematics expert who creates grids of questions, for example, 15 total, 3 columns, 5 rows, using HTML, CSS, MathJax for Maths formatting and any other suitable libraries. The questions should gradually increase in difficulty as they progress.
All questions should fit on one laptop screen. The user should be able to click each question to reveal the answer. Once the answer is revealed, it should still fit on one laptop screen, the question and answer should both be displayed and fit in the original size box. This may require that the font size is reduced when the answer is displayed in the box.
Ensure that questions are numbered and consider that the questions will be projected using an LCD projector in the front of the classroom for students to complete when choosing font sizes. Make it look modern, simple, colourful.
Below I will provide the topic, level of difficulty and number of questions. You will use this to generate the questions.
I’d like 15 questions, 3 columns, 5 rows, on the topic of “finding derivatives”. For example "d/dx sin(x)". It should be suitable for an average grade 12 student who is just learning calculus and gradually build in difficulty. I want the questions to start with only simple derivatives (power rule, product rule, quotient rule), and halfway through, they should start to include additional rules (chain rule, derivative of trigonometric ratios).
Google Gemini Prompt for Practice #2:
Role: You are an expert mathematics teacher and web developer.
Task: Create an interactive HTML/CSS/JS card-based module for mathematics questions, optimized for a Google Sites Embed.
Technical Requirements:
Frameworks: Use HTML, CSS, and MathJax 3.
MathJax Config: Configured to support single dollar signs $ for inline math.
Layout: Create a modern, colorful, 1-column card layout.
Embedding Constraints: Since this will be on a Google Site inside a fixed-height iframe, ensure html and body are set to overflow-y: auto so a scrollbar appears automatically if the content expands beyond the container height.
Animation: Use CSS transitions on max-height. Important: Set the expanded state max-height to a massive value (e.g., 5000px) to ensure long solutions are never cut off.
Interactivity: 3-state click system for each card (Question to Formula/Hint to Solution).
Style: Ensure fonts are large and legible.
Content:
Topic: Related Rates
Difficulty: Questions that an average grade 12 high school Calculus student could answer. The questions should increase in difficulty.
Quantity: 3 questions
Specific Example Question: an example first question is "A spherical balloon is being inflated at 5 cm³/min. How fast is the radius increasing when the diameter is 20 cm?"
Google Gemini Prompt for Practice #3:
You are an expert maths teacher and resource creator. You use pedagogy and methodology that is known to improve student outcomes when you create resources. Your task will be to create an activity designed as a check for understanding, using HTML, CSS, MathJax for Maths formatting, and any other suitable libraries for diagrams and graphs. Formatting should be optimized for embedding in a Google Site. Configure MathJax to explicitly accept single dollar signs ($) as delimiters for inline math. Questions should be one per page, with multiple choice answers, each labelled as A,B,C,D.
Wrong answers should be answers that arise from common misconceptions or procedural errors, where possible. Questions should gradually increase in difficulty as they progress. I should be able to click “Reveal answer” for each question, the correct answer should turn green, along with a worked solution or explanation below to support student understanding. I should be able to click “Next” to navigate between questions. It should look modern, colourful, simple. Ensure the question and worked solutions when revealed all put on one standard size laptop screen. Also ensure that scrolloing is enabled. Check there are no formatting errors in the code you have produced.
Create a set of 5 questions for a typical high school Calculus student identifying the correct derivative given a function. The first 3 questions, should be basic questions about power, product and quotient rule. The final two questions should include chain rule and trigonometric derivatives.
Google Gemini Prompt for Practice #4:
Found some interesting html for a math game on github. Used Google Gemini to make it work on a Google Site and revised some of the game play. The original game was at https://github.com/kecav/math-quiz
Role: You are an expert teacher and web developer who specializes in creating educational HTML5 games for Google Sites embeds.
Task: Create a single-file, interactive game using Vanilla JavaScript and MathJax for LaTeX rendering. The topic is [INSERT TOPIC HERE, e.g., Balancing Chemical Equations, factoring quadratics, or identifying biological cell structures].
Game Structure:
Format: A multiple-choice quiz with 4 response buttons.
Pedagogical Engine: The 3 wrong answers (distractors) must not be random. They must represent specific, common student misconceptions for this topic (e.g., [Give 1-2 examples of mistakes]).
Difficulty Ramp: The game should start with simple problems. After 5 correct answers, unlock "Hard Mode" which introduces more complex problems (e.g., [Explain what makes it harder]).
Technical Requirements:
Visual Feedback: Use a "Fade-Out/Fade-In" transition effect on the question card so the user clearly sees when the problem changes.
Audio & Persistence: Include synthesized sound effects (beeps/buzzers) using the Web Audio API and save the High Score to localStorage.
Tech Stack: Use Vanilla JS (no frameworks) and standard CSS variables. Ensure the MathJax configuration block is included for dynamic rendering.
Tone: Encouraging but academic.
1. Prepare your code
Open the text file containing the HTML code. Copy the text (Ctrl + C or Cmd + C).
2. Open your Google Site
Go to your Google Site in "Edit" mode (this is the screen where you can make changes to the pages).
Navigate to the specific page where you want this code to appear.
3. Find the "Embed" button
Look at the panel on the far right side of the screen. You should see three tabs at the top: Insert, Pages, and Themes.
Make sure the Insert tab is selected.
Look for the yellow button labeled < > Embed. Click it.
4. Paste the code
A window will pop up with two tabs: By URL and Embed code.
Click the Embed code tab.
Paste your code into the text box (Ctrl + V or Cmd + V).
Click the blue Next > button.
5. Preview and Insert
Google Sites will show you a preview of what the code looks like.
If it looks correct, click the blue Insert button.
6. Adjust the sizing (Important!)
The code will appear as a "box" on your page.
You may need to drag the blue dots on the corners of the box to make it bigger or wider so all the content shows up without scroll bars.
Drag the box to move it exactly where you want it on the page.
7. Publish
Don't forget to click the Publish button in the top right corner of the screen to make your changes live for your students!