Developer: Georgina Carlisle

A fun, enjoyable and addictive sliding puzzle game that promotes wildlife and wild landscapes in the British Isles and the work being done through the 'Save Our Wild Isles' project.

Users are faced with a scrambled image and need to slide the tiles around the grid in order to get all the tiles in their correct positions and thus reveal the picture. On completing the puzzle, users will be taken to a win page where they can learn more about the subject of the picture.

Link to live page: https://georginacarlisle.github.io/wild-sliding-puzzles-p2/

Features

Design

• The Strategy Plane
• The Scope Plane
• The Structure Plane
• The Skeleton Plane
• The Surface Plane

Testing and Validation

Bugs and Fixes

Deployment

Cloning this repository

Forking a branch

Adding additional puzzle images

Languages

Tools and technologies

Credits

Acknowledgements

The existing features provide the following project requirements:

• Fun and enjoyable puzzle (1)
• Promote UK wildlife and wild landscapes and the work being done through the ‘Wild Isles’ project (2, 3, 4, 5 + 6)
• Immediately clear what sort of puzzle this is, and its theme (7, 8 + 9)
• Clear instructions that are accessible at all points without disrupting the puzzle (10)
• Controls for the puzzle to be clear and easy to use (11 + 13)
• Puzzle to be achievable but still provide a level of challenge. The level of challenge should allow the user to feel a sense of achievement on completion (16)
• Clear feedback when the puzzle has been completed (19)
• Option to choose a different puzzle (21)
• Extra help for the user if needed (24 + 25)
• Option to play again (27)
• A different puzzle on each subsequent game (28)
• Feedback to user when they have completed all available puzzles (29)
• Provide users with information about some of our incredible wildlife and what is happening right now (4, 6 + 19)
• Provide a link to further information about our ‘Wild Isles’ including how the user can help to make a difference (3 + 5)

The project name (7) is displayed consistently at the top of all three pages.

The footer is displayed at the bottom of all pages. It has been styled to be sticky. All footer links open in a new tab

The footer includes:

• A link to the 'Wild Isles' project (3)

The landing page includes:

• A short introductory paragraph (2)
• Static images of two jumbled sliding puzzle pictures (8) this is a slight deviation to the original plan. See user testing in TESTING.md for more information.
• Clearly visible buttons to access the instructions (10) and to play the game

The instructions modal can be accessed from both the landing page and the puzzle page. Clicking on the x in the top right corner causes the modal to disappear again.

The puzzle page includes:

• The sliding puzzle (1) with one of four pre-set scramble settings randomly chosen, ensuring that the puzzle is solvable (16)
• Three different puzzle images are currently available with logic in place to ensure user is given a different puzzle on each subsequent game (28)
• Images of UK wildlife are used for the puzzles (4)
• Clicking on a movable tile causes the tile to slide into the empty space (11) and in this manner the tiles can be manipulated one by one to move them into their correct position, this takes a number of moves. Clicking on further tiles is prevent while the sliding is happening.
• Clicking on an immovable tile triggers an alert informing the user that the tile cannot be moved (13)

• An additional alert has also been included to give feedback when the empty space is clicked

• Completion of the puzzle loads the win page (19)
• The 'Change puzzle' button resets the page with a different scrambled image (21)
• The 'Tips' button displays tips in a pop-up window (24)
• The 'Sneaky peek' button displays an image of the completed picture in a pop-up window (25)
• An alert is triggered when the user has viewed all the available puzzles

The sneaky peek modal (25) can be accessed from the puzzle page and displays an image of the completed puzzle. Clicking on the x in the top right corner causes the modal to disappear again.

The tips modal (24) can be accessed from the puzzle page and provides the user with step by step tips to help them complete the puzzle. Clicking on the x in the top right corner causes the modal to disappear again.

The win page (7) includes:

• The original image used to create the puzzle just completed (4)
• Further information about the picture subject (6)
• The 'play again' button takes the user back to the puzzle page where a new puzzle picture will be displayed (27)
• The 'learn more about our wild Isles' button opens the 'Save our Wild Isles' project in a seperate tab (5)
• An extra message displays once the user has cycled through all available puzzles. The button 'reset and play again' clears the session storage of puzzles seen and takes the user back to the puzzle page where they will now be shown a puzzle picture that they have already seen

A favicon has been included (9) and each page has a different title.

A number of additional alerts have also been programmed in case of future bugs, these alerts include:

• "puzzle pictures cannot be found, please contact developer"
• "scramble setting cannot be found, please contact developer"
• "tile not recognised, please contact developer"
• "Sneaky peek picture cannot be found, please contact developer"
• "puzzle completed not recoginsed, please contact developer"

Return to contents list

The following project requirement and associated features has not yet been met, please note this was always planned for future instalments (see the scope plane):

• Option for sound effects and/or music to accompany the game
  • 20 Celebratory audio to play on completion of the puzzle
  • 22 Positive sound effect/slide sound effect on clicking a movable tile. Negative sound effect on clicking an immovable tile. User control to mute Return to contents list
  • 23 Background music. User control to play

The following features are to be included in future instalments and further build on project requirements that have already been met. With one exception (12), all were planned for future instalments (see the scope plane):

• 12 Hovering over a movable tile will give feedback to the user to indicate it can be moved. This was planned for the first installment, however on balancing the time and code needed to add this feature against the increase in user values it was decided to leave it until future releases.
• 14 Keyboard arrows can be used to slide a tile corresponding to the direction of arrow pressed.
• 15 Clicking a keyboard arrow that doesn’t correspond to a movable tile will give feedback to indicate it cannot be moved.
• 17 Addition of a stopwatch to allow for personal challenge, how fast can you solve the puzzle? OR Addition of a set amount of time in which to complete the puzzle with easy, medium and hard settings.
• 28 Multiple puzzle images available with logic in place to ensure user is given a different puzzle on each subsequent game. Three puzzles are currently available, but more are planned (see Adding additional puzzle images, for instructions on how to add additional puzzle images).
• There are currently 4 scramble settings, with more to be added in future instalments.

The target audience enjoy solving puzzles. They may also be interested in wildlife, nature and our ‘Wild Isles’.

• As a first-time user, I would like it to be immediately clear what sort of puzzle this is, and it’s theme.
• As a first-time user, I would like clear instructions. These instructions should be accessible at all points without disrupting the puzzle.
• As a first-time user, I want the controls for the puzzle to be clear and easy to use.
• As a user, I want the puzzle to be achievable but still provide a level of challenge. The level of challenge should allow me to feel a sense of achievement on completion.
• As a user, I want clear feedback when the puzzle has been completed.
• As a user, I would like the option to choose a different puzzle.
• As a user, I would like the option for sound effects and/or music to accompany the game.
• As a user who is finding the puzzle difficult, I would like to be able to gain some extra help so that I can complete the puzzle.
• As a user who has completed a puzzle, I would like the option to play again.
• As a user who has completed a game, I would like to be shown a different puzzle on each subsequent game.
• As a user who has completed multiple games, I would like to know once I have completed all available puzzles.

The owner is looking to:

• Provide a fun and enjoyable puzzle that will engage users.
• Promote UK wildlife and wild landscapes and the work being done through the ‘Wild Isles’ project.
• Provide users with information about some of our incredible wildlife and what is happening right now.
• Provide a link into further information about our ‘Wild Isles’ including how the user can help to make a difference.

Return to contents list

The scope for this project explores the requirements of both user and owner, and how these could be met. Following an agile approach, the project features have then been split into sprints. The first sprint aims to keep time and other resources to a minimum whilst ensuring that the project is viable and provides enough value and an excellent user experience that will leave early users keen to return.

Return to contents list

Wild Sliding Puzzles will consist of two pages initially – A landing page and a puzzle page. A win page will be added as part of the 2nd sprint.

The following pop-ups will also be created to house extra information, which can then be viewed without disrupting the puzzle: Instructions, Tips and Sneeky Peek (image of completed puzzle).

Navigation will be provided through clearly visible buttons and a footer will be placed at the bottom of all pages.

Landing Page

• Wild Sliding Puzzles title
• Short intro about UK wildlife
• Introduction to the puzzle
• Static Image of a jumbled sliding puzzle
• Button to take user to the puzzle page
• Button to bring up instructions pop-up
• Footer with developer details and link to the ‘Wild Isles’ project

Puzzle Page

• Wild Sliding Puzzles title
• Sliding puzzle game
• Button to change the puzzle (2nd Sprint)
• Button to bring up tips pop-up
• Button to bring up sneeky peek pop-up
• Button to bring up instructions pop-up
• Footer with developer details and link to the ‘Wild Isles’ project

Win Page (2nd Sprint)

• Wild Sliding Puzzles title
• Information linked to the subject of the puzzle that has been solved
• Button to play again
• Button to take user to the ‘Wild Isles’ website, external link

Return to contents list

The following wire frames show the intended design of each of the three pages when viewed on a smart phone and on a desktop computer.

The following wireframes show the instructions pop-up when activated from the puzzle page. The Tips and Sneeky Peek pop-ups will be very similar.

Return to contents list

Inspiration for the colour scheme came from the colours in the Puffin puzzle picture, with colours then being used to provide contrast to increase user experience by aiding readability and navigation.

Main colour scheme:

A: Page background colour

B: Main heading

C: Key words on the landing page and button background (text on buttons is white #FFFFFF)

D: Footer background colour

E: Footer anchor link icons (slightly different to the main heading colour in order to increase contrast to the footer background)

All text unless specified is black #000000

Modal colour scheme:

A: Page background colour (included for reference)

B: Modal background colour

C: Heading

D: Subheading

All text unless specified is black #000000

Please go to testing.md to see colour contrast checks.

The font Kaushan Script by Impallari Type has been used for the main heading. This was chosen as I thought it stood out well and looked a little on the wild side!

The font Lato by Lukasz Dziedzic has been been used for all other text. It is a sans-serif font and has been chosen to aid readability as well as working well with Kaushan Script and being visually appealing.

Return to contents list

See TESTING.md for all testing and validation

Return to contents list

The original picture div used on the win page wasn't maintaining an aspect ratio of 1/1 leaving a white gap at the bottom of the container below the image.

CSS associated with the div (the image was set a width of 100% and an original aspect ratio of 1/1)

An example of box model once all css rules applied

I tried the following ways to fix this bug, none of these worked:

• aspect-ratio
• object-fit

In the end I resolved the bug by giving the div a fixed width and height, which I then increase using media queries for bigger screens.

Return to contents list

This website has been deployed using GitHub pages.

Instructions to deploy using GitHub pages:

1 - While in the GitHub repository, navigate to settings (top right)

2 - Using the navigation links on the left scroll down and click on pages.

3 - Check the source is set to the branch: main

4 - Click save

5 - The page will now reload and when you navigate back to pages a link for your published site will be present. Please note this can take awhile.

Return to contents list

In order to work on this repository you will first need to clone it.

Instructions to clone the repository:

1 - While in the GitHub repository, click on the green code button.

2 - Copy the link.

3 - In your IDE or local coding environment use the link to open the repository.

For example: in VScode

• clicking on 'Clone Git Repository...' will bring up a box in which to paste the link.
• once vscode has the link, you will then be asked where you would like the repo saving.
• You should now be set up ready to work on the repository.

For example: in CodeAnywhere

• Click on 'Add new workspace'
• You will then be given the option to 'Create from your project repository' and a box in which to paste the link
• CodeAnywhere will now open a new workspace containing the repository.
• You should now be set up ready to work on the repository.

In order to protect the main branch while you work on something new, essential when working as part of a team or when you want to experiment with a new feature, you will need to fork a branch.

Instructions to fork the repository:

1 - While in the GitHub repository, click on the branch symbol and text indicating the number of branches.

2 - This will load details on current branches. Click on the green 'New branch' button.

3 - Enter a name for the new branch and then click the green 'create new branch' button.

4 - Your new branch should now have appeared on the screen.

5 - Clicking on the new branch and then following the steps for cloning will allow you to open up and work on this branch.

Follow these steps to add an additional puzzle image:

1 - Resize the image you want to use to 750px x 750px. Save your original image to the repo.

2 - Split the image into 9 equal tiles each 250px x 250px. Save your tile images to the repo.

3 - The following steps are in the puzzleScript.

4 - In the chooseGamePicture function, adjust the following lines of code. Increasing the number multiplying by, by 1. let pictureNumber = Math.floor(Math.random() * 1); pictureNumber = Math.floor(Math.random() * 1);

5 - In the setGamePicture function, create a new case (this should be numbered one more than the last case).

6 - Following the format of previous cases add in the links to your tiles. Make sure to leave the seventh slot as an empty temporal literal. Choosing a different tile space to be empty could result in insolvable puzzles.

7 - Disable the checkWin function. Load the page and solve the puzzle to take a screenshot of the completed puzzle. Save your sneaky peak image to the repo and re-enable checkWin.

8 - In the sneakyPeek function, create a new case and following the format of previous cases add in the link to your sneaky peek image.

9 - The remaining steps are in the winScript

10 - In the loadPuzzlePicture function, create a new case and following the format of previous cases add in the link to your original image.

11 - In the loadPuzzleName function, create a new case and following the format of previous cases add in the name of your image's subject.

12 - In the loadPuzzleInformation function, create a new case and following the format of previous cases add in information about the subject of your image.

13 - In the checkPuzzlesCompleted function, adjust the following line of code increaing the number by 1. if (completedPuzzleNumbers.length === 2)

14 - All done and ready for testing.

Return to contents list

• HTML
• CSS
• JavaScript

Return to contents list

• VScode: Used for writing, previewing and pushing the code to git hub
• Git: Used for version control
• Git hub: Used to store the repository for this project
• Git hub pages: Used to deploy the website
• Balsamiq: Used for creating the wireframes
• PhotoScape X: Used to crop original image to make the tiles needed for the puzzle, as well as to resize all images as needed.
• Adobe - Used to create the image showing the colour scheme.
• Chrome Developer tools - Used throughout the development of this project to view and adjust CSS style rules, to see console logs, to monitor session storage and to test performance using lighthouse.
• Nu Html Checker - Used to test the HTML code
• W3C CSS Validation Service - Used to test the CSS code
• Jshint - Used to test the JavaScript code
• Wave web accessibility evaluation tool - Used to test accessibility
• WebAim contrast checker - Used to test contrast between text and background
• Responsive Web Design Checker - Used to check responsivity across a range of devices and screen sizes
• Am I responsive - Used to create the image displayed at the beginning of the readme
• Favicon.cc - Used to create the favicon
• Google Fonts - Used to choose and download fonts
• Font Awesome - Used to download the icons used as part of the footer

Return to contents list

• HTML, CSS and JavaScript code used to create modals: I followed the steps given in the article How To - CSS/JS Modal by W3 Schools to create the modals used within this project, adjusting the code to meet my requirements.
• Link code for favicon: Code copied from Favicon.cc I then added in the file path for the image.
• Link code and incode references for Font Awesome icons: Code copied from Font Awesome

• Kaushan Script: Created by Impallari and downloaded from Google Fonts. Used for the main heading.
• Lato: Created by Lukasz Dziedzic and downloaded from Google Fonts. Main font used throughout.

• Original images of the Puffin, Bee and Ancient Oak: from Save our Wild Isles. All other images used on the site were created from these 3 original images.
• Font awesome icons used in the footer: by Font Awesome
• Favicon image: Created using Favicon.cc
• Responsive site image: Created through the website Am I responsive

• Key words on the landing page: from BBC-Wild Isles
• First intro paragraph on the landing page: from Save our Wild Isles
• Information text on the win page: from Save our Wild Isles

Return to contents list

My husband - For providing support and lots of user testing throughout the development of this project.

My two young boys - For their support during the many hours spent working on this project and for being user testers for me.

My mentor Gurjot - For listening to my project idea and pointing me in the direction of modals and session storage as a means to overcome two of the hurdles I faced early on. Then at the end for helping me to prioritise what I needed to add/improve and what could be left, as well as helping me to work through my bug with the image on the win page.

Sean from Code Institutes tutor support - For helping me to find the best way to prevent the tileSwap function from activating until the slide animation was complete. For also pointing out a future bug and the need to also prevent the click event listener from calling the tileClicked function until the tile slide and swap had completed.

Code Institue - The majority of the coding skills, knowledge and understanding showcased in this project have been learnt through the 'Diploma of Full stack software development' that I am completing with Code Institute.

A Complete Guide to CSS Grid - CSS Tricks - My knowledge and understanding of CSS grid and how to use it was picked up from this article.

grid-area - mdn web docs - I gained further understanding of the grid-area property and how to use correctly from this article.

How to Aspect Ratio - W3 Schools - I used this article to find a way to set the height of my grid boxes relative to the width so that the box had an aspect ratio of 1:1.

JavaScript HTML DOM EventListener - W3 Schools - I learnt how to pass on a parameter as part of the eventlistener through this article.

Asynchronous JavaScript - W3 Schools - I found this article helpful in understanding how to implement the TimeOut method.

Window: sessionStorage property - mdn web docs - I found this article helpful in learning how to store information that can then be used by different pages within the same tab.

Window sessionStorage - W3 Schools - I found this article helpful in learning how to store information that can then be used by different pages within the same tab.

View and edit session storage - Chrome Developers - I found this article helpful in learning how to track the data being stored in session storage.

JavaScript String search() - W3 Schools - This article showed me how to check for a match within a string without needing to iterate through the string.

Window: open() method - mdn web docs - I learnt about using javascript to open a new window and how to control where and how it opens from this article.

Get the last Character of a String in JavaScript - Borislav Hadzhiev - I learnt how to quickly find the last character in a string from this blog.

CSS word-spacing Property article by W3 Schools - I this article to help me space the words in the h1 a little further apart.

Return to contents list