Activity

Directions App!

Use default or student made maps to practice giving and receiving directions! This is an updated version of my Directions game - now with the ability for unique custom maps to be made and used!

Find it here: https://fisheymug.github.io/DirectionsApp/

TL;DR:
An updated version of my web based directions game. Move the character around the map and get him to his goal. This has more options of default maps including School and City, plus the ability for students and teachers to make their own original maps.
Read below for a more detailed breakdown!
Cheers

This is my Directions app for use in ESL classrooms to help students practise giving and receiving directions.
It follows but refines the same basic principle as my previous direction games but with the added ability of letting the students create their own unique "maps".

The way the game is played is by moving the character to the goal (via the buttons or arrow keys). The sentence shows the current goal.
For a kind of two player/group version, a "direction giver" can click on a building/school room (making sure that the "controlling player" does not see) and that will become the new goal. The idea being the “controlling player" moves the character according to the “direction givers” instructions. The sentence changes to reflect this, hiding the goal so that the player has to listen to the directions.
At any point we can click on a “move marker” (the black dots) to select it as a start location. This will stop the player being spawned in random locations after a goal is reached. To go back to random spawn points, click the same move marker again.
There is also a check button to hide the move markers altogether if you prefer.
Choose the City or School option in the main menu to be given a choice of default maps to play on.

The create a level option will let us create our own unique maps for use in the exact same kind of game. We have two options;

  1. Click a default blank map, then drag buildings into it making sure to avoid overlapping the roads.
    We can click on a placed location to highlight it. Then using the plus and minus buttons we can adjust its size.

  2. Drag your own image file into the map area. Using this method we can see the player in the level in order to adjust its size. Click the player image in the right panel to hide and show it in the map as needed.
    You can click and drag move markers - the black circles, and unique location boxes - the blue squares, onto the image. The location boxes have a text box for naming the location. You are also free to drag the building pictures into the map also.
    We can adjust the size of locations by highlighting them with a click and using the corresponding plus and minus buttons, just like with a default blank map.

When we are ready, we can click start. We will be taken to the finished level ready to play. It will work the same as the default maps, with the addition of a check button to hide the blue location boxes.
The created level is also saved in the browser's cookies. Click on Player made level in the main menu to get back to it. Creating a new map and selecting play will overwrite this save.

I hope that with the addition of being able to create unique maps that students will be invigorated to practise giving and taking directions within their own creations.
The limits abound when you consider taking an image of the school map, or a screenshot of the local area from google maps, or perhaps even photos of dream town posters that students make - to name a few possibilities.

There are however some limitations that need to be taken into account when creating your own maps.
Importantly, the character can only “move” up, down, left and right. Diagonals and curved lines that are typical of genuine maps will not translate well into the app. When placing locations and move markers we need to be careful that they are placed in straight lines and right angles. The character will only move to a location that it can “see”. Imagine a straight line from the player's face - this is where he can move if you push go straight. If a location or move marker diverges too much off of this straight line, it will not be able to move to it.

There are also bound to be some edge cases where the player begins to loop in its walk animations. This is often a bug that can be rectified by a page refresh or worst case, remaking the level. If the problem persists however it may be that the size of the player, or location, needs changing.
Also I have not been able to fully test this on different browsers and devices, your mileage may vary.

Finally I will briefly mention that in order to circumvent any potential problems with copyright I have attempted most of the art myself. That is why it looks so terrible to which I can only apologise, it is a work in progress. Ideally we should let the students create their own beautiful maps to use!

I hope that people out there can get some use out of the app. All feedback is much appreciated, like the art, the app is still a work in progress.
Thank you!

Find it here: https://fisheymug.github.io/DirectionsApp/

40
Submitted by Matthew June 5, 2024 Estimated time: 10 minuets to a whole lesson depending on how you use it.
  1. awing June 11, 2024

    This is great! No notes, and I'm very grateful for all the time you must have spent to make this

  2. Matthew June 11, 2024

    Thank you so much that is appreciated!

  3. SurfingKoala35 June 14, 2024

    Wow, this is dead set fantastic stuff. Love that you have one with the Lets Try flashcards already set up. How much time did it take you to make this? Excellent work.

  4. VinShida July 10, 2024

    love it!

  5. Metapod September 17, 2024

    I really, really, really, wanna use this....However for some reason i cannot use it on my students tablets, works fine on a computer, doesn't work on their tablets. says that the tablets are "missing: Cross-Origin Isolation" and "SharedArrayBuffer"

    Not sure how even if there is a fix...maybe a different link? any ideas would be greatly appreciated.

  6. Matthew September 20, 2024

    How's it Metapod.
    Sorry to hear that you are having this problem. I knew that there would be cases like this unfortunately. The problem that you are having comes down to one of two likely culprits. The browser being used, or the device itself. It is a known issue with web compatibility in the game engine.
    All I can say is that I am always working to update the app with the latest fixes as soon as they become available. I am also looking at other possible hosting platforms for people whose schools block github.

    The other directions games I made do not have this problem, so I can recommend giving them a go in the mean time. They do not have the same features as this one unfortunately, but the students can still move around a premade city or school to practice directions at least.

  7. Metapod September 24, 2024

    Hey Matthew! thanks for responding!

    In my case my HRT really liked the way the students could make their own map, which with the other versions they cannot do as yo mentioned above. I found another solution where they're going to make their own in Loilonote! they wont be able to make the character actually turn but they can drag them around or use the stencil feature! At the very least you inspired me to make an interesting activity! Thank you!

  8. Matthew October 7, 2024

    Metapod and future readers/ users!
    I have implemented a few "fixes/ hacks" that so far seems to have alleviated the issue with the cross isolation and shader error. If someone has this issue remain, or another comes up I would very much appreciate any info so I can continue to improve and fix the app. Thanks in advance!

  9. jappy October 10, 2024

    I really liked this! I hope you’ll consider adding the number of floors to the app. This way, we could give directions that include not just going straight or turning left and right, but also going up or down. It would be like a leveled-up version of "Let's Try 2 Giving Directions" that's perfect for junior high school students. Great job!

Sign in or create an account to leave a comment.