Developer Howard Richardson talks about how this project came together and the design choices that were made ...
Our original intention
The original intention for the design of this map was to try to make it a re-usable generic module into which lecturers could drop their own materials. We fell a little short of this in the end, but the technical demands of creating and assembling all the story materials made a web-developer-free product unlikely anyway. Additionally we were under budgetary constraints that sometimes forced us to hard-code a certain approach for expediency. However, the final product is still customisable enough that a lecturer working with a web developer could adapt it to their own purposes or make similar differently themed maps.
Choosing a framework and building tools
In the early days of development I did test and consider learning and using an existing videogame development framework or a professional animation package to make the map. However, without any experience in this field I was wary of ending up in a developmental dead-end. I was keen to avoid spending time making progress only to encounter a feature I was unable to build using the framework chosen.
In the days of Web 1.0 a game like this would have probably have been realized in Adobe Flash, but the modern equivalents of HTML5 and JavaScript aren't quite as one-size-fits-all as a Flash virtual machine. Instead we opted for a roll-your-own approach, joining together existing animation and multimedia libraries in JavaScript/JQuery to achieve exactly the results we needed.
The game content
There is a deceptive amount of content required for a project of this scale. This diagram below illustrates what went into the map.
The data defining the content was stored in config variables and the content itself was held in a database. The hotspot content could then be loaded in as and when each hotspot was clicked. AJAX requests went out and the content would be returned as JSON data.
After I got the map working correctly, I swapped handmade JSON data files out for dynamically generated ones, using PHP and a MySQL database. This allowed for the stories and people to be easily stored and edited by a lecturer from a web back-end. I rustled up a quick administration tool for this using a cheap PHP CRUD interface to SQL. This database-driven and web administrated back-end for the content is theoretically optional. You could write plain JSON data files by hand generate them in another dynamic way from an alternative source.
Defining hotspots with rectangles
One of the limitations of the map in the end, which we initially hadn't planned for, was that the hotspots could only be rectangular. This allowed us to use simple HTML images inside linked anchors, instead of more complex options, such as SVG polygons or HTML image maps. The first prototype of the map handled the hotspots as SVG polygons, which allowed for a bit more flexibility but made defining the hotspots and making them respond correctly across all desktop and mobile platforms more complex. As a trade-off we opted instead for purely rectangular hotspots, which just needed an X and Y location on the map, and then the illustrator just needed to be careful to make sure than the bounding boxes of any clickable areas didn't overlap much. The code could probably be easily adapted in the future to support polygon hotspots, were this to be needed.
Added one year later were a type of circular or elliptical hotspot that triggered the display of a thought bubble above a character in the map. These were achieved slightly differently by having a rectangular div with fully rounded corners, making them into ellipses that we could size with different dimensions to roughly cover the characters on the map.
These two types of hotspot roughly corresponded to the fact that buildings were square and groups of people were elliptical. Greater precision than this we opted to avoid for the sake of simplicity.
Animating the intro and interaction
All the interaction in the game is driven by the GreenSock animation libraries. These allowed us to do many things, including script an opening zooming introduction with a time-synced voiceover, and to make the map itself draggable with movement inertia.
It probably isn't apparent on first glance, but when you click a hotspot, you're also playing back a GreenSock animation timeline. The zoom-in to the building and the "modal" window that overlays the playing field is all defined in TimelineMax. On a click we calculate a centre position for the building and move the map into this position, and from there the visibility of the modal dialogue layer is switched on. This together with zooming and "popping" effects on the images and window itself creates a lively, animated feel. The timeline then pauses while the window is open, and resumes the timeline when the close icon is clicked, undoing all the the animations which made the window appear in the first place until it's all invisible again, at which point the timeline is finished.
Supporting touchscreens
The game was written to be useable with both touchscreen and mouse pointer. Initially I had wanted to make the code work the same with no special cases for mobile, but the click and hover handlers were causing problems on iPads, such as needing to click some links twice and introducing delays to touch response, so in the end I wrote the game to have two modes - a touchscreen mode and a mouse mode. Depending on how the START button is pressed - with a touch event or a mouse click - it then selects the appropriate mode for the game. Once you are in touchscreen mode, the links respond immediately when you lift your finger from the screen because they are bound to "touchend" events instead of "click" events.
Sound and voiceovers
I added audio to the game using the Howler.js library. We recorded voiceovers as MP3 files and then they were played and stopped at the appropriate points in the timeline or on the relevant click events, as appropriate. Because we also had some embedded videos, it was necessary for the videos and the narrations to communicate, so I programmed each one to stop, pause or fade-out as appropriate, so that you never got multiple voices playing on the top of each other. We also had some background music at the start to play behind the introduction, which we took from the creative commons music library that goes with Youtube. Having that music in the background really gave it a professional touch.
A later addition to the game was the implementation of three different audio modes: muted, voiceover only, voiceover and music. This lets people who find the music or voiceovers distracting switch them off easily. The switch was a simple toggle below the physical zoom controls. For visual feedback we also made the toggle print the current mode and fade out in a overlay on the map, styled the same way volume changes are often styled for a laptop operating system.
Unoccupied buildings
At the time we wanted to launch the map we had finished seven full stories, complete with audio narration, character illustration and quiz. Not all the stories had an accompanying video however. The next round of development will add extra buildings and fill in the gaps in the videos. The idea is to get industry sponsors (law schools, companies, chambers etc) involved in developing the stories, and the map has gained support for displaying their logos next to the problem question in the window as attribution.
There are still several buildings unoccupied on the map, which we needed to indicate somehow, until such time as the gaps are filled in. In the end we had both visual and interactive feedback to indicate this. Visually a CSS filter turns the building black and white, indicating it has no story attached. If you still attempt to click the empty building you get a sound cue of a buzzer and a message displays using the same messaging mechanism as the audio mode toggle.
Other maps from the same code
The project could take off in many possible directions. Currently there is one related map called Mountains of Metaphor by Dr Clare Williams. It is a visual treasure map and each of the hotspots has a narrated story and painting she has made. Together all the hotspots tell the emotional story off her writing her PhD, whilst encountering personal disability, family struggles and much internal toil. The map has been adapted to not have any quiz elements or tabs, but for each hotspot window to show a full painting, which can optionally be viewed in more detail by toggling the text overlay off.
Some of differences between Coltsfoot Vale and the functionality of the Mountains of Metaphor map were hard-coded, such as the use of the background images for the hotspot windows. However some of the other improvements we made, such as the audio mode toggles and the stop and start controls for narration were rolled back into the main Coltsfoot codebase. Once again, the necessities of practicality and limited budget meant that hard-coding some features was a lot easier than building them in as optional configurations in the main code. If they looked like easy fixes and one-offs I coded them as such.
Code repository on Github
There is now a public code repository for the learning map code. We are developing the code with a view to making it available to people who want to use it for their own purposes.
To improve the game aspect of the map, I'm wondering about whether it would be possible to include some sort of scoring or right/wrong answer response within the quizzes. This might work better for subjects where the answers are more easily defined and checked. The traditional way to achieve this would be with multiple choice questions, but I felt that they encouraged lazy thinking on the part of the learner, and that in this case having open-ended questions was more important than the scoring and checking aspect.
Compatibility improvements could focus on mobile and ipad use. Although the game is usable on a tablet or phone, navigation is not as smooth as with a mouse and sometimes you end up tapping or dragging something more than once to get it to recognise the correct action. Better handling of touch events within the code could probably improve this. We opted to leave it as "good enough", knowing that it would likely be a large time sink on our limited resources.
Future sound improvements to the map might include adding in some village background sounds, like people, cars and birds, and perhaps some continual animations in the background, such as a spinning windmill. I think that would add a lot to the atmosphere of the map.
Additionally not everything has a voiceover or subtitles currently - notably the intro is missing subtitles and the quizzes are missing narration. In a perfect world we would like to have these gaps covered too. However narration is costly and time-consuming to record and the quizzes are inherently tricky to narrate, given their non-linear structure, so it's not clear how feasible this would be.
Contact the developer
Naturally I'm open to people contacting me with any technical questions they have. The easiest way to contact me is from my website.
Alternatively you can contact me via the project's code repository.
Additional Coltsfoot Vale credits
GreenSock animation libraries. These are freely licenced, but we did make use of their extra paid "ThrowProps" plug-in which enabled inertia in scrolling and dragging. This is optional. Without ThrowProps dragging and scrolling just stops dead when you let go.
On the back-end XCRUD to allow simple input and generation of JSON data from a MySQL database. XCRUD costs $13 for a licence but its use here is optional. You could input the data into MySQL with whatever other tools you have to hand, or generate JSON records yourself in other ways.
Howler.js library provided audio support, freely licenced under MIT licence.
Sorry but this site won't display properly in Internet Explorer
We don't like to exclude anyone, but it was important for us to build this site to the latest HTML and CSS specifications – ones that aren't supported by your older browser.
Did you know Internet Explorer 11 is now over four years old and that Microsoft are no longer actively developing it? Please consider upgrading your software to something more recent such as Firefox, Chrome, Microsoft Edge, Opera or Safari.
