Morse code Learning Game

View the live project here.

This is a memory game with an objective to spark some interest and teach a bit of Morse code. It is designed to be responsive and accessible on a range of devices, so it's easy to play on the go.

User Experience (UX)

• User stories

  • As a First Time Visitor, I want to :

    • be able to easily navigate throughout the site
    • have all content accessible through the menu without the need to use the browser back button
    • have an interactive experience with the content
    • be able to run the game from the pc or a mobile device without losing on any futures

  • As a Returning Visitor, I want to :

    • be able to have access to enough content that will keep me engaged for a longer period

• Design

  • Color Scheme

    • Colors used for text are b&w on b&w and Sephia backgrounds to have a vintage theme, buttons are colorful for contrast.

  • Typography

    • The Lato with a fallback to Sans Serif font is used on the whole website.

  • Imagery

    • Images used are representative of the Morse Code theme and are black and white/ Sephia effects.
    • Black morse code image added and positioned on black and white parallax image to accentuate the effect and it's not intended to be visible and clear.

• Wireframes

  • Destop/Mobile Page sketch - View

  • Navbar sketch - View

Features

• Responsive on all device sizes.

  

• Interactive elements in form of a card turning memory game with added sound for complexity

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
3. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
4. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
5. Photoshop:
   • Photoshop was used to create the logo, resizing images and editing photos for the website.
6. Jasmine
   • Jasmine is a behavior-driven development framework for testing JavaScript code.

Testing

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

• W3C Markup Validator - Results
• W3C CSS Validator - Results

Testing User Stories from User Experience (UX) Section

• Jasmine testing

• Successfully tested getgImage() and getSound() function in number and letters scripts: (https://xz3t.github.io/milestone-2/spec/card-game.html)

First Time Visitor Goals

• As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

  • Upon entering the site, users are on the homepage with a clean design, with a navigation bar and 3 buttons to what-is/rules and the game itself.
  • The user has two options, click the call to action buttons or scroll down, both of which will lead to the same places.
  • At the bottom of the viewport there is a navigation menu to ensure the user has always access to all areas of the page.
  • At the bottom of the page it is the game.

Returning Visitor Goals

• As a Returning Visitor, I want to find more challenges.

  • These are 3 versions of the game with Numbers/Letters and Punctuation that combine in a total of 53 different cards.

Further Testing

• The Website was tested on Google Chrome, Opera, Microsoft Edge, and mobile Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone5S, iPhone 6, Nokia 5 & Pixel3a.
• Friends were asked to review the site and play the game to point out any bugs and/or user experience issues.

Known Bugs

• game is responsive down to 320px but would be better enjoyed on a bigger screen
• on smaller screens, the bottom menu will only contain icons without text, for the users that will not venture to discover the buttons, the win screen contains links to all 3 variations of the game.
• by default sound will play as loud as the device is set up, mute button available
• a delay is present between click for sounds that will stop the user from hearing overlapping sound but will not play second one after the first one is finished.
• link in Morse code left as the line without styling to get people to click on it, but it is just getting to the page it can be translated without copying itself to buffer.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Credits

Code

• Bootstrap4: Bootstrap Library used throughout the project mainly to make the site responsive using the Bootstrap Grid System.

• The starting point of the game script was taken and adapted to project needs from (https://github.com/SanderCokart/javascript-memory-game)

Media

• All Images card images were created by the developer.
• Sounds were downloaded from wiki page on morse code
• other images used in project:
  • background image no 1
  • background image no 2
  • background image no 3

Acknowledgements

• My Mentor for continuous constructive feedback.

Links:

https://www.w3schools.com/howto/howto_css_parallax.asp

https://en.wikipedia.org/wiki/Morse_code

https://github.com/SanderCokart/javascript-memory-game