This game was developed to challange your knowledge with fun fact about Christmas. Its a combinations of a memory game template but instead of pictures when a card is clicked you trigger a question quiz, which makes more exciting when playing bacause you can get to pick easy questions or really difficult ones. Chellange your friends and have a fun Christimas!! Ho Ho Ho
- Quiztimas
- Contents
- THANK YOU!
i. As a First time user I want to be able to intuitively learn how to play the game without even reading the Game.
ii. But if needed check the Rules and see if its clear.
iii. I might have to contact the developer for any bug or leave a message.
iv. Have fun!
i. As returning user I want the be able to play the game straight away.
ii. Check if there is anyupdates to the game.
iii. Have fun!
i. As frequent user I want the be able to play the game straight away.
ii. Check if there is anyupdates to the game.
iii. Have fun!
-
The wireframes for QuizTmas were produced in Balsamiq. There are frames for a full width display and a small mobile device. The final site varies slightly from the wireframes due to developments that occured during the creation process.
- The QuizTmas game was structured in HTML in 3 different pages: Play, Rules and Contact. All the styling was developed in CSS and the logic in vanilla JavaScript. Its a combinations of a memory game template but instead of pictures when a card is clicked you trigger a question quiz, which makes more exciting when playing bacause you can get to pick easy questions or really difficult ones. The effects and transitions combined with modal popup engine makes the whole experience more pleasant and a feeling of well built.
-
The idea of the design of the game was to blend a memory game template but instead of pictures when a card is clicked you trigger a question quiz, which makes more exciting when playing bacause you can get to pick easy questions or really difficult ones, full of animatinos in 3D and smooth transitions to make the UX even more seamless and intuitive.
-
- Mountains of Christmas font from Google Fonts
- Wix Madefor Display font from Google Fonts
-
The Play Page is also the landing page, where the user can easily learn and understand the website. It consists with a TOP Link over the "QuizTmas" title, a navegation bar that directs to the differents pages and the Play Area. Where the user car see 25 different cards also a Tally area, where all the right answers, wrong answers and number of questions already answered. Can game is very intuitive smooth to play. All the style choices where made based on Christmas theme, to make it more fun, enjoyable and exciting.
Once you click in on of th cards a moldal popup pops and display a random question from a pool of 50 different fun facts questions about Christmas. The modal pop up design is user friendly and easy to understand how to play. A timer starts to countdown from 15 seconds for the user to pick one of the questions.
The answers buttons display 4 buttons. Three of them are wrong answers and only one is right. If the right answered is picked it will turn the button into a green color. If the wrong answers is picked, is will turn the button into a red color and display the right answer in green color as the countdown timer stops and a next button is displayed to close the modal popup and allow the user to go back to the play area and pick another card.
If the user does not manage to pick a answer in time. a alert is displayed with a "TimesUp!" message. And a wrong answers will be incremented.
Hidden Cards
Every time the user picks a card. The card will desapear so the user knows the ones already picked and the ones left in a very interactive proposal.
Once the user picked 10 cards a Game Over message will display and show the amount of correct answers wrong answers. Also a restart button the will reload the page and restart the game.
It's a simple page where all the rules are explained to the user, easy, clear and simple to understand.
Contact page the user can reach the developer in any of the three links provided that will open in a different tab for better UX.
We want to implement 2 different surprise cards. So everytime the user picks a card he can either pick a Santa Claus picture, a Grinch picture or a question. If the user picks a Santa Claus it will give him a 2 points Bonus. If the user picks a Grinch card it will lose 3 points, and if the user picks a question he has a chance either to win one point by picking the right answer or lose a point.
The game was tested in differents
- Tested in differents mobile devices and web browsers
- Tested using the CCS validador
- Tested using the HTML validator
- Tested using the JsHint Validator
- Tested using the Lighthouse dev tool from Google Chrome
You can see the reports below as mentioned before:
Css validator report
HTML checker report
Jshint report
Lighthouse dev tool from Google Chrome Report
| Test | Action | Success Criteria |
|---|---|---|
| Landingpage loads | Navigate to website URL | Page loads < 5s, no errors |
| Links | Click on each Navigation link | Correct section is redirected action performed |
| Gameplay | Click the cards, answers buttons and counting the right, wrong and number of questions | The game is working as it should with no errors and malfunction |
| Responsiveness | Resize the viewport window from 320px upwards with Chrome Dev Tools. Use Responsive Design Checker to test various mobile, tablet, and large screen sizes | Page layout remains intact and adapts to screen size |
| Different web browsers | Runned the game in Google Chrome, Mozilla Firefox and Internet Explorer | Game works responsive and layout remains intact no errors or bug detected |
| Different screen devices | Runned the game using a Samsung Galaxy s20 and Iphone 13 | Game works responsive and layout remains intact no errors or bug detected |
Debugging and troubleshooting were done constantly throughout development, however still a problem with the website:
When the user reaches the 10th question and tries to open the a new card the Game Over message appears on the modal popup but in the top right corner it counts as a "question" as displayed in the image below. One of the solutions would make the modal popup bigger when the message is displayed so it would cover the tally area. But I was not happy "hiding" the bug, I wanted to have a proper and better idea of solution, but unfurtunatly haven't managed the time to review the code and re-design a best solution yet.
I used the following technologies, platforms and support in building my project:
- Wireframes and mockups were designed in Balsamiq
- The website is built with HTML, CSS and JavaScript.
- The Code Institute modules/lessons aided my learning and many of the concepts learned were applied in this project.
- GitHub was used for the project repository.
- Google Fonts was used for all fonts on the site.
- FontAwesome was used for the social media icons which then had additional styling applied to them.
- Colors CO was used to create a colour pallete for this readme file.
- Adobe Colors and contrast was used to pick color and check if the contrast was good enough for users.
First of all you need to have a GitHub account, I choose GitHub because it's free and easy to create a repository to host your code and share with others.
-
To create a repository you just need to go to the main page at the top right you will see a "+" button just click here and then new repository
-
Select the name of the project and a description make it public and then create a repository
-
Once you created your repository go the settings section and then click on pages
-
Select the Branch as main and then save it.
-
Finally, your repository is deployed and it should show you a link so you can share it with others.
- Code Institute - JavaScript Module and Tutor Support.
- GitHub - for deployment and host.
- GitPod - for IDE and editor of the code.
- Precious Ijege - Mentor helping with insights and coding fix.
- CSS Tricks - learn how to style better in CSS.
- Jot Form - learn how to create and style forms in html.
- HubSpot - learn how to use Google Maps API.
- W3 Schools - used for multiples researches and tutorials in HTML and CSS.
- Color Hunt - used to select colors of the project.
- Mmdn Web Docs - learned how to remove html elements using DOM.
- Favicon Generator - used to generate a favIcon.
- Chat GPT - used to generate the pool of 50 themed questions and answers.
- FreeCodeCamp - Watched tutorials how to make flip card effect.
- Easy Tutorials - Watched tutorials how to make buttons for quiz answers.
- Web Dev Simplified - Watched tutorials how to make modal popup.
- The WebShala - Watched tutotirals how to make questions shows randomly.
- Pexel - for images and photos.
- iStock - for images and photos.
- TinyPNG - resizing images.
- Adobe Color - used to check contrast between the colors picked for project.
- Colors CO was used to create a colour pallete for this readme file.
- Balsamiq - used for wireframes.
- Font Awesome - used for icons.
- Google fonts - for fonts used in this project.
- Am I Resposive - for the Hero image in the ReadMe file.
- ConvertIO - used to convert all the photos to webp format file.
This project definetly challenge my skills, I've learned so much throughout the process and can say I have a feeling of acomplishment from what I knew when I started this project and from what I know now. It definitly helped better understand concepts in coding also expand my knowledge in JavaScript. It was fun and enjoyable to built this game, I wan to thanks my mentor Precious Ijege for the support, help and guidance during the project.
by Cesar Garcia