Geek Answers Handbook

Javascript quiz malfunction using the 'this' and data- * attributes

I am trying to create a click on a quiz using pure javascript for uni assignment. I have a bunch of sections to make them appear. Each question has a list of 4 (or so) answers that relate to a different type of personality. I intend to save an array of objects to count each selected answer and provide a breakdown of personality types at the end.

I'm stuck in a function now;

  • write down the selected data and add it to the response array,
  • hide the current question div and
  • display next question div

HTML :

<div class="question" id="q1"  data-next="q2">
  <h2>Question 1:</h2>
  <p>Which of the following is your favourite movie? </p>
  <ol class="button">
    <li data-score="Ninja">Karate Kid</li>
    <li data-score="Robot">Wall-E</li>
    <li data-score="Pirate">Pirates of the Caribbean</li>
    <li data-score="Zombie">Dawn of the Dead</li>
  </ol>
</div>

<div class="question" id="q2" data-next="q3">
  <h2>Question 2:</h2>
  <p>A building is on fire and you hear a child screaming for help from the third floor window. Do you: </p>
  <ol class="button">
    <li data-score="Ninja">Mysteriously disappear and re-appear with the children</li>
    <li data-score="Robot">Run in and save the child on the second floor, because i'm made of metal and fire won't hurt me!</li>
    <li data-score="Pirate">Dress up as a pirate and loot the surrounding neighbourhood, including the bank?</li>
    <li data-score="Zombie">Eat all the brains. Nom nom uuuuggghhh.</li>
  </ol>
</div>

JS:

 // Create a listener for clicks on the 'start the quiz' button on the front page. 
    document.getElementById("beginquiz").addEventListener("click", startQuiz);

// When the button is clicked the 'intro' div is hidden and the first question div is displayed
function startQuiz () {
    document.getElementById("intro").style.display = "none";
    document.getElementById("q1").style.display = "block";
}

// Create an array object to store all the quiz answers. Each selected answer should increase the category score by 1. The highest score will be the personality 'type' in the results. 
var answerData = [
    {name: "Ninja" , score: 0},
    {name: "Robot" , score: 0},
    {name: "Pirate" , score: 0},
    {name: "Zombie" , score: 0} ]

// Get all of the .buttons elements
var buttons = document.querySelectorAll(".button");
// Add an onclick event listener to every element with a class of .buttons
for (var i = 0 ; i < buttons.length ; i++) {
    // When an element with .buttons is clicked, run the function called buttonClicked
    buttons[i].onclick = buttonClicked;
    }

// Define what buttonClicked does
function buttonClicked() {
    // Get the current element data-score value
    var selectedType = this.dataset.score;
    // Increase the selected answer 'type' by 1
    answerData["selectedType"].score++;
    // Hide the current question div
    this.parentElement.style.display = "none";
    // Work out what the next question div is
    var nextQuestion = this.parentElement.dataset.next;
    // Display the next question element
    document.getElementById(nextQuestion).style.display = "block";
}

Let's say that I have done so far https://jsfiddle.net/funkefiddle/e1za0gtr/1/

- , . , , . Firefox "this.dataset.score is undefined".

var selectedType = this.dataset.score.value;
answerData["selectedType"].score++;

, .

- , , . , .

: .value, , . , nextQuestion . / ( answerData.

, , , .

answerData[selectedType].score++ ;
+4
2

:

  • ol, this . . target, , .

  • data-score dataset.score, dataset.score.value

  • answerData["selectedType"] : answerData , ; "selectedType" , . answerData , :

    var answerData = { // one object, with names as keys, scores as values
    "Ninja": 0,
     "Robot": 0,
    "Pirate": 0,
    "Zombie": 0};

  • getElementById . id , .

  • ... ...;-)

: 5:

// Create a listener for clicks on the 'start the quiz' button on the front page. 
document.getElementById("beginquiz").addEventListener("click", startQuiz);

// When the button is clicked the 'intro' div is hidden and the first question div is displayed
function startQuiz () {
    document.getElementById("intro").style.display = "none";
    document.getElementById("q1").style.display = "block";
}

// Create an array object to store all the quiz answers. Each selected answer should increase the category score by 1. The highest score will be the personality 'type' in the results. 
var answerData = { // one object, with names as keys, scores as values
    "Ninja": 0,
     "Robot": 0,
    "Pirate": 0,
    "Zombie": 0};

// Get all of the .buttons elements
var buttons = document.querySelectorAll(".button");
// Add an onclick event listener to every element with a class of .buttons
for (var i = 0 ; i < buttons.length ; i++) {
    // When an element with .buttons is clicked, run the function called buttonClicked
    buttons[i].onclick = buttonClicked;
    }

// Define what buttonClicked does
function buttonClicked(e) {
    var target = e.target; // 1. `this` is parent, need target
    console.log(target);
    // Get the current element data-score value
    var selectedType = target.dataset.score;   // 2. score is the value
    // Increase the selected answer 'type' by 1
    console.log(selectedType);
    answerData[selectedType]++;  // 4. after change of structure
    // Hide the current question div
    this.parentElement.style.display = "none";
    // Work out what the next question div is
    var nextQuestion = this.parentElement.dataset.next;
    // Display the next question element
    console.log(nextQuestion);
    document.getElementById(nextQuestion).style.display = "block"; // no hash!
}
.question, #result {
    display: none;
    }

.button li {
    border: 1px solid;
    border-radius: 3px;
    background-color: #eee;
    text-align: center;
    line-height: 2em;
    padding: 0.5em;
    margin: 0.5em;
    width: 80%;
    margin: 0 auto;
}

.button li:hover {
    color: #bfbfbf;
    background-color: #555;
}

#intro, .question, #result {
    max-width: 600px;
    margin: 0 auto;
}

#beginquiz {
    border: 1px solid;
    border-radius: 3px;
    background-color: #eee;
    text-align: center;
    line-height: 2em;
    padding: 0.5em;
    margin: 0.5em;
    width: 20em;
    margin: 0 auto;
}
#beginquiz:hover {
    color: #bfbfbf;
    background-color: #555;
}
<div id="intro">
  <h2>Welcome to Ewan L Assignment 1 Quiz.</h2>
  <button id="beginquiz">Start the quiz</button>
</div>

<div class="question" id="q1"  data-next="q2">
  <h2>Question 1:</h2>
  <p>Which of the following is your favourite movie? </p>
  <ol class="button">
    <li data-score="Ninja">Karate Kid</li>
    <li data-score="Robot">Wall-E</li>
    <li data-score="Pirate">Pirates of the Caribbean</li>
    <li data-score="Zombie">Dawn of the Dead</li>
  </ol>
</div>

<div class="question" id="q2" data-next="q3">
  <h2>Question 2:</h2>
  <p>A building is on fire and you hear a child screaming for help from the third floor window. Do you: </p>
  <ol class="button">
    <li data-score="Ninja">Mysteriously disappear and re-appear with the children</li>
    <li data-score="Robot">Run in and save the child on the second floor, because i'm made of metal and fire won't hurt me!</li>
    <li data-score="Pirate">Dress up as a pirate and loot the surrounding neighbourhood, including the bank?</li>
    <li data-score="Zombie">Eat all the brains. Nom nom uuuuggghhh.</li>
  </ol>
</div>

<div class="question" id="q3" data-next="q4">
  <h2>Question 3:</h2>
  <p>Where do you call home?</p>
  <ol class="button">
    <li data-score="Ninja">A magical castle in the English countryside </li>
    <li data-score="Robot">A dark and secret cave in the distant mountains</li>
    <li>A secluded hut in the woods</li>
    <li>34 Tooranimble St, Kanimboolaga NSW</li>
    <li>The sea is my only home. Man the rigging you scurvy sea dog! YARR</li>
  </ol>
</div>

<div class="question" id="q4" data-next="q5">
  <h2>Question 4:</h2>
  <p>What is your favourite letter?</p>
  <ol class="button">
    <li data-score="Ninja">A</li>
    <li data-score="Robot">B</li>
    <li>C</li>
    <li>Rrrr</li>
  </ol>
</div>
<div class="question" id="q5" data-next="q6">
  <h2>Question 5:</h2>
  <p>What is your favourite music?</p>
  <ol class="button">
    <li data-score="Ninja">Rrrr and B</li>
    <li data-score="Robot">Robo-boogie</li>
    <li></li>
    <li></li>
  </ol>
</div>
<div class="question" id="q6" data-next="q7">
  <h2>Question 6:</h2>
  <p>If you were a pirate, would you:</p>
  <ol class="button">
    <li data-score="Ninja">Lead a quiet life of solace and penance</li>
    <li data-score="Robot">Loot and plunder</li>
    <li>Wear an eye-patch</li>
    <li>Have one leg</li>
    <li>All of the above, except for number 1. </li>
  </ol>
</div>
<div class="question" id="q7" data-next="result">
  <h2>Question 7:</h2>
  <p>Do you like pirates?</p>
  <ol class="button">
    <li data-score="Ninja">Yes</li>
    <li data-score="Robot">No</li>
    <li>I'm just here for the free cookies</li>
    <li>How did i get this far into the quiz? What am i doing with my life??</li>
  </ol>
</div>

<div id="result">
  <h2>HAHA we fooled you matey. You're a pirate through and through.</h2>
</div>
Hide result
+1

answerData - . , . , name .

:

var answerData = {
    "Ninja": { score: 0 },
    "Robot": { score: 0 },
    "Pirate": { score: 0 },
    "Zombie": { score: 0 }
}

"selectedType" :

answerData[selectedType].score++; // remove quote around selectedType

, , , :

var answerDataNames = answerData.map(function(obj){
    return obj.name;
}

:

 // Get the current element data-score value
var selectedType = this.dataset.score;
// Increase the selected answer 'type' by 1
var selectedIndex = answerDataNames.indexOf(selectedType);
answerData[selectedIndex].score++;
+1

More articles:


All Articles