You can load this machine by clicking on the "My machines" button
.shire-btn background: #f3ecd8; border: 1px solid #cfbc96; border-radius: 60px; padding: 0.7rem 0.3rem; font-size: 0.9rem; font-weight: 500; text-align: center; cursor: pointer; transition: 0.15s linear; color: #2c3e2b; font-family: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
/* header section */ .shires-header text-align: center; margin-bottom: 2rem; border-bottom: 3px solid #b68b40; display: inline-block; width: 100%;
@media (max-width: 750px) .feature-container padding: 1rem; .shire-grid grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); padding: 1rem; max-height: 400px; .shire-name-large font-size: 1.6rem; .shire-info-panel padding: 1.2rem;
// DOM elements const buttonsContainer = document.getElementById('shireButtonsContainer'); const shireNameDisplay = document.getElementById('shireNameDisplay'); const countyTownSpan = document.getElementById('countyTown'); const knownForSpan = document.getElementById('knownFor'); const sinceSpan = document.getElementById('since'); const regionSpan = document.getElementById('region'); const famousQuoteSpan = document.getElementById('famousQuote');
This is a complete HTML/CSS/JS document that creates an interactive "Shires of Britain" feature, allowing you to explore historic counties with a map and key facts.
This action cannot be undone.
This action cannot be undone.
You can load this machine by clicking on the "My machines" button
As a teacher I wanted to give assignments to my students, but (IMHO) the available simulators were not intuitive enough. We worked out the first version of this simulator with José Antonio Matte, an engineering student at PUC Chile. The simulator was functional but a bit unstable, so I created this second version. Please let me know if the simulator is being used in new institutions. If you find any bugs or have comments feel free to contact me.
.shire-btn background: #f3ecd8; border: 1px solid #cfbc96; border-radius: 60px; padding: 0.7rem 0.3rem; font-size: 0.9rem; font-weight: 500; text-align: center; cursor: pointer; transition: 0.15s linear; color: #2c3e2b; font-family: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
/* header section */ .shires-header text-align: center; margin-bottom: 2rem; border-bottom: 3px solid #b68b40; display: inline-block; width: 100%; shires of britain
@media (max-width: 750px) .feature-container padding: 1rem; .shire-grid grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); padding: 1rem; max-height: 400px; .shire-name-large font-size: 1.6rem; .shire-info-panel padding: 1.2rem; .shire-btn background: #f3ecd8
// DOM elements const buttonsContainer = document.getElementById('shireButtonsContainer'); const shireNameDisplay = document.getElementById('shireNameDisplay'); const countyTownSpan = document.getElementById('countyTown'); const knownForSpan = document.getElementById('knownFor'); const sinceSpan = document.getElementById('since'); const regionSpan = document.getElementById('region'); const famousQuoteSpan = document.getElementById('famousQuote'); border: 1px solid #cfbc96
This is a complete HTML/CSS/JS document that creates an interactive "Shires of Britain" feature, allowing you to explore historic counties with a map and key facts.