- Planning
- Design
- Existing Features
- Future Features
- Technologies Used
- Final Design
- Deployment
- Testing
- Credit
Become Millionaire game app is design is influenced by actual famous game "Who wants to be a Millionaire". Same concept and theme is being try to recreate but with some convenient steps. Game has questions and four answer options, two lifelines and a progress ladder to highlight the winning score. Rules button and some message will be shown on screen when require. Some visual hover effects and sounds have been added to make the game more engaging and interesting. Questions are based on general knowledge so any one can play it and enjoy it.
Actual plan was created a JavaScript question game but later on it was changed to general questions so that anyone can play and enjoy the game. Winning money factor has been added to motivate the user to play and win more money.
- As a user I want to be able to play a fun and engaging game.
- As a user I want to test my general Knowledge about the world.
- As a user I want to intuitively navigate the site without confusion.
- As a user I want to be able to see a running score/prize money as the game progresses.
- As a user I want to see my final winning amount when I have completed the quiz.
- As a user I want to see if any help/hint available for me to complete the quiz and win as much as possible.
- As the site owner I want to offer a Welcome Page.
- As the site owner I want to provide a fun and engaging quiz for the user.
- As the site owner I want the user to be able to replay the game multiple times.
- As the site owner I want to questions to appear randomly and different for the same level to make it more engaging.
- The website should have a link to the home page visible at all times so the user can reset the quiz without using browser navigation buttons.
- The website should have a welcome message for the user that concisely describes the purpose of the site.
- The website should be visually appealing to the user and be styled in a way that is relevant to the Who wants to be millionaire theme.
- The website should keep a running total of the user's winning amount and display this to them in the progress ladder on the right.
- The website should let the user know whether they have selected the correct answer or not.
- Game should finish once user give the wrong answer.
- Every time the user gives wrong answer and game finishes, they must have choice to start the game again.
(This is a single page game, with a welcome Page and 404 page. Messages are shown on click of buttons in form of Modal and are hidden or displayed via display: flex/none css)
- Site logo/title
Home Page
- Welcome message to the user.
- Site Logo
- Start Quiz button to start the game
- Rules button to explain the games rules to user/player
Quiz page
- Home button will take user to Welcome page.
- On click of Rules button on the page a modal appears and briefly describes quiz.
- Different sounds has been added for the right and wrong answer and sound button can be used to toggle on/off the sound.
- Who wants to be a millionaire logo/image for aesthetic.
- Randomly generated question with four answer buttons(with hover effect) to select from.
- Progress ladder/bar on the right to show the winning amount.
- Lifeline 50-50 to help the user for answer the questions. it will remove 2 wrong answers.
- Lifeline Audience Poll will highlight the right answer in green colour.
End game Modal/Pop-up
- popups will appear if the wrong answer selected to 'Start again' button to encourage user to restart the game. Exit Game button will redirect the user to Welcome Page.
- Modal will show your winning amount with a congratulations message.
Lifeline used Modal
- It shows the message lifeline has already been used, if user try to take it's help more than once.
404 Page
- 404 Page with the logo.
- Error Message.
- Return to home button to go back to the Welcome Page/Home Page
HomePage:
QuizPage:
404ErrorPage:
Very less colours are used so that quiz looks neat and tidy. Color Adobe is used to create the color pallete. contrast of color is good. Only first two colors purple and white is used as site colors. Red and Green color is used to highlight the wrong and right answers respectively and Golden color is used to show the progress.
Font for the quiz is used 'Segoe UI'. Different font size is being used between question and answers to differentiate but same font.
In total only three images are used in the quiz. One for logo and favicon and two images of phone and audience for two life lines respectively.
Image Sources
WhoWantsToBeMillionaireLogo
- Title/logo
- Start Quiz button
- Rules Explained Modal is used to describe the rules of the game on the click of rules button on the top of page.
- Home Button Home button will take you to the welcome screen page, in case anybody wants to go.
- Rules Button Same rule button is given on quiz page as well for convenience.
- Sound On/Off Button
Correct answer and wrong answer sound has been added, which can be which can be toggle on and off by the user for their preference.
- Quiz questions and answers
Questions are pulled from the defined list of 12 sets with 3 questions in each set.
Answer buttons highlight when hovered over (large devices) to create positive UX.
Score/Prize Money increments with every correct answer.
After user has selected an answer, if the answer is correct then new question appear and progress bar get updated as in previous image. If the answer is wrong then selected answer get highlighted with red color and right answer with green color. screen freeze and this is end of game.
Just after 1 second a modal appears and indicate Game End. It shows the prize money, congratulate the player and give option to play again.
There are 2 lifelines are provided to help player, called '50:50' and 'Audience'. These will help user to figure out the right answer and win maximum money they can.
Lifeline Fifty-Fifty On click of '50:50' two actions occur.
- Two random wrong answers get deleted and player is left with only 2 choices to select from including the right one. It makes game easy for player.
- Button itself get faded to indicate that it is used.
Lifeline AudiencePoll On click of 'AudiencePoll' lifeline two actions occur.
- Right answer will get highlight with 'Green' color.
- Button itself get faded to indicate that it is used.
- If you try to use any of the lifeline again during the same game. It shows a message "Lifelines can be used only once".
- Logo
- OOps... Message
- Return to home button
Quiz Page
- I would like to include some sort of animation when user win £1,000,000.
- I want to add the third lifeline Phone a Friend like actual original game.
- I would learn and add keyboard Navigation for my quiz.
- HTML5
- CSS3
- JavaScript
Balsamiq - Used to create wireframes.
Github - To save and store the files for the website.
Google Fonts - To import the fonts used on the website.
Font Awesome - For the iconography on the website.
Bootstrap Version 5 - The framework for the website. Code for the navigation bar, carousel, cards and form were used and modified. Additional CSS styling was also implemented in style.css.
Favicon.io To create favicon.
Color Adobe To create the color pallete
Convertio - To covert MP4 sound to MP3 sound.
Am I Responsive? To show the website image on a range of devices.
Webaim To test accesibility of the deployed website.
Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling. Visual Studio Code is used as an editor to write code.
The steps to deploy the project are as follows:
- Click on Settings on the navigation menu in the repository
- Selected the Pages menu on the left side bar.
- In the first dropdown menu labelled Source select the branch of the name 'main' from the dropdown.
- In the next dropdown menu select '/root' as the default option.
- Select Save
- After couple of minutes project become live
- If you want your own custom domain name you would have to purchase one with an external provider and enter it in the box towards the bottom of the page above.
To clone the repository:
-
Log in (or sign up) to GitHub.
-
Go to the repository for this project, Deepika-Garg/BecomeMillionaire
-
Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
-
In your IDE of choice, open 'Git Bash'.
-
Change the current working directory to the location where you want the cloned directory to be made.
-
Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
I tested my site throughout the entire build. I have gone through each page using google chrome developer tools to ensure that each page is responsive on different screen sizes and devices and troubleshoot any issues mentioned in console as I went along.
Please refer to Test Document for all information to test BecomeMillionaire quiz app.
- Quiz building tutorial (https://www.youtube.com/watch?v=PBcqGxrr9g8)
- Quiz building tutorial (https://www.youtube.com/watch?v=TYCHpO4D50Y)
- JavaScript tutorials w3 schools (https://www.w3schools.com/js/default.asp)
- JavaScript basics from code Institute course/tutorials given.
- Fonts sourced from Google Fonts: (https://fonts.google.com/selection/embed)
- Am I responsive screenshots for Readme: (https://ui.dev/amiresponsive)
- Markdown cheat sheet: (https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
- Favicon: (https://favicon.io/emoji-favicons/)
I would like to thank following people for the help and advice they have given me in this project.
- My mentor Precious Ijege for his guidance and feedback throughout this milestone project.
- Marco Tot our class cohort facilitator for his constant assistance and encouragement.
- Slack Community for their endless support.
- Code institute for the outstanding course documentation and for providing opportunity to learn and develop this project.