As a part of Milestone Project 2 to demonstrate an understanding of Interactive app - use JS to achieve interactivity.
Welcome to the Hinduism-themed quiz! This engaging experience offers user an opportunity to delve into the depths of Hindu mythology and test their knowledge in an interactive manner. Takes the user on a journey of discovery and exploration as the user navigates through a series of questions designed to challenge and entertain. It gives the user an enriching adventure together and see how much the user knows about Hinduism's rich heritage and mythology.
Overall, the user experience has been designed to be interactive and engaging, with clear instructions provided for playing the quiz. The inclusion of background music adds to the atmosphere of the quiz. The quiz also ensures that the quiz is accessible to all users, including those who may have disabilities or use assistive technologies made available via aria-lables.
- User Experience (UX)
- UX Planes
- Features
- Traceability Matrix
- Logic
- Technologies Used
- Testing
- Test Cases and Results
- Responsiveness Testing Results
- BUgs and Fixes
- Browser Compatibility
- Deployment and Cloning
- Credits
- Gratitude
As a User from all different age groups and technical abilities I want the website not to be complicted and too busy.
-
- As a first-time visitor, I want to understand how to play the Hindu Mythology Quiz.
- As a first-time visitor, I want to access instructions on how to start the music, select answers, proceed to the next question, reset the game, and exit the guide.
- As a first-time visitor, I want to easily navigate through the quiz interface to answer questions and proceed to the next ones.
- As a first-time visitor, I want to have the option to toggle background music on or off.
- As a first-time visitor, I want to have a clear title indicating the name of the quiz.
- As a first-time visitor, I want to be able to identify the question box and answer options clearly.
- As a first-time visitor, I want to be able to distinguish between correct and incorrect answers easily.
-
- As a returning visitor, I want to quickly access the instructions on how to play the quiz.
- As a returning visitor, I want to have the option to toggle background music on or off based on my preference.
- As a returning visitor, I want to have a smooth and seamless experience navigating through the quiz interface.
- As a returning visitor, I want to be able to turn off the background music if it is distracting.
- As a returning visitor, I want to be able to easily understand the purpose of each button in the menu bar.
-
- As a frequent user, I want to be able to quickly start the quiz without going through the instructions every time.
- As a frequent user, I want to be able to customize the quiz settings, such as the background music.
- As a frequent user, I want to be able to reset the game easily if needed.
- As a frequent user, I want to have a pleasant and engaging experience while answering questions by having new and random questions without them repeating.
-
- Create an engaging experience offers user an opportunity to delve into the depths of Hindu mythology and usrs can test their knowledge in an interactive manner.
- The primary goal is to provide an engaging and educational experience to users through the Hindu Mythology Quiz. This involves creating an interactive platform where users can test their knowledge of Hindu mythology while enjoying an immersive experience.
- The focus is on meeting the needs of users, both first-time visitors and returning users. This includes providing clear instructions on how to play the quiz, offering options to toggle background music, ensuring ease of navigation, and delivering an enriching adventure through challenging and entertaining questions.
- Being able to access all devices.
- To have an online presence.
- The aim is to create a quiz platform that reflects the depth and richness of Hindu mythology while ensuring accessibility and inclusivity for all users.
- Additionally, the company seeks to foster user engagement and satisfaction through an interactive and seamless user experience.
- There is a potential for future enhancements to the quiz platform, such as expanding the question database, incorporating multimedia elements like images or videos, introducing leaderboards or scoring systems, and integrating social sharing features to encourage user interaction and participation. Provide access to additional content or links in the footer section for further exploration.
-
- The scope of the Hindu Mythology Quiz encompasses creating a user-friendly and accessible web interface that allows users to:
- Easily understand how to play the quiz through clear instructions and intuitive design.
- Toggle background music on or off according to their preference.
- Navigate smoothly through the quiz interface to answer questions and proceed to the next ones.
- Identify question boxes and answer options clearly, ensuring a seamless user experience.
- Distinguish between correct and incorrect answers easily, enhancing user engagement and satisfaction.
- Access additional content or links in the footer section for further exploration and learning.
- The scope of the Hindu Mythology Quiz encompasses creating a user-friendly and accessible web interface that allows users to:
-
-
The structure of the Hindu Mythology Quiz is designed to provide a logical flow for users, starting from the homepage and progressing through the quiz experience. Key structural elements include:
- Header Section: Contains the title of the quiz and a menu bar with buttons for accessing the guide, toggling background music, and resetting the game.
- Main Section: Features the question box and answer option boxes, allowing users to interact with the quiz content.
- Modal Window (Guide): Provides detailed instructions on how to play the quiz, ensuring clarity for users.
- Footer Section: Currently empty but open for future content or links to enhance user engagement and exploration.
-
-
-
-
-
- I have used a rusted copper ztar color palette consistent with the backgoruns image of a ethereal astronomical image.
- #0C3D40 a shade of dark green, black, and a dark rusty font colors play a good contrast to the chosen colour palette.
-
- The Samarkan font is representative of the Sanskrit Devnagri script therefore this font was chosen for the quiz title text. As this was not available on Google Fonts library, Cdnfonts has been used to import Samarkan font into style.css.
- Google Fonts has been used to import 'SpaceMono' and fonts into style.css. These have been chosen as they are readable in all font weights and have a playful look but are also easy to read. These fonts also match the style of the title font.
Lugrasimo
SpaceMono
- Arial, Helvetica, sans-serif - have been used as a contingency fonts when the above fonts fail to load. These have been chosen due to their versatality and readability.
- The Samarkan font is representative of the Sanskrit Devnagri script therefore this font was chosen for the quiz title text. As this was not available on Google Fonts library, Cdnfonts has been used to import Samarkan font into style.css.
-
- The ethereal image of the Carina Nebula, with its vast expanse of swirling gas clouds and radiant celestial bodies, evokes a sense of awe and wonder that transcends the boundaries of our earthly existence. In Hinduism, spirituality is often intertwined with the contemplation of the cosmos, where the universe is perceived as a manifestation of the divine.
The favicon was designed using an online favicon generator. This has been designed with an "Om" symbol that represents Hinduism.- All the images used are license free or been used with owners consent. The sources are listed in the Credits section.
- Images used were compressed using Tinypng.com for better performance and user experience.
-
-
-
- The "Guide" function serves as a navigational element within the user interface, denoted as a menu button. Upon activation, this button initiates the deployment of a modal interface, which in turn furnishes users with comprehensive instructional content outlining the how to participate in the quiz and explain all other features. Through these guidelines, the modal interface provides the steps to play the quiz to users, thereby enhancing their overall interactive experience within the quiz environment.
-
- The incorporation of background music within the web interface is configured with the attributes of autoplay and loop, facilitating a continuous and immersive auditory experience for users engaging with the platform. Nonetheless, it is noteworthy that certain browser configurations may restrict the automatic playback of such audio elements. To address this potential limitation, users are provided with a dedicated music control button, enabling manual activation or deactivation of the auditory component. This toggle functionality dynamically adjusts the displayed text on the button interface in accordance with the current status of the background music, affording users intuitive control over their auditory environment.
-
- The "reset" button provides users the capability to reset the ongoing quiz at their discretion, thereby resetting the score to zero and initiating the quiz anew from question number 1. The randomized nature of question selection, ensures that subsequent quiz attempts commence with a fresh set of questions and so gives users a better experience.
-
- The question box displays the question that is generated at random from a set of questions in the array.
![Question Display Box]
-
- The quiz presents users with four answer options to select from. Functionality is implemented such that choosing the correct answer results in the option turning green. Conversely, selecting an incorrect answer causes the chosen option to turn red, while the correct answer is highlighted in green.
-
- The Next button is not visible until the user has clicked on an answer, therefore limiting the user to proceed without answering a question. User can click on the next button to proceed to the next question. When the next question is displayed the "Next" button disappears again until an answer is clicked upon.
-
- The score display box should appear at the end of 10 attempted questions and when the ""next"" button is clicked. The score should be displayed in the format your score is no. of right answer / total number of questions.
-
- A modal interface appears providing comprehensive instructional content on how to participate in the quiz and explaining other features. Users should be guided through the steps to play the quiz, enhancing their overall interactive experience within the quiz environment. When the user clicks on the x mark it closes the modal.
-
-
- The initial flowchart designed to the basic quiz interactivity is as follows: ![Flowchart] def25
-
-
-
Cdnfonts : was used to import Samarkan fonts into style.css file which has been used in the Main Logo title.
-
Font Awesome : was used to add icons for aesthetic and UX purposes. Icons have been used to for guide and music toggle button which can be easily identified by users regarless of their English language level. Icon has also been used for prefix to questions to make the quiz look more playfull.
-
Git: was used for version control by utilising the Gitpod terminal to commit to Git and Push to GitHub.
-
GitHub : It is used as the repository for the project's code after being pushed from Git.
-
Powerpoint : was used for resizing images and editing photos and screenshots for Readme. It is also used for designing flyers for event pages.
-
Balsamiq : was used to create the wireframes during the design process.
-
Coolors : was used to find complimenting colors to the backgorund image for the website color palette.
-
TinyPng : was used to compress the images that are used in the website, especially on the gallery page.
-
Bootstrap : codes from Bootsrap grid html and Css library has been used to design the Question and answers section to have a responsive quiz layout in columns and rows.
-
Autoprefixer CSS online : has been used to parse the CSS in style.css to add different browser prefixes to ensure the CSS works on all browsers.
-
favicon.io : was used to generate the favicon for the website.
-
W3C Markup Validation Service : has been used to validate the code on all pages and style.css.
-
UI.Dev : was used to generate Mockup Screenshots.
-
Free Formatter : was used to ensure proper indentation in the HTML and CSS codes.
-
-
-
At the first instance the results for performance were low at 83%. Thereafter, on further analysis of it was identified the image files and an extra bootstrap cdn were the LCP element and unused CSS respectively. I then changed the background image file to webp format as recommended on lighthouse dev tool and removed the earlier version cdn for bootstrap. Following are screen shots of Lighthouse analysis outcomes before repairs and after repairs
-
-
- Score always exceeded the number of questions.
- To fix this I console logged the clicked button event and the score event.
- Based on the results on DOM it was obvious that even after the user has clicked on the chosen answer the code was allowing further clicks but this was invisible on the page as once a class was added to the div it was returning event listner events.
- This was fixed by applying a specific id to each div and then calling each id.
- Instructions Modal was floating towards the top regardless of the applied CSS styling.
- Further investigation on the developer tools I identifieds that the bootstrap and some template css were over-riding my styling.
- This was then easy to fix by targetting the element specifically and applying !important
- Reset Button was dissapearing when clicked on x to close guide modal
- this was an easy fix by removing it out of modal class and removing the initial code that was causing a ghost modal to open and therefore clicking it was disabling the button itself.
- This debugging also revealed that there were multiple event listners to reset button which was rectified.
- Music did not autoplay even though there was relevant attributes added.
- This could not be fixed for some browsers as some of them had extensions that could stop running.
- Reading up on codepen and W3schools this was fixed to show error if browser couldn't read the music.
- Added afeature to be able to turn on music once the page is loaded.
- After the user has chosen the answer the right answer was not getting applied the style
- By console.logging the elements that were being compared to check for right answer it was clear that the
ansArray.forEach(function(obj, c){
if (obj.result === true){
rightAns = ansArray[c].ans; }
was returning an undefined value to dom - Also, I was targetyting the wrong elemet evt.target.classList.add("green"); instead of the actual element. I learned that it is best to assign variables a name that is recognisable rather than "x" and will be apllied in future projects.
- This was then easily fixed by applying a loop to find the target div containing the right answer and then applying the class to the element x.classList.add("green");.
- Score was doubling up again
- Realised that the element wasn't getting disabled again due to targetting the wrong element this was fixed by x.style.button = "disable"; using the x variable to ensure I am targetting the right elements to be disabled.
- The asnwer buttons also had two different event listners this is due me mis-understanding the event listener lesson.
- After establishing a proper working quiz, I wanted to improve the user experience so I wanted to add few more questions and randomly pick question-answer set from the array.
- I used the Math.floor(Math.random()) function to generate the random question number.
- I was stuck for a while at this juncture as I couldn't get the intended result.
- However, the console.logging the various variables and const I realised at some point the during the iterations there was always a point that returned either 0 or a number equal to the array length.
- Once I figured out the problem I could fix it with a simple loop and break method to check the question counter before it was fed to the show question function to obtain array object at the non-existant index.
- Score was doubling Bug
- I used the sources feature in dev tools to resolve this.
- stopping the function at the score calculating code.
- This was then fixed by adding a separate counter to count the number of questions.
- Next button was extending accross the screen.
-
This was an easy fix at CSS level.
- Testing has been carried out on the following browsers :
- Chrome Version 120.0.6099.225 (Official Build) (64-bit)
- Firefox Version 122.0 (64-bit)
- Edge Version 121.0.2277.83 (Official build) (64-bit) All the functionalities and appearance works as intended on all the above browsers.
-
Deployment:
- In the GitHub repository, navigate to the Settings tab, then choose Pages from the left hand menu
- Ensure the source section drop down menu is set to the Main Branch
- Refresh the page and a link to access the page will appear at the top with an option next to it that says "visit page"
- Any changes pushed to the master branch will take effect on the live project
-
Cloning:
- visit url - https://github.com/ashwinsel/Milestone-Project-2 this will open the repository on Github
- Click on the "Code" green coloured button to the right of the screen, click HTTPs and copy the link there
- Open a GitBash terminal and navigate to the directory where you want to locate the clone
- On the command line, type "git clone" then paste in the copied url and press the Enter key to begin the clone process
-
- Most of the question and answers are adapted from jagranJosh website JagranJosh
- All other content has been drafted by the developer.
-
- Code on how to present a modal and close was created with the help of a tutorial on WebDevSimplified.
- Code for the hover effect on info cards on Home page was an play around with some examples from [Codepen]
- I have used Bootstrap grid classes to implement structure for the quiz.
- The basic logic for the quiz has been based on a tutorial by Avinash Kr from
- Hover effects on throughout has been created by using tutorials on W3schools
-
a vector art by (Scigola)- is a image of Carina Nebula, NGC 3372 Hubble by (NASA, ESA, N. Smith (University of California, Berkeley), and The Hubble Heritage Team (STScI/AURA);CTIO Image: N. Smith (University of California, Berkeley) and NOAO/AURA/NSF)
-
- I would like to thank my mentor Dick Vlaanderen for all the coaching and helping me with their insight and experience.
- Thanks to tutor Roo, who helped me fix my deployment.
- Thank you to Md—Fahim Kabir Hamim for the lessons on Tech2 etc.
- Thanks to tutors from Great Stck.
- Thanks to Amy our facilitator for running our regular Stand-ups which gave me confidence.
