From e16ac030b5912f47d213a8fbb6805fd9dc32e46c Mon Sep 17 00:00:00 2001 From: AdyaTech Date: Wed, 28 Jan 2026 16:43:47 +0530 Subject: [PATCH] Fixed the issue 1101 regarding calculator app. --- QuizApp/AdyaTech/app.js | 137 +++++++++++++++++++++++++++++++ QuizApp/AdyaTech/index.html | 42 ++++++++++ QuizApp/AdyaTech/styles.css | 155 ++++++++++++++++++++++++++++++++++++ 3 files changed, 334 insertions(+) create mode 100644 QuizApp/AdyaTech/app.js create mode 100644 QuizApp/AdyaTech/index.html create mode 100644 QuizApp/AdyaTech/styles.css diff --git a/QuizApp/AdyaTech/app.js b/QuizApp/AdyaTech/app.js new file mode 100644 index 000000000..70822223e --- /dev/null +++ b/QuizApp/AdyaTech/app.js @@ -0,0 +1,137 @@ +// CREATE A QUIZ CLASS +class Quiz { + constructor(questions) { + this.score = 0; + this.questions = questions; + this.questionIndex = 0; + } + + getQuestionIndex() { + return this.questions[this.questionIndex]; + } + + guess(answer) { + if (this.getQuestionIndex().isCorrectAnswer(answer)) { + this.score++; + } + this.questionIndex++; + } + + isEnded() { + return this.questionIndex === this.questions.length; + } +} + +// Create a question Class +class Question { + constructor(text, choices, answer) { + this.text = text; + this.choices = choices; + this.answer = answer; + } + + isCorrectAnswer(choice) { + return this.answer === choice; + } +} + +// NOW DISPLAY THE QUESTIONS +function displayQuestion() { + if (quiz.isEnded()) { + showScores(); + } else { + // show question + let questionElement = document.getElementById("question"); + questionElement.innerHTML = quiz.getQuestionIndex().text; + + // show options + let choices = quiz.getQuestionIndex().choices; + for (let i = 0; i < choices.length; i++) { + let choiceElement = document.getElementById("choice" + i); + choiceElement.innerHTML = choices[i]; + guess("btn" + i, choices[i]); + } + + showProgress(); + } +}; + +// GUESS ANSWER +function guess(id, guess) { + let button = document.getElementById(id); + button.onclick = function() { + quiz.guess(guess); + displayQuestion(); + } +}; + +// SHOW QUIZ PROGRESS +function showProgress() { + let currentQuestionNumber = quiz.questionIndex + 1; + let ProgressElement = document.getElementById("progress"); + ProgressElement.innerHTML = + `Question ${currentQuestionNumber} of ${quiz.questions.length}`; +}; + +// SHOW SCORES +function showScores() { + let quizEndHTML = + ` +

Quiz Completed

+

Your scored: ${quiz.score} of ${quiz.questions.length}

+
+ Take Quiz Again +
+ `; + let quizElement = document.getElementById("quiz"); + quizElement.innerHTML = quizEndHTML; +}; + +// create questions here +let questions = [ + new Question( + "Hyper Text Markup Language Stands For?", ["JQuery", "XHTML", "CSS", "HTML"], "HTML" + ), + new Question( + "Cascading Style sheet stands for?", ["HTML", "JQuery", "CSS", "XML"], "CSS" + ), + new Question( + "Which is a JavaScript Framework?", ["React", "Laravel", "Django", "Sass"], "React" + ), + new Question( + "Which is a backend language?", ["PHP", "HTML", "React", "All"], "PHP" + ), + new Question( + "Which is best for Artificial intelligence?", ["React", "Laravel", "Python", "Sass"], "Python" + ) +]; + +// INITIALIZE quiz +let quiz = new Quiz(questions); + +// display questions +displayQuestion(); + + +// Add A CountDown for the Quiz +let time = 10; +let quizTimeInMinutes = time * 60 * 60; +let quizTime = quizTimeInMinutes / 60; + +let counting = document.getElementById("count-down"); + +function startCountdown() { + let quizTimer = setInterval(function() { + if (quizTime <= 0) { + clearInterval(quizTimer); + showScores(); + } else { + quizTime--; + let sec = Math.floor(quizTime % 60); + let min = Math.floor(quizTime / 60) % 60; + counting.innerHTML = `TIME: ${min} : ${sec}`; + } + }, 1000); +} + +startCountdown(); \ No newline at end of file diff --git a/QuizApp/AdyaTech/index.html b/QuizApp/AdyaTech/index.html new file mode 100644 index 000000000..61879488b --- /dev/null +++ b/QuizApp/AdyaTech/index.html @@ -0,0 +1,42 @@ + + + + + + + Document + + + + + +
+
+
+

JavaScript Quiz App

+
+

Question x of y

+

+
+

+ +
+ + + + +
+ +
+
+

ZinoTrust Tutorials

+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/QuizApp/AdyaTech/styles.css b/QuizApp/AdyaTech/styles.css new file mode 100644 index 000000000..f8dba8a8d --- /dev/null +++ b/QuizApp/AdyaTech/styles.css @@ -0,0 +1,155 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); + + +:root { + --white: #fff; + --black: #1c2b2d; + --blue: #31326f; + --light-blue: #005490; + --color-primary: #46458C; + --color-sec: #db6400; + --color-grey: #eee; + --color-dark-grey: #222831; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 10px; +} + +body { + font-family: 'Open Sans', sans-serif; + background-color: var(--light-blue); +} + +p { + font-size: 1.6rem; + line-height: 1.5; +} + +img { + width: 100%; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 0 20px; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.quiz-box { + width: 600px; + /* height: 500px; */ + margin: 0 auto; + background-color: #eee; + padding: 10px 50px 50px 50px; + border: 3px solid var(--color-primary); + border-radius: 5px; + +} + +.quiz-box h1 { + background-color: var(--color-primary); + font-size: 4rem; + text-align: center; + color: #fff; + padding: 10px 0; + width: 100%; + margin-bottom: 2rem; + border-radius: 3px; +} + +.quiz-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.quiz-header #progress { + color: #2b2b2b; + font-size: 1.6rem; + font-weight: 700; +} + +.quiz-header #count-down { + font-size: 1.6rem; + font-weight: 700; + background-color: orangered; + padding: 5px; + margin: 1px; + color: #fff; + border-radius: 5px; +} + +.quiz-box #question { + font-size: 1.8rem; + font-weight: 600; + color: orangered; + border: 1px solid #777; + border-width: 1px 0; + padding: 5px 0; +} + +.buttons { + margin: 1.5rem 0 4rem 0; +} + +.btn { + text-align: left; + background-color: #ddd; + width: 100%; + font-size: 1.8rem; + color: var(--black); + border: 1px solid var(--color-primary); + border-radius: 5px; + margin: 7px 0; + padding: 1rem; + outline: none; +} + +.btn:hover { + cursor: pointer; + background-color: var(--color-primary); + color: #fff; +} + +.btn:active { + background-color: var(--color-sec); +} + +#score { + color: var(--black); + text-align: center; + font-size: 2rem; + margin-bottom: 4rem; +} + +.quiz-repeat { + text-align: center; + margin: 0 auto; +} + +.quiz-repeat a { + font-size: 1.6rem; + font-weight: 600; + color: #fff; + text-decoration: none; + background-color: orangered; + padding: 1rem; + border-radius: 5px; + transition: all .3s; +} + +.quiz-repeat a:hover { + background-color: var(--color-primary); +} +