0

I have tried to get it so that a user can choose multiple answers that are right and one question that gives you 0.5 points, but can't seem to get it working. I tried makin correctAnswer a array so that two answers are right but that didnt work. I also tried changing some if statements, but that didn't work as well. Im really stuck and i could use some major help

Here is my code:

(function(){
  // Functions
  function buildQuiz(){
    // variable to store the HTML output
    const output = [];

    // for each question...
    myQuestions.forEach(
      (currentQuestion, questionNumber) => {

        // variable to store the list of possible answers
        const answers = [];

        // and for each available answer...
        for(letter in currentQuestion.answers){

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

        // add this question and its answers to the output
        output.push(
          `<div class="slide">
            <div class="question"> ${currentQuestion.question} </div>
            <div class="answers"> ${answers.join("")} </div>
          </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++;

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

    // show number of correct answers out of total
    resultsContainer.innerHTML = `${numCorrect} ut av ${myQuestions.length} riktige`;
  }

  function showSlide(n) {
    slides[currentSlide].classList.remove('active-slide');
    slides[n].classList.add('active-slide');
    currentSlide = n;
    if(currentSlide === 0){
      previousButton.style.display = 'none';
    }
    else{
      previousButton.style.display = 'inline-block';
    }
    if(currentSlide === slides.length-1){
      nextButton.style.display = 'none';
      submitButton.style.display = 'inline-block';
    }
    else{
      nextButton.style.display = 'inline-block';
      submitButton.style.display = 'none';
    }
  }

  function showNextSlide() {
    showSlide(currentSlide + 1);
  }

  function showPreviousSlide() {
    showSlide(currentSlide - 1);
  }

  // Variables
  const quizContainer = document.getElementById('quiz');
  const resultsContainer = document.getElementById('results');
  const submitButton = document.getElementById('submit');
  const myQuestions = [
    {
      question: "Hvem lagde html?",
      answers: {
        a: "Douglas Crockford",
        b: "Sheryl Sandberg",
        c: "Tim Berners-Lee"
      },
      correctAnswer: "c"
    },
    {
      question: "Hvem av disse er en kritisk realisme forfatter?",
      answers: {
        a: "Camilla Collett",
        b: "Henrik Ibsen",
        c: "Alexander Kielland"
      },
      correctAnswer: "b"
    },
    {
      question: "Hvor mange korstog var det?",
      answers: {
        a: "4",
        b: "7",
        c: "5",
      },
      correctAnswer: "b"
    },
    {
      question: "Hva er et integral?",
      answers: {
        a: "Hvor mye en funksjon stiger i et intervall",
        b: "Den deriverte",
        c: "Den antideriverte",
      },
      correctAnswer: "c"
    },
    {
      question: "Hvilken av disse øvelsene trener hovedsakelig rygg?",
      answers: {
        a: "Pulldown",
        b: "Romanian deadlift",
        c: "Lateral raises",
      },
      correctAnswer: "a"
    },
    {
      question: "Hvilket klasserom bruker Teknologi og forskningslære?",
      answers: {
        a: "P3",
        b: "Makerspace",
        c: "a313",
      },
      correctAnswer: "b"
    },
  ];

  // Kick things off
  buildQuiz();

  // Pagination
  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  let currentSlide = 0;

  // Show the first slide
  showSlide(currentSlide);

  // Event listeners
  submitButton.addEventListener('click', showResults);
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);
})();
  • Maybe this thread can help you? https://stackoverflow.com/questions/6315180/javascript-search-array-of-arrays – ItsMeBrille Nov 08 '22 at 10:08
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Community Nov 08 '22 at 11:52

0 Answers0