- Code Quiz Web App
Welcome to the Timed Coding Quiz application! The quiz seamlessly runs in the browser, featuring a sophisticated and responsive user interface powered by HTML, CSS, and JavaScript.
The following animation demonstrates the application functionality:
- Start the Quiz:
- Click the "Start" button to initiate the quiz.
- This triggers the countdown timer and presents the first question.
- Answering Questions:
- Questions are presented one at a time with multiple-choice answers.
- Click on an answer button.
- If correct, move to the next question.
- If incorrect, time is deducted from the clock.
- Timer:
- A timer counts down from a set time (e.g., 60 seconds).
- Incorrect answers result in time deduction.
- The quiz ends when all questions are answered or the timer reaches 0.
- End of Quiz:
- Display the user's final score.
- Save user initials to associate with their score.
- High Scores:
- High scores, including user initials and scores, are stored and can be viewed.
- A clean, polished interface designed for responsiveness across various screen sizes.
- Dynamic updates using JavaScript for a seamless user experience.
- Save Initials:
- Users can input their initials when saving their score.
- Score Calculation:
- Final score is calculated based on correct answers and remaining time.
- HTML, CSS, and JavaScript:
- Utilize these technologies for a well-structured and interactive quiz.
- Dynamic Updates:
- Dynamically update HTML and CSS for a smooth user flow.
- User Progress:
- Feedback on user progress is provided during the quiz.
Download the project from GitHub repository on your local machine.
-
Open GitHub repository. (link to repository)
-
Select
Codefrom top navigation section. (reference on the image below) 👇
-
Select
<> Codedropdown button from sub section. (reference on the image below) 👇
-
Select
Download ZIPfrom dropdown menu to download project in .zip format. (reference on the image below) 👇
-
Unzip the project.
[!TIP] You can use 7-Zip if you don't have file archiver. 7-Zip is free software with open source. The most of the code is under the GNU LGPL license. Some parts of the code are under the BSD 3-clause License. Also there is unRAR license restriction for some parts of the code. Read 7-Zip License information. Download the application from official website.
-
Open project with VS Code or other IDE.
-
On GitHub.com, navigate to the main page of the repository. (link to repository).
-
Above the list of files, click Code. (reference on the image below) 👇
-
Copy the URL for the repository.
-
To clone the repository using HTTPS, under "HTTPS", click
-
To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click
-
To clone a repository using GitHub CLI, click GitHub CLI, then click (reference on the image below) 👇
-
Open Git Bash.
-
Change the current working directory to the location where you want the cloned directory.
-
Type
git clone, and then paste the URL you copied earlier.git clone https://github.com/FilipPaskalev/Code-Quiz.git -
Press Enter to create your local clone.
$ git clone https://github.com/FilipPaskalev/Code-Quiz.git > Cloning into `Spoon-Knife`... > remote: Counting objects: 10, done. > remote: Compressing objects: 100% (8/8), done. > remove: Total 10 (delta 1), reused 10 (delta 1) > Unpacking objects: 100% (10/10), done.
root/ main directory of the project
|----.vscode contains settings for vscode
|----assets/ directory for the assets - video, images, sounds ...
|----readme directory for readme information
|----sfx directory for audio files
|----css/ directory for the styles
|----js/ directory for javascript files
|----logic.js store logic for application
|----questions.js store data for quiz questions
|----scores.js store logic for scores
|----utils.js store all needed resources for js files
|----.gitignore file that indicates which not to be included in git
|----.prettierrc settings if you using Prettier extension
|----highscores.html file for scores
|----index.html root html file
|----LICENSE information about the license
|----README.md file that describe the project
Screenshot of the application is on the image below.
Important
You can find deployed version of the project on 👉direct link here or by clicking on the picture above. ☝️
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtime (such as C++, C#, Java, Python, PHP, Go, .NET).
VS Code extension counts blank lines, comment lines, and physical lines of source code in many programming languages. This extension uses other language extensions to determine the line of code. Therefore, you may need to install the language extension to support a new language. Conversely, as the number of language extensions increases, the range of support for this feature also increases.
| filename | language | code | comment | blank | total |
|---|---|---|---|---|---|
| .prettierrc | JSON | 5 | 0 | 1 | 6 |
| README.md | Markdown | 164 | 0 | 59 | 223 |
| css/styles.css | CSS | 73 | 0 | 16 | 89 |
| highscores.html | HTML | 20 | 0 | 6 | 26 |
| index.html | HTML | 42 | 0 | 11 | 53 |
| js/logic.js | JavaScript | 100 | 79 | 33 | 212 |
| js/questions.js | JavaScript | 166 | 4 | 1 | 171 |
| js/scores.js | JavaScript | 15 | 10 | 6 | 31 |
| js/utils.js | JavaScript | 19 | 7 | 7 | 33 |
| language | files | code | comment | blank | total |
|---|---|---|---|---|---|
| JavaScript | 4 | 300 | 100 | 47 | 447 |
| Markdown | 1 | 164 | 0 | 59 | 223 |
| CSS | 1 | 73 | 0 | 16 | 89 |
| HTML | 2 | 62 | 0 | 17 | 79 |
| JSON | 1 | 5 | 0 | 1 | 6 |
- https://dev.to/codebubb/how-to-shuffle-an-array-in-javascript-2ikj
- https://www.w3schools.com/howto/howto_js_remove_class.asp
- https://www.w3schools.com/jsref/jsref_substring.asp
- https://www.tutorialspoint.com/How-can-I-remove-all-child-elements-of-a-DOM-node-in-JavaScript
- https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript
- https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
- https://www.w3schools.com/jsref/prop_win_localstorage.asp
- https://www.youtube.com/watch?time_continue=259&v=LfeOLVGHiXI&embeds_referring_euri=https%3A%2F%2Fblog.logrocket.com%2F&source_ve_path=MTM5MTE3LDI4NjY2&feature=emb_logo
- https://blog.logrocket.com/localstorage-javascript-complete-guide/
- https://www.geeksforgeeks.org/how-to-redirect-to-another-webpage-using-javascript/
- https://jsdoc.app/
- https://www.markdownguide.org/cheat-sheet/
Copyright (c) 2024
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.