This website features a JavaScript quiz designed to provide users with an opportunity to test their knowledge of the basics of the programming language. The quiz aims to offer a learning experience by highlighting the correct answers in green, even when the user selects an incorrect option.
Are you ready for the challenge? JavaScript Quiz
The JavaScript Quiz is designed to test and engage users with 15 JavaScript-related questions. It features a homepage with an introduction and a start button, multiple-choice question cards, and results displayed at the end. The game promotes learning by highlighting correct and incorrect answers.
No custom fonts were imported for the quiz as it did not appear necessary. The site utilizes default fonts, which were deemed sufficient for the design.
The selected color scheme for the quiz features a blue background with an hsl(--hue) hue, complemented by white question boxes and answer buttons in the same color. This choice was made to maintain focus on the quiz content. The combination of white question boxes and blue buttons enhances the visual harmony with the background while capturing the user's attention effectively.
For a visual representation of the contrast, refer to the screenshot below:
The quiz website consists of a homepage with a brief introduction and a start button to initiate the quiz. The main quiz section includes 15 multiple-choice questions, each displaying a question and four possible answers. The game provides immediate feedback by highlighting correct answers in green and incorrect ones in red. At the end of the quiz, the user receives a summary of correct and incorrect answers, along with a congratulatory message. If the user answers incorrectly three times, the quiz ends, and they have the option to retry or return to the homepage. The site also features a mute button for audio control and includes a replay option.
The homepage comprises the game title, a concise introduction to the game and its rules, a start button for initiating the quiz, and a background image designed to pique curiosity about the quiz.
The screenshots below provide examples of how the homepage would appear on both a laptop and a smartphone.
The question cards feature a clear and user-friendly design. Each card includes a well-formulated question, accompanied by four multiple-choice answers. The chosen color scheme ensures a visually cohesive experience, with white question boxes and hsl(--hue) blue answer buttons, blending seamlessly with the background.
The screenshots below illustrate these design elements on both a laptop and a smartphone for a comprehensive view.
The mute/unmute button serves as a crucial element for sound control within the quiz. Users can easily toggle between muted and unmuted states, providing them with the flexibility to customize their audio experience. This feature ensures a seamless and adjustable sound environment, catering to individual preferences.
The game sound is muted by default to enhance the user experience, as illustrated below:
The question card counter and progressbar keeps track of the answered questions, providing users with a visual representation of their progress and indicating how many questions remain. The screenshot below illustrates the counter:
The score area tallies both correct and incorrect answers, distinguishing them with green and red colors, respectively. This visual representation helps users monitor their performance throughout the quiz.
The game sound is carefully selected to evoke a classical quiz ambiance. Click on the icon below to experience it. Additionally, the correct and wrong sounds have been chosen to resemble typical quiz feedback, enhancing the overall quiz experience.
-
Gamesound:
-
Wrong answer sound:
-
Correct answer sound:
When player answered three times incorrectly an alert message plop up to inform the player the he lost the game, see below:
followed by a replay menu where the Player can play again or quit:
Upon completing the quiz, the result section appears, displaying the player's score along with a brief congratulatory message and a replay button:
Potential future features include the addition of a submission form to personalize the game experience by getting players' names. Additionally, there could be a fireworks animation with sound effects in the results section, a countdown per question, the inclusion of jokers, an increased number of questions, the implementation of different difficulty levels, and a timer to measure the overall game duration.
-
HTML5: Provides the content and structure for the website.
-
CSS: Provides the styles for the website.
-
JavaScript: Provides the interactivity and dynamic behavior for the website.
-
Github: Used to host and manage the website's source code.
-
VS Code: Used as the code editor to write and edit the website's code.
Please refer to here for more information on testing the JavaScript quiz.
This site was depolyed to GitHub pages. The steps to deploy a site are shown below:
-
In the GitHub Repository called Quiz-Game click on the Settings button on the Repoitory navigation menu.
-
In Settings on the left side, go down to the Pages item and click on it.
-
Make sure the Source item is set to: Deploy from a branch
-
at the Branch item underneth the source item, set the branch to main and save it.
-
Once you have selected the main branch, the page will automatically refresh to show a detailed ribbon display indicating that the deployment was successful. If the page does not refresh automatically, refresh it manually.
To get to the live link of the GitHub repository - click here: https://dfcmk.github.io/Quiz-Game/
Forking a GitHub repository creates a copy of the repository in your own GitHub account. You can view and modify the copy without affecting the original repository.
To fork a repository:
- Log in to GitHub and navigate to the repository you want to fork.
- Click the Fork button in the top-right corner of the page.
- Select a name for your forked repository.
- Click the Fork button to create the copy.
Once you have forked a repository, you can clone it to your local computer and start making changes. When you are ready to share your changes, you can create a pull request to the original repository.
- Click the Code tab under the repository's name.
- Click the clipboard icon in the Clone with HTTPS section to copy the URL.
Once you have copied the URL, you can use a Git client to clone the repository to your local computer. Here are the steps to clone a repository using Git Bash:
- Open Git Bash.
- Navigate to the directory where you want to clone the repository.
- Type the following command and press Enter:
git clone
Replace with the URL of the repository that you copied in step 2.
This will create a local clone of the repository in the current directory.
You also can create and name the directory where the clone should be saved in, with adding the directory name after the . So the full command would look like this: git clone XXXX(This is a directory name)
-
The icons are sourced from Font Awesome
-
The background image on the homepage is obtained from pixaby
-
The quiz is based on Web Dev Simplified tutorial video.
-
Audio elements were implemented using Mark Lassoff article as a guideline and where downloaded from pixaby
-
The score area is inspired by the Love Math project
-
The progress bar was built with the w3schools tutorial
-
The audio files for Gamesound, Wrongsound, and Correctsound were obtained from pixaby
-
The background image on the homepage also came from pixaby
-
-
Code for audio elements from line 20-32 is based on: Mark Lassoff's article
-
The Quiz section (line:19 & Line:34-36 & Line:40-57) is inspired by: Web Dev Simplified
Github repository: https://github.com/WebDevSimplified/JavaScript-Quiz-App/blob/master/index.html
-
The Progressbar (Line:37-39) is based on: w3schools tutorial
-
The score area (line 45-49) is inspired by the Love Math project
-
-
CSS:
- The CSS rules for: :root, body, question-box, question, btn-grid, btn, btn:hover, start-btn-quiz, start-btn-home are inspired by: Web Dev Simplified
Github repository: https://github.com/WebDevSimplified/JavaScript-Quiz-App/blob/master/styles.css
-
The CSS rules for: score-area, score, incorrect are inspired by the: Love Math project
-
The CSS rules for: progress-bar and mybar are inspired by: w3schools tutorial
NOTE: The media queries used cover every device width in landscape and portrait because I couldn't get the @media (orientation: landscape) to work for this project without overriding other CSS rules. It is not the best solution, but it solves the problem with landscape mode on mobile devices and tablets.
-
-
Function progressBar is inspired by: w3schools tutorial
-
The functions: nextCard, startGame, Start.addEventListener("click", function() {}), showQuestion,resetState, checkAnswer, question pool(questions) was inspiered by: Web Dev Simplified
Github repository: https://github.com/WebDevSimplified/JavaScript-Quiz-App/blob/master/script.js
- The function updateMuteButton was inspiered by Mark Lassoff's article
-
I extend my thanks to several individuals and communities who contributed to the completion of this project:
-
Precious Ijege, my dedicated mentor, for providing valuable guidance and support throughout the development process.
-
The entire Code Institute team, whose resources and expertise have been instrumental in my learning journey.
I choose to build a Quiz about JavaScript because i am new to this programming language and i thought it would be beneficial to incude the topic into the quiz so it would promote my learning.
Denes Kalnoky 2023.