A Quiz to discover your Ayurvedic Dosha
- INTRODUCTION
- USER EXPERIENCE DESIGN
- FEATURES
- TESTING
- TECHNOLOGIES USED
- CREDITS
- DEPLOYMENT
- ACKNOWLEDGEMENTS
This is an interactive front-end site created to provide users with a quiz to discover their unique Ayurvedic Dosha and obtain lifestyle/diet recommendations based on the quiz result.
The quiz contains 18 questions and each question has 3 different answer options that correspond to a specific dosha.
The result is based on which doshas score the highest points in the quiz.
I've created this quiz to showcase my HTML, CSS and JavaScript knowledge, along with my skills relating responsiveness, accessibility and UX Design.
As a user, I want to:
- discover my unique mind-body composition
- get clear and concise information about what the quiz does and how I can use the results
- take a quiz that is not too time consuming (avoid too many questions)
- have the option to subscribe to the Newsletter and discover/learn more about my result
- have the option to opt out of the Newsletter
- being redirected to an interactive/engaging result after taking the quiz, where information given is not too crowded but clear and controlled by my inputs
- being left with the feeling of knowing more about myself after taking the quiz and more knowledgeable about how to tackle possible health issues
- to provide users with a quiz to discover their dosha and interactive/entertaining information about Ayurveda
- promote the brand name so that in the future it could become a wider Ayurvedic services provider
- keep the users engaged with the brand through a subscription to a monthly Newsletter
All wireframes were created with Figma.
VAPIKA logo was created by me using Canva.
The palette was generated from the background image found in the desktop design using Coolors.
-
#9F7E74 (beige color) has been used for the logo, some backgrounds on the website (buttons and main container), for most headings and for the footer background. Also used as a text color when the background is the color below;
-
#E7E8EA (grey/white color) was mostly used in the text appearing on backgrounds of the color stated above (quiz questions, sign up form and results heading), for some other backgrounds (buttons, body background), social media icons in the footer;
-
I wanted to keep a good contrast across all of the pages and their elements so a regular black color was used for most of the paragraphs, and for some buttons text.
- Icons were needed for the social media links and have been taken from FontAwesome.
The chosen fonts for the website are:
-
Tenor Sans: used for the headings, it's an elegant sans-serif designed by Denis Masharov with excellent legibility.
-
Sen: a friendly sans-serif used for paragraphs due to its easy readability.
The image used for the homepage background for large screen designs, was taken from Unsplash.
The images representing the natural elements that introduce each dosha result were created by me using Canva.
All images were optimized using TinyPNG.
After ideating the website structure and the wireframes, and after having decided on the design elements, I've created high-fidelity mockups of all of the pages to make tangible the idea in my mind and have a detailed guide to follow when coding.
The homepage contains:
-
a catchy introduction that informs users about the website's main purpose
-
a button that opens a modal window containing more information about Ayurveda and generalities that are important for understanding the quiz results
-
a button opening a modal window that provides users with instructions on how to take the quiz
-
a button to start the quiz
For easy navigation, modal windows opened through the "Learn more" and "Instructions" buttons on the homepage can be closed both by clicking on the "close x button" and by clicking anywhere outside of the modal window.
The quiz page displays each question and its related 3 different answers one below another.
When the "next" button is clicked, the JavaScript checks that an answer has been selected and if so, the selected answer gets stored and the next question displayed.
Event listeners related to the answer selection are only applied to the "next question" button, so that users can change their mind after selecting one answer and control when they're ready to submit their answer and proceed with the next question.
In case users select a different answer, the previous selected one gets unselected.
For the purpose of getting an accurate result, the quiz is structured so that each question requires an answer.
If users try to skip a question or forget to select an answer, an alert window is displayed to inform them about the quiz requirements and prompt them to answer.
After the quiz completion, users are redirected to a page containing a Newsletter signup form that requires them to input their name, email address and a quiz feedback.
The Newsletter signing up is completely optional and users can skip it by simply clicking on the "Skip and go to results button".
If the form is correctly submitted, an alert window confirms to users that they've successfully subscribed to the Newsletter.
With a 4 second timer, the alert window redirects to the results page.
If the form is successfully submitted, users also get a personalized confirmation email that displays their name and lets them know what to expect from the Newsletter.
After introducing the users to their dosha, the quiz result page features a Google Pie chart that displays what percentage each dosha has been scored.
A color legend helps the user understand the Pie chart more.
If the user decides to signup to the Newsletter, the username submitted through the form is stored and displayed in the results page heading. This creates more emotional engagement and the user is reassured that he/she is getting a tailored result.
The Pie Chart used to display the quiz results is fully interactive:
-
by hovering on each slice, the user gets the name of the dosha, it's corresponding __number of questions answered __and, based on the number of the quiz total question, on what percentage that dosha is present.
-
by cliking on each slice, a modal window opens, giving the user a full explanation of that specific dosha, and tips and recommendations to keep it in balance.
The footer is consistent across all of the pages and contains the social media buttons that open on a new page.
-
Adding e-commerce functionality through expanding each dosha's detailed explanation and "remedies" by offering a selection of Ayurvedic products that can help balance that dosha.
-
Changing the question answering system: instead of having to click on the "next question" button at each question, the clicked answer is the one that triggers the new question displaying. In addition, the user would be able to go back to the previous questions and, for any reason, change the answer given.
All of the information regarding the testing can be found here.
- HTML
- CSS
- JAVASCRIPT
- GitPod: used for writing this website code, committing and pushing to GitHub.
- GitHub: used for hosting, storing and deploying the project
- Figma: used for designing the wireframes and mockups for the website in the first phase of the development process
- Coolors: to generate the color palette from the background image found in the homepage for desktop
- Canva: for creating the website logo and the dosha introductive images representing the elements
- Google Fonts: used for importing the fonts for this website ("Tenor Sans" and "Sen") into the CSS file
- FontAwesome: used for the social media icons
- Flaticon.com: used for the title bar icon
- Icoconverter.com: used for converting the title bar icon into the .ico format
- GifCap (by João Moreno): used for creating the gifs from the screen recordings during the testing process (for the TESTING.md) and for this README file.
- Freeformatter.com: used for formatting all of the HTML pages
- Cleancss.com: used for formatting the styles.css file
- Beautifier.io: for beautifying/formatting all the Javascript code
- AmIResponsive: used for capturing a screenshot of how the website look on different screen sizes (screenshot that introduces this README file)
- Unsplash: where the background image in the homepage for large screen was taken from
- TinyPNG: used for compressing and optimizing all of the images used in the website
- Google Charts: used for implementing the Pie Chart that displays the doshas in the results page
- SweetAlert: used for the alert window that shows up when a quiz questions is attempted to be skipped
- SweetAlert2:for implementing the alert window containing a timer that follows the signup button on click and redirects to the results page
- EmailJS: used for sending an automatic/personalized email to users when they submit the signup form
-
The author of the background image in the homepage for large screen resolutions is by Stephanie Greene and was taken from Unsplash
-
The social media icons were sourced from FontAwesome
-
The title bar icon was taken from Flaticon and created by Icongeek26
-
The quiz thought process/approach has been inspired by the following tutorials: simplestepsCode, sitepoint, webdevSimplified
-
The modal windows connected to the "Learn More" and "Instructions" buttons in the homepage were created following this tutorial on W3schools
-
The SweetAlert window that opens when the "Next question" button is clicked during the quiz and an answer has not been selected, was implemented following the guide at this link
-
The EmailJS setup was made possible thanks to the very detailed and helpful guide at this link
-
The second SweetAlert implemented in the website, that opens when the user correctly submits the signup form and redirects to the results page, was adapted to the example sweetalert containing a timer found here
-
The Google Pie Chart was achieved following the instructions on Google Charts
-
To add event listeners to the Pie Chart slices to open the modal windows when they're clicked, I followed the instructions given in the Google Chart guide and researching on StackOverflow (finding this question extremely useful)
-
To fix the bug related to the Pie Chart responsiveness in the results page, the solution was taken from StackOverflow at this link.
All of the code implemented from other sources/tutorial has been referenced in the comments accompanying the code.
All of the information related to Ayurveda and the characteristics and suggestions for each dosha have been taken from The Yogic Kitchen by Jody Vassallo.
The quiz questions and answers are a combination of the following quizes found online: oneWorldAyurveda and jasmineHemsley.
The project has been deployed to GitHub pages taking the following steps:
-
In the project repository, locate the Settings tab and click on it
-
Once in the Settings, locate the Pages tab down the side menu and click on it to open the GitHub Pages tab
-
Under "Source", select the "Main" branch from the drop-down menu instead of "None"
-
Once clicking "Save", the page will automatically refresh displaying the link for the successfully deployed website.
-
In this project repository, locate the Fork button on the top-right corner of the page and click on it.
-
Select an owner for the forked repository and give it a name (by default it will be named VAPIKA-Dosha-Quiz)
-
Add a description of the repository if you want to
-
Choose whether to copy only the default branch or all of the branches to the new fork (Only the default branch is copied by default)
-
Click Create fork
-
Locate the <> Code button next to the Gitpod button in this repository and click on it
-
Copy the URL for the repository
-
Open Git Bash and select the location for the cloned directory
-
Paste the URL copied after typing git clone
-
After pressing Enter you have your local clone
This website was created for submission as the Project Portfolio 2 for the Diploma in Full Stack Software Development with the Code Institute.
A special thanks goes to my mentor Seun for her invaluable assistance.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent