Merge pull request #68 from Parth4git/Parth4git

Added a QuizApp
Niraj-1729 · Oct 24, 2023 · bcc54f4 · bcc54f4
2 parents b923cd4 + 9c88775
commit bcc54f4
Show file tree

Hide file tree

Showing 3 changed files with 243 additions and 0 deletions.
diff --git a/QuizApp/Parth4git/index.html b/QuizApp/Parth4git/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+    <title>Quiz App</title>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <div id="question-container">
+        <h3 id="question">Question</h3>
+        <div id="answer-buttons"></div>
+      </div>
+      <button id="next-btn" class="btn hide">Next</button>
+      <div id="result" class="hide"></div>
+      <button id="restart-btn" class="btn hide">Restart</button>
+    </div>
+  </body>
+</html>
diff --git a/QuizApp/Parth4git/script.js b/QuizApp/Parth4git/script.js
@@ -0,0 +1,142 @@
+const questionContainer = document.getElementById("question-container");
+const questionElement = document.getElementById("question");
+const answerButtons = document.getElementById("answer-buttons");
+const nextButton = document.getElementById("next-btn");
+const restartButton = document.getElementById("restart-btn");
+const resultDiv = document.getElementById("result");
+
+let shuffledQuestions, currentQuestionIndex, score;
+
+const questions = [
+  {
+    question: "What is 2 + 2?",
+    answers: [
+      { text: "4", correct: true },
+      { text: "22", correct: false },
+      { text: "222", correct: false },
+      { text: "2222", correct: false },
+    ],
+  },
+  {
+    question: "What is the capital of France?",
+    answers: [
+    {text:"London",correct:false}, 
+    {text:"Berlin",correct:false}, 
+    {text:"Paris",correct:true},
+    {text: "Madrid",correct:false}
+],
+
+  },
+  {
+    question: "Which planet is known as the Red Planet?",
+    answers: [
+    {text:"Mars",correct:true},
+    {text: "Earth",correct:false}, 
+    {text:"Venus",correct:false},
+    {text:"Jupiter",correct:false}
+],
+
+  },
+  {
+    question: "What does HTML stand for?",
+    answers: [
+      { text: "HyperText Markup Language", correct: true },
+      { text: "HighText Machine Language", correct: false },
+      { text: "HyperText Machine Language", correct: false },
+      { text: "HighText Markup Language", correct: false },
+    ],
+  },
+  {
+    question: "Which property is used to change the background color?",
+    answers: [
+      { text: "color", correct: false },
+      { text: "bgColor", correct: false },
+      { text: "background-color", correct: true },
+      { text: "background", correct: false },
+    ],
+  },
+  {
+    question: "Inside which HTML element do we put the JavaScript?",
+    answers: [
+      { text: "<js>", correct: false },
+      { text: "<javascript>", correct: false },
+      { text: "<script>", correct: true },
+      { text: "<scripting>", correct: false },
+    ],
+  },
+];
+
+startQuiz();
+
+function startQuiz() {
+  score = 0;
+  questionContainer.style.display = "flex";
+  shuffledQuestions = questions.sort(() => Math.random() - 0.5);
+  currentQuestionIndex = 0;
+  nextButton.classList.remove("hide");
+  restartButton.classList.add("hide");
+  resultDiv.classList.add("hide");
+  setNextQuestion();
+}
+
+function setNextQuestion() {
+  resetState();
+  showQuestion(shuffledQuestions[currentQuestionIndex]);
+}
+
+function showQuestion(question) {
+  questionElement.innerText = question.question;
+  question.answers.forEach((answer, index) => {
+    const inputGroup = document.createElement("div");
+    inputGroup.classList.add("input-group");
+
+    const radio = document.createElement("input");
+    radio.type = "radio";
+    radio.id = "answer" + index;
+    radio.name = "answer";
+    radio.value = index;
+
+    const label = document.createElement("label");
+    label.htmlFor = "answer" + index;
+    label.innerText = answer.text;
+
+    inputGroup.appendChild(radio);
+    inputGroup.appendChild(label);
+    answerButtons.appendChild(inputGroup);
+  });
+}
+
+function resetState() {
+  while (answerButtons.firstChild) {
+    answerButtons.removeChild(answerButtons.firstChild);
+  }
+}
+
+nextButton.addEventListener("click", () => {
+  const answerIndex = Array.from(
+    answerButtons.querySelectorAll("input")
+  ).findIndex((radio) => radio.checked);
+  if (answerIndex !== -1) {
+    if (shuffledQuestions[currentQuestionIndex].answers[answerIndex].correct) {
+      score++;
+    }
+    currentQuestionIndex++;
+    if (shuffledQuestions.length > currentQuestionIndex) {
+      setNextQuestion();
+    } else {
+      endQuiz();
+    }
+  } else {
+    alert("Please select an answer.");
+  }
+});
+
+restartButton.addEventListener("click", startQuiz);
+
+function endQuiz() {
+  questionContainer.style.display = "none";
+  nextButton.classList.add("hide");
+  restartButton.classList.remove("hide");
+  resultDiv.classList.remove("hide");
+  resultDiv.innerText = `Your final score: ${score} / ${shuffledQuestions.length}`;
+}
diff --git a/QuizApp/Parth4git/style.css b/QuizApp/Parth4git/style.css
@@ -0,0 +1,80 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
+  }
+
+  .quiz-container {
+    display: flex;
+    flex-direction: column;
+    width: 30rem;
+    max-width: 80%;
+    background-color: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 0 0.6rem 0.1rem rgba(0, 0, 0, 0.1);
+  }
+
+  #question-container {
+    flex-direction: column;
+    gap: 2rem;
+    padding: 2rem;
+  }
+
+  #question {
+    text-align: center;
+    margin-bottom: 0;
+    margin-top: 1rem;
+  }
+
+  #answer-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.25rem;
+    margin-bottom: 1rem;
+  }
+
+  .input-group {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  input {
+    width: fit-content;
+  }
+
+  .btn {
+    padding: 1.5rem;
+    background-color: #70b5ff;
+    color: white;
+    border: none;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+
+  input,
+  .btn {
+    cursor: pointer;
+  }
+
+  .btn:hover {
+    background-color: #3282d8;
+  }
+
+  .hide {
+    display: none;
+  }
+
+  #result {
+    margin: 2rem auto;
+  }
+
+  #question,
+  #result {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }