This memory game was planned and coded with my daughters and every other girl (and boy!) in mind. Statistical sciences, like many other disciplines in Science, Technology, Engineering and Mathematics (STEM) are still very much male dominated and I wanted to show that success and great performances are possible for women by designing this game around eight women who were trailblazers and outstanding contributors to Statistics. All of them succeeded at a time when the profession was even more unfavourable for female - or indeed any other under-represented - voices than it is today. They all blazed the way despite the considerable odds against them - hence my title.

It has been created for entertainment and educational purposes for all ages from six onwards. Using images from the public domain as card faces, the game allows players to match two cards of the same character image in pairs (and eight pairs in total) before the timer reaches zero. If the user wins against the clock, s/he will be redirected (on click) to a prize page: an image gallery comprising portrait, name, date of birth, and brief caption with biographical information - with opportunity to click on link for further information - for each of the eight statisticians.

The game is designed for all age groups but in terms of difficulty level targets children between 6-14 years of age primarily. I expect different user groups to have the following expectations when they come to the site:

As a general user, I would like to:

• enjoy a simple memory card game with a visually appealing format and uplifting music.
• enjoy learning something meaningful while playing a game.
• play a game that does not take too long but posits a small challenge.
• be able to track my progress.
• practice my memory skills.
• enjoy a simple memory game that provides a 'reward' for completion and let's me learn something.

As a child (age 6-14), I would like to:

• easily navigate around the game and understand all commands and messages.
• play a game that is inuitive.
• play a game that is fun and looks nice.
• play a game that rewards me for winning.

As a parent, I would like my child to:

• play a game which is safe to use in terms of content.
• play a game that is sufficiently challenging without causing frustration due to too great a level of difficulty.
• play a game which enhances their memory skills.
• play a game that teaches something about the world.

Colour Palette

Color composition was inspired by this 1980 picture of two statisticians - Margaret Martin (left) and Helen Walker (who is included in the memory game).

On Coolors I was able to add matching colors to the above and create the following palette which is used throughout this project:

The red (#E63946) is obviously different from the above of Martin's outfit but its bright, almost shouty tone served well to symbolize the breakthrough these women had achieved in a blue (male) dominated environment. Overall, I felt these colors complemented each other well and were fun, bright and vibrant in keeping with the aesthetic I was aiming for, and which is also reflected in the jolly background music.

Icons

For the back of the cards, I chose two icons which represent the topic as best as possible: the gender symbol for female and the 'bell curve', a visualisation of the normal distribution for a variable. The term 'bell curve' originates from the fact that the graph used to depict a normal distribution consists of a symmetrical bell-shaped curve. Since both icons represent the respective field this game is about - women and statistics - in a common and popular way, I felt they should go on the back of the cards. Custom cursor icon takes up the female symbol on hover over the cards.

Typography

I chose Syne Mono for the entire project because I liked the aesthetic and thought that the way its creators described it as giving the "type's contours a unique treatment, mixing arcs and straight lines in a completely unorthodox and vivacious way...[integrating] a desired lost [sic!] of control, an aceptance of error..." speaks to the topic of this game which is 'against the odds', breakthrough, change, and difference.

Animations

I added animations on hover on the back of the cards to alert the user that these can be clicked. The change of size of the cards on click simulates the grasping of a card just before it is flipped. The shadows on hover behind the portrait images on prize.html is just a nice addition to make it a little more 3D.

Sound

I loved the idea of a game with sounds and feel the background music conveys a happy and fun atmosphere for playing the game while also pushing the user to finish in time as the beat is exactly in tune with the decrementing seconds. The flip sound for the cards adds a real-world experience of playing cards for the user, while the hand bells on matching is a nice addition to alert the user to his/her success. The victory fanfare constitutes a neat yet solemn break with the background music, while the Tom & Jerry-like game-over sound really drives the message home to the user: you are out.

Wireframes

I used Balsamiq to create three wireframes, for mobile, tablet, and desktop, which can be seen here:

As can be seen, the 'game over' overlay was added for the desktop view whilst the 'click to start' as well as the 'victory' and 'prize' overlays were sketched out as a comment in the original Balsamiq wireframe. The prize page (prize.html) was added after I realized that a portrait gallery of all eight protagonists would be more informative and appealing to the user than a 'prize' overlay with a link to just one or two statisticians, as I had originally planned.

index.html

• Game titles: identify the topic and the type of game with brief game instructions.
• Click to Start overlay: starts the game, timer and background music as and when the player is ready.
• Footer: contains basic copyright information.
• Flip counter: counts the number of flips a user has made, allowing them to track their progress and compete for the lowest number of flips.
• Timer: displays the time remaining for the user to complete the game.
• Game board: displays the game cards face down ready to be clicked.
• Game cards: interactive on hover on the card back, their card face contains the portrait images to be matched by the user to win the game.

sounds

• Background music: starts with click to start and ends with either 'victory' or 'game over'.
• card flip: triggered with every card flip and sounds as if a game card is manually flipped.
• Game over: triggered when timer runs out before the cards have been matched.
• Victory: triggered when all cards are matched before the clock runs down to 0.

win/lose overlays

• Victory overlay: triggered when the user wins the game by finding all the matching cards within the alloted time. Winner can click on a button to be redirected to prize.html.
• Game Over overlay: triggered when user loses the race against the clock. User can click on button to restart another game.

prize.html

• Prize title: gives user the option to learn more about the eight women trailblazers or click a button to restart the game rightaway.
• Portrait gallery: contains the same images as on the memory cards but with information on name, date of birth/death and a brief image caption with the possibility to click on a link for further information about the respective person.
• Footer: contains basic copyright information.

• Add difficulty levels for the user to choose from (easy, medium, hard) with more cards and/or less time to complete the game.
• Star rating (from 1–3) that reflects the player’s performance based on number of moves made.
• Add modal or HTML elements to 'Victory overlay' to show user how much time he/she took, and star rating.
• An animated image overlay with captions was planned as part of the cardMatch(card1, card2) function. I had started to read up on the data-*attributes with which I planned to target the overlay, but I found this too difficult to implement within the time at hand, especially because sixteen cards needed to be matched into pairs and thus animated, and the imagecaption overlay needed to be undone after every game over or victory.
• Make mute button functional via JS which will allow player to mute/unmute music in case his/her game is interrupted by another activity which briefly requires attention.
• Make pause button functional for the player to pause/resume the music in case his/her game is interrupted by another activity which requires full attention.

• The wireframes for this project were drawn up with Balsamiq

• The Syne mono font is drawn from Google Font.

• Coolors was used to generate the color palette.

• The Favicons have been created with Favicon.

• Custom cursor icon is from RealWorld Graphics.

• Code for shadows behind portrait images on prize.html is taken from Codepen.

• GitHub and Gitpod were used to host the software development versions and to create and save the code respectively.

• Chrome DevTools built directly into the Google Chrome browser were used constantly thoughout the development cycle to test responsive design and diagnose problems.

• I used W3C Markup Validation Service for both HTML and CSS to run my code looking for errors.

• Jshint to validate my JavaScript code.

• Lighthouse to test the performance of the website.

• AmiResponsiveDesign to test responsive design on various devices.

• Autoprefixer to ensure vendor prefixes for all broswers were added.

• Mute/unmute and play/pause icons, as well as bell curve on back of the cards was purchased from TheNounProject.

• Imgur to store external images for README.md

Automated and manual testing were conducted during this project.

1. I used the W3C CSS Validator and the W3C HTML Validator which respectively returned:

and "Document checking completed. No errors or warnings to show" for both html pages.

2. I used AmiResponsiveDesign to create this test result for index.html.

As can be seen, all pages, overlays, and icons performed as expected on all devices (with the exception of the start overlay on mobile phone).

The application is also responsive in mobile phone size.

prize.html

This page cannot be accessed via URL so testing via software is not possible, but the following screenshots prove media responsivness:

At 1000px width

At ipad size

At mobile phone size

3. JShint was used to validate JS

• no major errors found, as can be seen from result:

Lighthouse was used to test the performance of the application on both pages (index.html and prize.html) on mobile and desktop.

The following reports were generated:

index.html - Desktop:

1. SEO Report indicated:

"Does not have a meta name="viewport" tag with width or initial-scale"

• I added that in the head elements.

"Document does not have a meta description"

• I added meta name="Description" content="" providing a summary of the page content.

2. Accessibility Report stated:

"Heading elements are not in a sequentially-descending order"

• I replaced "h4" in the footer with a "h3" to avoid anti-pattern and use a correctly sequenced heading structure from h1-h3 instead.

"Buttons do not have an accessible name". Issue refers to button#soundToggler.btn.soundOn and button#playToggler.btn.gameOn.

• I tried to address this issue by changing the id to soundbtn and playbtn but issue persists. I will rectify it when I come back to the entire sound control issue at a later stage.

3. Best Practices Report said:

"Displays images with incorrect aspect ratio" which concerns some of the portrait images and especially the female icons on back of cards.

• I lost points here and will probably have to insert an image CDN at a later stage to rectify.

"Charset declaration is missing or occurs too late in the HTML"

• I moved the meta charset="UTF-8" element right after the head element.

Lighthouse report is now as follows

prize.html - Desktop:

Generally, as prize.html page can currently only be opened via the victory overlay on index.html, Lighthouse indicated that: "There were issues affecting this run of Lighthouse: Chrome extensions negatively affected this page's load performance. Try auditing the page in incognito mode or from a Chrome profile without extensions."

1. Best Practice Report indicated that:

"Links to cross-origin destinations are unsafe"

• I added rel="noopener" to all eight links to meet requirements of cross-origin destination audit.

"Charset declaration is missing or occurs too late in the HTML"

• I moved the meta charset="UTF-8" element right after the head element.

2. Performance Report said that:

"Image elements do not have explicit width and height Set an explicit width and height on image elements to reduce layout shifts and improve CLS."

• I addressed this issue by manually reiszing all images using free and open-access Picresize software as I have a responsive grid which would not allow specific image dimensions. But the issue persisted and I lost points here as even although images now are all same height and width, this was not achieved via setting an explicit height and width on image elements in CSS.

2. SEO Report flagged out that:

"Does not have a meta name="viewport" tag with width or initial-scale"

• I added that in the head elements.

"Document does not have a meta description"

• I added meta name="Description" content="" providing a summary of the page content.

"Links do not have descriptive text"

• I changed clickable link text from 'here' to more descriptive language for both users and search engines to more easily understand content and how it relates to other pages.

3. Accesibility Report stated:

"Heading elements are not in a sequentially-descending order"

• I replaed "h4" in the footer with a "h3" to avoid anti-pattern and use a correctly sequenced heading structure from h1-h3 instead.

Lighthouse report is now as follows

A few opportunities to improve Performance and Best Practices of both pages remain and will be addressed at a later stage:

• Performance of both pages:

"Eliminate render-blocking resources"

"Serve images in next-gen formats"

"Image elements do not have explicit width and height"

• Best Practices in both pages:

"Browser errors were logged to the console" which concerns an issue with link rel="manifest" href="/site.webmanifest" which I was unable to resolve.

The application was tested across Google Chrome, Firefox, Microsoft Edge, and Safari browsers to ensure everything worked as it should and to identify issues/bugs.

Developer tools in Chrome were also used during the creation phases for the various viewport sizes.

Game Functionality

I played the game repeatedly to test functionality and invited the entire family and some of my friends to play and test. The game has thus been played by user aged between 6 and 64. Collectively, it was shown that:

• game is winnable within the allotted time for young and old,
• timer and background music starts when Click to Start overlay is clicked,
• matched pairs are disabled and cannt be clicked again,
• if pairs are matched, bell sound is triggered (although intermittently only),
• repeated clicks on matching pairs does not effect click counter and matched cards are only counted as one match,
• time running out before all pairs are found triggers Game Over Overlay and Game Over Sound,
• matching pairs stay face up,
• flipped card stays face-up and cannot be clicked again,
• cards stay face-up long enough for user to see images,
• flipped cards that are not a match return to default position face-down,
• all pairs found within allotted time triggers Victory Overlay and Sound,
• timer stops when game is won,
• user can proceed via Victory overlay to prize.html,
• from prize.html user can click back to restart the game.

Now we can come back to some of the user stories mentioned above (2.1) to see how the requirements have been met:

• "As a general user, I would like to enjoy a simple memory card game with a visually appealing format and uplifting music."

  • The color palette as well as several hover-over features and sound animations, combined with a meaningful content, make this a fun game to play.

• "As a general user, I would enjoy learning something meaningful while playing a game."

  • The game contains images of hitherto under-represented female statisticians who had a significant impact on the field of statistics and beyond.

• "As a general user, I would like to be able to track my progress."

  • The timer and flip counter allow users to track their progress throughout the game, as can be seen here

• "As a general user, I would like to practice my memory skills."

  • Playing a card matching game can help improve memory skills.

• "As a general user, I would like to enjoy a simple memory game that provides a 'reward' for completion and let's me learn something."

  • The game does not just end on 'Victory' but provides a prize site with useful further information on the topic for anybody who would like to know more, as can be seen here and below

As a child (age 6-14), I would like to:

• "easily navigate around the game and understand all commands and messages."
  • Navigation through this game is clearly defined through colours, buttons, and other layout features.
• "play a game that is fun and looks nice."
  • Bright, vibrant colours, interesting images of female characters, music, and animations make this a fun game to play whilst the running clock adds a bit of thrill and challenge

As a parent, I would like my child to:

• "play a game which is safe to use in terms of content."
  • All content is safe to use and highly interesting, especially for older children and adults with an interest in science and gender.
• "play a game that is sufficiently challenging without causing frustration due to too great a level of difficulty."
  • The amount of cards and the race against the clock add difficulty to the game, whilst training memory and visual skills.
• "play a game that teaches something about the world."
  • Anybody who cares to read on (on prize.html) about these outstanding women will notice that they all have been mentors and inspirations to generations of statisticians - both male and female - and are role models for us today.

1. Resolved Bugs

Browser Testing

In Safari and Firefox, the time ran twice as fast taking away two digits every second from the timer and it would run into negative time (below zero) after 'Game Over'.

Additionally, in Safari, all cards were shown card face up (visible) by default, and in MS Edge the game would start with the wrong overlay visible. Music would not start playing in neither of them.

All of these issues were resolved by:

• moving the script src="assets/js/script.js" async></script from the header of the HTML pages to below the footer inside the body tag.

• using Autoprefixer CSS online to add relevant vendor prefixes to CSS.

In the coding process, I encountered a number of minor bugs such as absent or inconsistent camelCases, or capital letters at the beginning of a variable.

As my .wav files threw 404 errors in the console, it was also important to learn that JS file paths, other than those in CSS, work better without '/' at the beginning, as JS files "think" it's already in the main root-level, so one just targets direct source. In CSS, '../' at the beginning of file path seems least error-prone.

Here are some of the more substantial bugs I encountered and my approach to fix them:

• used to getElementsByClassName without supplying index until I noticed and added [0] to the end of className. It must be [0] as it is a zero-index starting with 0, targeting only 1 card:

getCardType(card) { return card.getElementsByClassName('card-value')[0].src;

• When coding the play/pause and un/mute functions, I initially did not insert the corresponding methods in my AudioController class to the effect that they were not called.

2. Persisting bugs

• bell sound when cards matched sounds irregularly only;
• Game Start overlay on mobile device not fully responsive;
• sound and mute button do not work yet as I failed to link up the JS for these buttons to target my bgMusic which is always already playing when user clicks on Game Start overlay. The mute() and playPause() functions I coded both started the background music (the mute button on second click) in a second loop over that already playing and in the end I failed to solve the issue before submission was due.

1. I created a Github account under JochenFM

2. I committed and pushed all files for this project to my Github repistory Milestone2

3. To make my website live and working for other people to look at, I followed the steps outlined here: In my repository, I went to 'Settings', then scrolled down to 'Github Pages'. Under the Source setting, I used the drop-down menu to select 'master branch' as a publishing source and saved it. Upon refreshing the github page, I was issued the url where my page is published, namely "Your site is published at https://jochenfm.github.io/Milestone_2/"

To pull my code from my Github repository to run it on another machine, one would go to my repository and on the main page one would then click the green button 'Code' with a downward pointing arrow, on the right hand side just above the files. This button will give options to 'clone with HTTPS', or 'Open with Github Desktop', or 'Download ZIP'.

To continue with cloning, one would then:

• open Git Bash,
• change the current working directory to the location where one wants the cloned directory to be made,
• type 'git clone', and then paste this URL; https://github.com/JochenFM/Milestone_2
• press 'Enter' to create the local clone.

See also here for more information on the process.

To run this project locally, proceed as follows:

To clone this project from GitHub:

1. click the link to the Against the Odds repository;

2. in the menu, click Code button;

3. in the pop up window, choose HTTPS and copy the clone URL for the repository;

4. in your local IDE open Git Bash;

5. Change the current working directory to the location where you want the cloned directory to be made;

6. Type git clone and then past the URL you copied in step 3;

https://github.com/JochenFM/Milestone_2.git

7. Press Enter. You local clone will be created.

Alternatively, you can download the ZIP folder of this project by clicking the Code button and selecting Download ZIP.

It can then be unpacked into your desired location.

Open the index.html file to run the project locally.

Check out further information on cloning a repository from GitHub.

All text for this project was written by the developer.

• Portrait images on card faces and image gallery were sourced from wikipedia. Picture by Walker and Martin inserted here above is from this 2011 issue of AmstatNews, the membership magazine of the American Statistical Association.

• All sounds were acquired from this repository and from freesound.

• Memory game tutorials on the web, especially by WebDevSimplified and PortEXE were a tremendous help. PortEXE does a great job explaining some of the key functions for this game such as shuffle() based on the Fisher-Yates algorithm, for instance. Marina Ferreira's tutorial is also handy, especially where the two deviate which helps in understanding better the underlying logic of some functions.

• Sandra Israel-Ovirih's tutorial provided further helpful explanations.

• Page redirect between index.html and prize.html in JS was taken from tutorialrepublic and edited to suit my needs.

• Centering the mute and play buttons horizontally and vertically is inspired by w3schools.

• The idea for active card on click is from Marina Ferreira (from 11:33min)

• Thanks also to tutors Samantha Dartnell, Alan McGee, and Michael Park for going with me through the play/pause and un/mute functions in JS even although issues persisted, to Tim Nelson for for invaluable help in solving 404 errors of my sound files, and to Johann Alberts for giving me the right clues for solving CSS issues with cursor and portrait gallery in prize.html. Thanks also to my fellow students on Slack, especially those who also coded memory games in the past.

• A special thank to my mentor Adegbenga Adeye for commenting on earlier versions of my code and especially for going through some tricky JS issues with me.