├── LICENSE ├── README.md ├── index.html ├── script.js └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Ali Tahir 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quiz-app-JS 2 | 3 | This website is based on online test taking system like NTS. 4 | 5 | ### Developed With: 6 | 7 | * HTML. 8 | * CSS. 9 | * JS. 10 | 11 | ### Silent Features: 12 | 13 | * Result of test taken is generated. 14 | * Unique and dynamic design. 15 | * Contains 50 questions. 16 | * Contains 5 questions per page. 17 | 18 | ### Project Preview: 19 | 20 | [Quiz App](https://alitahir4024.github.io/Quiz-app-JS/) 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Quiz-App-JS 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 |

Sign in yourself

17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 |
    34 |
  • 35 |
  • 36 |
  • 1/4
    • 37 |
38 |
39 | 40 |
41 | 42 |
43 |

 Q1-    How many provinces are there in Pakistan?

44 |
    45 |
    • 46 |
    • 47 |
    • 48 |
    • 49 |
50 |
51 | 52 |
53 |

 Q2-    How many seasons are there in Pakistan?

54 |
    55 |
    • 56 |
    • 57 |
    • 58 |
    • 59 |
60 |
61 | 62 |
63 |

 Q3-    How many wheels a car has?

64 |
    65 |
    • 66 |
    • 67 |
    • 68 |
    • 69 |
70 |
71 | 72 |
73 |

 Q4-    How many wheels a bike has?

74 |
    75 |
    • 76 |
    • 77 |
    • 78 |
    • 79 |
80 |
81 | 82 |
83 |

 Q5-    How many days are in a week?

84 |
    85 |
    • 86 |
    • 87 |
    • 88 |
    • 89 |
90 | 91 |
92 | 93 |
94 | 95 |
96 | 97 |
98 |

 Q6-    How many months are in a year?

99 |
    100 |
    • 101 |
    • 102 |
    • 103 |
    • 104 |
105 |
106 | 107 |
108 |

 Q7-    Leap year comes after how many years?

109 |
    110 |
    • 111 |
    • 112 |
    • 113 |
    • 114 |
115 |
116 | 117 |
118 |

 Q8-    If we divide 10 by 2 then what is the reminder?

119 |
    120 |
    • 121 |
    • 122 |
    • 123 |
    • 124 |
125 |
126 | 127 |
128 |

 Q9-    2*25=__?

129 |
    130 |
    • 131 |
    • 132 |
    • 133 |
    • 134 |
135 |
136 | 137 |
138 |

 Q10-    How many minutes are there in an hour?

139 |
    140 |
    • 141 |
    • 142 |
    • 143 |
    • 144 |
145 | 146 |
147 | 148 |
149 | 150 |
151 | 152 |
153 |

 Q11-    How many hours are there in one day?

154 |
    155 |
    • 156 |
    • 157 |
    • 158 |
    • 159 |
160 |
161 | 162 |
163 |

 Q12-    We have how many eyes?

164 |
    165 |
    • 166 |
    • 167 |
    • 168 |
    • 169 |
170 |
171 | 172 |
173 |

 Q13-    10+2=__?

174 |
    175 |
    • 176 |
    • 177 |
    • 178 |
    • 179 |
180 |
181 | 182 |
183 |

 Q14-    5*4=__?

184 |
    185 |
    • 186 |
    • 187 |
    • 188 |
    • 189 |
190 |
191 | 192 |
193 |

 Q15-    We have how many fingers?

194 |
    195 |
    • 196 |
    • 197 |
    • 198 |
    • 199 |
200 | 201 |
202 | 203 |
204 | 205 |
206 | 207 |
208 |

 Q16-    How many radians are in a circle?

209 |
    210 |
    • 211 |
    • 212 |
    • 213 |
    • 214 |
215 |
216 | 217 |
218 |

 Q17-    How many degrees are there in the circle?

219 |
    220 |
    • 221 |
    • 222 |
    • 223 |
    • 224 |
225 |
226 | 227 |
228 |

 Q18-    11*10=__?

229 |
    230 |
    • 231 |
    • 232 |
    • 233 |
    • 234 |
235 |
236 | 237 |
238 |

 Q19-    How many countries are there in world?

239 |
    240 |
    • 241 |
    • 242 |
    • 243 |
    • 244 |
245 |
246 | 247 |
248 |

 Q20-    Facebook was founded by how many people?

249 |
    250 |
    • 251 |
    • 252 |
    • 253 |
    • 254 |
255 | 256 |
257 | 258 |
259 | 260 |
261 | 262 |
263 |

your result is here

264 | 273 | Share your result 274 |
    275 |
    2. 276 |
    3. 277 |
    4. 278 |
    5. 279 |
280 |
281 | 282 |
283 | 284 | 285 | 286 | 287 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const body = document.querySelector('body').style, 2 | sign_in_btn = document.forms["form-1"]["reg-btn"], 3 | section = document.querySelector('section').style, 4 | header = document.querySelector('header').style, 5 | main = document.querySelector('main').style, 6 | sec_page_btn = document.querySelector('.sec-page-btn'), 7 | third_page_btn = document.querySelector('.third-page-btn'), 8 | fourth_page_btn = document.querySelector('.fourth-page-btn'), 9 | fifth_page_btn = document.querySelector('.fifth-page-btn'), 10 | cont_1 = document.querySelector('.cont-1').style, 11 | cont_2 = document.querySelector('.cont-2').style, 12 | cont_3 = document.querySelector('.cont-3').style, 13 | cont_4 = document.querySelector('.cont-4').style, 14 | result_page = document.querySelector('.result-page').style, 15 | page = document.querySelector('.page'), 16 | _que = document.querySelector('.que').style, 17 | correct_que = document.querySelector('.correct_que'), 18 | wrong_que = document.querySelector('.wrong_que'), 19 | att_que = document.querySelector('.att_que'), 20 | status = document.querySelector('.status'); 21 | 22 | sign_in_btn.onclick = () => { 23 | section.height = "200vh"; 24 | section.overflow = "hidden"; 25 | header.opacity = "0"; 26 | header.visibility = "hidden"; 27 | main.opacity = "1"; 28 | main.visibility = "visible"; 29 | body.transition = "all 0.5s"; 30 | body.overflow = "scroll"; 31 | const username = document.forms["form-1"]["username"].value, 32 | userid = document.forms["form-1"]["userid"].value, 33 | _username = document.querySelectorAll('.username'), 34 | _userid = document.querySelectorAll('.userid'); 35 | Array.from(_username).forEach(name => { 36 | name.innerHTML = username; 37 | }); 38 | Array.from(_userid).forEach(id => { 39 | id.innerHTML = userid; 40 | }); 41 | page.innerHTML = "1/4"; 42 | alert("You have to attempt all questions and if you don't then zero mark will be considered for that question.") 43 | } 44 | 45 | sec_page_btn.onclick = () => { 46 | cont_1.opacity = "0"; 47 | cont_1.visibility = "hidden"; 48 | cont_1.zIndex = "-1"; 49 | cont_2.opacity = "1"; 50 | cont_2.visibility = "visible"; 51 | cont_2.zIndex = "1"; 52 | body.transition = "all 0.5s"; 53 | page.innerHTML = "2/4"; 54 | } 55 | 56 | third_page_btn.onclick = () => { 57 | cont_2.opacity = "0"; 58 | cont_2.visibility = "hidden"; 59 | cont_2.zIndex = "-2"; 60 | cont_3.opacity = "1"; 61 | cont_3.visibility = "visible"; 62 | cont_3.zIndex = "2"; 63 | body.transition = "all 0.5s"; 64 | page.innerHTML = "3/4"; 65 | } 66 | 67 | fourth_page_btn.onclick = () => { 68 | cont_3.opacity = "0"; 69 | cont_3.visibility = "hidden"; 70 | cont_3.zIndex = "-3"; 71 | cont_4.opacity = "1"; 72 | cont_4.visibility = "visible"; 73 | cont_4.zIndex = "3"; 74 | body.transition = "all 0.5s"; 75 | page.innerHTML = "4/4"; 76 | } 77 | 78 | fifth_page_btn.onclick = () => { 79 | cont_4.opacity = "0"; 80 | cont_4.visibility = "hidden"; 81 | cont_4.zIndex = "-4"; 82 | result_page.opacity = "1"; 83 | result_page.visibility = "visible"; 84 | result_page.zIndex = "3"; 85 | section.height = "100vh"; 86 | section.backgroundColor = "#1AA15F"; 87 | section.overflow = "hidden"; 88 | main.opacity = "0"; 89 | main.visibility = "hidden"; 90 | main.zIndex = "-5"; 91 | body.transition = "all 0.5s"; 92 | body.overflow = "hidden"; 93 | if (correct_point >= 7) { 94 | alert("you have passed the test,click the next button below to view your result") 95 | status.innerHTML = "Pass"; 96 | } 97 | else { 98 | alert("you have failed the test,click the next button below to view your result") 99 | status.innerHTML = "Failed"; 100 | } 101 | } 102 | 103 | var correct_ans_arr = ["5", "4", "2", "7", "12", "50", "60", "24", "20", "10", "360", "110", "195", "0"] 104 | 105 | function wrong_selection() { 106 | section.backgroundColor = "red"; 107 | alert('your answer is wrong,move to next question') 108 | } 109 | 110 | var correct_point = 0; 111 | 112 | function right_selection(value) { 113 | for (i = 0; i <= correct_ans_arr.length - 1; i++) { 114 | if (value == correct_ans_arr[i]) { 115 | correct_point = correct_point + 1; 116 | section.backgroundColor = "#1AA15F"; 117 | correct_que.innerHTML = correct_point; 118 | wrong_que.innerHTML = 20 - correct_point; 119 | att_que.innerHTML = correct_point + (20 - correct_point); 120 | } 121 | } 122 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *,body{ 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | text-decoration: none; 6 | outline: none; 7 | color: inherit; 8 | font-family: monospace; 9 | scroll-behavior: smooth; 10 | transition: all 0.5s; 11 | } 12 | 13 | section{ 14 | position: relative; 15 | height: 100vh; 16 | width: 100%; 17 | background-color: #323232; 18 | display: grid; 19 | grid-template-columns: 70vw; 20 | grid-template-rows: 70vh; 21 | align-content: space-around; 22 | justify-content: space-evenly; 23 | overflow: hidden; 24 | } 25 | 26 | .sign-in{ 27 | background-color: white; 28 | border-radius: 10px; 29 | box-shadow: 0px 0px 10px 0.5px rgba(255,255,255,0.5); 30 | display: grid; 31 | align-content: space-around; 32 | justify-content: space-evenly; 33 | grid-template-columns: 0.99fr; 34 | grid-template-rows: 10vh 0.80fr; 35 | } 36 | 37 | .sign-in>h1{ 38 | font-weight: bold; 39 | font-size: 3rem; 40 | color: #323232; 41 | text-shadow: 0px 0px 0px rgba(0,0,0,0.5); 42 | justify-self: center; 43 | padding-top: 15px; 44 | } 45 | 46 | .sign-in>form{ 47 | display: grid; 48 | align-content: space-around; 49 | justify-content: space-evenly; 50 | } 51 | 52 | .sign-in>form>input{ 53 | height: 9vh; 54 | width: 35vw; 55 | border: 1px solid rgba(0,0,0,0.5); 56 | border-radius: 5px; 57 | padding-left: 10px; 58 | font-weight: normal; 59 | font-size: 1.5rem; 60 | transition: all 0.5s; 61 | } 62 | 63 | .sign-in>form>input::placeholder{ 64 | font-weight: bold; 65 | font-size: 1.8rem; 66 | color: rgba(0,0,0,0.5); 67 | } 68 | 69 | .sign-in>form>input:focus::placeholder{ 70 | opacity: 0; 71 | visibility: hidden; 72 | transition: all 0.5s; 73 | } 74 | 75 | .sign-in>form>button{ 76 | height: 8.5vh; 77 | width: 12vw; 78 | justify-self: center; 79 | border-radius: 0px 16px 0px 16px; 80 | border: none; 81 | font-weight: bold; 82 | font-size: 1.7rem; 83 | color: #323232; 84 | letter-spacing: 1px; 85 | background-color: transparent; 86 | border: none; 87 | transition: all 0.5s; 88 | cursor: pointer; 89 | background-color: #1AA15F; 90 | color: white; 91 | display: flex; 92 | align-items: center; 93 | justify-content: space-evenly; 94 | } 95 | 96 | .sign-in>form>button>i{ 97 | font-size: 2rem; 98 | } 99 | 100 | .sign-in>form>button:hover{ 101 | border-radius: 16px 0px 16px 0px; 102 | box-shadow: 0px 0px 10px 0.5px rgba(0,0,0,0.5); 103 | transform: scale(1.09); 104 | } 105 | 106 | section>main{ 107 | position: absolute; 108 | height: 98%; 109 | width: 95%; 110 | background-color: white; 111 | box-shadow: 0px 0px 10px 0.5px rgba(255,255,255,0.5); 112 | top: 1%; 113 | left: 2.1%; 114 | border-radius: 5px; 115 | display: grid; 116 | grid-template-columns: 0.98fr; 117 | grid-template-rows: 15vh 0.96fr; 118 | align-content: space-around; 119 | justify-content: space-evenly; 120 | opacity: 0; 121 | visibility: hidden; 122 | transition: all 0.5s; 123 | } 124 | 125 | .head{ 126 | background-color: transparent; 127 | box-shadow: 0px 0px 10px 2px #32323227; 128 | display: grid; 129 | grid-template-columns: 0.99fr; 130 | grid-template-rows: 0.99fr; 131 | align-content: space-around; 132 | justify-content: space-evenly; 133 | border-radius: 5px; 134 | } 135 | 136 | .head>ul{ 137 | display: flex; 138 | align-items: center; 139 | justify-content: space-around; 140 | } 141 | 142 | .head>ul>li:nth-child(odd){ 143 | font-weight: bold; 144 | font-size: 1.7rem; 145 | color: rgba(0,0,0,0.5); 146 | } 147 | 148 | .head>ul>li:nth-child(even){ 149 | font-weight: bold; 150 | font-size: 2.2rem; 151 | color: #323232; 152 | letter-spacing: 1px; 153 | } 154 | 155 | .que-cont{ 156 | display: grid; 157 | grid-template-columns: 0.98fr; 158 | grid-template-rows: repeat(5,32vh); 159 | align-content: space-around; 160 | justify-content: space-evenly; 161 | background-color: transparent; 162 | } 163 | 164 | .que{ 165 | position: relative; 166 | background-color: transparent; 167 | box-shadow: 0px 0px 10px 0.5px #32323238; 168 | display: grid; 169 | align-content: space-around; 170 | justify-content: flex-start; 171 | } 172 | 173 | .que>h1{ 174 | font-weight: bold; 175 | font-size: 2rem; 176 | color: #323232; 177 | letter-spacing: 1px; 178 | } 179 | 180 | .que>h1>span{ 181 | color: #1AA15F; 182 | letter-spacing: 1px; 183 | } 184 | 185 | .que>ul{ 186 | width: 40vw; 187 | height: 20vh; 188 | display: grid; 189 | grid-template-columns: repeat(2,10vw); 190 | grid-template-rows: repeat(2,8vh); 191 | align-content: space-around; 192 | justify-content: space-evenly; 193 | } 194 | 195 | .que>ul>li>button{ 196 | height: 100%; 197 | width: 100%; 198 | border: none; 199 | display: flex; 200 | align-items: center; 201 | justify-content: center; 202 | background-color: #eeeeee; 203 | cursor: pointer; 204 | transition: all 0.5s; 205 | border-radius: 10px; 206 | font-weight: bold; 207 | font-size: 1.5rem; 208 | color: #1AA15F; 209 | } 210 | 211 | .que>ul>li:hover,.que>button:hover{ 212 | box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2); 213 | transform: scale(1.05); 214 | } 215 | 216 | .que>button{ 217 | position: absolute; 218 | bottom: 3%; 219 | right: 2%; 220 | height: 9vh; 221 | width: 12vw; 222 | border: none; 223 | background-color: #1AA15F; 224 | color: white; 225 | font-weight: bold; 226 | font-size: 2rem; 227 | display: flex; 228 | align-items: center; 229 | justify-content: space-evenly; 230 | border-radius: 10px; 231 | letter-spacing: 1px; 232 | cursor: pointer; 233 | } 234 | 235 | .que>button>i{ 236 | font-size: 2.5rem; 237 | } 238 | 239 | .cont-2,.cont-3,.cont-4{ 240 | position: absolute; 241 | height: 89%; 242 | width: 97.9%; 243 | bottom: 9.5px; 244 | left: 13.5px; 245 | opacity: 0; 246 | visibility: hidden; 247 | transition: all 0.5s; 248 | } 249 | 250 | .result-page{ 251 | position: absolute; 252 | height: 80vh; 253 | width: 55vw; 254 | background-color: white; 255 | opacity: 0; 256 | visibility: hidden; 257 | border-radius: 5px; 258 | box-shadow: 0px 0px 10px 1px rgba(255,255,255,0.5); 259 | top: 12%; 260 | left: 22%; 261 | display: grid; 262 | grid-template-columns: 0.90fr; 263 | grid-template-rows: 5vh 40vh 3vh 7vh; 264 | align-content: space-around; 265 | justify-content: space-evenly; 266 | } 267 | 268 | .result-page>h1{ 269 | justify-self: center; 270 | font-weight: bold; 271 | font-size: 2.5rem; 272 | text-transform: capitalize; 273 | letter-spacing: 1px; 274 | color: #323232; 275 | } 276 | 277 | .result-page>ul{ 278 | display: grid; 279 | align-content: space-around; 280 | justify-content: space-evenly; 281 | justify-items: center; 282 | } 283 | 284 | .result-page>ul>li{ 285 | font-weight: bold; 286 | font-size: 1.5rem; 287 | letter-spacing: 1px; 288 | color: #323232; 289 | text-transform: capitalize; 290 | } 291 | 292 | .result-page>ul>li>span{ 293 | color: rgba(0,0,0,0.5); 294 | text-transform: none; 295 | } 296 | 297 | .result-page>b{ 298 | justify-self: center; 299 | font-weight: bold; 300 | font-size: 2.2rem; 301 | letter-spacing: 1px; 302 | color: rgba(0,0,0,0.5); 303 | padding-bottom: 10px; 304 | } 305 | 306 | .result-page>ol{ 307 | display: flex; 308 | align-items: center; 309 | justify-content: space-evenly; 310 | } 311 | 312 | .result-page>ol>li{ 313 | font-weight: bold; 314 | cursor: pointer; 315 | transition: all 0.5s; 316 | overflow: hidden; 317 | font-size: 1.5rem; 318 | color: #323232; 319 | border: 1px solid #1AA15F; 320 | border-radius: 50px; 321 | padding: 15px; 322 | } 323 | 324 | .result-page>ol>li:hover{ 325 | transition: all 0.5s; 326 | border: none; 327 | background-color: #323232; 328 | color: #1AA15F; 329 | box-shadow: 0px 0px 10px 1px rgba(255,255,255,0.5); 330 | } 331 | 332 | .result-page>ol>li:hover i{ 333 | transform: rotate(360deg) scale(1.09); 334 | } --------------------------------------------------------------------------------