On click display and update data-attribute in another div-CodePudding

I have a quiz and on clicking an answer (button/link). I'd like the give feedback as to as to whether the answer was correct or incorrect.

I thought using data- might be the best way to do this but I suppose I could have several paragraphs hidden and just show the one linked to the button when clicked.

What are peoples thoughts on that? Is the length of text a problem with data- as I've never used it in this way/with this volume of copy?

It would be nice if when the content was added/changed the container transitioned in vertical height and the updated text faded in. So the approach might be dictated by that.

Be good to get peoples feedback on the best approach for this.

.btn {display: inline-block; margin-bottom: 24px;}
.feedback { background: #f7f7f7; padding: 24px; }

<a href="#"  data-value="false" data-feedback="That's incorrect lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua">Option 1</a>
<a href="#"  data-value="true" data-feedback="That's correct! Ut enim ad minim veniam, quis nostrud exercitation ullamco.">Option 2</a>
<a href="#"  data-value="false" data-feedback="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur">Option 3</a>

<div >
  <p>[ FEEDBACK APPEARS HERE ]</p>
</div>

CodePudding user response：

const feedbackButtons = document.querySelectorAll('[data-feedback]');

for (let i = 0; i < feedbackButtons.length; i  ) {
  feedbackButtons[i].onclick = function() {
    document.querySelector('.feedback p').innerHTML = this.dataset.feedback;
  };
}

<a href="#"  data-value="false" data-feedback="That's incorrect lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua">Option 1</a>
<a href="#"  data-value="true" data-feedback="That's correct! Ut enim ad minim veniam, quis nostrud exercitation ullamco.">Option 2</a>
<a href="#"  data-value="false" data-feedback="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur">Option 3</a>

<div >
  <p>[ FEEDBACK APPEARS HERE ]</p>
</div>

CodePudding user response：

I personally don't like the approach of inserting the feedback on the element property. It's a leap that your user might check the console, but someone definitely could. I would rather store those feedbacks and get them back with the button index or something like that.

const feedbacks = [
  "That's incorrect lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
  "That's correct! Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
  "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
]

function getFeedback(bntIndex) {
  document.getElementById("feedbackText").innerText = feedbacks[bntIndex]
  document.getElementById("feedbackContainer").classList.add("visible")
  document.getElementById("feedbackContainer").classList.remove("hidden")
}

.btn {
  display: inline-block;
  margin-bottom: 24px;
}

.feedback {
  background: #f7f7f7;
  transition: 1s linear;
  overflow: hidden;
}

.feedback p {
  padding: 20px;
  transition: 5s linear;
}

.hidden {
  height: 0;
}

.visible {
  height: 100px;
}

<a href="#"  data-value="false" onclick="getFeedback(0)">Option 1</a>
<a href="#"  data-value="true" onclick="getFeedback(1)">Option 2</a>
<a href="#"  data-value="false" onclick="getFeedback(2)">Option 3</a>

<div id="feedbackContainer" >
  <p id="feedbackText">Feedback</p>
</div>

EDIT: I inserted a snippet for the transition behavior you wanted. Hope its what you are looking for :)