This browswer-based game is simply called Flash Card Memory Game. It's a little game to test your memory on a given topic. You will have a card displayed with a question that you must answer via the radio options. Your score will be kept so you can see how many cards you have gotten correct. If you can get every single question correct, a congratulatory message will display at the end. If you cannot get every answer correct, a "Better luck next time"-esque message will display at the end and you will have the option to restart if you so please.
Play along and see if you can get all of the questions correct! Good luck!
Screenshot of active gameplay
Optimized for mobile play
- HTML
- CSS, flexbox, css:selectors
- JavaScript
To install this repository:
- If you would like to fork the repository so you have your own copy, feel free to!
- Click on the green "Code" button.
- Copy either the HTTPS or SSH link that is provided
- Open up the Terminal and navigate to the desired directory location
- Once inside, use the code "
git clone
copied_link_here" - Once the repo has been installed, change into the directory with
cd flash-cards
- From here you can run
code .
to open it up in VS Code
The Questions/Answers are populated dynamically, so if any are added or removed, the score count and card count will update accordingly.
- As a player, I want a description of the game, so that I know what to do during play.
- As a player, I want to be able to see both the front of the card and the back, so that I know if I am getting the answer correct.
- As a player, I want a "Restart" button, so I can restart the game at any point.
- As a player, I want a scoreboard, so that I can keep track of my points.
- As a player, I want to see what the correct choice is, so I can compare and learn more.
Wireframe of game (drawn out in a notebook)
Start the game
Gameplay example
Gameplay - Correct/Incorrect Answer
Game End - Win/Lose
- As a player, I want to see which card I am currently on, and the total amount of cards to go through.
- As a player, I want to be see animations when I flip the card over for the answer.
- As a player, I want the background color to change, indicating if I got the answer correct.
Example of a card with a counter above the card indicating the card number witin the "stack".
- As a player, I want to be able to preview the answer before selecting my answer.
- As a player, I want to have a dark theme, so I can customize the gaming experience.
- As a player, I would like the dark theme to have a toggle so I can switch back and forth at my leisure.
Example of a Dark Theme toggle switch
Example of a Dark Theme during regular game play
Examples of a Dark Theme when you win/lose the game
The big thing that took a while to complete was figuring out the game win/lose logic. At first I wanted to compare the
scoreCount.innerText
to the length of theQUESTIONS
array, but that was not giving me the necessary output. I managed to overcome that by using:
if (scoreCount.innerText === `10/10`) {
winningPage();
} else if (
scoreCount.innerText !== `10/10` &&
cardCounter.innerText === `10/10`
) {
losingPage();
}
The dark theme switch has also proven to be a challenge. Currently it works, but I plan to squash the bugs in a later update. Right now, the switch changes the HTML link to a./css/dark.css
, but the logic within./script.js
has a few problems with implementing the switch. Primarily when a question has been answered, but the "Next Question" arrow has NOT been pressed, and the user would like to switch themes, the result is the background not switching from light to dark on "correct" or "incorrect" answer pages.
I plan to fix the theme switch problem by implementing an object inscript.js
that will hold all of the necessary colors and will be accessible during the switch.
UPDATE: The theme switch toggle has now been fixed. The solution was to create separate classes within each CSS file to set the background to a certain color. Example:
.correct-question {
background: #bce8c1;
}
This allowed me to activate each color within JavaScript using the classList.add/remove properties to set the background color of the body.