├── .vscode └── settings.json ├── sound ├── Among us sound effect.mp3 ├── Success, win sound effect.mp3 ├── valorant kill sound effect.mp3 └── Ah S__t Here We Go Again - Sound Effect.mp3 ├── images ├── 1000_F_238024191_HkqzNfDxhnMIehEnRLpCwSwA1cVpQXcX.jpg └── pngtree-congratulations-header-vector-with-red-banner-circus-theme-design-art-ribbon-png-image_10259763.png ├── README.md ├── index.html ├── style.css └── javascript ├── javascript.js └── question.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | 4 | } 5 | -------------------------------------------------------------------------------- /sound/Among us sound effect.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abderrahmane-laourf/quiz-game/HEAD/sound/Among us sound effect.mp3 -------------------------------------------------------------------------------- /sound/Success, win sound effect.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abderrahmane-laourf/quiz-game/HEAD/sound/Success, win sound effect.mp3 -------------------------------------------------------------------------------- /sound/valorant kill sound effect.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abderrahmane-laourf/quiz-game/HEAD/sound/valorant kill sound effect.mp3 -------------------------------------------------------------------------------- /sound/Ah S__t Here We Go Again - Sound Effect.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abderrahmane-laourf/quiz-game/HEAD/sound/Ah S__t Here We Go Again - Sound Effect.mp3 -------------------------------------------------------------------------------- /images/1000_F_238024191_HkqzNfDxhnMIehEnRLpCwSwA1cVpQXcX.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abderrahmane-laourf/quiz-game/HEAD/images/1000_F_238024191_HkqzNfDxhnMIehEnRLpCwSwA1cVpQXcX.jpg -------------------------------------------------------------------------------- /images/pngtree-congratulations-header-vector-with-red-banner-circus-theme-design-art-ribbon-png-image_10259763.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abderrahmane-laourf/quiz-game/HEAD/images/pngtree-congratulations-header-vector-with-red-banner-circus-theme-design-art-ribbon-png-image_10259763.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌟 Quiz App 2 | Welcome to the **Quiz App**! 🎉 3 | This project is a simple yet interactive quiz application built using **HTML**, **CSS**, and **JavaScript**. 🚀 4 | --- 5 | 6 | 7 | ## 📖 Features 8 | - 🖼️ **Beautiful Interface**: User-friendly and responsive design. 9 | - 🕹️ **Interactive Quizzes**: Test your knowledge with dynamic questions. 10 | - 📊 **Score Tracking**: See how well you performed. 11 | --- 12 | ## VIDEO 13 | 14 | -- https://github.com/user-attachments/assets/f18810cc-15ab-4734-95cc-81a028f2e8d3 15 | 16 | ## 🛠️ Technologies Used 17 | - **HTML** 🏗️: Structure of the app. 18 | - **CSS** 🎨: Styling and layout. 19 | - **JavaScript** ⚙️: Logic and interactivity. 20 | --- 21 | ## 🚀 How to Run the Project 22 | 1. 📂 Clone the repository: 23 | ```bash 24 | git clone https://github.com/abderrahmane-laourf/quiz-game.git 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 | 38 | 39 | 63 | 64 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Oxanium:wght@200..800&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Rubik+Maps&family=Tiny5&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Oxanium:wght@200..800&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Rubik+Maps&family=Timmana&family=Tiny5&display=swap'); 3 | 4 | * { 5 | padding: 0px; 6 | margin: 0px; 7 | box-sizing: border-box; 8 | font-family: "IBM Plex Sans Arabic", serif; 9 | } 10 | 11 | body { 12 | background: linear-gradient(135deg, #0f2027, #203a43, #1c343f, #0d1333, #491313); 13 | background-repeat: no-repeat; 14 | background-size: 200% 200%; 15 | animation: gradientAnimation 100s ease infinite; 16 | 17 | } 18 | 19 | @keyframes gradientAnimation { 20 | 0% { 21 | background-position: 0% 50%; 22 | } 23 | 24 | 50% { 25 | background-position: 100% 50%; 26 | } 27 | 28 | 100% { 29 | background-position: 0% 50%; 30 | } 31 | } 32 | 33 | #menu { 34 | width: 30%; 35 | background-color: antiquewhite; 36 | margin: 10% auto; 37 | height: 370px; 38 | text-align: center; 39 | border-radius: 15px; 40 | } 41 | 42 | .hidden { 43 | display: none; 44 | } 45 | 46 | .container { 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: space-around; 50 | height: 300px; 51 | } 52 | 53 | .btn_language button { 54 | 55 | margin: 5px 5px; 56 | padding: 5px; 57 | width: 170px; 58 | outline: none; 59 | } 60 | 61 | 62 | 63 | .btn_language button, 64 | #btn_numero button { 65 | background-color: #ffffff; 66 | border: 1px solid #066669; 67 | padding: 10px 20px; 68 | cursor: pointer; 69 | } 70 | 71 | .btn_language button:hover, 72 | #btn_numero button:hover { 73 | background-color: #066669; 74 | } 75 | 76 | /* Use a class to represent the "active" or "focused" state */ 77 | .btn_language button.active, 78 | #btn_numero button.active { 79 | background-color: #066669; 80 | outline: none; 81 | text-align: center; 82 | } 83 | 84 | .btn_language, 85 | #btn_numero { 86 | font-weight: 600; 87 | font-size: 15px; 88 | } 89 | 90 | #btn_numero button { 91 | margin: 10px 10px; 92 | border-radius: 15px; 93 | } 94 | 95 | button { 96 | cursor: pointer; 97 | } 98 | 99 | #start { 100 | background: linear-gradient(to right, #066669, #000000); 101 | background-size: 200%; 102 | background-position: left; 103 | color: #ffffff; 104 | padding: 10px 20px; 105 | font-size: 16px; 106 | width: 50%; 107 | margin: 0px auto; 108 | border: none; 109 | border-radius: 5px; 110 | cursor: pointer; 111 | transition: background-position 0.7s ease-in-out; 112 | /* Animation fluide */ 113 | } 114 | 115 | #start:hover { 116 | background-position: right; 117 | /* Déplace le dégradé vers la droite */ 118 | } 119 | 120 | .quiz-start-button { 121 | width: 30%; 122 | margin: 22% 35%; 123 | height: 50px; 124 | text-align: center; 125 | border-radius: 15px; 126 | transition: all 1s ease; 127 | font-weight: 600; 128 | font-size: 20px; 129 | 130 | } 131 | 132 | .quiz-start-button:hover { 133 | scale: 1.1; 134 | background: linear-gradient(to right, #88ff00, #000000); 135 | background-position: right; 136 | } 137 | 138 | #quiz-container { 139 | width: 30%; 140 | background-color: antiquewhite; 141 | margin: 10% auto; 142 | height: 387px; 143 | border-radius: 15px; 144 | background-color: antiquewhite; 145 | padding: 11px; 146 | position: relative; 147 | } 148 | 149 | .quiz-header { 150 | display: flex; 151 | justify-content: space-between; 152 | align-items: center; 153 | padding: 5px; 154 | border-bottom: 2px solid #066669; 155 | } 156 | 157 | 158 | h4.question-text { 159 | color: #2c3e50; 160 | font-size: 18px; 161 | font-weight: 700; 162 | margin: 7px 0 10px 0; 163 | text-align: center; 164 | } 165 | 166 | 167 | .answer-options { 168 | list-style: none; 169 | padding: 2px; 170 | } 171 | 172 | .answer-option { 173 | border: none; 174 | font-weight: 800; 175 | font-size: 16px; 176 | color: #000000; 177 | padding: 7px 15px; 178 | margin-bottom: 4px; 179 | border-radius: 8px; 180 | cursor: pointer; 181 | transition: all 0.3s ease; 182 | width: 100%; 183 | display: flex; 184 | justify-content: space-between; 185 | align-items: center; 186 | background-color: #2980b9; 187 | } 188 | 189 | .answer-option:hover { 190 | background-color: #066669; 191 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 192 | transform: translateY(-2px); 193 | } 194 | 195 | .answer-option.correct { 196 | background-color: #2ecc71; 197 | } 198 | 199 | .answer-option.incorrect { 200 | background-color: #e74c3c; 201 | } 202 | 203 | #true_symbole i, 204 | #false_symbole i { 205 | font-size: 18px; 206 | } 207 | 208 | .answer-option:active { 209 | transform: scale(0.95); 210 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 211 | } 212 | 213 | .quiz-footer { 214 | display: flex; 215 | justify-content: space-between; 216 | margin-top: 15px; 217 | align-items: center; 218 | } 219 | 220 | #next { 221 | background: linear-gradient(to right, #066669, #000000); 222 | background-size: 200%; 223 | background-position: left; 224 | color: white; 225 | padding: 3px; 226 | font-size: 16px; 227 | width: 50%; 228 | border: none; 229 | border-radius: 5px; 230 | cursor: pointer; 231 | transition: background-position 0.7s ease-in-out; 232 | text-align: center; 233 | position: absolute; 234 | bottom: 10px; 235 | right: 10px 236 | } 237 | 238 | .icon-timer { 239 | color: #000000; 240 | background-color: #2980b9; 241 | width: 50px; 242 | padding: 10px; 243 | text-align: center; 244 | border-radius: 20px; 245 | box-shadow: 3px 2px 3px rgba(179, 0, 0, 0.904); 246 | } 247 | 248 | #conteur { 249 | font-size: 19px; 250 | font-family: "IBM Plex Sans Arabic", serif; 251 | font-weight: 700; 252 | position: absolute; 253 | bottom: 10px; 254 | } 255 | 256 | .icon-timer>p { 257 | font-size: 17px; 258 | font-family: "IBM Plex Sans Arabic", serif; 259 | font-weight: 600; 260 | color: rgb(0, 0, 0); 261 | } 262 | 263 | .icon-timer>i { 264 | color: #000000; 265 | font-size: 17px; 266 | } 267 | 268 | #result img { 269 | width: 30%; 270 | height: 30%; 271 | border-radius: 10px; 272 | } 273 | 274 | #result { 275 | width: 30%; 276 | background-color: antiquewhite; 277 | margin: 10% auto; 278 | height: 370px; 279 | border-radius: 15px; 280 | background-color: antiquewhite; 281 | padding: 11px; 282 | text-align: center; 283 | } 284 | 285 | .try_again { 286 | margin-top: 30px; 287 | cursor: pointer; 288 | } 289 | 290 | #try { 291 | font-weight: 600; 292 | color: #066669; 293 | } 294 | 295 | .try_again i { 296 | font-size: 25px; 297 | color: #066669; 298 | } 299 | 300 | #abde { 301 | position: relative; 302 | top: 30px; 303 | font-size: 17px; 304 | font-weight: 600; 305 | } -------------------------------------------------------------------------------- /javascript/javascript.js: -------------------------------------------------------------------------------- 1 | import { questions } from './question.js'; 2 | 3 | const answerOptions = document.querySelector(".answer-options"); 4 | const nextButton = document.querySelector(".next"); 5 | const next = document.querySelector("#next"); 6 | const questionStatus = document.querySelector(".conteur"); 7 | const correct_sound = document.querySelector("#correct-sound"); 8 | const incorrect_sound = document.querySelector("#incorrect-sound"); 9 | const timerdisplay = document.querySelector("#timer-duration"); 10 | const menu = document.getElementById('menu'); 11 | const questionPage = document.getElementById('quiz-container'); 12 | const resultPage = document.getElementById('result'); 13 | const try_again = document.querySelector('.try-again'); 14 | const win = document.querySelector('#win'); 15 | // const ah = document.querySelector('#ah'); 16 | 17 | 18 | const QUIZ_TIME_LIMIT = 15; 19 | let currenttime = QUIZ_TIME_LIMIT; 20 | let timeinterval = null; 21 | let currentquestion = null; 22 | let questionsIndexHistory = []; 23 | let numberofquestion = 5; 24 | let quizcategory = "javascript"; // Default category 25 | let correctanswercount = 0; 26 | 27 | const showresults = () => { 28 | win.play(); 29 | menu.classList.add('hidden'); 30 | questionPage.classList.add('hidden'); 31 | resultPage.classList.remove('hidden'); 32 | const resulttext = `you are ansewered ${correctanswercount} of ${numberofquestion} question corectly Great effor Mr`; 33 | document.querySelector("#result-commant").innerHTML = resulttext; 34 | }; 35 | 36 | const startTimer = () => { 37 | currenttime = QUIZ_TIME_LIMIT; // Reset the time 38 | clearInterval(timeinterval); // Clear any existing timer 39 | timerdisplay.textContent = `${currenttime}s`; // Initialize timer display 40 | 41 | timeinterval = setInterval(() => { 42 | currenttime--; 43 | timerdisplay.textContent = `${currenttime}s`; 44 | 45 | if (currenttime <= 0) { 46 | clearInterval(timeinterval); 47 | console.log("Time's up!"); 48 | renderquestion(); 49 | } 50 | }, 1000); 51 | }; 52 | 53 | document.addEventListener('DOMContentLoaded', () => { 54 | const elements = { 55 | start: document.getElementById('start'), 56 | num: document.getElementsByClassName('num'), 57 | p1: document.getElementById('p1'), 58 | menu: document.getElementById('menu'), 59 | questionPage: document.getElementById('quiz-container'), 60 | resultPage: document.getElementById('result'), 61 | questionElement: document.getElementById('question'), 62 | answerButtons: document.getElementById('answer-buttons'), 63 | }; 64 | 65 | // Get quiz category and number of questions from localStorage 66 | quizcategory = localStorage.getItem("quizCategory") || "javascript"; 67 | numberofquestion = parseInt(localStorage.getItem("numberOfQuestions")) || 5; 68 | 69 | // Navigation entre les pages 70 | elements.p1.onclick = () => { 71 | elements.p1.classList.add('hidden'); 72 | elements.menu.classList.remove('hidden'); 73 | elements.questionPage.classList.add('hidden'); 74 | elements.resultPage.classList.add('hidden'); 75 | }; 76 | 77 | elements.start.onclick = () => { 78 | console.log("Start button clicked"); 79 | elements.menu.classList.add('hidden'); 80 | elements.questionPage.classList.remove('hidden'); 81 | elements.resultPage.classList.add('hidden'); 82 | 83 | // Store selected category and number of questions in localStorage 84 | const selectedCategory = document.querySelector(".btn_language .question-option.active").id; 85 | const selectedNumberOfQuestions = parseInt(document.querySelector("#btn_numero .num.active").textContent); 86 | 87 | console.log("Selected Category:", selectedCategory); 88 | console.log("Selected Number of Questions:", selectedNumberOfQuestions); 89 | 90 | localStorage.setItem("quizCategory", selectedCategory); 91 | localStorage.setItem("numberOfQuestions", selectedNumberOfQuestions); 92 | 93 | // Start the timer and render the first question when the quiz starts 94 | startTimer(); 95 | renderquestion(); 96 | }; 97 | 98 | const handleanswercorrect = () => { 99 | const correctoptions = answerOptions.querySelectorAll(".answer-option")[currentquestion.answerIndex]; 100 | currenttime = QUIZ_TIME_LIMIT; 101 | clearInterval(timeinterval); 102 | correctoptions.classList.add("correct"); 103 | const iconHTML = ''; 104 | correctoptions.insertAdjacentHTML("beforeend", iconHTML); 105 | }; 106 | 107 | const getRandomquestion = () => { 108 | console.log("Getting random question..."); 109 | 110 | if (questionsIndexHistory.length >= numberofquestion) { 111 | console.log("All questions answered. Showing results."); 112 | return showresults(); 113 | } 114 | 115 | const questionCategory = questions.find(cat => cat.category.toLowerCase() === quizcategory.toLowerCase()); 116 | console.log("Selected Category:", quizcategory); 117 | console.log("Available Categories:", questions.map(cat => cat.category)); 118 | 119 | if (!questionCategory || !questionCategory.question) { 120 | console.error("Error: Category not found or no questions in category.", quizcategory); 121 | return; 122 | } 123 | 124 | const availableQuestions = questionCategory.question.filter((_, index) => !questionsIndexHistory.includes(index)); 125 | 126 | if (availableQuestions.length === 0) { 127 | console.error("Error: No more questions available in this category.", quizcategory); 128 | return; 129 | } 130 | 131 | const randomQuestion = availableQuestions[Math.floor(Math.random() * availableQuestions.length)]; 132 | const originalIndex = questionCategory.question.indexOf(randomQuestion); 133 | questionsIndexHistory.push(originalIndex); 134 | console.log("Random Question:", randomQuestion); 135 | return randomQuestion; 136 | }; 137 | 138 | const handleAnsawer = (option, indexanswer) => { 139 | const isCorrect = currentquestion.answerIndex === indexanswer; 140 | option.classList.add(isCorrect ? "correct" : "incorrect"); 141 | !isCorrect ? handleanswercorrect() : correctanswercount++; 142 | isCorrect ? correct_sound.play() : incorrect_sound.play(); 143 | const iconHTML = `${isCorrect ? '' : ''}`; 144 | option.insertAdjacentHTML("beforeend", iconHTML); 145 | answerOptions.querySelectorAll(".answer-option").forEach(option => option.style.pointerEvents = "none"); 146 | next.style.visibility = "visible"; 147 | }; 148 | 149 | const renderquestion = () => { 150 | console.log("Rendering question..."); 151 | currentquestion = getRandomquestion(); 152 | 153 | if (!currentquestion) { 154 | console.error("Error: No question to render."); 155 | return; 156 | } 157 | 158 | if (!answerOptions) { 159 | console.error("Error: answerOptions element not found."); 160 | return; 161 | } 162 | 163 | answerOptions.innerHTML = ""; 164 | next.style.visibility = "hidden"; // Hide the next button initially 165 | document.querySelector('.question-text').textContent = currentquestion.question; 166 | questionStatus.textContent = `${questionsIndexHistory.length} of ${numberofquestion}`; 167 | 168 | currentquestion.options.forEach((option, Index) => { 169 | const li = document.createElement("li"); 170 | li.classList.add("answer-option"); 171 | li.textContent = option; 172 | answerOptions.appendChild(li); 173 | li.addEventListener("click", () => handleAnsawer(li, Index)); 174 | }); 175 | }; 176 | 177 | const handleButtonClick = (event) => { 178 | const button = event.target; 179 | const parentContainer = button.closest('.btn_language, #btn_numero'); 180 | 181 | if (parentContainer) { 182 | const active = parentContainer.querySelector('.active'); 183 | if (active) { 184 | active.classList.remove('active'); 185 | } 186 | button.classList.add('active'); 187 | 188 | if (parentContainer.classList.contains('btn_language')) { 189 | 190 | quizcategory = button.id; 191 | } else { 192 | 193 | numberofquestion = parseInt(button.textContent, 10); 194 | } 195 | } 196 | }; 197 | 198 | document.querySelectorAll('.btn_language button, #btn_numero .num').forEach(button => { 199 | button.addEventListener('click', handleButtonClick); 200 | }); 201 | 202 | nextButton.addEventListener("click", () => { 203 | // Reset and start the timer for the next question 204 | startTimer(); 205 | // Call renderquestion() to move to the next question 206 | renderquestion(); 207 | }); 208 | 209 | const tryAgainButton = document.querySelector(".try_again"); 210 | 211 | // Add an event listener to the button that triggers a page refresh 212 | tryAgainButton.addEventListener("click", () => { 213 | location.reload(); // This reloads the entire page 214 | }); 215 | }, false); 216 | -------------------------------------------------------------------------------- /javascript/question.js: -------------------------------------------------------------------------------- 1 | export const questions = [ 2 | { 3 | category: "javascript", 4 | question: [ 5 | { 6 | question: "What is the output of the following code? console.log(1 + '2' + '2');", 7 | options: ["122", "32", "14", "NaN"], 8 | answerIndex: 0 9 | }, 10 | { 11 | question: "What is the output of the following code? console.log(1 + '2' + '2');", 12 | options: ["122", "32", "14", "NaN"], 13 | answerIndex: 0 14 | }, 15 | { 16 | question: "What is the output of the following code? console.log(1 + 2 + '3');", 17 | options: ["33", "123", "6", "15"], 18 | answerIndex: 0 19 | }, 20 | { 21 | question: "What is the output of the following code? console.log(1 + '2' + 2);", 22 | options: ["122", "32", "14", "NaN"], 23 | answerIndex: 0 24 | }, 25 | { 26 | question: "What is the output of the following code? console.log('A' - 'B' + '2');", 27 | options: ["-1", "NaN", "1", "12"], 28 | answerIndex: 1 29 | }, 30 | { 31 | question: "What is the output of the following code? console.log('A' - 'B' + 2);", 32 | options: ["-1", "NaN", "1", "12"], 33 | answerIndex: 1 34 | }, 35 | { 36 | question: "Which company developed JavaScript?", 37 | options: ["Microsoft", "Sun Microsystems", "Netscape", "IBM"], 38 | answerIndex: 2 39 | }, 40 | { 41 | question: "Which symbol is used for single-line comments in JavaScript?", 42 | options: ["//", "/*", "#", "--"], 43 | answerIndex: 0 44 | }, 45 | // ... (rest of the JavaScript questions) 46 | ], 47 | }, 48 | { 49 | category: "html", 50 | question: [ 51 | { 52 | question: "Which of the following is used to create a hyperlink in HTML?", 53 | options: ["", "", "", ""], 54 | answerIndex: 0 55 | }, 56 | { 57 | question: "How do you add a background color in HTML?", 58 | options: [ 59 | "", 60 | "", 61 | "blue", 62 | "" 63 | ], 64 | answerIndex: 0 65 | }, 66 | { 67 | question: "Which HTML element is used to define an unordered list?", 68 | options: ["
    ", "
      ", "
    • ", ""], 69 | answerIndex: 1 70 | }, 71 | { 72 | question: "What is the purpose of the element in HTML?", 73 | options: [ 74 | "To define the main heading", 75 | "To specify the title of the web page shown in the browser tab", 76 | "To add a title to an image", 77 | "To define a section of the document" 78 | ], 79 | answerIndex: 1 80 | }, 81 | { 82 | question: "Which tag is used to insert an image in HTML?", 83 | options: ["<img>", "<picture>", "<image>", "<src>"], 84 | answerIndex: 0 85 | }, 86 | { 87 | question: "What is the correct syntax for creating a table in HTML?", 88 | options: [ 89 | "<table><tr><td></td></tr></table>", 90 | "<table><row><col></col></row></table>", 91 | "<table><thead><body></body></thead></table>", 92 | "<table><div><span></span></div></table>" 93 | ], 94 | answerIndex: 0 95 | }, 96 | { 97 | question: "How do you create a text input field in HTML?", 98 | options: ["<input type='text'>", "<input type='textbox'>", "<input text>", "<textbox>"], 99 | answerIndex: 0 100 | }, 101 | { 102 | question: "What is the correct HTML element for inserting a line break?", 103 | options: ["<lb>", "<break>", "<br>", "<newline>"], 104 | answerIndex: 2 105 | }, 106 | { 107 | question: "Which element is used to create a numbered list in HTML?", 108 | options: ["<ol>", "<ul>", "<li>", "<numberedlist>"], 109 | answerIndex: 0 110 | }, 111 | { 112 | question: "What is the correct HTML element for emphasizing text?", 113 | options: ["<em>", "<i>", "<strong>", "<italic>"], 114 | answerIndex: 0 115 | }, 116 | { 117 | question: "Which HTML attribute is used to define inline styles?", 118 | options: ["class", "style", "css", "styles"], 119 | answerIndex: 1 120 | }, 121 | { 122 | question: "Which HTML element is used to specify a footer for a document or section?", 123 | options: ["<footer>", "<bottom>", "<section-footer>", "<foot>"], 124 | answerIndex: 0 125 | }, 126 | { 127 | question: "What does the <iframe> element do?", 128 | options: [ 129 | "Embeds another document within the current HTML document", 130 | "Creates a form", 131 | "Creates an image frame", 132 | "Adds a scrolling effect" 133 | ], 134 | answerIndex: 0 135 | }, 136 | { 137 | question: "How do you make a checkbox in HTML?", 138 | options: [ 139 | "<checkbox>", 140 | "<input type='checkbox'>", 141 | "<input type='box'>", 142 | "<input checkbox>" 143 | ], 144 | answerIndex: 1 145 | }, 146 | { 147 | question: "Which attribute specifies the URL of a linked resource in HTML?", 148 | options: ["src", "href", "link", "url"], 149 | answerIndex: 1 150 | }, 151 | { 152 | question: "What is the purpose of the <meta> tag in HTML?", 153 | options: [ 154 | "To define metadata about an HTML document", 155 | "To link external stylesheets", 156 | "To add images to the document", 157 | "To create navigation links" 158 | ], 159 | answerIndex: 0 160 | }, 161 | { 162 | question: "What is the correct HTML for making a drop-down list?", 163 | options: ["<select>", "<input type='dropdown'>", "<list>", "<dropdown>"], 164 | answerIndex: 0 165 | }, 166 | { 167 | question: "Which element is used to define the structure of an HTML table?", 168 | options: ["<table>", "<tr>", "<td>", "<th>"], 169 | answerIndex: 0 170 | }, 171 | { 172 | question: "How can you create an email link in HTML?", 173 | options: [ 174 | "<a href='mailto:xxx@yyy.com'>", 175 | "<mail href='xxx@yyy.com'>", 176 | "<a email='xxx@yyy.com'>", 177 | "<email>xxx@yyy.com</email>" 178 | ], 179 | answerIndex: 0 180 | }, 181 | { 182 | question: "Which tag is used to define a paragraph in HTML?", 183 | options: ["<p>", "<para>", "<paragraph>", "<text>"], 184 | answerIndex: 0 185 | }, 186 | { 187 | question: "What is the purpose of the <head> element in HTML?", 188 | options: [ 189 | "Contains metadata about the HTML document", 190 | "Defines the main content of the document", 191 | "Creates a header for a section", 192 | "Specifies a header for the entire page" 193 | ], 194 | answerIndex: 0 195 | }, 196 | { 197 | question: "Which attribute is used to provide extra information about an element and is often shown as a tooltip?", 198 | options: ["title", "info", "tooltip", "description"], 199 | answerIndex: 0 200 | }, 201 | { 202 | question: "What is the function of the <nav> element in HTML?", 203 | options: [ 204 | "Defines a set of navigation links", 205 | "Creates a new paragraph", 206 | "Adds a video to the page", 207 | "Specifies a section for news" 208 | ], 209 | answerIndex: 0 210 | }, 211 | { 212 | question: "How do you group a set of radio buttons in HTML?", 213 | options: [ 214 | "By giving them the same name", 215 | "By using the <group> tag", 216 | "By giving them the same class", 217 | "By using the <radio-group> tag" 218 | ], 219 | answerIndex: 0 220 | }, 221 | { 222 | question: "How do you group a set of radio buttons in HTML?", 223 | options: [ 224 | "By giving them the same name", 225 | "By using the <group> tag", 226 | "By giving them the same class", 227 | "By using the <radio-group> tag" 228 | ], 229 | answerIndex: 0 230 | }, 231 | ] 232 | }, 233 | { 234 | category: "css", 235 | question: [ 236 | { 237 | question: "What does CSS stand for?", 238 | options: [ 239 | "Computer Style Sheets", 240 | "Creative Style Sheets", 241 | "Cascading Style Sheets", 242 | "Colorful Style Sheets" 243 | ], 244 | answerIndex: 2 245 | }, 246 | { 247 | question: "Which property is used to change the background color of an element?", 248 | options: [ 249 | "color", 250 | "bgcolor", 251 | "background-color", 252 | "background" 253 | ], 254 | answerIndex: 2 255 | }, 256 | { 257 | question: "Which property is used to change the font size of text in CSS?", 258 | options: [ 259 | "font-style", 260 | "font-size", 261 | "text-size", 262 | "font-weight" 263 | ], 264 | answerIndex: 1 265 | }, 266 | { 267 | question: "How do you select an element with the class 'button' in CSS?", 268 | options: [ 269 | ".button", 270 | "#button", 271 | "button", 272 | "class.button" 273 | ], 274 | answerIndex: 0 275 | }, 276 | { 277 | question: "Which CSS property is used to change the text color?", 278 | options: [ 279 | "color", 280 | "text-color", 281 | "font-color", 282 | "text-style" 283 | ], 284 | answerIndex: 0 285 | }, 286 | { 287 | question: "How do you make text bold in CSS?", 288 | options: [ 289 | "font-weight: bold", 290 | "font-style: bold", 291 | "text-weight: bold", 292 | "text-decoration: bold" 293 | ], 294 | answerIndex: 0 295 | }, 296 | { 297 | question: "Which CSS property is used to create space between the border and the content?", 298 | options: [ 299 | "padding", 300 | "margin", 301 | "border-spacing", 302 | "spacing" 303 | ], 304 | answerIndex: 0 305 | }, 306 | { 307 | question: "Which property is used to set the width of an element?", 308 | options: [ 309 | "height", 310 | "width", 311 | "size", 312 | "dimensions" 313 | ], 314 | answerIndex: 1 315 | }, 316 | { 317 | question: "What does the 'float' property do in CSS?", 318 | options: [ 319 | "Positions an element to the left or right of its container", 320 | "Changes the size of an element", 321 | "Sets the background color of an element", 322 | "Aligns text inside an element" 323 | ], 324 | answerIndex: 0 325 | }, 326 | { 327 | question: "What is the default value of the 'position' property in CSS?", 328 | options: [ 329 | "relative", 330 | "absolute", 331 | "fixed", 332 | "static" 333 | ], 334 | answerIndex: 3 335 | }, 336 | { 337 | question: "Which CSS property is used to control the visibility of an element?", 338 | options: [ 339 | "display", 340 | "visibility", 341 | "opacity", 342 | "visibility-style" 343 | ], 344 | answerIndex: 1 345 | }, 346 | { 347 | question: "What does the 'z-index' property do in CSS?", 348 | options: [ 349 | "Controls the stacking order of elements", 350 | "Sets the size of an element", 351 | "Defines the opacity of an element", 352 | "Changes the position of an element" 353 | ], 354 | answerIndex: 0 355 | }, 356 | { 357 | question: "Which CSS property is used to add a shadow effect to text?", 358 | options: [ 359 | "box-shadow", 360 | "text-shadow", 361 | "shadow-effect", 362 | "text-effect" 363 | ], 364 | answerIndex: 1 365 | }, 366 | { 367 | question: "How do you make an element centered horizontally in CSS?", 368 | options: [ 369 | "margin: auto", 370 | "text-align: center", 371 | "align-items: center", 372 | "display: center" 373 | ], 374 | answerIndex: 0 375 | }, 376 | { 377 | question: "Which property is used to change the font family of text?", 378 | options: [ 379 | "font-family", 380 | "font-style", 381 | "text-font", 382 | "font" 383 | ], 384 | answerIndex: 0 385 | }, 386 | { 387 | question: "How do you select all paragraph elements in CSS?", 388 | options: [ 389 | "p", 390 | ".p", 391 | "#p", 392 | "*p" 393 | ], 394 | answerIndex: 0 395 | }, 396 | { 397 | question: "What is the purpose of the 'clear' property in CSS?", 398 | options: [ 399 | "Specifies which sides of an element where other floating elements are not allowed", 400 | "Clears the background color of an element", 401 | "Removes the element from the document flow", 402 | "Makes an element transparent" 403 | ], 404 | answerIndex: 0 405 | }, 406 | { 407 | question: "Which property is used to create rounded corners in CSS?", 408 | options: [ 409 | "border-radius", 410 | "corner-style", 411 | "border-corner", 412 | "element-round" 413 | ], 414 | answerIndex: 0 415 | }, 416 | { 417 | question: "What does the 'margin: 0 auto' do?", 418 | options: [ 419 | "Centers an element horizontally", 420 | "Sets the margin to zero on all sides", 421 | "Aligns the element to the top", 422 | "Makes the element invisible" 423 | ], 424 | answerIndex: 0 425 | }, 426 | { 427 | question: "How do you add a border to an element in CSS?", 428 | options: [ 429 | "border-style", 430 | "border", 431 | "element-border", 432 | "add-border" 433 | ], 434 | answerIndex: 1 435 | }, 436 | { 437 | question: "Which property is used to change the list style type in CSS?", 438 | options: [ 439 | "list-style-type", 440 | "list-type", 441 | "style-list", 442 | "bullet-style" 443 | ], 444 | answerIndex: 0 445 | }, 446 | { 447 | question: "What is the function of the 'overflow' property in CSS?", 448 | options: [ 449 | "Controls what happens to content that overflows its area", 450 | "Sets the border of an element", 451 | "Adds a shadow to an element", 452 | "Changes the opacity of an element" 453 | ], 454 | answerIndex: 0 455 | }, 456 | { 457 | question: "How do you make a text italic in CSS?", 458 | options: [ 459 | "font-style: italic", 460 | "text-style: italic", 461 | "font: italic", 462 | "text-decoration: italic" 463 | ], 464 | answerIndex: 0 465 | }, 466 | { 467 | question: "Which property is used to set the spacing between lines of text?", 468 | options: [ 469 | "line-height", 470 | "text-spacing", 471 | "letter-spacing", 472 | "line-spacing" 473 | ], 474 | answerIndex: 0 475 | }, 476 | { 477 | question: "What is the purpose of the 'display: none' declaration?", 478 | options: [ 479 | "Hides an element", 480 | "Makes an element transparent", 481 | "Removes an element from the layout", 482 | "Displays an element as a block" 483 | ], 484 | answerIndex: 0 485 | } 486 | ] 487 | }, 488 | { 489 | category: "python", 490 | question: [ 491 | { 492 | question: "What is the output of `print(type(1/2))` in Python 3?", 493 | options: ["<class 'int'>", "<class 'float'>", "<class 'double'>", "<class 'number'>"], 494 | answerIndex: 1 495 | }, 496 | { 497 | question: "Which of the following is used to define a block of code in Python?", 498 | options: ["Indentation", "Brackets", "Parentheses", "Quotation marks"], 499 | answerIndex: 0 500 | }, 501 | { 502 | question: "What is the correct way to create a function in Python?", 503 | options: ["function myFunction():", "def myFunction():", "create myFunction():", "new myFunction():"], 504 | answerIndex: 1 505 | }, 506 | { 507 | question: "How do you insert a comment in Python code?", 508 | options: ["// This is a comment", "# This is a comment", "/* This is a comment */", "-- This is a comment"], 509 | answerIndex: 1 510 | }, 511 | { 512 | question: "Which data type is used to store a sequence of characters in Python?", 513 | options: ["str", "char", "string", "text"], 514 | answerIndex: 0 515 | }, 516 | { 517 | question: "What is the output of `print(len([1, 2, 3, 4]))`?", 518 | options: ["3", "4", "5", "Error"], 519 | answerIndex: 1 520 | }, 521 | { 522 | question: "How do you convert a string to an integer in Python?", 523 | options: ["int(str)", "str(int)", "to_int(str)", "convert(str, int)"], 524 | answerIndex: 0 525 | }, 526 | { 527 | question: "Which operator is used to check if two values are equal in Python?", 528 | options: ["==", "=", "===", "!="], 529 | answerIndex: 0 530 | }, 531 | { 532 | question: "What is the result of `print(3 * 'abc')`?", 533 | options: ["abcabcabc", "abc*3", "9", "Error"], 534 | answerIndex: 0 535 | }, 536 | { 537 | question: "How do you define a list in Python?", 538 | options: ["(1, 2, 3)", "[1, 2, 3]", "{1, 2, 3}", "<1, 2, 3>"], 539 | answerIndex: 1 540 | }, 541 | { 542 | question: "What does the `range()` function do?", 543 | options: ["Generates a sequence of numbers", "Returns a random number", "Calculates the range of a list", "Defines a function's scope"], 544 | answerIndex: 0 545 | }, 546 | { 547 | question: "Which keyword is used to define a loop in Python?", 548 | options: ["loop", "for", "iterate", "repeat"], 549 | answerIndex: 1 550 | }, 551 | { 552 | question: "How do you exit a loop in Python?", 553 | options: ["exit", "stop", "break", "return"], 554 | answerIndex: 2 555 | }, 556 | { 557 | question: "What is the purpose of the `if` statement in Python?", 558 | options: ["To define a function", "To create a loop", "To make a decision", "To import a module"], 559 | answerIndex: 2 560 | }, 561 | { 562 | question: "What is the correct syntax for an `elif` statement?", 563 | options: ["else if:", "elseif:", "elif:", "if else:"], 564 | answerIndex: 2 565 | }, 566 | { 567 | question: "How do you define a dictionary in Python?", 568 | options: ["{key: value}", "(key: value)", "[key: value]", "<key: value>"], 569 | answerIndex: 0 570 | }, 571 | { 572 | question: "Which method is used to add an element to the end of a list?", 573 | options: ["add()", "append()", "insert()", "push()"], 574 | answerIndex: 1 575 | }, 576 | { 577 | question: "How do you remove an element from a list in Python?", 578 | options: ["delete()", "remove()", "erase()", "discard()"], 579 | answerIndex: 1 580 | }, 581 | { 582 | question: "What is the purpose of the `try` and `except` blocks?", 583 | options: ["To define a function", "To create a loop", "To handle exceptions", "To import a module"], 584 | answerIndex: 2 585 | }, 586 | { 587 | question: "Which module is used for mathematical operations in Python?", 588 | options: ["math", "calc", "numbers", "stats"], 589 | answerIndex: 0 590 | }, 591 | { 592 | question: "How do you open a file in Python for reading?", 593 | options: ["open('file.txt', 'r')", "read('file.txt')", "file('file.txt', 'read')", "open('file.txt', 'read')"], 594 | answerIndex: 0 595 | }, 596 | { 597 | question: "What does the `__name__` variable contain?", 598 | options: ["The name of the current module", "The name of the main function", "The name of the operating system", "The name of the Python interpreter"], 599 | answerIndex: 0 600 | }, 601 | { 602 | question: "How do you create a class in Python?", 603 | options: ["class MyClass:", "object MyClass:", "new MyClass:", "def MyClass():"], 604 | answerIndex: 0 605 | }, 606 | { 607 | question: "What is the purpose of the `__init__` method in a class?", 608 | options: ["To initialize the class instance", "To define a method", "To create a loop", "To import a module"], 609 | answerIndex: 0 610 | }, 611 | { 612 | question: "How do you import a module in Python?", 613 | options: ["import module_name", "include module_name", "require module_name", "load module_name"], 614 | answerIndex: 0 615 | } 616 | ] 617 | } 618 | ]; --------------------------------------------------------------------------------