technojam · theankityadav-io · Oct 12, 2025
diff --git a/Quiz web-Ankit Yadav/README.md b/Quiz web-Ankit Yadav/README.md
@@ -0,0 +1,37 @@
+Simple CS Quiz
+===============
+
+Overview
+--------
+A beginner-friendly multiple-choice quiz implemented with plain HTML, CSS, and JavaScript.
+
+Files
+-----
+- `index.html` — Landing page with a Start link.
+- `quiz.html` — The quiz page with 5 CS questions and multiple-choice options.
+- `style.css` — Styles for the UI and button states.
+- `quiz-page.js` — Beginner-friendly script that handles selection, grading, and restart.
+
+How to run
+----------
+1. Open `index.html` in your browser (double-click the file or open it from your browser's File → Open menu).
+2. Click Start to open the quiz page.
+3. Select one option per question and click Submit to see your score.
+4. Click Restart to try again.
+
+Notes for your submission
+------------------------
+- This project uses only client-side code (no server). Include all files in your submission zip.
+- All code is commented to be beginner-friendly. You can show the README and source files to demonstrate your work.
+- If your instructor wants a live preview, you can use the VS Code Live Server extension or zip the folder and open `index.html` locally.
+
+Academic honesty and AI usage
+----------------------------
+- This project was written with assistance and guidance. Be transparent in your assignment submission about any help you received and what you wrote yourself.
+- I cannot help evade AI-detection tools. Instead, emphasize your learning by adding comments describing what you changed or learned.
+
+Next ideas (optional)
+---------------------
+- Add scores persisted to `localStorage`.
+- Add per-question explanations after grading.
+- Improve accessibility (keyboard navigation, ARIA roles).
diff --git a/Quiz web-Ankit Yadav/index.html b/Quiz web-Ankit Yadav/index.html
@@ -0,0 +1,31 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Quiz web</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <h1>Welcome to Quiz</h1>
+    <p>Develop your knowledge and train your brain</p>
+
+    <div class="controls">
+      <a id="start-button" class="start-button btn" href="quiz.html">Start</a>
+      <button id="next-btn" class="next-btn btn hide">Next</button>
+    </div>
+
+    <div id="question-container" class="hide">
+      <div id="question" class="question">Question text</div>
+      <div id="answer-button" class="btn-grid"></div>
+    </div>
+  </div>
+
+  <script src="quiz.js" defer></script>
+</body>
+<header>
+
+</header>
+</html>
diff --git a/Quiz web-Ankit Yadav/quiz-page.js b/Quiz web-Ankit Yadav/quiz-page.js
@@ -0,0 +1,81 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Find all question blocks on the page
+  var questionElements = Array.from(document.querySelectorAll('.question'));
+  var submitButton = document.getElementById('submit-quiz');
+  var resultElement = document.getElementById('result');
+  var restartButton = document.getElementById('restart-quiz');
+
+  // Helper: set up each question so only one option can be selected
+  function setupSingleSelect() {
+    questionElements.forEach(function (q) {
+      var optionButtons = Array.from(q.querySelectorAll('.options button'));
+      optionButtons.forEach(function (button) {
+        button.addEventListener('click', function () {
+          // Remove 'selected' from other buttons in this question
+          optionButtons.forEach(function (b) { b.classList.remove('selected'); });
+          // Add 'selected' to the clicked button
+          button.classList.add('selected');
+        });
+      });
+    });
+  }
+
+  // Helper: grade the quiz when user clicks Submit
+  function gradeQuiz() {
+    var total = questionElements.length;
+    var correctCount = 0;
+
+    questionElements.forEach(function (q) {
+      var selected = q.querySelector('.options button.selected');
+
+      if (!selected) {
+        // No selection made: show the correct answer only
+        q.classList.add('unanswered');
+        var correctBtn = q.querySelector('.options button[data-correct="true"]');
+        if (correctBtn) correctBtn.classList.add('correct');
+        return;
+      }
+
+      // dataset.correct is a string, compare to 'true'
+      var isCorrect = selected.dataset.correct === 'true';
+      if (isCorrect) {
+        correctCount += 1;
+        selected.classList.add('correct');
+      } else {
+        selected.classList.add('wrong');
+        var correctBtn = q.querySelector('.options button[data-correct="true"]');
+        if (correctBtn) correctBtn.classList.add('correct');
+      }
+    });
+
+    // Show the score
+    resultElement.textContent = 'You scored ' + correctCount + ' out of ' + total;
+
+    // Disable further changes after grading
+    questionElements.forEach(function (q) {
+      q.querySelectorAll('.options button').forEach(function (b) { b.disabled = true; });
+    });
+    submitButton.disabled = true;
+  }
+
+  // Helper: reset the quiz to initial state
+  function resetQuiz() {
+    resultElement.textContent = '';
+    submitButton.disabled = false;
+
+    questionElements.forEach(function (q) {
+      q.classList.remove('unanswered');
+      q.querySelectorAll('.options button').forEach(function (b) {
+        b.disabled = false;
+        b.classList.remove('selected');
+        b.classList.remove('correct');
+        b.classList.remove('wrong');
+      });
+    });
+  }
+
+  // Set up event listeners
+  setupSingleSelect();
+  submitButton.addEventListener('click', gradeQuiz);
+  restartButton.addEventListener('click', resetQuiz);
+});
diff --git a/Quiz web-Ankit Yadav/quiz.html b/Quiz web-Ankit Yadav/quiz.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Simple CS Quiz</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <main class="quiz-page">
+        <h1>Computer Science Quiz</h1>
+
+            <section class="question" id="q1">
+                <h2>1. Which language is considered a high-level programming language?</h2>
+                <div class="options">
+                    <button data-correct="false">Binary</button>
+                    <button data-correct="false">Assembly</button>
+                    <button data-correct="true">Python</button>
+                    <button data-correct="false">Machine code</button>
+                </div>
+            </section>
+
+            <section class="question" id="q2">
+                <h2>2. What does 'CPU' stand for?</h2>
+                <div class="options">
+                    <button data-correct="false">Central Process Unit</button>
+                    <button data-correct="true">Central Processing Unit</button>
+                    <button data-correct="false">Computer Personal Unit</button>
+                    <button data-correct="false">Control Processing Unit</button>
+                </div>
+            </section>
+
+            <section class="question" id="q3">
+                <h2>3. Which data structure uses FIFO ordering?</h2>
+                <div class="options">
+                    <button data-correct="false">Stack</button>
+                    <button data-correct="true">Queue</button>
+                    <button data-correct="false">Tree</button>
+                    <button data-correct="false">Graph</button>
+                </div>
+            </section>
+
+            <section class="question" id="q4">
+                <h2>4. Which of the following is not an interpreted language?</h2>
+                <div class="options">
+                    <button data-correct="false">JavaScript</button>
+                    <button data-correct="false">Python</button>
+                    <button data-correct="true">C++</button>
+                    <button data-correct="false">Ruby</button>
+                </div>
+            </section>
+
+            <section class="question" id="q5">
+                <h2>5. What does 'HTML' stand for?</h2>
+                <div class="options">
+                    <button data-correct="true">HyperText Markup Language</button>
+                    <button data-correct="false">HighText Machine Language</button>
+                    <button data-correct="false">Hyperlinks and Text Markup Language</button>
+                    <button data-correct="false">Home Tool Markup Language</button>
+                </div>
+            </section>
+
+            <div class="quiz-actions">
+                <button id="submit-quiz" class="btn start-btn">Submit</button>
+                <button id="restart-quiz" class="btn" style="margin-left:8px;">Restart</button>
+                <div id="result" class="result" aria-live="polite" style="margin-top:12px;"></div>
+            </div>
+
+        </main>
+        <script src="quiz-page.js" defer></script>
+    </body>
+    </html>
diff --git a/Quiz web-Ankit Yadav/quiz.js b/Quiz web-Ankit Yadav/quiz.js
@@ -0,0 +1,112 @@
+const startButton = document.getElementById('start-btn')
+const nextButton = document.getElementById('next-btn')
+const questionContainerElement = document.getElementById('question-container')
+const questionElement = document.getElementById('question')
+const answerButtonsElement = document.getElementById('answer-buttons')
+
+let shuffledQuestions, currentQuestionIndex
+
+startButton.addEventListener('click', startGame)
+nextButton.addEventListener('click', () => {
+  currentQuestionIndex++
+  setNextQuestion()
+})
+
+function startGame() {
+  startButton.classList.add('hide')
+  shuffledQuestions = questions.sort(() => Math.random() - .5)
+  currentQuestionIndex = 0
+  questionContainerElement.classList.remove('hide')
+  setNextQuestion()
+}
+
+function setNextQuestion() {
+  resetState()
+  showQuestion(shuffledQuestions[currentQuestionIndex])
+}
+
+function showQuestion(question) {
+  questionElement.innerText = question.question
+  question.answers.forEach(answer => {
+    const button = document.createElement('button')
+    button.innerText = answer.text
+    button.classList.add('btn')
+    if (answer.correct) {
+      button.dataset.correct = answer.correct
+    }
+    button.addEventListener('click', selectAnswer)
+    answerButtonsElement.appendChild(button)
+  })
+}
+
+function resetState() {
+  clearStatusClass(document.body)
+  nextButton.classList.add('hide')
+  while (answerButtonsElement.firstChild) {
+    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
+  }
+}
+
+function selectAnswer(e) {
+  const selectedButton = e.target
+  const correct = selectedButton.dataset.correct
+  setStatusClass(document.body, correct)
+  Array.from(answerButtonsElement.children).forEach(button => {
+    setStatusClass(button, button.dataset.correct)
+  })
+  if (shuffledQuestions.length > currentQuestionIndex + 1) {
+    nextButton.classList.remove('hide')
+  } else {
+    startButton.innerText = 'Restart'
+    startButton.classList.remove('hide')
+  }
+}
+
+function setStatusClass(element, correct) {
+  clearStatusClass(element)
+  if (correct) {
+    element.classList.add('correct')
+  } else {
+    element.classList.add('wrong')
+  }
+}
+
+function clearStatusClass(element) {
+  element.classList.remove('correct')
+  element.classList.remove('wrong')
+}
+
+const questions = [
+  {
+    question: 'What is 2 + 2?',
+    answers: [
+      { text: '4', correct: true },
+      { text: '22', correct: false }
+    ]
+  },
+  {
+    question: 'Who is the best YouTuber?',
+    answers: [
+      { text: 'Web Dev Simplified', correct: true },
+      { text: 'Traversy Media', correct: true },
+      { text: 'Dev Ed', correct: true },
+      { text: 'Fun Fun Function', correct: true }
+    ]
+  },
+  {
+    question: 'Is web development fun?',
+    answers: [
+      { text: 'Kinda', correct: false },
+      { text: 'YES!!!', correct: true },
+      { text: 'Um no', correct: false },
+      { text: 'IDK', correct: false }
+    ]
+  },
+  {
+    question: 'What is 4 * 2?',
+    answers: [
+      { text: '6', correct: false },
+      { text: '8', correct: true }
+    ]
+  }
+]