- The aim of this site is to test the user's knowledge on general history facts from around the globe.
- This site can be of great value to history teachers to check their students' knowledge in an entertaining way, and can also be of great value to teachers of English as a second language, as a tool to offer students some alternative and entertaining language practice.
- This site is useful to anyone interested in history, who might also want to increase knowledge on global history facts, as well as for parents, as a family get-together activity.
- This site might also prove of great use to secondary students wanting to reinforce their knowledge on the history subject.
NOTE: Responsive images of the site automatically generated through ui.dev/amiresponsive. The tool is interactive, and you can view and scroll through all pages in all the types of devices simultaneously here. I customized defect background-color attribute from amiresponsive site from black to whitesmoke, as my website is mostly in dark tones. I did it by changing the elements of the page, more precisely class="bg-brand-coal".
The deployed site can be viewed here.
Github repository can be viewed here.
EDNA TORRES MUNILL
You will find in the points stated below a brief study aiming at providing the user with the best possible experience when visiting this site.
- This site's target audience is pretty wide, ranging from teenagers to elderly users, regardless of their cultural or social background.
- History teachers at secondary levels
- Teachers of English as a second language
- Secondary students around the globe, aiming to practice their knowledge in general history, or wanting to practice their English language skills.
- Adult students of English as a second language around the globe, wanting to practice their comprehensive skills, and use of the English language.
- Parents of teens who enjoy cultural entertainmnet time with their sons and daughters.
This project aims to entertain and test the users' knowledge on general history facts.
- As a first time visitor : The user is curious and wants to complete the quiz to check knowledge on general history facts.
- As a returning visitor : The user takes the quiz with randomized questions, and checks his knowledge, comparing the final results.
- Malia is a history teacher at secondary level, and continuously researches for new technologies and websites to test her students' knowledge.
- Josh is an English teacher, and continuously researches for new technologies and websites for her students to practice comprehension skills on any general topic, including history.
- Leo and Catherine are secondary students who want the check their general knowledge on history subject.
- Raúl and Desirée are students of English as a second language who want to get some extra practice on comprehension and use of language in an entertaining and different way.
- Sarah is interested in history, and wants to learn more.
- Brian enjoys any kind of quiz which will test his knowledge on general topics, such as general history facts. He's keen to employ some of his leisure time researching new cultural entertainment to do at home, or on the train on his way to work.
- Kate and Paul are parents who enjoy doing cultural activities at home on bad-weather weekends with their teen children, such as playing Trivia, or... taking online quizzes.
The fixed navigation bar appears once the user clicks on the cta button "Start Quiz" on the middle of the landing page.
- The user is able to interact with the responsive navigation bar, fixed to the top while completing the quiz, on the contact page, and the 404 error page. So, even when scrolling down, the user can change the settings at any time. The navigation bar includes the following:
- LOGO allows user to go to landing page when clicked.
- SETTINGS include:
- Switch mode from default dark to light anytime throughout the quiz.
- Audio allowing the user to play or pause the audio by clicking to the audio icon. When the audio is off, the "sound on icon" is visible, and once the user clicks on it to initiate sound, the icon changes to a "sound off" icon, so that the user can click on it to pause the music. The audio is a "tension orchestra chords" (for more details refer to the correspondent media credits section below).
- 'RESTART QUIZ' button allowing the user to restart the quiz, with a new random order of the questions, and displaying automatically the new "question 1", also setting the counters to zero.
- On the landing page, there is only the header with the name of the page "History Facts Quiz", and a call-to-action button on the middle of the page to "Start Quiz". Once the user clicks it, the quiz automatically begins.
- Once the user clicks on "Start Quiz" cta button on the landing page, the 1st random question is displayed, with three optional answers set in a list, where a button can be checked for each (a.k.a radio buttons).
-
Dark mode
-
Light mode
-
At the bottom of the question & options, are the points' counters. There is a counter for "correct answers" (dosplaying the points in green) and another for "incorrect answers" (displaying the points in red).
-
Once the user selects an option whithin the possible answers, and clicks on the "Check Answer" button, a small customized pop-up (a.k.a modal) appears, darkening the rest of the page to highlight it, stating whether the answer is correct, or incorrect, with a button at the bottom for "Next Question". The modal has th same design in both modes:
-
Correct Answer: The message in the pop-up reads "That's right!... You've got it!"
-
Dark mode
-
Light mode
-
-
Incorrect Answer : The messase in the pop-up reads "Awww ... You got it wrong this time. The correct answer is: 'correct answer in full text'."
-
-
As the pop-up appears, the counter updates, counting a point to the "correct ansswer" or "incorrect answer" counter, accordingly.
-
Once the user clicks on the "Next Question" button at the bottom of the pop-up, the next random question is displayed.
-
Once the user answers the last question, the button's text on the pop-up changes from "Next Question" to "Final Results".
-
Once the user click on the "Final Results" button, a container with the same design as the questions appears, to give the user a seamless experience depending on the mode selected (dark or light) with a conditional text in it, and the total amount of correct answers out of the total of ten questions:
-
If the user's final result is of 3 or less correct answers, the final results title reads "You could do much better ..." with the user's final result stated below as "Your final score is x/10".
-
If the user's final result is of 4 or 5 correct answers, the final results title reads "You could do better ..." with the user's final result stated below as "Your final score is x/10".
- Light mode exmple
- Light mode exmple
-
If the user's final result is of between 6 and 8 (included) correct answers, the final results title reads "Well done!" with the user's final result stated below as "Your final score is x/10".
- Dark mode example
- Dark mode example
-
If the user's final result is of 9 or 10 correct answers, the final results title reads "Wow! Do you have a PhD in history?" with the user's final result stated below as "Your final score is x/10".
-
-
The footer is set to be fixed at the bottom of each page, and allows the user to interact at anytime, even throught the quiz, by clicking on the media icons in order to visit the correspondent social media page, and eventually follow the site on these platforms to be aware of any new feature implemented, or new quizes uploaded.
- Oxford Blue (001c3b)
Used for all buttons' font, and background of the header, the footer and the navbar, all set with a slight transparency.
- Dark Mode : Used for the questions' container, with a slight transparency, so the background with the starred sky with the milkyway is still visible, but does not affect contrast.
- Light Mode : Used for the question's container borders, and each question title with correspondent number.
- Aquamarine (#7fffd4)
Used as background for all buttons, for the h1 on the header, for the logo, for the favicon.
- Dark Mode : Used for the title of each question and correspondent number, the border of the checked radio buttons, the border of the questions' container, and for the final results message's heading.
- Light Mode : Is the main color of the background image chosen, of the tropical sea. Aiming for a seamless design between modes.
- Palatinate (#550055)
Used for the text shadow of the h1 on the header and the logo (on the navbar), as well as the text shadow of the favicon.
- Dark Mode : Used for the text-shadow of the final results message's heading.
- Light Mode : Used for the radio buttons' border, and background when these are checked.
- Whitesmoke (#f5f5f5)
Used for the "Quiz" word from the header and the navbar, and as the background color of the buttons to start and restart quiz. Also used for the background of each question's check message (background of modal triggered when "Check Answer" button is clicked).
- Dark Mode : Used for the questions' text and options, as well as for the results paragraph of the final results message.
- Light Mode : Used for the background of the questions' container, and the background of the final results message.
- Onyx (#393F44)
Used for font of each question's check message (of modal triggered when "Check Answer" button is clicked).
- Light Mode : Used for the font color of the questions, and options.
The dark mode was coded first of all, so all colors selected at firstm aimed to match the Milky Way sky background, such as Oxford blue, or bring contrast, such as aquamarine, or whitesmoke. Palatinate purple was combined with aquamarine for main titles and logo, as a nice text-shadow for the aquamarine title and logo.
Once the light mode was implemented. onyx was selected to bring clear contrast on whitesmoke background containers used for the questions.
All fonts have been selected from Gloogle Fonts.
- Lobster, with a fall-back to sans-serif - Has been used for the h1 in the header, that is, the title of the site, for the logo on the top-right of the navigtion bar, for the "Q" of the favicon (initial from quizz), for the text of the buttons, and the main final message, once the quiz is completed.
- Bad Script, with a fall-back to cursive - Has been used for the word "quiz" at the header and navbar, for the title of each question displayed, for the text and numbers of incorrect and correct answers displayed, and for the final results.
- Roboto condensed - Has been used for each question's text and options.
To counteract the implied seriousness of a quiz, and make it more appealing to younger users, as well as to adults, fonts like **Lobster and Bad Script have been selected. For the questions' text itself, Roboto has been selected to make the text easily readable.
The image used is of the Milky Way, set as the site's background of the landing page, the 404 error page, and the dark mode - (refer to the credits section for more details):
The following image has been used for the light mode option, to contrast with the Milky Way image of the dark mode. It has primarily been chosen for its aquamarine color shade, aiming at a seamless design for the site, and to match the site's logo, buttons, and features of the navigation bar - (refer to the credits section for more details):
All the following animations and transitions placed on the different elements stated belowremain the same both in light and dark mode, as they are suitable for both.
The call-to-action button placed in the middle of the landing page has a hover that changes the background color from aquamarine to whitesmoke when the user moves the mouse on top of it.
The navigation bar has a hover effect on the following elements:
- SOUND ICONS - When the user moves the mouse on top of them (only one icon is displayed at a time, depending if the sound is on or off), the icon color goes from default aquamarine to whitesmoke.
- RESTART QUIZ BUTTON - Its background color changes from aquamarine to whitesmoke when the user moves the mouse on top of it.
- BARS ICON - Only displayes on portrait tablets and phones, that is, on devices with a screen width less or equal to 767px, where the navigation bar is collapsed beneath the icon, and the bar icon can be clicked to uncollapse the navigation bar. This icon has a hover effect which changes its color from aquamarine to whitesmoke, to keep a seamless design.
All the buttons from the quiz have a hover effect. Aiming for a seamless design, they all change from an aquamarine background to the slight darker tone aqua, and the font changes from a default black to Oxford blue.
All the social-media icons have the same hover effect, which is the same from the sound icons placed on the navigation bar, aiming for a seamless design, that is from color aquamarine to whitesmoke.
-
COLLAPSED NAVIGATION BAR ELEMENT
-
When the navigation bar is collapsed on portrait tablets and phones, the following transition is applied to the collapsable navigation bar (on id menuToggle), so that it displays with a slight progression when page is loaded:
transition: all .7s linear;
-
Once the user click on the bars-icon to uncollapse the navigation bar on smamer devices (max. 767px.), the list of features displays with the following transition, so that it is less abrupt:
transition: height .3s linear;
-
-
AUDIO ICONS - Have the following transition, to make the hover effect less abrupt:
transition: all 0.2s; -
BARS ICON* - On devices with a screen width smaller or equal to 767px, the navigation bar is collapsed by default, and the "bars icon" is displayed, by which the user can collapse/uncollapse the navigation bar. This icon has the following transition to make the hover effect less abrupt:
transition: color 0.5s linear; -
SWITCH MODE TOGGLE - It has a very slight transition to make its change of state less abrupt:
transition: .4s;
All buttons of the site (home page, quiz and error page) have the following transition to make they hover effect sightly progressive:
transition: all 0.5s;
All social-media icons have the following transition to make their hover effect sightly progressive:
transition: all 0.15s linear;
The site has the following animations:
-
'Quiz' Word next to the logo (on the navigation bar), and as part of the title header (on the home page) has the following animation:
transform: rotate(-5deg); -
Swith Mode Toggle has the following animation:
transform: translateX(26px);
The footer icons have the following animations when the user hovers through them, so that they become a bit bigger while slightly rotating to the left:
transform: scale(1.1);
transform: rotate(-7deg);
All icons present in the navigation bar and the footer have been taken from Font Awesome, and have been styled with the colors of the site. They are all in aquamarine, and turn to whitesmoke when the user hovers on them.
There is music available, and it can be played or paused at any time throught the quiz by clicking on the "audio on"/"audio off" icons that appear in the navigation, one at a time depending whether the music is playing or is paused.
The switch toggle on the navigation bar allows the user to switch between the default dark mode and the light mode at anytime during the quiz, and as many times as the user wishes. To its left, and icon representing "brightness" is displayed, so that the user immediately knows what the switch is for.
Buttons are present along the site. To start quiz from the home page, to restart quiz anytime (button placed in the navigation bar), to check the selected answer on each question, to move to next question, and to go to final results.
Radio buttons is the element used to present the user with three possible answers for each question. Once the user selects a radio button, he/she can check the answer, and the modal displays.
The modal is styled with the site's lighter colors, and displays when the user checks answer.
This site is fully responsive on all device sizes. Please refer to Test Recordings and Results.
This site id WCSG 2.1 compliant.
- This site has an optional light mode, apart from the default dark mode. The user can easily switch between modes at any time throughout the quiz, by just clicking on the switch placed on the fixed navigation bar.
- This site has also been scanned for general accessibility arrors, and contrast, and no errors have been found. Refer to the EqualWeb Accessibility Checker report here.
By clicking on the switch placed on the navigation bar, the user can toggle between the default dark mode, and the light mode, all through the quiz:
Is fully responsive, and is fixed at the top, to allow the user to access its functionalities even when scrolling down. Its background has a slight transparency, so that it's visually not so intrusive. As the navigation bar passed the accessibility audits, its colors stay the same both in the light and dark modes. Its functionalities are the following:
- LOGO - By clicking on it, the user gets to the landing page, before the questsions are displayed.
- SETTINGS - On smaller devices these are placed underneath the logo. The site's settings are the following:
- MODE SWITCH TOGGLE - By clicking on the switch, the user can change from the default dark mode to the light mode, and viceversa, anytime during the quiz.
- MUSIC ICONS
- PLAY ICON - By clicking on the play icon, the user triggers the audio mp3 file, which is coded to loop itself seamlessly.
- PAUSE ICON - By clicking on the pause icon, the user pauses the audio file, which can be continued by clickg again on the play icon.
- RESTART-QUIZ BUTTON - By clicking on the button, the user can restart the quiz at anytime. The 1st question is automatically displayed, and the counters are set to 0.
Que quiz features 10 randomized questions, each with three optional answers. Quiz features are the following:
- RANDOMIZED QUESTIONS : Every time the user restarts the quiz, the questions are displayed in a randomized order, so it appears to be a different quiz.
- RADIO BUTTONS : Each question has three optional answers with can be selected by clicking on the radio button beside each of the options.
- BUTTONS : The question container has a "Check Answer" button, and the modal has a "Next Question" button. Once the user gets to the final question, the text on the latter changes from "next question" to "final results".
- MODAL : Once the user has selected one of the optional answers and clicks on the "Check Answer" button, a modal appears as a pop-up with a conditional message and the "Next Question" button. If the answer was right, the message congratulates the user, if the answer was wrong, an encouragement message appears, together with the correct answer, so the user can learn from their mistakes.
- SCORES : At the bottom of the question container, the scores display. One score for the "correct answers", and another for the "incorrect answers". Those scores are automatically updated when the user clicks on the "Check Answer" button. The scores are also displayed on the "final results" container (same style as the question container, but with a title styled in "lobster" font.
The footer includes a total of four icons. Three of them are from social media (Instagram, Facebook and Twitter), and the fourth icon is an envelope. Once the user clicks on any of the social media icons, the site's profile from the correspondent media opens in a new tab. When the user clicks on the envelope icon, the default emailing provider initiates and the user can seamlessly send an email to the admin.
Has a Milky Way image covering all the background, a header with the title of the page, a call-to-action button placed in the middle to "Start Quiz", and the footer placed at the bottom.
The page has the same style as the home page, for a seamless experience. The header states it is the 404 error page". The navigation bar is displayed, allowing the user to interact with all its features. Placed in the middle, there is also the "go to home page" button allowing the user to redirect to the home page, and the footer is also displayed at the bottom, allowing the user to interact with different social-media platforms, or to send an email to the admin.
-
PHONES
-
TABLETS
-
LAPTOPS AND DESKTOPS
The following features have not yet been implemented due to constraints, but will very likely be implemented in a near future as to boost this site's purpose and user UX.
On the home page, different topic categories will be offered to users. The "Start Quiz" button will therefore be replace by different buttons representing the different topics available (e.g. "History", "Climate", "Biology", etc.). Users who are still not members will be able to access one quiz from each of the available categories.
Users will be able to create an account, by a symbolic monthly subscription that will allow them to create and save their own quiz, and access all the other quizzes posted from different subjects.
Members will be able to create their own quiz by completing a series of inputs which values will be stored as variables. This new quizzes will be stored in the user's account, and a link created so the user will be able to easily access them and/or share.
- No errors nor warnings were returned when passing the HTML Validation Test.
- Used HTML Validator to validate all this website pages, as follows:
- INDEX.HTML
- 404 ERROR PAGE
- No errors nor warnings were returned when passing the CSS Validation Test.
- Used CSS Validator at Jigsaw.w3.org
- No errors were returned when passing the JS Validation Test.
- Used JS (ES6) Validator at JShint
-
To meaningful testing of site, Stat Counter has been used, in order to get an insight of the following:
- BROWSER MARKET SHARE - Most commonly used browsers worldwide:
- BROWSER VERSION MARKET SHARE - Most commonly used browser versions worldwide:
- OS MARKET SHARE - Most commonly used operation systems worldwide:
- MOBILE vs DESKTOP vs TABLET MARKET SHARE - Most commonly used devices worldwide:
- SCREEN RESOLUTION STATS - Most common screen resolution (in pixels) worldwide:
Following all the above information, compatibility and responsive testing has been done on the most common browser versions, OS, and screen resolution combinations, by using Browser Stack Chrome extension, which has been downloaded, the Chrome Dev tool's emulator, and real devices owned by me.
Please find the correspondent compatibility and responsive testing reflected in the following table:
| TEST no. | TOOL | DEVICE | BROWSER | OS | VIEWPORT width x height (px) |
|---|---|---|---|---|---|
| 1 | BrowserStack | Samsung Galaxy S20 | Chrome 117 | Windows 10 | 360 x 800 |
| 2 | BrowserStack | Samsung Galaxy S22 | Edge | Android 12.0 | 360 x 780 |
| 3 | BrowserStack | iPhone 12 Mini | Safari | iOS 16.0 | 360 x 780 |
| 4 | BrowserStack | iPhone SE 2022 | Chrome | iOS | 375 x 667 |
| 5 | REAL mobile device | Samsung Galaxy A22 5G | Chrome | Android 13.0 | 384 x 857 |
| 6 | BrowserStack | iPhone 13 | Safari 17.0 | iOS | 390 x 844 |
| 7 | REAL Laptop Device | PC Notebook HP -15-bs013ns | Chrome 119 | Windows 10 -64bit | 1366 x 768 |
| 8 | BrowserStack | MacBook Air 11-inch | Safari | macOS | 1366 x 768 |
| 9 | BrowserStack | Apple iMac 21.5-inch | Safari | macOS | 1920 x 1080 |
| 10 | BrowserStack | Asus ZenBook UX305 | Firefox 118 | Windows 11 | 1920 x 1080 |
| 11 | BrowserStack | Asus ZenBook UX305 | Chrome 119 | Windows 10 | 1920 x 1080 |
Samsung.Galaxy.S20.v11.0.-.Google.Chrome.2023-11-10.02-13-15.mp4
Samsung.Galaxy.S22.v12.0.-.Google.Chrome.2023-11-10.02-40-03.mp4
iPhone.12.Mini.v16.0.-.Google.Chrome.2023-11-10.02-46-50.mp4
iPhone.SE.2022.v15.4.-.Google.Chrome.2023-11-10.02-56-34.mp4
XRecorder_10112023_030412.mp4
iPhone.13.v17.0.-.Google.Chrome.2023-11-10.03-09-27.mp4
QUIZ._.History.Facts.-.Google.Chrome.2023-11-10.03-12-02.mp4
Dashboard.-.Google.Chrome.2023-11-10.03-35-33.mp4
Dashboard.-.Google.Chrome.2023-11-10.03-41-16.mp4
Dashboard.-.Google.Chrome.2023-11-10.03-45-20.mp4
Dashboard.-.Google.Chrome.2023-11-10.03-50-24.mp4
All buttons of this site have been tested, and work exactly as expected:
- "Start Quiz" button on home page, starts the quiz by displaying 1st question.
- "Restart Quiz" button on the navigation bar restarts quiz anytime the user clicks on it, displying a randomized 1st question, and setting the counters to zero.
- "Check Question" button displays the modal with a message to the user whether it was a correct/incoorect answers, and the correct answer gets displayed if the user clicked of the incorrect answer, so that the user can learn from his/her mistakes
- "Next Question" button on the modal displayes the net randomi zed question of the quiz once the user clicks on it.
- Radio Buttons for the three optional answers. Only one radio button can be clicked at a time, and user has to click one of them to proceed with the quiz. In case the user clicks on the "Check Answer" button without having previously selected a radio button corresponding to an answer, the quiz will not advance.
- Sound Icons on the navigation bar only display one at a time. When sound is off, the "sound on" icon displays, and once the user clicks on it, the music starts playing, and the icon is changed for a "sound off" icon, and so on.
The quiz functionality has been manually tested and works seamlessly in both modes (dark and light), even allowing the user to change mode settings at each question, if desired. Please refer to the following table, and video:
- Questions are randomized
- Correct and incorrect answers are successfully added to the correspondent scores.
- User can switch from dark mode to light mode anytime throughout the quiz without affecting the question content nor the scores.
- Only one radio button can be clicked at a time, and one must be clicked as for the "Check Answer" button to proceed, by displaying the modal.
- User can learn from mistakes, and is he/she picked an incorrect answer, the modal displays the correct answer along an encouragement message.
- Once the user clicks on "Next Question" button placed at the bottom of the modal, next randomized question displays.
- Once the user gets to the last question on the quiz, the text from the "Next Question" changes to "Final Results".
- The final results coontainer displays a conditional message based on the user's score, together with the total score (correct answers) out of /10.
- The user can then estart quiz by clicking on the "Restart Quiz" button in the navbar.
All of the implemented features in this site, as listed below, look good on all devices, from x-small phones to larger desk tops. Please refer to the test recordings and results above to watch recordings made from different devices, systems, and browsers.
- HOME PAGE
- 404 ERROR PAGE
- NAVIGATION BAR
- QUIZ QUESTIONS
- BUTTONS
- ICONS
- SWITCH MODE TOGGLE
- SCORES
- MODAL
- FINAL MESSAGE
- FOOTER
All the following issues have been solved, and closed in Github by the creator of this site.
- Nav anchor link to contact page is underlined.
- Navbar content does not show in width:768px (1px defect).
- When EqualWeb Accessibility Checker is activated, default mode is light, and switch toggle displays "checked" at the moon (darkmode).
No defects of note have been detencted on this site.
No outstanding defects have been detected in this site.
The test this web's core vitals, the tool Lighthouse from Chrome Developer tools has been used, and the reports are as follows:
This site has been tested to be ADA compliant, and has achieved WCAG 2.1 validation. Find below the contrast audits from Juicy Studio website and the general accessibility reports generated by EqualWeb Accessibility Checker Chrome extension, which have all achieved positive results.
All tests have passed at level AAA. The following reports have been generated by Juicy Studio
-
LUMINOSITY AND CONTRAST RATIO of 9.79:1 of background in whitesmoke (#F5F5F5) and font in onyx (393F44) - As in all questions' containers in the light mode, and modals triggered once user clicks on "check answer" button (both in dark and light mode).
-
DARK MODE
- LUMINOSITY AND CONTRAST RATIO of 13.96:1 of background in Oxford Blue (#001C3B) and font in aquamarine (#7FFFD4) - used for the h1 in header, the favicon, the Question number titles, and buttons (inverted colours).
- LUMINOSITY AND CONTRAST RATIO of 15.67:1 of background in Oxford Blue (#001C3B) and font in whitesmoke (#F5F5F5) - used for the word "Quiz" in header, for the questions' paragraph and options (radio labels), and for the final results.
-
LIGHT MODE
- LUMINOSITY AND CONTRAST RATIO of 15.67:1 of background in whitesmoke (#F5F5F5) and font in Oxford Blue (#001C3B) - as for each question heading and correspondent number.
This website is compliant with all international standards, as proved after EqualWeb Accessibility Checker scan of the site.
All functionalities of this site can be accessed through keyboard navigation, and quiz can be completed, and restarted as many times as the user desires. The dark and light modes can also be swtched once the user reaches the switch (refer to second video below). There seem to be one exeption, and apparently the sound icon can't be reached through the keyboard, so the only feature that remains unaccesible throught keyboard navigation is the sound. This will be fixed in future debugging.
QUIZ._.History.Facts.-.Google.Chrome.2023-11-10.04-44-34.mp4
QUIZ._.History.Facts.-.Google.Chrome.2023-11-10.04-52-31.mp4
The extension Chrome Vox Reader has been tested, and can read this site.
- HTML5
- CSS3
- JS ES6
- The following have been used:
- Visual Studio Code - To begin coding the site from scratch. I already had VScode installed previously, due to a previous personal freelance project called englishgrows.com, and I think is a great tool for coding.
- Chrome Dev Tools - To inspect the elements, and be able to spot what element was having an unexpected behaviour, and correct it more efficiently. Also have used Lighthouse reports to check and improve core web vitals, including accessibility issues.
- Paint - To resize background images.
- Remove.bg to remove background from logo image.
- Favicon - To create the logo, and the icon on the title included in each page of this site
- Font Awesome - For the icons used
- Google Fonts - To select fonts and implement them in the site
- Github - To deploy the site online, and Github desktop app to link Visual Studio Code to Github.com
- Coolors - To insert colors selected previously directly through visual studio code, but used this tool to display the palette beautifully, and insert it in this readme file.
- Amiresponsive - To display the site in all types of devices simultaneously.
- EqualWeb Accessibility Checker - Google Chrome extension to check general errors and contract errors for optimal accessibility.
- Chrome Vox Reader - This Chrome extension has been downloaded and used for accessibility testing, and to be sure all users are able to use the site, regardless of their current situations.
- Browser Stack - Used for compatibility and responsiveness testing purposes.
- Stat Counter - Used for a meaningful selection of targets for compatibility and responsive testing purposes. Checked which browsers, browser versions, devices, viewports, and OS are most widely used worldwide.
- Yesviz - To check real device viewport when testing compatitivity & responsiveness.
- ScreenSiz - To find devices to test depending on their viewport.
- Blisk - Used for compatibility and responsiveness testing purposes.
- XRecorder - Downloaded the mobile app on my personal mobile device, to record navigation throughout the site, for compatibility and responsive testing purposes.
- Juicy Studio tool to generate accessibility reports related to contrast, following the WCAG 2.0's luminosity contrast algorithm.
I'm the owner of the Google Domain englishgrows.com, which is linked to this Github account EdnaTMunill, with nickname Ethra8.
- Click Settings tab:
- In the left-hand menu, click on the Pages link:
- In the Build and Deployment section, select Branch. Click on the dropdown menu and select main:
- Click Save:
- Wait about 3 minutes, and refresh the page. Then the link to the deployed site will show up like this:
In case you wish to use the code, you can easily fork it. This will make a copy of this current repository at the precise time of the fork, and store it in your own Github account, in case you want to have it handy to review it or to make any changes you wish. This, without affecting the original repository. To do so:
- Copy the link to this repository (browser url)
- Sign in to your Github account
- Above the repository options, click on the Fork button, on the top-right, just below Github navigation bar
- A copy of the repository will be directly included in your own account.
You can download the code to your computer, making a copy of the code at the exact time of the clone, and make a pull request in case you want to upgrade it in the future, and contribute to the project. To do so:
- Copy the link to this repository (browser url)
- Sign in to your Github account
- Click on the green button "Code", and the below options will appear:
- Local
- HTTPS: Copy link to use Git or checkout with SVN using the web URL.
- GitHUb CLI: Copy the command to insert in your CLI
- Open with GitHub Desktop app
- Download as a ZIP
- Codespaces
- You will be requested to be signed in to Codespaces, and once you are, the repository will be cloned on your Codespaces account.
- Milky Way by FelixMittermeier at Pixabay.
- Tropical sea by mrsiraphol at Freepik.
The following media has been used, and is hereby attributed as follows:
- AUDIO Tension orchestra chords has been created by Frankum at Freesound.org
To include accurate historic answers to the questions in this quiz, the following sites have been consulted:
- QUESTION 1
- QUESTION 2
- QUESTION 3
- QUESTION 4
- QUESTION 5
- UN current member States at the United Nations site.
- QUESTION 6
- QUESTION 7
- Women suffrage at New Zealand government site.
- QUESTION 8
- King Juan Carlos oath to the fascist national movement, referrenced in the Wikipedia to Bernecker, Walter L. (1996), 'The Political Role of King Juan Carlos During the Transition' (in Spanish), p.120.
- QUESTION 9
- QUESTION 10
- Ratial segregation in the US at the United States Senate official site.
- Responsive navigation bar using only HTML and CSS by Malia Havlicek.
- How to get value of selected radio button using JS at Geeksforgeeks site.
- How to Toggle Switch in CSS at W3Schools.
- Playing sound on click event with pure JS at Stackoverflow.
- Loop audio with JS at Stackoverflow.
- Howto CSS modals at w3schools.
- W3Schools: Their documentation has been very useful when wanting to implement new features or animations.
- Mozilla Web Docs: Their documentation has been checked to clear some doubts along the way.
To my mentor Malia for always challenging me, and pushing me forward in my learning path.