diff --git a/QuizApp/Tomkndn/index.html b/QuizApp/Tomkndn/index.html new file mode 100644 index 000000000..ded708f70 --- /dev/null +++ b/QuizApp/Tomkndn/index.html @@ -0,0 +1,26 @@ + + + + + + Quiz App + + + +
+

Quiz App

+
+

Question 1:

+ +
+ +

+
+ + + diff --git a/QuizApp/Tomkndn/pic1.jpg b/QuizApp/Tomkndn/pic1.jpg new file mode 100644 index 000000000..d6fc1fa5f Binary files /dev/null and b/QuizApp/Tomkndn/pic1.jpg differ diff --git a/QuizApp/Tomkndn/pic2.jpg b/QuizApp/Tomkndn/pic2.jpg new file mode 100644 index 000000000..7989c1c2b Binary files /dev/null and b/QuizApp/Tomkndn/pic2.jpg differ diff --git a/QuizApp/Tomkndn/readme.md b/QuizApp/Tomkndn/readme.md new file mode 100644 index 000000000..6cc2c6848 --- /dev/null +++ b/QuizApp/Tomkndn/readme.md @@ -0,0 +1,3 @@ +## This is how the project looks like +![quiz-app](pic1.jpg) +![quiz-app](pic2.jpg) \ No newline at end of file diff --git a/QuizApp/Tomkndn/script.js b/QuizApp/Tomkndn/script.js new file mode 100644 index 000000000..ffb990170 --- /dev/null +++ b/QuizApp/Tomkndn/script.js @@ -0,0 +1,113 @@ +const questions = [ + { + question: "What is (2 + 2)/2*2?", + options: ["3", "4", "5", "6"], + answer: "4", + }, + { + question: "Which planet is known as the Red Planet?", + options: ["Earth", "Mars", "Jupiter", "Saturn"], + answer: "Mars", + }, + { + question: "How many days do we have in a week?", + options: ["1", "4", "7", "10"], + answer: "7", + }, + { + question: "How many letters are there in the English alphabet?", + options: ["20", "26", "100", "0"], + answer: "26", + }, + { + question: "Which month of the year has the least number of days?", + options: ["January", "March", "February", "December"], + answer: "February", + }, + { + question: "Which animal is called King of Jungle?", + options: ["Lion", "Mars", "Dog", "Elephant"], + answer: "Lion", + }, + { + question: "Which is the tallest animal on the earth?", + options: ["Giraffe", "Lion", "Monkey", "My Dad"], + answer: "Giraffe", + }, + { + question: "Which festival is known as the festival of colors?", + options: ["Diwali", "Christmas", "Holi", "New year"], + answer: "Holi", + }, + { + question: "What is the top color in a rainbow?", + options: ["Orange", "Pink", "Blue", "Red"], + answer: "Red", + }, + { + question: "How many zeros are there in one hundred thousand?", + options: ["ten", "one", "seven", "five"], + answer: "five", + }, +]; + +let currentQuestionIndex = 0; +let score = 0; + +const questionText = document.getElementById("question-text"); +const optionsList = document.getElementById("options-list"); +const nextButton = document.getElementById("next-button"); +const resultText = document.getElementById("result-text"); + +function showQuestion() { + const currentQuestion = questions[currentQuestionIndex]; + questionText.textContent = `Question ${currentQuestionIndex + 1}: ${ + currentQuestion.question + }`; + + optionsList.innerHTML = ""; + currentQuestion.options.forEach((option, index) => { + const listItem = document.createElement("li"); + listItem.innerHTML = ` Option ${String.fromCharCode( + 65 + index + )}: ${option}`; + optionsList.appendChild(listItem); + }); + + nextButton.disabled = true; +} + +function checkAnswer() { + const selectedAnswer = document.querySelector('input[name="answer"]:checked'); + + if (!selectedAnswer) { + return; + } + + const currentQuestion = questions[currentQuestionIndex]; + if (selectedAnswer.value === currentQuestion.answer) { + score++; + } + + currentQuestionIndex++; + + if (currentQuestionIndex < questions.length) { + showQuestion(); + } else { + showResult(); + } +} + +function showResult() { + questionText.textContent = "Quiz Completed!"; + optionsList.innerHTML = ""; + nextButton.style.display = "none"; + resultText.textContent = `Your Score: ${score} out of ${questions.length}`; +} + +nextButton.addEventListener("click", checkAnswer); +optionsList.addEventListener("change", () => { + nextButton.disabled = false; +}); + +showQuestion(); diff --git a/QuizApp/Tomkndn/styles.css b/QuizApp/Tomkndn/styles.css new file mode 100644 index 000000000..4c0088a09 --- /dev/null +++ b/QuizApp/Tomkndn/styles.css @@ -0,0 +1,72 @@ +body { + font-family: 'Arial', sans-serif; + background-color: #f7f7f7; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.quiz-container { + width: 80%; + max-width: 600px; + margin: 0 auto; + text-align: center; + background-color: #fff; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + padding: 40px; +} + +h1 { + color: #007BFF; + font-size: 28px; +} + +.question-container { + border: 1px solid #ccc; + padding: 20px; + margin: 20px 0; + background-color: #f9f9f9; + border-radius: 10px; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + margin: 10px 0; + font-size: 16px; +} + +button { + padding: 10px 20px; + background-color: #007BFF; + color: #fff; + border: none; + cursor: pointer; + border-radius: 5px; + transition: background-color 0.2s; + font-size: 16px; +} + +button:hover { + background-color: #0056b3; +} + +p#result-text { + font-weight: bold; + font-size: 20px; + margin-top: 20px; +} + +input[type="radio"] { + margin-right: 10px; + transform: scale(1.2); +} +