Phonics Simulations

Basic Phonics Simulation

Prompt

Code a simulation in html, css, and JavaScript to generate a complete, self-contained, and embeddable file. Use the included document to help primary grade students learn about how to mark up words phonetically to improve their word attack skills. Provide a word and help the user add the correct phonics marks. Generate hints as needed. Increase complexity as the user becomes more successful during the simulation. Use a navy blue, white, black, and gray general theme, but use markings in the colors recommended by the guiding document.

Advanced Phonics Simulation

Prompt

Now use the attached document to create a version of the simulation suitable for advanced readers or the teacher. Use every word marking tool and provide 500 words that may be multisyllabic and challenging for the user. This simulation is intended to help the user learn all the marks.

Iteration

Fix the marking tool cards. Some of the icons are not in the boxes but above them. Ensure that all the text is aligned at the bottom center of the marking tools card and that the tool icon fits within the card.