Javascript - Categorized Scoring of Questions-CodePudding

I want to take an array of questions in a quiz and categorize them into 3 different scores. Like Math/English/Science per-say.

So, if each of the 3 questions in the array was a separate category, can I label them and have a function that calculates based on category and how would that look?

I know I could duplicate my functions and slightly modify them based on the category, but I feel like there is a more efficient way to do that.

// Initialize the current question index
let currentQuestionIndex = 0;

// Array of questions
const questions = [{
    question: "What does 2 2 equal?",
    answers: [{
        text: "4",
        value: 1
      },
      {
        text: "2",
        value: 0
      },
      {
        text: "8",
        value: 0
      },
      {
        text: "16",
        value: 0
      }
    ]
  },
  {
    question: "What does oblitirate most nearly mean?",
    answers: [{
        text: "translate",
        value: 0
      },
      {
        text: "scatter",
        value: 0
      },
      {
        text: "wipe out",
        value: 1
      },
      {
        text: "blame",
        value: 0
      }
    ]
  },
  {
    question: "What is the chemical formula for water?",
    answers: [{
        text: "H2O",
        value: 0
      },
      {
        text: "K",
        value: 0
      },
      {
        text: "Na",
        value: 1
      },
      {
        text: "H",
        value: 0
      }
    ]
  }
];

// Initialize the total score
let totalScore = 0;

// Add the value of the selected answer to the total score and uncheck the other radio buttons
function updateScore(selectedAnswer) {
  // Check if a radio button has been selected
  if (!selectedAnswer.checked) {
    return;
  }

  // Add the value of the selected answer to the total score
  totalScore  = parseInt(selectedAnswer.value);

  // Get all the radio buttons
  const radioButtons = document.getElementsByName("answer");
  // Loop through the radio buttons
  for (const radioButton of radioButtons) {
    // If the radio button is not the selected answer, uncheck it
    if (radioButton !== selectedAnswer) {
      radioButton.checked = false;
    }
  }
}
// Show the next question
function showNextQuestion() {

  // Hide the form
  document.getElementById("form").style.display = "none";

  // Show the question and answers
  document.getElementById("question").style.display = "block";
  document.getElementById("answers").style.display = "block";
  document.getElementById("next-button").style.display = "block";

  // Check if the current question is the last question
  if (currentQuestionIndex < questions.length) {
    // If it is not, get the current question
    const currentQuestion = questions[currentQuestionIndex];

    // Update the question text
    document.getElementById("question").innerHTML = currentQuestion.question;
    //clear answers
    document.getElementById("answers").innerHTML = '';
    // Show the answers for the current question
    for (const answer of currentQuestion.answers) {
      document.getElementById("answers").innerHTML  = `
        <input type="radio" name="answer" value="${answer.value}" onchange="updateScore(this)"> ${answer.text}<br>
      `;
    }

    // Update the current question index
    currentQuestionIndex  ;
  }
  if (currentQuestionIndex === questions.length) {
    // If it is, hide the "Next" button and show the "Submit" button
    document.getElementById("next-button").style.display = "none";
    document.getElementById("submit-button").style.display = "block";
  }
}

// Show the total score
function showTotalScore() {
  // Hide the question and answers
  document.getElementById("question").style.display = "none";
  document.getElementById("answers").style.display = "none";
  document.getElementById("submit-button").style.display = "none";

  // Show the total score
  document.getElementById("total-score").style.display = "block";
  document.getElementById("total-score").innerHTML = "Total Score: "   totalScore;
}

<form id="form">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <label for="phone">Phone:</label><br>
  <input type="text" id="phone" name="phone"><br><br>
  <input type="button" value="Next" onclick="showNextQuestion()">
</form>

<div id="question" style="display: none;"></div>
<div id="answers" style="display: none;"></div>
<div id="next-button" style="display: none;"><input type="button" value="Next" onclick="showNextQuestion()"></div>
<div id="submit-button" style="display: none;"><input type="button" value="Submit" onclick="showTotalScore()"></div>
<div id="total-score" style="display: none;">Total Score: 0</div>

CodePudding user response：

You just need to create an object mapping each category to its score, and a category assigned to every question like so :

// Initialize the current question index
let currentQuestionIndex = 0;

// Array of questions
const questions = [{
    question: "What does 2 2 equal?",
    category: 'maths',
    answers: [{
        text: "4",
        value: 1
      },
      {
        text: "2",
        value: 0
      },
      {
        text: "8",
        value: 0
      },
      {
        text: "16",
        value: 0
      }
    ]
  },
  {
    question: "What does oblitirate most nearly mean?",
    category: 'english',
    answers: [{
        text: "translate",
        value: 0
      },
      {
        text: "scatter",
        value: 0
      },
      {
        text: "wipe out",
        value: 1
      },
      {
        text: "blame",
        value: 0
      }
    ]
  },
  {
    question: "What is the chemical formula for water?",
    category: 'science',
    answers: [{
        text: "H2O",
        value: 1
      },
      {
        text: "K",
        value: 0
      },
      {
        text: "Na",
        value: 0
      },
      {
        text: "H",
        value: 0
      }
    ]
  }
];

// Initialize the total score
const scores = {}
let totalScore = 0

// Add the value of the selected answer to the total score and uncheck the other radio buttons
function updateScore (selectedAnswer, category) {
  // Check if a radio button has been selected
  if (!selectedAnswer.checked) return;

  const v = parseInt(selectedAnswer.value)

  // Add the value of the selected answer to the total score
  totalScore  = v;

  // Add the value of the selected answer to the category score
  scores[category]  = v

  // Get all the radio buttons
  const radioButtons = document.getElementsByName("answer");
  // Loop through the radio buttons
  for (const radioButton of radioButtons) {
    // If the radio button is not the selected answer, uncheck it
    if (radioButton !== selectedAnswer) {
      radioButton.checked = false;
    }
  }
}
// Show the next question
function showNextQuestion() {

  // Hide the form
  document.getElementById("form").style.display = "none";

  // Show the question and answers
  document.getElementById("question").style.display = "block";
  document.getElementById("answers").style.display = "block";
  document.getElementById("next-button").style.display = "block";

  // Check if the current question is the last question
  if (currentQuestionIndex < questions.length) {
    // If it is not, get the current question
    const currentQuestion = questions[currentQuestionIndex];

    // Update the question text
    document.getElementById("question").innerHTML = currentQuestion.question;
    //clear answers
    document.getElementById("answers").innerHTML = '';

    // Init the category score
    scores[currentQuestion.category] = 0

    // Show the answers for the current question
    for (const answer of currentQuestion.answers) {

      document.getElementById("answers").innerHTML  = `
        <input type="radio" name="answer" value="${answer.value}" onchange="updateScore(this, '${ currentQuestion.category }')"> ${answer.text}<br>
      `;
    }

    // Update the current question index
    currentQuestionIndex  ;
  }
  if (currentQuestionIndex === questions.length) {
    // If it is, hide the "Next" button and show the "Submit" button
    document.getElementById("next-button").style.display = "none";
    document.getElementById("submit-button").style.display = "block";
  }
}

// Show the total score
function showTotalScore() {
  let txt = "Total Score: "   totalScore

  console.log(scores)

  Object.keys(scores).forEach(category => {
    // Catpitalize the category
    const categoryStr = category.split('').map((e, i) => i ? e : e.toUpperCase()).join('')
    txt  = `<br />${ categoryStr }: ${ scores[category] }`
  })


  // Hide the question and answers
  document.getElementById("question").style.display = "none";
  document.getElementById("answers").style.display = "none";
  document.getElementById("submit-button").style.display = "none";

  // Show the total score
  document.getElementById("total-score").style.display = "block";
  document.getElementById("total-score").innerHTML = txt;
}

<form id="form">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <label for="phone">Phone:</label><br>
  <input type="text" id="phone" name="phone"><br><br>
  <input type="button" value="Next" onclick="showNextQuestion()">
</form>

<div id="question" style="display: none;"></div>
<div id="answers" style="display: none;"></div>
<div id="next-button" style="display: none;"><input type="button" value="Next" onclick="showNextQuestion()"></div>
<div id="submit-button" style="display: none;"><input type="button" value="Submit" onclick="showTotalScore()"></div>
<div id="total-score" style="display: none;">Total Score: 0</div>