├── .github └── ISSUE_TEMPLATE │ ├── bug-report.md │ ├── custom.md │ └── feature_request.md ├── CONTRIBUTING.md ├── README.md ├── code ├── assets │ ├── css │ │ └── style.css │ ├── logo │ │ ├── Logo.png │ │ └── favicon │ │ │ ├── android-chrome-192x192.png │ │ │ ├── android-chrome-512x512.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon.ico │ │ │ └── site.webmanifest │ └── script.js └── script.js └── index.html /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[BUG]" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | ### Name:[Victor Nwakpa](https://github.com/victornwakpa) 3 | 4 | -Place : Ebonyi State, Nigeria 5 | 6 | -Bio: frontend - web devloper. 7 | 8 | -Github:[Victorious](https://github.com/victornwakpa) 9 | 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Quiz App 🚀

2 |

THIS REPO IS READY FOR HacktoberFest-23 You can start contributing !!!

3 |

Use this project to make your first contribution to an open source project on GitHub. Practice making your first pull request to a public repository before doing the real thing!

4 |

Celebrate Hacktoberfest by getting involved in the open source community by completing some simple tasks in this project.

5 |

This repository is open to all members of the GitHub community. Any member can contribute to this project.

6 | 7 |

New to Open Source ? No worries I will teach you how to contribute :

8 |

What is Hacktoberfest?

9 |

A month-long celebration from October 1st - 31st sponsored by Digital Ocean and GitHub to get people involved in Open Source. Create your very first pull request to any public repository on GitHub and contribute to the open source developer community.

10 |

https://hacktoberfest.digitalocean.com/

11 |

How to contribute to this project

12 |

Here are 3 quick ways to contribute to this project:

13 |
    14 |
  1. ⭐Star the Project.
    2. 15 |
  2. Connect with Project Admin on Linkedin : https://www.linkedin.com/in/bhavya-verma-754983247/
    3. 16 |
  3. Raise an issue
    4. 17 |
  4. Make a pull request and wait for it to be merged!
    5. 18 |
  5. Add your name to the CONTRIBUTORS.md file.
    6. 19 |
20 |

Getting started

21 |
    22 |
  1. Fork this repository (Click the Fork button in the top right of this page, click your Profile Image)
    2. 23 |
  2. Clone your fork down to your local machine
    3. 24 | 
    git clone https://github.com/your-username/hacktoberfest.git
    25 |
  3. Create a branch
    4. 26 | 
    git checkout -b branch-name
    27 |
  4. Make your changes (choose from any task below)
    5. 28 |
  5. Commit and push
    6. 29 | 
    git add .
30 | git commit -m 'Commit message'
31 | git push origin branch-name
    32 |
  6. Create a new pull request from your forked repository (Click the New Pull Request button located at the top of your repo)
    7. 33 |
  7. Wait for your PR review and merge approval!
    8. 34 |
  8. Star this repository if you had fun!
    9. 35 |
36 |

Contribution.md File should include

37 |
    38 |
  1. Add your name
    2. 39 |

    Add your name to the CONTRIBUTORS.md file using the below convention:

    40 | 
    #### Name: [YOUR NAME](GitHub link)
41 | - Place: City, State, Country
42 | - Bio: Who are you?
43 | - GitHub: [GitHub account name](GitHub link)
    44 |
  2. Add a profile page
    3. 45 |

    Add a Your_Name.md file to the profiles directory. Use any combination of content and Markdown you'd like. Here is an example:

    46 | 
    # Your Name
47 | 
48 | ### Location
49 | 
50 | Your City/Country
51 | 
52 | ### Academics
53 | 
54 | Your School
55 | 
56 | ### Interests
57 | 
58 | - Some Things You Like
59 | 
60 | ### Development
61 | 
62 | - Inventor of the My Pillow
63 | 
64 | ### Projects
65 | 
66 | - [My Project](GitHub Link) Short Description
67 | 
68 | ### Profile Link
69 | 
70 | [Your Name](GitHub Link)
    71 |
72 |

BONUS!

73 | 79 | -------------------------------------------------------------------------------- /code/assets/css/style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap'); 3 | 4 | * { 5 | padding: 0; 6 | margin: 0; 7 | box-sizing: border-box; 8 | font-family: Arial, Helvetica, sans-serif; 9 | } 10 | 11 | :root { 12 | --primary_color: #095ca0; 13 | --secondary_color: #2891d6; 14 | --text_color: #333; 15 | --background_color_start: #9dcbf7; 16 | --background_color_end: #001741; 17 | } 18 | 19 | body { 20 | font-family: Arial, sans-serif; 21 | background-image: linear-gradient(to bottom, var(--background_color_start), var(--background_color_end)); 22 | background-attachment: fixed; 23 | background-size: cover; 24 | background-repeat: no-repeat; 25 | color: var(--text_color); 26 | line-height: 1.6; 27 | } 28 | 29 | nav { 30 | height: 4rem; 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | padding: 1rem; 35 | background-color: var(--primary_color); 36 | color: white; 37 | box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); 38 | } 39 | 40 | nav .time { 41 | display: inline-block; 42 | width: 2em; 43 | } 44 | 45 | .navbar-logo{ 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | } 50 | 51 | .navbar-logo > img{ 52 | width: 4rem; 53 | } 54 | 55 | main { 56 | padding: 2rem; 57 | border: 1px solid #ddd; 58 | max-width: 800px; 59 | min-width: 200px; 60 | margin: 5rem auto; 61 | border-radius: 1rem; 62 | background-color: white; 63 | box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 64 | } 65 | 66 | main h1 { 67 | font-size: 2.5rem; 68 | color: var(--primary_color); 69 | margin-bottom: 1.5rem; 70 | font-family: Poppins, Arial, Helvetica, sans-serif; 71 | } 72 | 73 | main .description { 74 | font-size: 1.1rem; 75 | margin-top: 1rem; 76 | margin-bottom: 2rem; 77 | color: #777; 78 | } 79 | 80 | main .start { 81 | padding: 1rem 2rem; 82 | font-weight: bold; 83 | color: white; 84 | background-color: var(--primary_color); 85 | border-radius: 0.4rem; 86 | border: none; 87 | cursor: pointer; 88 | transition: background-color 0.3s ease; 89 | } 90 | 91 | main .start:hover { 92 | background-color: var(--secondary_color); 93 | } 94 | 95 | /* Quiz styles */ 96 | .question { 97 | font-weight: bold; 98 | font-size: 1.3rem; 99 | margin-bottom: 1rem; 100 | color: var(--text_color); 101 | } 102 | 103 | .option { 104 | padding: 1rem; 105 | background-color: var(--primary_color); 106 | color: white; 107 | border-radius: 0.5rem; 108 | margin-bottom: 0.5rem; 109 | cursor: pointer; 110 | transition: background-color 0.3s ease; 111 | } 112 | 113 | .option:hover { 114 | background-color: var(--secondary_color); 115 | } 116 | 117 | /* Show result styles */ 118 | .show_score { 119 | margin-bottom: 2rem; 120 | margin-top: 1rem; 121 | } 122 | 123 | .submit { 124 | padding: 0.5rem 1rem; 125 | color: white; 126 | background-color: var(--primary_color); 127 | border-radius: 0.4rem; 128 | border: none; 129 | cursor: pointer; 130 | transition: background-color 0.3s ease; 131 | } 132 | 133 | #warning{ 134 | color: red; 135 | } 136 | 137 | .submit:hover { 138 | background-color: var(--secondary_color); 139 | } 140 | 141 | input[name="initials"] { 142 | width: 8em; 143 | height: 2em; 144 | margin-right: 0.5em; 145 | padding: 0.5rem; 146 | border: 1px solid #ccc; 147 | border-radius: 0.4rem; 148 | } 149 | 150 | #leaderboard{ 151 | cursor: pointer; 152 | } 153 | 154 | .answer { 155 | border-top: 1px solid #ddd; 156 | padding-top: 1rem; 157 | } 158 | 159 | .leaderboard_show { 160 | padding: 1rem; 161 | background-color: white; 162 | } 163 | 164 | #go_back, 165 | #clear_highscores { 166 | background-color: var(--primary_color); 167 | color: white; 168 | padding: 0.5rem 1rem; 169 | border-radius: 0.4rem; 170 | border: none; 171 | cursor: pointer; 172 | transition: background-color 0.3s ease; 173 | } 174 | 175 | #go_back:hover, 176 | #clear_highscores:hover { 177 | background-color: var(--secondary_color); 178 | /* padding: 0; 179 | margin: 0; */ 180 | box-sizing: border-box; 181 | 182 | } -------------------------------------------------------------------------------- /code/assets/logo/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhaavvya/Quiz/fc187af3ee5f5f3918dfcb64112ef9583b2488ad/code/assets/logo/Logo.png -------------------------------------------------------------------------------- /code/assets/logo/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhaavvya/Quiz/fc187af3ee5f5f3918dfcb64112ef9583b2488ad/code/assets/logo/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /code/assets/logo/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhaavvya/Quiz/fc187af3ee5f5f3918dfcb64112ef9583b2488ad/code/assets/logo/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /code/assets/logo/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhaavvya/Quiz/fc187af3ee5f5f3918dfcb64112ef9583b2488ad/code/assets/logo/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /code/assets/logo/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhaavvya/Quiz/fc187af3ee5f5f3918dfcb64112ef9583b2488ad/code/assets/logo/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /code/assets/logo/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhaavvya/Quiz/fc187af3ee5f5f3918dfcb64112ef9583b2488ad/code/assets/logo/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /code/assets/logo/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bhaavvya/Quiz/fc187af3ee5f5f3918dfcb64112ef9583b2488ad/code/assets/logo/favicon/favicon.ico -------------------------------------------------------------------------------- /code/assets/logo/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /code/assets/script.js: -------------------------------------------------------------------------------- 1 | 2 | const main = document.querySelector("main"); 3 | 4 | const start = document.querySelector(".start"); 5 | const time = document.querySelector(".time"); 6 | const leaderboard = document.querySelector("#leaderboard"); 7 | let newScore=0; 8 | function generateQuiz({ question, options, answer }) { 9 | let isChoose = false; 10 | const handleClick = (e) => { 11 | // alert("handle click"); 12 | if (isChoose) return; 13 | isChoose = true; 14 | const opt = e.target; 15 | displayAnswer(opt.dataset.idx == answer); 16 | 17 | setTimeout(() => { 18 | if (next >= quiz.length || Number(time.textContent) <= 0) { 19 | clearInterval(timeId); // Clear the interval if time is 0 or negative 20 | time.textContent = "0"; 21 | displayScore(); 22 | } else { 23 | updateQuiz(next++); 24 | } 25 | }, 1000); 26 | }; 27 | main.innerHTML = ""; 28 | 29 | const queDiv = document.createElement("div"); 30 | queDiv.classList.add("question"); 31 | queDiv.textContent = question; 32 | 33 | const optionsDiv = document.createElement("div"); 34 | optionsDiv.addEventListener("click", handleClick); 35 | options.forEach((opt, idx) => { 36 | const optDiv = document.createElement("div"); 37 | optDiv.classList.add("option"); 38 | optDiv.dataset.idx = idx + 1; 39 | optDiv.textContent = opt; 40 | optionsDiv.append(optDiv); 41 | }); 42 | 43 | main.append(queDiv); 44 | main.append(optionsDiv); 45 | } 46 | 47 | function handleSubmit(e) { 48 | e.preventDefault(); 49 | const clickSubmit = confirm("submit"); //store the value of the confirm() alert 50 | 51 | // if the value of clickSubmit is true, executed the code below 52 | if (clickSubmit) { 53 | const initials = document.querySelector('input[name="initials"]').value; 54 | const history = JSON.parse(localStorage.getItem("leaderboard")) || []; 55 | console.log("history: ", history); 56 | history.push({ name: initials, score: newScore }); 57 | localStorage.setItem("leaderboard", JSON.stringify(history)); 58 | } 59 | } 60 | function displayScore() { 61 | clearInterval(timeId); 62 | main.innerHTML = ` 63 |

All done!

64 |

Your final score is ${newScore}.

65 |
66 | 69 | 70 |
71 | `; 72 | main.querySelector(".submit").addEventListener("click", handleSubmit); 73 | } 74 | function displayAnswer(isCorrect) { 75 | if (!isCorrect) time.textContent = time.textContent - 10; 76 | if(isCorrect)newScore++; 77 | const answerDiv = document.createElement("div"); 78 | answerDiv.classList.add("answer"); 79 | answerDiv.textContent = isCorrect ? "correct!" : "Incorrect!"; 80 | main.append(answerDiv); 81 | } 82 | function updateQuiz(next) { 83 | generateQuiz(quiz[next]); 84 | } 85 | 86 | const quiz = [ 87 | { 88 | question: "Arrays in JavaScript can be used to store ________.", 89 | options: [ 90 | "1. numbers and strings", 91 | "2. other arrays", 92 | "3. booleans", 93 | "4. all of the above", 94 | ], 95 | answer: 4, 96 | }, 97 | { 98 | question: "JavaScript is a ________-side programming language.", 99 | options: ["1. server", "2. client", "3. both", "4. non of the above"], 100 | answer: 3, 101 | }, 102 | { 103 | question: "What does HTML stand for?", 104 | options: [ 105 | "1. Hyper Text Markup Language", 106 | "2. High Tech Modern Language", 107 | "3. Hyperlink and Text Markup Language", 108 | "4. all of the above", 109 | ], 110 | answer: 1, 111 | }, 112 | { 113 | question: "In Python, which keyword is used to define a function?", 114 | options: ["1. fun", "2. def", "3. booleans", "4. all of the above"], 115 | answer: 2, 116 | }, 117 | { 118 | question: "Which of the following is not a programming language?", 119 | options: ["1. Python", "2. HTML", "3. C++", "4. all of the above"], 120 | answer: 2, 121 | }, 122 | { 123 | question: `What is the result of 10 + "5" in JavaScript?`, 124 | options: ["1. 10", "2. 15", "3. 105", "4. all of the above"], 125 | answer: 3, 126 | }, 127 | { 128 | question: "What is the primary purpose of CSS?", 129 | options: [ 130 | "1. styling web pages", 131 | "2. numbers and strings", 132 | "3. booleans", 133 | "4. all of the above", 134 | ], 135 | answer: 1, 136 | }, 137 | { 138 | question: 139 | "Which data type is used to represent a true or false value in Python?", 140 | options: [ 141 | "1. other arrays", 142 | "2. numbers and strings", 143 | "3. booleans", 144 | "4. all of the above", 145 | ], 146 | answer: 3, 147 | }, 148 | { 149 | question: "What does SQL stand for?", 150 | options: [ 151 | "1. Structured Query Language", 152 | "2. numbers and strings", 153 | "3. booleans", 154 | "4. all of the above", 155 | ], 156 | answer: 1, 157 | }, 158 | { 159 | question: "what is this", 160 | options: [ 161 | "1. quiz", 162 | "2. numbers and strings", 163 | "3. to make decisions based on conditions", 164 | "4. all of the above", 165 | ], 166 | answer: 3, 167 | }, 168 | ]; 169 | 170 | let next = 1; 171 | let timeId = null; 172 | 173 | function goBack() { 174 | main.innerHTML = ` 175 |

Coding Trivia Quiz

176 |

Can you tackle these programming questions within the time? Get ready to SPEEDRUN! 177 |

178 |

Keep in mind Incorrect answers will result in a time penalty of ten seconds!

179 | 180 | `; 181 | main.querySelector(".start").addEventListener("click", () => { 182 | generateQuiz(quiz[0]); 183 | time.textContent = "50"; 184 | next = 1; 185 | timeId = setInterval(() => { 186 | if (Number(time.textContent) > 0) { 187 | time.textContent -= 1; 188 | } else { 189 | clearInterval(timeId); // Clear the interval when the timer reaches 0 190 | time.textContent = "0"; 191 | displayScore(); // Call a function to display the user's score or end the quiz 192 | } 193 | }, 1000); 194 | }); 195 | } 196 | 197 | function displayLeaderboard() { 198 | main.innerHTML = ` 199 |

Highscores

200 |
201 | ${(JSON.parse(localStorage.getItem("leaderboard")) || []) 202 | .sort((a, b) => b.score - a.score) 203 | .map((item, idx) => { 204 | return `
${idx + 1}. ${item.name} - ${item.score}
`; 205 | }) 206 | .join("")} 207 |
208 | 209 | 210 | `; 211 | main.querySelector("#go_back").addEventListener("click", goBack); 212 | main.querySelector("#clear_highscores").addEventListener("click", () => { 213 | const clickClear = confirm("clear all highscores") //Store the value of confirm() 214 | 215 | // if the value of clickClear is true, execute the code below. 216 | if (clickClear) { 217 | localStorage.clear(); 218 | } 219 | }); 220 | } 221 | leaderboard.addEventListener("click", displayLeaderboard); 222 | 223 | // Initial 224 | goBack(); 225 | 226 | 227 | -------------------------------------------------------------------------------- /code/script.js: -------------------------------------------------------------------------------- 1 | const timer = document.querySelector('#time span') 2 | 3 | setInterval(() => { 4 | timer.innerText = new Date().toLocaleString() 5 | }, 1000) 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Quiz Project 12 | 13 | 14 | 15 |
16 | 22 | 23 |
24 |
25 |

Coding Quiz Challenge

26 |

Try to answer the following code-related questions within the 27 | time limit.
28 | Keep in mind that incorrect answers will penalize your 29 | score/time by ten seconds! 30 |

31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | --------------------------------------------------------------------------------