Avatar billede Skaugir Nybegynder
26. maj 2016 - 12:29 Der er 2 kommentarer

Til quiz-template; Vise de korrekte svar

Hej

I forlængelse af mit spørgsmål (http://www.eksperten.dk/spm/1010908#reply_8221265) til en quiz-template har jeg også brug for at brugeren på slutsiden får vist de rigtige svar til hvert spørgsmål. Gerne med en løsning hvor de rigtige svar bliver highlightet med grøn og forkerte med rød.
Avatar billede Skaugir Nybegynder
26. maj 2016 - 12:32 #1
Koden er her

window.onload = function () {
 
  var questionArea = document.getElementsByClassName('questions')[0],
      answerArea  = document.getElementsByClassName('answers')[0],
      checker      = document.getElementsByClassName('checker')[0],
      current      = 0,
 
    // An object that holds all the questions + possible answers.
    // In the array --> last digit gives the right answer position
      allQuestions = {
        'Superunknown' : ['Alice In Chains', 'Soundgarden', 'Stone Temple Pilots','Nine Inch Nails', 1],
       
        'Music for the Jilted Generation' : ['Chemical Brothers', 'The Prodigy', 'Portishead', 1],
       
        'Thug Life: Volume 1' : ['Naughty By Nature', 'Kris Kross', '2Pac', 2],
       
        'Pisces Iscariot' : ['Smashing Pumpkins', 'Pearl Jam', 'Pixies', 0],
       
        'Steam' : ['Take That', 'East 17' , 'Boyzone', 1],
       
        'Youthanasia ' : ['Metallica', 'Slayer', 'Megadeth', 2],
       
        'The Return of the Space Cowboy' : ['Jamiroquai', 'Primus', 'Stevie Wonder', 0],
       
        'Dog Man Star' : ['Suede', 'Sort Sol', 'Weezer', 0],
       
        'No Need to Argue' : ['The Cranberries', 'Morrissey' , 'Pulp', 0],
       
        'Burn My Eyes' : ['Korn', 'Anthrax?', 'Machine Head', 2],
      };
     
  function loadQuestion(curr) {
  // This function loads all the question into the questionArea
  // It grabs the current question based on the 'current'-variable
 
    var question = Object.keys(allQuestions)[curr];
   
    questionArea.innerHTML = '';
    questionArea.innerHTML = question;   
  }
 
  function loadAnswers(curr) {
  // This function loads all the possible answers of the given question
  // It grabs the needed answer-array with the help of the current-variable
  // Every answer is added with an 'onclick'-function
 
    var answers = allQuestions[Object.keys(allQuestions)[curr]];
   
    answerArea.innerHTML = '';
   
    for (var i = 0; i < answers.length -1; i += 1) {
      var createDiv = document.createElement('div'),
          text = document.createTextNode(answers[i]);
     
      createDiv.appendChild(text);     
      createDiv.addEventListener("click", checkAnswer(i, answers));
     
     
      answerArea.appendChild(createDiv);
    }
  }
 
  function checkAnswer(i, arr) {
    // This is the function that will run, when clicked on one of the answers
    // Check if givenAnswer is sams as the correct one
    // After this, check if it's the last question:
    // If it is: empty the answerArea and let them know it's done.
   
    return function () {
      var givenAnswer = i,
          correctAnswer = arr[arr.length-1];
     
      if (givenAnswer === correctAnswer) {
        addChecker(true);           
      } else {
        addChecker(false);                       
      }
     
      if (current < Object.keys(allQuestions).length -1) {
        current += 1;
       
        loadQuestion(current);
        loadAnswers(current);
      } else {
        var correct = document.getElementsByClassName("correct").length; 
        questionArea.innerHTML = 'Færdigt arbejde';
        answerArea.innerHTML = 'Du fik ' + correct + ' rigtige ud af ' + (current+1) + ' </br></br>  <input type="button" class="button" value="Prøv igen" onClick="window.location.reload()">';
      }
                             
    };
  }
 
  function addChecker(bool) {
  // This function adds a div element to the page
  // Used to see if it was correct or false
 
    var createDiv = document.createElement('div'),
        txt      = document.createTextNode(current + 1);
   
    createDiv.appendChild(txt);
   
    if (bool) {
     
      createDiv.className += 'correct';
      checker.appendChild(createDiv);
    } else {
      createDiv.className += 'false';
      checker.appendChild(createDiv);
    }
  }
 
 
  // Start the quiz right away
  loadQuestion(current);
  loadAnswers(current);
 
};
Avatar billede olsensweb.dk Ekspert
26. maj 2016 - 21:23 #2
det nemmeste ville være at lave et array bestående af:
spørgsmål, afgivet svar, rigtigt svar, resultat (true/false eller ok/wrong).

og på slutsiden udskrive dette array, evt i en tabel, hver rækkes farve bestemmes så af resultat feltet.


i functionen checkAnswer(i, arr) har du alle oplysninger du skal bruge til at danne det array, og det er også der du udskriver det
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester