muhtalhakhan · muhtalhakhan · Oct 16, 2024 · Oct 16, 2024
diff --git a/content/participant/Moazam.md b/content/participant/Moazam.md
@@ -0,0 +1,5 @@
+---
+name: Syed Moazam Ali
+institution: UET TAXILA PAKISTAN
+github: https://github.com/MoazamAli45
+---
diff --git a/quiz-app/.prettierrc b/quiz-app/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}
diff --git a/quiz-app/index.html b/quiz-app/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="src/style.css" />
+    <!-- <script defer src="src/Js/main.js"></script> -->
+    <script defer src="src/app.js"></script>
+    <title>Quiz App</title>
+  </head>
+
+  <body>
+    <main>
+      <div class="box">
+        <h1 class="Ques">Q1) What is Your Name?</h1>
+        <div class="row">
+          <input
+            type="radio"
+            class="options"
+            id="option1"
+            value="a"
+            name="ques"
+          />
+          <label for="option">a) Moazam</label>
+        </div>
+        <div class="row">
+          <input
+            type="radio"
+            class="options"
+            id="option2"
+            value="b"
+            name="ques"
+          />
+          <label for="option">b) Ali</label>
+        </div>
+        <div class="row">
+          <input
+            type="radio"
+            class="options"
+            id="option3"
+            value="c"
+            name="ques"
+          />
+          <label for="option">c) Usman</label>
+        </div>
+
+        <div class="row">
+          <input
+            type="radio"
+            class="options"
+            id="option4"
+            value="d"
+            name="ques"
+          />
+          <label for="option">d) Ammar</label>
+        </div>
+        <button class="btn submit">Submit</button>
+      </div>
+
+      <p class="copyRight">&#169; Syed Moazam Ali.All Right reserved.</p>
+    </main>
+  </body>
+</html>
diff --git a/quiz-app/readme.md b/quiz-app/readme.md
@@ -0,0 +1,54 @@
+# Quiz App
+
+Welcome to the Quiz App! This application is built using HTML, CSS, and JavaScript and is fully responsive.
+
+## Features
+
+- Multiple choice questions
+- Real-time score tracking
+- Responsive design for all devices
+- Timer for each question
+- Interactive UI/UX
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Getting Started
+
+Follow these instructions to get a copy of the project up and running on your local machine.
+
+### Prerequisites
+
+Make sure you have a web browser installed.
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/yourusername/quiz-app.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd quiz-app
+   ```
+3. Open `index.html` in your web browser to start the app.
+
+## Usage
+
+1. Start the quiz by clicking the "Start Quiz" button.
+2. Select the correct answer from the multiple choices.
+3. Your score will be updated in real-time.
+4. Complete all questions to see your final score.
+
+## License
+
+This project is licensed under the MIT License.
+
+## Contact
+
+For any questions or feedback, please contact [your email].
+
+Enjoy the quiz!
diff --git a/quiz-app/src/app.js b/quiz-app/src/app.js
@@ -0,0 +1,182 @@
+console.log('Moazam');
+const question = [
+  {
+    ques: 'Which of the following is the markup Language?',
+    a: 'HTML',
+    b: 'CSS',
+    c: 'JavaScript',
+    d: 'PHP',
+    correct: 'a',
+  },
+  //  2 nd qs
+  {
+    ques: 'In Which JavaScript was launched?',
+    a: '1996',
+    b: '1995',
+    c: '1998',
+    d: '2000',
+    correct: 'b',
+  },
+  {
+    ques: 'What does CSS stands for?',
+    a: 'Cascade Style Sheet',
+    b: 'Cascading Style Sheet',
+    c: 'Hyper Text Markup Lanaguage',
+    d: 'Jason object Notation',
+    correct: 'b',
+  },
+];
+
+const total = question.length;
+const display = document.querySelector('.box');
+const ques = document.querySelector('.Ques');
+const options = document.querySelectorAll('.options');
+const btn = document.querySelector('.submit');
+const again = document.querySelector('.again');
+let index = 0;
+let right = 0;
+let wrong = 0;
+
+// for without result
+// const emptyQues = function () {
+//   display.innerHTML = '';
+//   loadQues();
+// };
+
+const loadQues = function () {
+  if (index !== total) {
+    console.log(index);
+    let data = question[index];
+    console.log(data);
+    /*
+    const html = ` <h1 class="Ques">Q${index + 1}) ${data.ques} </h1>
+  <div class="row">
+    <input
+      type="radio"
+      class="options"
+      id="option1"
+      value="a"
+      name="ques"
+    />
+    <label for="option">${data.a}</label>
+  </div>
+  <div class="row">
+    <input
+      type="radio"
+      class="options"
+      id="option2"
+      value="b"
+      name="ques"
+    />
+    <label for="option">${data.b}</label>
+  </div>
+  <div class="row">
+    <input
+      type="radio"
+      class="options"
+      id="option3"
+      value="c"
+      name="ques"
+    />
+    <label for="option">${data.c}</label>
+  </div>
+
+  <div class="row">
+    <input
+      type="radio"
+      class="options"
+      id="option4"
+      value="d"
+      name="ques"
+    />
+    <label for="option">${data.d}</label>
+  </div>
+  <button class="btn submit"   onclick="getResult()">Submit</button>`;
+  */
+
+    //////// this is for without try again button
+    ques.innerText = `Q${index + 1}) ${data.ques}`;
+
+    options[0].nextElementSibling.innerText = data.a;
+    options[1].nextElementSibling.innerText = data.b;
+    options[2].nextElementSibling.innerText = data.c;
+    options[3].nextElementSibling.innerText = data.d;
+
+    // for without result correct
+    // display.innerHTML = html;
+  } else {
+    endQuiz();
+  }
+};
+const getResult = function () {
+  let data = question[index];
+  console.log(data);
+  const answer = checkAnswer();
+  if (answer == data.correct) {
+    right++;
+  } else {
+    wrong++;
+  }
+  index++;
+  reset();
+  loadQues();
+  return;
+};
+const reset = () => {
+  options.forEach(input => {
+    input.checked = false;
+  });
+};
+
+const checkAnswer = function () {
+  let answer;
+  options.forEach(input => {
+    if (input.checked) {
+      answer = input.value;
+    }
+  });
+  return answer;
+};
+const endQuiz = () => {
+  if (index !== total) {
+    console.log(display);
+    display.innerHTML = '';
+  }
+  let html = '';
+  if (right === total) {
+    html = `Excellent👏`;
+  } else if (right == total - 1) {
+    html = `Good 👍`;
+  } else if (right == total - 2) {
+    html = `Satisfactory `;
+  } else {
+    html = `Better Luck Next time`;
+  }
+  //   console.log(display);
+  // again.classList.remove('hidden');
+  display.innerHTML = `
+
+  <h2 class="head">Thank you for solving the quiz!! </h2>
+    <h3 class="marks">Correct Options: ${right}/${total}
+    </h3>
+    <h2 class="result">${html}</h2>
+`;
+  // without result
+  //    <button class="btn again" onclick="againStart()">
+  // Try Again
+  // </button>
+};
+
+// withput result
+// function againStart() {
+//   console.log(index);
+//   index = 0;
+//   right = 0;
+//   emptyQues();
+// }
+
+// in start load Question
+loadQues();
+// this is for without try agan button
+btn.addEventListener('click', getResult);
+// console.log(again);
diff --git a/quiz-app/src/quizz.jpg b/quiz-app/src/quizz.jpg