Simplified Gettysburg Simulation

Prompt

Generate a self-contained, complete, and embeddable simulation in html, css, and JavaScript of the three day Battle of Gettysburg summarized here: https://en.wikipedia.org/wiki/Battle_of_Gettysburg  Use the included map as the base background image for the simulation. Animate the movements of the armies on the battlefield using gray rectangles for the Confederate troops and blue rectangles for the Union troops. Add a user selection for Day 1, Day 2, and Day 3. Add a Play button to play the animation for each day as selected by the user. Add the dates for each of the three days. Make the theme surrounding the simulation navy blue, white, black, and gray.

Iteration

The simulation shows the map image was not found. Try the link for the map here: https://commons.wikimedia.org/wiki/File:Map_of_Gettysburg_Battlefield.png Use the largest version of the map available.

Iteration 2

Label the armed units by their leaders. For example, Pickett, Chamberlain, Lee, Meade, etc. Make the name follow the animated troop movements for clearer understanding of which units moved to specified locations. Add the units on the south end of the battlefield to the degree possible within the constraints of the map. Include the Devil’s Den actions and Little Round top. Add the text summary to help the learner know what movements are taking place.

Iteration 3

Switch the position of the map key with the Union marker and color block on the right and the Confederate marker and color block on the left to better reflect their positions on the battlefield. Reduce the size of the map if necessary to fit the text summary on the page.

Iteration 4

Allow the user to tap or click the screen to pause at any time and to click or tap again to continue playback. Make the text summary as detailed as possible to improve the learning opportunity.