Guess the Fruit

Play Guess the Fruit now!

Introduction and welcome

This game is for my son, Eben. He loves music and in his early months he would only seem to settle to one particular music video on YouTube - it was by a channel called Hey Bear Sensory (recommended to me by a primary school teacher friend). My son loves the images (dancing fruit) and the music, which is always upbeat and fun. When he was 6 months old he smiled and laughed as he watched strawberry's and blueberry's dancing to music. This got me thinking... What if I could make a fun and accesible mobile and tablet game for kids that included these fruits and images? How could I make it fun and entertaining AND educational?

Hey Bear Sensory say... "we invite you to explore our colourful world of animation! Super cute and friendly characters promote happiness, movement, learning, visual tracking, sleep, relaxation and more!" The very nature of this type of medium; music, colourful images and movement, promotes so much of what is needed for young children and their spatial development. It seemed obvious to me to make something that could harness this and put it into the childs hands. So I reached out to Hey Bear Sensory and they were happy for me to design and build a game that incorporated their winning formula and brand into a game. Hey Bear Sensory has millions of views on their YouTube channel - check them out! Hey Bear Sensory - YouTube.

I am a teacher and having worked with children for years, I can vouch that when sensory experiences are linked to learning, they can be powerful gateways to a child's development and confidence. This game provides the opportunity for parents to engage with their little ones dynamically. This game is about having fun, making links between pressing buttons, making choices and also gives the opportunity to learn about healthy foods! This is all brought together in one place and this is the first time that Hey Bear Sensory can be in the hands of the child (and parents), not just, 'on the telly'.

I believe that this game provides a unique sensory experience, linking Hey Bear's fun with learning can aid with visual tracking, memory and concentration, even word association (should parents sit and explain each fruit by name for example - parents...get creative with this game and get involved!).

So, add Hey Bear's colour, vibrant music and images with a rewarding game experience and you have a winning formula...

Have fun!

Contents table

• Guess the Fruit
  • Introduction and welcome
  • UX
    • Brand and visual identity
  • Goals of this project
    • Player goals
    • Parent goals
    • User stories
      • Player goals
      • Parent goals
  • Design choices
    • Design focus
  • Wireframes
  • Features
    • Existing features
    • Header
    • Main
    • Footer
    • Modals
    • What I'd like to add in the future 'features'
  • Technologies used
  • Frameworks, libraries and programs used
  • Testing
    • Known bugs
  • Deployment
  • Credits
    • Content
    • Media
    • Images and video
    • Audio
    • Code
  • Acknowledgements

UX

Brand and visual identity

The aim of the visuals is to allow this sensory experience to be be accessed all in one place, not only that, the buttons and events were designed to allow for access to children of all abilities, so that all may enjoy interacting with Hey Bear sensory for themselves, not just watching it on the 'telly.'

Visuals were designed to be obvious, clean and inviting. Much consideration has been given so that the interactive elements of the game are not impeded by branding and clutter. The game's 'buttons' are intuitive - the essentials are on the screen, however, the user (parents also) can get access to info about the game and Hey Bear Sensory's website and YouTube channel through the About button.

There is something for parents as well as the child, you can turn the music on the main game screen 'OFF' - for when those long car journeys, can seem 'longer' when the same music is repeated and repeated and... well, you get the idea.

Goals of this project

The goal of this project is to provide a mobile and tablet game that is fun, visually striking and child friendly. It should be easy to understand and lot's of fun for all who play. The target audience is children between 18 months to...whenever they might feel too old for it (never) and also, parents.

Player goals:

• A game that is fun to play.
• Have game controls that are easy to understand.
• Fun and colourful images.
• Music and music videos to reward the player and give information about the game.

Guess the fruit was designed to meet these needs:

• The game was designed with fun and simplicity in mind.
• The game controls/buttons are at a fixed point and easy to see and understand what they do.
• Colours and images have been designed to be obvious and provide visual stimulus.
• Guess the fruit uses visual and audio rewards whilst playing.

Parent goals:

Parents have a tough job finding aspects of entertainment that are not 'wasteful' for their children. Hundreds and thousands of games are designed to grab the attention of children and their parent's money, this game is designed to bring an element of fun and colour and music to fruits/food that parents may be trying to introduce to their little ones. Children now have the chance to interact with the visual elements that they have, only thus far, enjoyed through the screen. Now, parents can play with their children and bring this much loved sensory experience out of the screen and into their laps.

• Parents would prefer developmental value in a product.
• The game must be accessible for children of differing abilities.
• The parent can mute the sound.
• There is information about the game for parents and player.

Guess the fruit was designed to meet these needs:

• The game was designed to not only be fun; the visuals and gameplay encourage development of memory and visual and spatial awareness.
• The game is easy to understand and is accessible through obvious and intuitive controls.
• There is a mute button for the main game music.
• There is an about button for parents and a 'how to play' modal on game startup.

User stories

Player goals:

• I want a fun game to play that is easily to understand.
• I want/need/require child friendly controls. I need the game controls/buttons to be obvious and 'clickable' - large and colourful buttons to attract my attention.
• I would like fun sounds and images/visuals.
• I need to be able to recognise the elements within the game.
• I would love visual and audible rewards when I play/win!

Guess the fruit meets the player's needs because:

• The game is fun, easy to understand, colourful and vibrant.
• The game controls are obvious, a series on square 'panels' they can touch on screen wth a finger or mouse click and in the form of the fruits that appear in the majority of Hey Bear Sensory's videos (most certainly recognisable by a lot of children as I have surveyed a number of friends with children, all of whom have attested to the fact that Hey Bear Sensory is a popular channel).
• The fruits are among the most common out there! Most certainly what children will have seen (and hopefully eaten) before.
• Plenty of visual and audible stimulus in the form of music and vibrant design.
• When a game is won, a 'Winner modal' appears and plays a music video.
• A highscore is also recorded for that play session.

Parent goals:

What would parents like in a game?

• Developmental value.
• Is the game accesible?
• Is the game fun to play?
• Is it a loud game? What parental controls are there?

Guess the fruit meets the parent's needs because:

• Developmental value: The game is designed to encourage and develop visual, spatial awareness through movement and allows for visual tracking and interaction.
• Chidren of all abilities can enjoy the game.
• Visually appealing and recognisable.
• Parents can reset the game and there is a mute button!

Design choices

Design focus

• The design focus is intended for mobile devices and tablets - this is because the idea of this game is to be 'handled' by the child, these devices give a unique ability for the child to have more interactivity with the experience - before now, Hey Bear Sensory was viewed on a television screen or monitor - this is the first time that it has been been in the hands of the child.

• The game has a friendly family-feel design. There is an emphasis on design choices that reflect the desire for the images and visuals to speak for themselves and also to allow for the game to be easily accesible with minimal clutter.

The following design choices were made:

• Interactive buttons

  • Buttons were positioned for mobile device and tablets primarily, therefore, the positioning of the image 'buttons' and the header elements was important. I took a decision to switch the ordering of the header buttons on mobile so that a user, (if using the mobile device in one hand for playing and are right handed, as is most often the case), wouldn't accidently hit the mute button. This is the reason that the result window switches and the buttons are shifted to the left on mobile.
  • the main image buttons are central and the largest part of the visual make-up - the animation bounceIn encourages users interactivity with the buttons, making it easy for the user to understand that these buttons are interactive.
  
  
  

• Colour Scheme

  • Background colour of the main page is black - to allow for images to be striking and bold. Whilst the striking visuals are included as part of the design, the desire was not to overwhelm the user, a muted background allows for the fruit images to be seen clearly and makes it obvious as to the function of the panels the images are contained within.
  • The background colour of any modals and buttons are dark grey to ensure they stand out.
  • Multicolour text has been included for vibrancy to headers in modals.

• Typography

  • Roboto Mono is used throughout to give a clean, nicely spaced and easily readable aesthetic. The fall back is Sans Serif if, for any reason, Roboto Mono is not imported into the site correctly.
  • Games on app store were considered when looking at fonts. The decision was that a bold but clear (as it's non-cursive) font would allow for it to be read on screens of varying sizes.

• Imagery

  • The images picked were intentional - the fruit images are smiling - so that the child is greeted with happy faces from the moment they engage with the game.
  • Images used are vibrant and colourful - images are recognisable by children who have seen Hey Bear Sensory on YouTube. The images are from several of the videos developed by the brand and will be recognisable by many children.
  • Even if the child playing this game has not seen Hey Bear Sensory videos, the fruits are obvious and friendly!
  
  
  

• Styling

  • !Important - The modals (see below for images of modals) were picked as a way of giving the user the info they needed via the function of either winning the game or when all attempts to find the 'secret fruit' are depleted and they need to 'start-over'. Modals were picked as they 'interrupt' the game only when necessary - not ruining the flow of the game when being played.
  • (On desktop) Hover effects are used on buttons to allow for depth on the webpage.

Wireframes

Wireframes were created for mobile, tablet and desktop using Balsamiq during the scope plane design process.

The final version of the wireframes can be found here

• Guess the Fruit wireframes

Features

Existing features

• Responsive on all screen sizes - but primarily designed for mobile devices and tablets.
• Interactive elements.

Header:

• This contains the title and main game info and feedback to the player.
  • About - this is for the parents - gives info about the game and Hear Bear Sensory and also provides links to Hey Bear's website and their YouTube channel.
  • Result/feedback box - this is where the player is told to "Select a fruit" - the obvious position of the message (just above the fruit image panels) tells the player they need to touch one of the panels below. When a player guesses incorrectly a timeout function outputs a message of "Sorry, try again".
  • Music notes - this 'unmutes' the music so the user can have background music to the game. I decided to mute the music on startup, the player must 'unmute' it. This will bring another functional element into the game - the player must remember to 'turn the music on'.

Main:

• This contains the fruit panels/images. These images are used with permission from Hey Bear Sensory and are fruits. A game could be also configured to include vegetables too as that's another key image feature of the Hey Bear brand.

Footer:

• This section contains two major elements - scorebox and new game.
  • Scorebox - here, the player can see how many attempts they have left to guess the 'secret fruit' - the number decrements.
  • Best score - here, the player can see how many attempts it took them to guess the 'secret fruit' - the 'best score' is recorded for the remainder of that session or until the player(s) refresh the page.
  • New Game button - to reset the attempts should the user wish to.

Modals:

1. Game start modal
   • This modal greets the player(s) and gives them very simple instructions on how to play the game...

2. About modal
   • This is a modal primarily for the parents who may choose/desire to know more info about the game.

3. Game win modal
   • This modal contains a 'Win video' a nice celebratory dancing fruit video and music and music track.

4. Game over modal
   • This modal is designed to be simple, yet colourful, and flashing multicolour text suggests losing the game and trying again isn't all that bad!!

What I'd like to add in the future 'features'

This is a fluid concept and one that could be added to as the game or whatever brand it connects to grows. I would like to add:

• A carousel or a box where fruits are 'jumbled' up and then disappears as a game start feature. I believe this would make sense for the game start sequence.
• A user highscore feature than runs across all sessions and one in local storage.
• A play against other people feature - where someone could play against someone else.
• New game modes where either attempts is lowered for hard mode or even more fruits added.
• Characters - dancing icons or unique characters to the game.

Technologies used

• The project uses HTML5, CSS3 and JavaScript.

Frameworks, libraries and programs used

• Affinity Photo:
  • Affinity Photo was used to edit images.
• Balsamiq:
  • Balsamiq was used to create the wireframes during the design stages of this project.
• Bootstrap:
  • The project uses Bootstrap to simplify aspects of the layout (such as the grid template for the images).
• Font Awesome:
  • Font Awesome was used for icons on the site.
• GIPHY:
  • Used GIPHY to create GIF video for README.MD.
• Google Fonts:
  • Google Fonts used to style the fonts site-wide.
• GitHub:
  • All code stored and pushed to GitHub for this project.
• ImbGG:
  • ImgBB used to store some images for the README.MD.
• iMovie:
  • IMovie was used to edit the videos and music from original sources that belong to Hey Bear Sensory
• JSHint:
  • Used JSHint to validate JavaScript code.
• JQuery:
  • JQuery has been used to simplify aspects of JS code for some of the modals, the mute button and animate CSS.
• Responsive Viewer:
  • Used to check for responsiveness across screen sizes.
• Visual Studio Code:
  • Developer used Visual Studio Code for their IDE while building this website.
• W3 Schools:
  • W3 schools used for many ideas and snippets that have been tried out, modified and even discarded!
• W3C Validator:
  • W3C Validator was used to validate HTML and CSS code.

Testing

Please see the separate testing.md file for User Stories testing.

Validator testing

HTML

• No major errors returned through HTML validation however, it threw an error for video width on the win game modal (Bad value 100% for attribute width on element video: Expected a digit but saw % instead). I attempted to adjust on recommendation, however when changing the 100% to 100, the video shrank and did not fill container. I have, therefore left it as is until a suitable fix is found. I have checked across devices and the video width appears to be correct with current code.

CSS

• 6 minor text area errors were returned pertaining to the multicolortext and multicolortext-1 for the modals. The CSS validator did not like background-clip being identified as text. However, when seeking to correct, I could not find a solution to enabling the multicolor text to fire, so I have kept it the same until a fix could be identified. This shoud and could be an easy fix.

JavaScript

• No errors were found when code was validated through JSHint. It threw up warnings but, for this project, nothing that hinders JS from correctly executing. JSHint did not provide link to any validated code.

Known bugs and fixes

Known bugs

• On some mobile devices and desktop sizes the layout of the screen requires a scroll to see the scorebox and new game button.

• On some desktops, the site will not fill the screen, however, as already explained this site is intended primarily for use on mobile devices and tablets - the intention is for the game to be handheld.

• Some features are working/not working in some browsers, some of the time:

  • Chrome: Music button (mute/play) will not play music on desktop but WILL on mobile (primary device). Win game modal video autoplay does not deploy on mobile but it does on desktop.
  • Firefox: Win game modal video autoplay does not deploy on mobile but it does on desktop.

• Other browser issues:

  • Typically, people will use different browsers and will also have multiple extensions installed. There have been issues with CSS linear gradient usage on the project - when user visits the page for the first time or refreshes the page on mobile the 'multicolor text' does not always execute on mobile (see below for more details in the images provided). This is the case for Chrome, Safari and Firefox. When checking Can I Use, a search for CSS gradients does, in fact, alert to the fact that some browsers only offer partial support for linear gradients (updated and most recent versions of Chrome and Firefox do support but Safari, with version 14.1 partially supports linear gradients. I have no solution to this at this time, but I am sure that a revisit to the project in the near future will come with a fix. Examples of Chrome, Safari and Firefox:

Chrome - mobile - As you can see the user will see 'Welcome to' - it should output, 'Welcome to Guess the Fruit' (it does on tablet and desktop)

Safari - mobile - Again the full text is missing from the Safari browser.

Firefox - mobile - Lastly, the same thing again with Firefox, the full 'Welcome to Guess the Fruit' is missing.

Fixes for broken links in About Modal

• On the About modal, the links did not work initially, after researching this issue I found a solution here. It became evident that the Bootstrap modal-dialog had an attribute that disabled the links (pointer-events: none;). As in the post, I reset the CSS to .modal-dialog {pointer-events: all;} which fixed this issue.

Deployment

This project was developed using Visual Studio Code, commits to git and pushes were done using the inbuilt function within Visual Studio Code.

To deploy Guess the Fruit from its GitHub repository, take the following steps:

1. Log into GitHub.
2. From the list of repositories onscreen, please select Archierowe/guess_the_fruit.
3. From menu items near the top of the page, select the settings tab.
4. Scroll most of the way down the settings page and select GitHib Pages - click on the link.
5. In the GitHub Pages section, select the main branch from the source tab and then click save.
6. This will then deploy Guess the Fruit.
7. Select the link immediately above source section to view the site!

Local deployment

Cloning this project from GitHub - take the following steps:

1. Use this link to access the Guess the Fruit repository.
2. Next to the green Gitpod button you will see code, click on this and copy the clone URL.
3. Open Git Bash.
4. Select the directory you wish the cloned directory to opened in.
5. Type 'git clone', then paste the copied URL from step 2 above.
6. Press enter to create the clone.
7. Voila!

Should you require further info on how to do this in GitHub, then please click here.

Credits

Content

• All text was written by the developer.

Media

Images and video

• Images for game panels and music videos courtesy of Hey Bear Sensory

Audio

• Audio file for main game was sourced from YouTube free music library - track title: Fun by Vibe Tracks
• Audio file for Win game modal video sourced from YouTube free music library - track title: Diskofunque by Francis Preve

Code

• I did all I could to keep the code DRY - 'do not repeat' - became a challenge!
• Bootstrap was used for general layout - some code modified for my needs.
• Various sections of my code were inspired by many many Stack Overflow posts I read, which led me to try out various things in order to understand what I was trying to achieve. Some examples of my google searches: 'How to open a bootstrap modal using JQuery' and 'How to add an avent after modal is closed' which allowed me to figure out some JQuery code I had no knowledge of before. This led me to figuring out how to add a mute button in JQuery and other neat features I would have perhaps given up on had I not ventured into the fun of JQuery! Codepen.io Code from Saeed Salam - video mute/unmute button - modified by me for this project - many thanks!
• SetTimeout function code was inspired by W3Schools
• Parent function info was inspired by code from these posts Stack Overflow
• Code (which I modified in JQuery) for animation bounce on the main game panels was from Animate CSS
• Modified some code for flashing/blinking text for the 'Game Over' modal HTML Online
• The Highscore function was inspired by studies from this page MDN Web Docs

Acknowledgements

• My biggest inspiration, Eben - this game is for you.

• My wife, for continually supporting and encouraging me, thank you x

• Huge thanks go to Wayne and Lucie at Hey Bear Sensory for allowing me the use of their brand and images for the purpose of this project.

• Many thanks to Felipe Alarcon for his invaluable help, feedback and encouragement.

• All content included in this website is intended solely for educational purposes by the developer.