thinkswell · AdyaTech · Jan 28, 2026
diff --git a/QuizApp/AdyaTech/app.js 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 =
+        `
+    <h1>Quiz Completed</h1>
+    <h2 id='score'> Your scored: ${quiz.score} of ${quiz.questions.length}</h2>
+    <div class="quiz-repeat">
+        <a href="index.html">Take Quiz Again</a>
+    </div>
+    `;
+    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();
diff --git a/QuizApp/AdyaTech/index.html b/QuizApp/AdyaTech/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://kit.fontawesome.com/1935d064dd.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="quiz-box">
+            <div id="quiz">
+                <h1>JavaScript Quiz App</h1>
+                <div class="quiz-header">
+                    <p id="progress">Question x of y</p>
+                    <p id="count-down"></p>
+                </div>
+                <p id="question"></p>
+
+                <div class="buttons">
+                    <button class="btn" id="btn0">A. <span id="choice0"></span></button>
+                    <button class="btn" id="btn1">B. <span id="choice1"></span></button>
+                    <button class="btn" id="btn2">C. <span id="choice2"></span></button>
+                    <button class="btn" id="btn3">D. <span id="choice3"></span></button>
+                </div>
+
+                <hr>
+                <footer>
+                    <p>ZinoTrust Tutorials</p>
+
+                </footer>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/QuizApp/AdyaTech/styles.css 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);
+}
+