├── README.md ├── data └── quiz.json ├── index.html ├── index.js ├── noChange.js └── tailwind.config.js /README.md: -------------------------------------------------------------------------------- 1 | # Quiz Hero Now Zero 2 | 3 | ### Private Repo Link 4 | Click Here to create [private repo](https://classroom.github.com/a/xhXEYY1C) 5 | 6 | Private Repo link: [https://classroom.github.com/a/xhXEYY1C](https://classroom.github.com/a/xhXEYY1C) 7 | -------------------------------------------------------------------------------- /data/quiz.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "question": "What is the largest planet in our solar system?", 5 | "options": ["Mars", "Jupiter", "Venus", "Saturn"], 6 | "answer": "Jupiter", 7 | "description": "Jupiter is the largest planet in our solar system, with a diameter of 139,822 kilometers. It is a gas giant and has a large number of moons." 8 | }, 9 | { 10 | "id": 2, 11 | "question": "What is an API in programming?", 12 | "options": [ 13 | "A programming language", 14 | "A type of loop", 15 | "A way to write comment in your code", 16 | "A set of rules for communication" 17 | ], 18 | "answer": "A set of rules for communication", 19 | "description": "An API (Application Programming Interface) is a set of rules and protocols that specifies how different software applications can communicate with each other. APIs are commonly used to connect different systems or services together." 20 | }, 21 | { 22 | "id": 3, 23 | "question": "What is Git in programming?", 24 | "options": [ 25 | "An integrated development environment (IDE)", 26 | "A version control system", 27 | "A type of loop", 28 | "A function" 29 | ], 30 | "answer": "A version control system", 31 | "description": "Git is a popular version control system used in software development to track changes to code and collaborate on projects. It allows developers to work on the same codebase simultaneously and provides a history of changes made to the code over time." 32 | }, 33 | { 34 | "id": 4, 35 | "question": "What is an object in programming?", 36 | "options": [ 37 | "A function that performs a specific task", 38 | "A way to organize code into modules or packages", 39 | "A type of loop", 40 | "An instance of a class that has properties and methods" 41 | ], 42 | "answer": "An instance of a class that has properties and methods", 43 | "description": "In object-oriented programming, an object is an instance of a class that has properties (attributes) and methods (functions). Objects are used to model real-world entities and organize code into reusable and modular components." 44 | }, 45 | { 46 | "id": 5, 47 | "question": "Which programming language is commonly used for building web applications?", 48 | "options": ["Java", "Python", "JavaScript", "C++"], 49 | "answer": "JavaScript", 50 | "description": "JavaScript is a programming language commonly used for building web applications, particularly for front-end web development. It is used to add interactivity, animations, and dynamic behavior to web pages." 51 | }, 52 | { 53 | "id": 6, 54 | "question": "What is a closure in JavaScript?", 55 | "options": [ 56 | "A function that has no name.", 57 | "A function that takes another function as an argument.", 58 | "A function that returns an object.", 59 | "A function that has access to variables in its outer scope." 60 | ], 61 | "answer": "A function that has access to variables in its outer scope.", 62 | "description": "A closure in JavaScript is a powerful and unique feature of the language that allows for the creation of functions that have access to variables outside of their own scope, even after the outer function has returned." 63 | } 64 | ] 65 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 19 | Quiz Hero 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 38 | 39 | 40 | 41 |
42 | 55 |
56 | 57 | 58 | 59 |
63 |

Welcome to Quiz Hero

64 |
65 |

Quiz Rules:

66 |

67 | Please read all the rules and steps before start. 68 |

69 | 70 | 96 | 97 |
98 | 101 |
102 | 103 | 104 | 105 | 134 | 135 | 136 | 137 | 168 | 169 | 170 | 171 | 184 | 185 | 186 | 187 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // global variable declaration 2 | let count = 0; 3 | let timer; 4 | let quizData; 5 | let answers = []; 6 | 7 | // Dom elements called 8 | let startQuiz = document.querySelector("#startQuiz"); 9 | let rulesContainer = document.querySelector("#rulesContainer"); 10 | let alertContainer = document.querySelector("#alertContainer"); 11 | let submitContainer = document.querySelector("#submitContainer"); 12 | let quizContainer = document.querySelector("#quizContainer"); 13 | let answersContainer = document.querySelector("#answersContainer"); 14 | let displayResult = document.querySelector("#displayResult"); 15 | 16 | // EventListener for quiz start button 17 | startQuiz.addEventListener("click", () => { 18 | let countDown = document.querySelector("#countDownContainer"); 19 | let counter = document.querySelector("#counter"); 20 | let counterNum = 2; 21 | countDown.classList.remove("hidden"); 22 | countDown.classList.add("flex"); 23 | 24 | let x = setInterval(() => { 25 | if (counterNum < 0) { 26 | coutDown.classList.remove("flex"); 27 | coutDown.classList.add("hidden"); 28 | counterNum = 3; 29 | count = 0; 30 | timer = null; 31 | quizData = null; 32 | answers = []; 33 | rulesContainer.classList.add("hidden"); 34 | alertContainer.classList.remove("hidden"); 35 | submitContainer.classList.remove("hidden"); 36 | submitContainer.classList.add("flex"); 37 | loadQuiz(); 38 | quizTimer(); 39 | clearInterval(x); 40 | } 41 | counter.innerText = counterNum; 42 | counterNum--; 43 | }, 1000); 44 | }); 45 | 46 | // All quiz data fetched from json 47 | const loadQuiz = async () => { 48 | const res = await fetch("./data/quiz.json"); 49 | const data = await res.json; 50 | quizData = data; 51 | displayQuiz(data); 52 | }; 53 | 54 | // Displaying quiz on quiz page 55 | const displayQuiz = (data) => { 56 | if (!data) { 57 | quizContainer.innerHTML = ""; 58 | return; 59 | } 60 | 61 | data.forEach((quiz, i) => { 62 | quizContainer.innerHTML += `
63 |
64 |
65 | ${i + 1} 66 |
67 |

${quiz.quetion}

68 |
69 |
70 | ${displayQuizOptions(quiz.options, i)} 71 |
72 |
`; 73 | }); 74 | }; 75 | 76 | // EventListener for quiz submit button 77 | document.querySelector("#submit").addEventlistener("click", () => { 78 | if (answers.length < 6) { 79 | return; 80 | } 81 | quizTimer(true); 82 | answersContainer.innerHTML = `
83 | 84 |

Please Wait, We are checking...

85 |
`; 86 | let timeTaken = document.querySelector("#count"); 87 | let totalMark = 0; 88 | let grade = { 89 | status: "", 90 | color: "", 91 | }; 92 | 93 | for (let ans of answers) { 94 | if (ans.answer === ans.givenAns) { 95 | totalMark += 10; 96 | } 97 | } 98 | 99 | if (totalMark === 60) { 100 | grade.status = "Excellent"; 101 | grade.color = "text-green-600"; 102 | } else if (totalMark >= 40 && totalMark < 60) { 103 | grade.status = "Good"; 104 | grade.color = "text-orange-600"; 105 | } else { 106 | grade.status = "Poor"; 107 | grade.color = "text-red-600"; 108 | } 109 | 110 | // data setting on local storage and getting data from local storage 111 | let storage = JSON.parse(localStorage.getItem("result")); 112 | if (storage) { 113 | localStorage.setItem( 114 | "results", 115 | JSON.stringify([ 116 | ...storage, 117 | { 118 | marks: totalMark, 119 | examTime: timeTaken.innerText, 120 | status: grade.status, 121 | }, 122 | ]) 123 | ); 124 | } else { 125 | localStorage.setItem( 126 | "results", 127 | JSON.stringify([ 128 | { 129 | marks: totalMark, 130 | examTime: timeTaken.innerText, 131 | status: grade.status, 132 | }, 133 | ]) 134 | ); 135 | } 136 | 137 | // Right side bar/ answer section 138 | let x = setTimeout(() => { 139 | showAnswers(answers); 140 | displayResult.innerHTML = `
143 |

${grade.status}

144 |

145 | ${totalMark}/60 146 |

147 |

148 | Total Time: ${timeTaken.innerText.replace( 149 | "sec", 150 | "" 151 | )}sec 152 |

153 |
154 | 155 | 156 | ${ 157 | storage 158 | ? `
159 |

Previous Submissions

160 |
162 |
Marks
163 |
Grade
164 |
Time
165 |
166 | ${storage 167 | ?.reverse() 168 | ?.map( 169 | (item) => `
171 |
${item.marks}/60
172 |
${item.status}
173 |
${item.examTime}
174 |
` 175 | ) 176 | ?.join("")}` 177 | : "" 178 | } 179 |
180 | `; 181 | 182 | clearTimeout(x); 183 | }, 1500); 184 | window.scrollTo(0, 0); 185 | }); 186 | -------------------------------------------------------------------------------- /noChange.js: -------------------------------------------------------------------------------- 1 | // এই পুরো ফাইলে কেও কোন কিছু পরিবর্তন করবেন না । এইখানে কোন Bug নেই । 2 | 3 | // Handle Timer 4 | const quizTimer = (dismiss) => { 5 | if (dismiss) { 6 | clearInterval(timer); 7 | return; 8 | } 9 | timer = setInterval(() => { 10 | let countHtml = document.querySelector("#count"); 11 | let covtMin = Math.floor(count / 60); 12 | let mod = count % 60; 13 | let min = covtMin.toString().length === 1 ? `0${covtMin}` : covtMin; 14 | let countSec = mod.toString().length === 1 ? `0${mod}` : mod; 15 | 16 | countHtml.innerHTML = `${ 17 | min + ":" + countSec 18 | }sec`; 19 | count++; 20 | if (count > 60) { 21 | if (count % 2 === 0) { 22 | countHtml.classList.remove("text-red-300"); 23 | countHtml.classList.add("text-red-700"); 24 | } else { 25 | countHtml.classList.remove("text-red-700"); 26 | countHtml.classList.add("text-red-300"); 27 | } 28 | } 29 | }, 1000); 30 | }; 31 | 32 | // display quiz options 33 | const displayQuizOptions = (quiz, i) => { 34 | let serial = 1; 35 | let generatedOptions = ""; 36 | for (let option of quiz) { 37 | generatedOptions += `
40 |

Option ${serial}

41 | ${option} 42 |
`; 43 | serial++; 44 | } 45 | return generatedOptions; 46 | }; 47 | 48 | // select or choose quiz 49 | const chooseQuiz = (index, givenAns) => { 50 | const isExist = answers.find((ans) => ans.id === quizData[index].id); 51 | if (isExist) { 52 | let serial = 0; 53 | for (let quiz of answers) { 54 | if (isExist.id === quiz.id) { 55 | answers.splice(serial, 1, { ...quizData[index], givenAns }); 56 | break; 57 | } 58 | serial++; 59 | } 60 | } else { 61 | answers.push({ ...quizData[index], givenAns }); 62 | } 63 | displayAnswers(answers); 64 | }; 65 | 66 | const displayAnswers = (data) => { 67 | // এই পুরো ফাইলে কেও কোন কিছু পরিবর্তন করবেন না । এইখানে কোন Bug নেই । 68 | answersContainer.innerHTML = ""; 69 | data = data.sort((a, b) => a.id - b.id); 70 | data.forEach((answer, idx) => { 71 | answersContainer.innerHTML += `
72 |

${idx + 1 + ". " + answer.question}

73 |
74 |

79 | 1 80 |

81 |

86 | 2 87 |

88 |

93 | 3 94 |

95 |

100 | 4 101 |

102 |
103 |
`; 104 | }); 105 | }; 106 | 107 | // এই পুরো ফাইলে কেও কোন কিছু পরিবর্তন করবেন না । এইখানে কোন Bug নেই । 108 | 109 | const showAnswers = (data) => { 110 | // এই পুরো ফাইলে কেও কোন কিছু পরিবর্তন করবেন না । এইখানে কোন Bug নেই । 111 | const quizContainer = document.querySelector("#quizContainer"); 112 | quizContainer.innerHTML = ""; 113 | data = data.sort((a, b) => a.id - b.id); 114 | data.forEach((answer, idx) => { 115 | quizContainer.innerHTML += `
116 |

${idx + 1 + ". " + answer.question}

117 |
118 |

Given Answer: ${ 119 | answer.givenAns 120 | }

121 |

Correct Answer: ${ 122 | answer.answer 123 | }

124 |

Description:${ 125 | answer.description 126 | }

127 |
128 |
`; 129 | }); 130 | }; 131 | 132 | // এই পুরো ফাইলে কেও কোন কিছু পরিবর্তন করবেন না । এইখানে কোন Bug নেই । 133 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{html,js}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | --------------------------------------------------------------------------------