Welcome to this memory game for children aged 3-5 years age. This simple game is easy to navigate, is eye catching and helps children improve their memory. On this site I hope you will be able to easily find the information icon about the simple rules of the game and should also able to access it on mobile, tablet and desktop.

1 User Experience (UX)

• User Goals
• Owner Goals
• User Stories

2 Design

• Colour Scheme
• Typography
• Imagery

3 Wireframes

4 Technologies Used

• Languages Used
• Frameworks, Libraries and Programmes used

5 Testing

• Testing User Stories from User Experience
• Existing Features
• Features to be implemented

6 Further Testing

• Navigation
• Known Bugs

7 Deployment

• Github Pages
• Forking Github Repository
• Making a Local Clone

8 Credits

• Code
• Content
• Media
• Acknowledgments

• The game should have information on how to play.

• The game should be easy to use on mobile, tablet and desktop.

• It should be visually appealing for children with the images and colours.

• The game should have sounds that are appealing to children such as an applause when completed to give positive feedback, sounds when the cards are turned.

• The sound button should be able to be turned on/off as they please.

• It should have three different levels from easy through to difficult easy(8 cards), medium(12 cards), difficult(16 cards)

• It should have a name option so that they can see their score on th scoreboard.

• It should have a reset button for the child.

• It should have a timer so that that their time is recorded

• Clean and tidy code so that the game doesn't encouter problems.
• A simple yet effective game that's eye catching for the children so that they want to play it time and time again.

• To understand the main purpose of the game and be able to use the buttons correctly.

• The buttons to be large enough to able to use and understand.

• To hear sounds when the cards are chosen to let me know I have a pair.

• To be able to recognise the images that I'm clicking on as part of the farm.

• To see a scoreboard so that I know if I've improved from the last game.

• To hear audio feedback such as the applause when I have completed the game.

• Be able to see the rules/information easily so that I can explain to the child how to play.

• See that it's visually appealing and easy to navigate when helping my child.

• To see the scoreboard to check if they've made progress.

• To be able to turn the sound off if it becomes too repetitive.

• To know that it's safe from any links etc to anything that is not child friendly.

• Be able to contact the developers through their social media accounts if I have any questions.

Back to top

• The colours that have been chosen are vibrant colours so there easy to see and stand out. The idea is that the colours are child friendly and colours that are associated with the farm.

• The idea behind the font style is taken from many web sites and applications for children, the Bubblegum font is rounded and playful.

• The background of a simple farm image was used in order to keep with the theme but without too many pictures to distract the user from the main game.

Back to top

Farm animals were chosen for this game because they are recognised and loved by children, especially my children! We live in a farming community so this is a perfect choice for children in my area. It is inspired by the song "Old MacDonald" as lots of children recognise the song.

The sounds were chosen to reflect the sounds of farm animals that most children are familiar with. The card flipping sounds and when the the user has a correct match were added to give positive feedback and the applause has been used on completing the game as it lets them know that they have completed the game.

These are my wireframes that I initially made however I have edited my ideas during the coding process.

• Desktop wireframe - view

• Tablet wireframe - view

• Mobile wireframe - view

Back to top

• HTML

• CSS

• Javascript

• Bootstrap

  • Bootstrap was used to assist with resposiveness and styling of the website

• Google Fonts

  • Google fonts was used to import the sans serif and bubblegum fonts into the style.css file which is used on all pages throughout the project.

• Font Awesome

  • Font Awesome was used throughout the website to add icons to appeal to the eye.

• Git

  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• Github

  • GitHub is used to store the projects code after being pushed from Git.

• Balsamiq

  • Balsamiq was used to create the wireframes during design ideas.

• Coolers

  • Coolers was used to create the colour scheme of the game during design.

Back to top

The W3C Markup Validator and W3C CSS Validator and JSLint were used to validate every page of the project to ensure there were no errors in the code.

• W3C Markup Validator - Index

• W3C CSS Validator - Results

• JSLint - Results

• First Time Visitor Goals

• As a user, I want to easily understand the game and to be kept interested.

  • When entering the site users will see a a pop up modal to choose their level.

  • On the main page, to the left of the screen the level will be shown then the to the right will be the page title and different buttons.

  • Upon scrolling the page the main card game will appear large and the center/right of the page.

• As a user, I am curious to know more about the game

  • There will be a 'i' button to explain the rules.

  • There will also be a social media account at the footer of the page.

• As a user, I want it to be simple and fun

• Attractive colours, buttons and sounds.

• Not too much content.

• As a user, I want appealing sounds

• For audio feedback and to be kept interested.

• Sounds that are recognisable within a farm setting.

• As a user, I want the buttons to be child-friendly

• Buttons should be large so they are easy to press.

As a user, I want the game to be simple

• Only two cards can be flipped at once

• It wont encouter problems if its clicked too fast

• Returning Visitor Goals

• As a user, I want to see the score.

  • The score gives feedback to see if they can beat it.

• As a user, I want to mute the game

  • This is in case the sounds gets too repetitive.

Back to top

• Responsive on all device sizes - due to my mentor helping me to return to previously saved changes with my JS code it has also meant that my game has lost its most recent changes and is no longer responsive on all devices (like I had recently done). It is still responsive on mobile and laptop however the grid doesn't sit to the center of the page as I had previously completed on tablet/ipad and on desktop the background image doesn't fill the whole screen.

• Interactive elements - only the flipping of the cards and flip counter work.

For the grid I have used Boostrap.

The background image is of a farm landscape to bring the farm landscape to the attention of the child.

The main idea to put apop up modal and the beginning of the game was to grab the users attention immediately - to choose a level (easy, medium or hard) .

The Main Page is based on a farm theme - as its simple and eye catching for the user and lots of children (3-5 years) have experience with learning about farm animals (especially in the rural area we live in). It is in two columns (taken from Bootstrap) to appear neat and tidy on the page with easily identifiable Font awesome icons to attract the user.

The buttons icons were used as they are widely known symbols so for kids its easy to identify them rather than reading any words - as they may not know how to read so symbols are easy to recognise.

• "I" symbol for the rules and information on the game
• "Mute" button to turn the sound on/off as the user wishes.
• "Reset" button to start the game over.
• "Star" symbol for the scoreboard.

The time, score and flip counters are large enough and placed at the top of the game grid for the users to see during the game and placed at the top together so the users can keep record of their progress.

The cards were chosen becuase they were farm animals - and I chose similiar looking animals (front facing with big eyes) so that they kept with the theme and looked more attractive.

The number of cards were chosen (easy - 8) mainly because it was important to keep the number low as the user for this specific game is designed to be for 3-7 year olds.

The number of cards were chosen (easy - 8) mainly because it was important to keep the number low for the age range targeted for the game. 2 rows of 4 coloums on a desktop. 3 rows of 3/4 coloumn on mobile and desktop

The number of cards on the medium level (12) were chosen as its a gradual step up and would fit nicely on 3 rows of 4 coloumn on a desktop.

The number of cards on the hard level (16) were chosen agian for the gradual step up and would fit nicely on a 4x4 basis.

At the bottom of the page I placed the social media links so that it would catch the attention of the users if they had any questions for the developer. They then have to enter their contact details.

Back to top

• When submitting the form, the information should be sent to Dr Chick's game account.

• Chat bot that can assist the user.

• Interactive scoreboard with username

• Include information on how their data will be used (GDPR-Law).

• Username

• The website was tested on Google Chrome and Safari browsers.

• The game was viewed on a variety of devices such as laptop, tablet and iphone.

Back to top

• Idea I wanted to ensure that the levels buttons were working accordingly at the top of the page and when clicked on, they would draw a certain amount of cards. For simple and attractive purposes the navigation bar would then convert stay the same size but appear at the top of the page positioned at the center.

• Utilization I implemented the levels button using Bootstrap, which ensured an effective overall structure and lay out to the buttons.

• Test Unfortunately I was unable to get the JS code to work for the buttons

• Result The levels button would not work

• Verdict The test did not pass the criteria and didn't work as planned.

• Idea I wanted the information button to have a modal appear with the rules of the game. I also wanted the reset button to reset the counters (score, time and flips) when pressed on As well as muting the audio And the scoreboard modal

• Utilisation I used a bootstrap modal for the information button.

• Test The information button worked succesfully on the first test. The reset button only worked to reset the flip counter due to the JS code. The scoreboard and audio did not work due to the lack of JS code.

• Result The informaiton button opened but the three other buttons would not respond.

• Verdict The information button works as planned. The reset button partly works as planned. The mute and scoreboard do not work as planned.

• Idea I wanted to enable the users to see the counters as clearly as possible at the top of the game grid.

• Utilisation I created the counters on the index.html and wanted to create the JS code to interact with the game

• Test The counters did not work due to the lack of JS Code.

• Result The flips counter partly worked - it only counted after clicking on the second card and also counted if you clicked on the cards twice - it would still register the flipped cards as a new flip.

• Verdict The counters failed due to the lack of JS code.

Back to top

• I had many issues with writing the Javascript code therefore the level selection buttons, audio(mute), scoreboard, modals, timer do not work as I was unable to write the code - due to my lack of knowledge (not a lack of time as I have spent hours and hours on it).

Back to top

The project was deployed to Github pages using the following steps:

• Log into GitHub and locate the GitHub Repository (gemmaellis16 /memory_game).
• In the navbar on the top right hand side press the "Settings" button.
• Locate Pages on the left hand side of the page.
• Click "None on the source section and choose "Master Branch" on the source field and then choose "docs".
• Then deploy the page - you will have to wait 10 minutes for the page to deploy or when the blue writing turns green.

Back to top

Forking means to make a copy of the original document so that you can view/edit without it altering the original repository. It can be forked using the following steps:

• Log into Github and locate the Github Repository
• Enter gemmaellis16/memory_game.
• At the top right of the navbar (above the profile icon), press the "Fork" button.
• This will enable you to get a copy of the original repository in your Github account.

Cloning means creating a local copy of the remote repository. This allows you to make edits locally rather than directly in the source files. It can be cloned using the following steps:

• Log into Github and find the GitHub Repository
• Locate the "Code" button and click "Clone or download".
• To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
• Open a terminal.
• Change the working directory to the area where you want the clone to be made to.
• Type git clone, and then paste the URL you copied before.
• Press enter and create your local clone.

Back to top

• Bootstrap Bootstrap library used throughout the project to make the site responsive to the Bootstrap grid system.

• I used a modal template for the information button from Bootstrap

• The information modal and levels buttons idea were sourced from another students memory game from CI.

• The buttons was sourced from the JavaScript Walkthrough Project from the CI course.

• The modalstyling was sourced from the W3schools website.

• The matching cards codewas sourced from Ania Kubów on Youtube.

Back to top

• Content was written by the developer - and inspired by books and toys that my toddler owns.

• All images were from freepik
• The back of the card Dr Chick logo was created by hatchful
• All audio was from freesound

Back to top