Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

How to show percentage marks and correct answers at bottom in a text box after clicking submit button etc

on

I am a newbie and very weak in coding. Please help with this code for a quiz.

At present 3 marks for each correct attempted and correct answers are added to the score. For incorrect answers, one mark is reduced from scored marks. I do not want marks reduced in unanswered questions (where no radio buttons are selected).

I want to show percentage based on the marks scored in the box provided. Percentage=Total marks scored multiplied by 100 divided by total marks for all correct answers (ie. 9).

I want to show answers in a separate box at the bottom when the Submit button is clicked. The answer to all three questions is choice "C".

I do not wish to provide more than one chance to answer (ie. one cannot change his answer once a radio button is pushed). Please help.

<!DOCTYPE html>
<html>
<body>
<h2>Mock Test - Indian Constitution-PART I</h2>
<p>Total Questions=50. Correct answers carry 3 marks and Wrong ones carry one negative mark. Total marks is 150 and you need 60 marks to qualify.</p>
</body>
</html> 
<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="quiz"></div>
<button id="submit">Submit</button>
<br/> Score in percentage = <input type=text size=15 name="percentage"> 
<br>
<div id="results"></div>
<script>
(function() {
function buildQuiz() {
// we'll need a place to store the HTML output
const output = [];

// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
  // we'll want to store the list of answer choices
  const answers = [];

  // and for each available answer...
  for (letter in currentQuestion.answers) {
    // ...add an HTML radio button
    answers.push(
      `<label>
        <input type="radio" name="question${questionNumber}" 
value="${letter}">
        ${letter} :
        ${currentQuestion.answers[letter]}
      </label>`
    );
  }

  // add this question and its answers to the output
  output.push(
    `<div class="question"> ${currentQuestion.question} </div>
    <div class="answers"> ${answers.join("")} </div>`
  );
});

// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
}

function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll(".answers");

// keep track of user's answers
let numCorrect = 0;

// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
  // find selected answer
  const answerContainer = answerContainers[questionNumber];
  const selector = `input[name=question${questionNumber}]:checked`;
  const userAnswer = (answerContainer.querySelector(selector) || 
{}).value;

  // if answer is correct
  if (userAnswer === currentQuestion.correctAnswer) {
    // add to the number of correct answers
    numCorrect+=3;

    // color the answers green
    answerContainers[questionNumber].style.color = "lightgreen";
  } else {
    // if answer is wrong or blank
    // color the answers red
    numCorrect-=1;
    answerContainers[questionNumber].style.color = "red";
  }

});

// show number of correct answers out of total
resultsContainer.innerHTML = `${numCorrect} out of 9`;
}
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
const myQuestions = [
{
  question: "1) Who was the temporary Chairman of Constituent Assembly?",
  answers: {
    a: "B.R.Ambedkar",
    b: "Dr.Rajendra Prasad",
    c: "Sachidananda Sinha"
  },
  correctAnswer: "c"
},
{
  question: "2) Who was appointed as Chairman of Drafting Committee of the Constitution?",
  answers: {
    a: "Sachidananda Sinha",
    b: "Jawaharlal Nehru",
    c: "Dr.B.R.Ambedkar"
  },
  correctAnswer: "c"
},
{
  question: "3) Constitution came into force on?",
  answers: {
    a: "26th November 1949",
    b: "14th August 1947",
    c: "26th January 1950"
  },
  correctAnswer: "c"
}
];

// display quiz right away
buildQuiz();
submitButton.addEventListener("click", showResults);

})();
</script>
</div>
</html>

Comments

Post a Comment