project name:QUIZ

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "QUIZ" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file:

index.html

style.css:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: cursive;
  background-color: rgb(179, 179, 38);
}

.quizContainer {
  background-color: rgba(255, 255, 255, 0.3);
  /* border: 1px solid blue; */
  padding: 30px;
  border-radius: 50px;
  box-shadow: 0 10px 10px rgba(86, 65, 190, 0.3);
  width: 100%;
  margin: 10px;
  max-width: 450px;
  align-items: center;
  justify-content: center;
  font-family: cursive;
  font-size: 18px;
  font-weight: 500px;
}

h1 {
  white-space: nowrap;
  font-size: 28px;
  color: blue;
}
.question {
  /* border: 2px solid green; */
  text-align: center;
  margin-top: 5px;
}

.choiceList {
  margin-top: 10px;
}

ul {
  list-style: none;
}

li {
  font-family: "Rokkitt", serif;
  font-size: 1em;
}

.quizMessage {
  margin-top: 5px;
  color: rgb(228, 72, 72);
}

.result {
  margin-top: 10px;
}

.nextButton {
  background-color: rgb(74, 74, 224);
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
  padding: 10px;
  color: white;
  border-radius: 10px;
}

.nextButton:hover {
  background-color: rgb(177, 175, 175);
  color: black;
  border: 2px solid blue;
}

index.js:

var questions = [
  {
    question: "What is the capital of Finland?",
    choices: [" Conakry", "Prague", "Helsinki", "None of the above"],
    correctAnswer: 2,
  },
  {
    question: "Ankara is the capital of which country?",
    choices: ["Uruguay", "Turkey", "Uganda", "Vanuatu"],
    correctAnswer: 1,
  },
  {
    question: "What is the capital of India?",
    choices: ["Mumbai", "Delhi", "San Jose", "None"],
    correctAnswer: 1,
  },
  {
    question: "What is the capital of China?",
    choices: ["washington", "Beijing", "hatchling", "calf"],
    correctAnswer: 1,
  },
  {
    question: "What is the capital of Egypt?",
    choices: ["Moroni", "Cairo", "Nairobi", "none"],
    correctAnswer: 1,
  },
];

var currentQuestion = 0;
var correctAnswers = 0;
var quizOver = false;

window.addEventListener("DOMContentLoaded", function (e) {
  displayCurrentQuestion();

var quizMessage = document.querySelector(".quizMessage");

quizMessage.style.display = "none";

document.querySelector(".nextButton").addEventListener("click", function () {
    if (!quizOver) {
      var radioBtnsChecked = document.querySelector(
        "input[type=radio]:checked"
      );

if (radioBtnsChecked === null) {
        quizMessage.innerText = "Please select an answer";
        quizMessage.style.display = "block";
      } else {
        console.log(radioBtnsChecked.value);
        quizMessage.style.display = "none";
        if (
          parseInt(radioBtnsChecked.value) ===
          questions[currentQuestion].correctAnswer
        ) {
          correctAnswers++;
        }

currentQuestion++;

if (currentQuestion < questions.length) {
          displayCurrentQuestion();
        } else {
          displayScore();
          document.querySelector(".nextButton").innerText = "Play Again?";
          quizOver = true;
        }
      }
    } else {
      quizOver = false;
      document.querySelector(".nextButton").innerText = "Next Question";
      resetQuiz();
      displayCurrentQuestion();
      hideScore();
    }
  });
});

function displayCurrentQuestion() {
  console.log("In display current Questions");

var question = questions[currentQuestion].question;
  var questionClass = document.querySelector(".quizContainer > .question");
  var choiceList = document.querySelector(".quizContainer > .choiceList");
  var numChoices = questions[currentQuestion].choices.length;

//Set the questionClass text to the current question
  questionClass.innerText = question;

//Remove all current <li> elements (if any)
  choiceList.innerHTML = "";

var choice;
  for (i = 0; i < numChoices; i++) {
    choice = questions[currentQuestion].choices[i];
    var li = document.createElement("li");
    li.innerHTML =
      '<li><input type="radio" value="' +
      i +
      '" name="dynradio" />' +
      choice +
      "</li>";
    choiceList.appendChild(li);
  }
}

function resetQuiz() {
  currentQuestion = 0;
  correctAnswers = 0;
  hideScore();
}

function displayScore() {
  document.querySelector(".quizContainer > .result").innerText =
    "You scored: " + correctAnswers + " out of " + questions.length;
  document.querySelector(".quizContainer > .result").style.display = "block";
}

function hideScore() {
  document.querySelector(".result").style.display = "none";
}

Here is the explaination:

The questions array stores objects, each representing a question with its choices and the index of the correct answer.
Event listener: When the DOM content is loaded, the displayCurrentQuestion function is called to show the first question.
The user interface elements are accessed using the querySelector method to display the current question, handle user input, and show quiz messages.
When the user clicks the "Next Question" button, an event listener triggers the next action. If the quiz is not over:
It checks if the user has selected an answer. If not, it displays a message asking the user to select an answer.
If an answer is selected, it checks if the selected answer index matches the correct answer index for the current question. If it matches, it increments the correctAnswers count.
It increments the currentQuestion index to move to the next question.
If there are more questions, it calls displayCurrentQuestion to show the next question. Otherwise, it calls displayScore to show the final score and changes the button text to "Play Again?".
If the quiz is over and the user clicks "Next Question":
It resets the quiz by setting currentQuestion and correctAnswers to zero.
It hides the score display.
It calls displayCurrentQuestion to show the first question again.
The displayCurrentQuestion function updates the question and choice elements based on the current question index:
It gets the question, choice list, and number of choices for the current question.
It updates the question text on the UI.
It clears the choice list.
It creates new list items (li) for each choice and appends them to the choice list.
The resetQuiz function resets the quiz by setting the current question and correct answers to zero.
The displayScore function shows the user's score by updating the result text and displaying it on the UI.
The hideScore function hides the score display by setting its CSS display property to "none".
FINAL WORDS:
Thank you Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas

Project name: Profile statistics

Hi,My name is Maimoona and Welcome to my blog. In this post I will share code of the project profile statistics along with explaination. So let's get started: 1) index.html The first line, , is a document type declaration that tells the browser that this is an HTML5 document. The html element is the root element of the HTML document, and it contains two child elements: head and body. The head element contains meta information about the document, such as the character encoding, viewport settings, and title of the page. It also links to an external stylesheet called style.css, which is used to define the appearance of the webpage. The body element contains the content of the webpage, which is divided into two main sections: a profile container and a profile statistics container. The profile container contains an image, a text paragraph, and a username heading, which provide information about the owner of the Instagram page. The profile statistics container co...

Code Explained: front.end24 Edition

Search This Blog

project name:QUIZ

Comments

Post a Comment

Popular posts from this blog

Project name: Profile statistics

Anmie Pics Generator

snack zilla : a responsive design with a slider