Forcing the user to read Terms and Conditions

How can you check if the user read the terms and conditions before accepting it? Well, you can’t but at least you can check if the user scrolled to the bottom of the terms and conditions box and then you can enable the Accept button.

First I will insert here the HTML, CSS and javascript code for you to copy paste. After that I will provide explanation for the code if you are still interested.

The HTML code:

<section>
  <h2>Accept the terms and conditions</h2>
  <div id="target">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet risus nec eros ornare pretium. Duis justo quam, lobortis vel dignissim eu, convallis ac libero. Vivamus luctus urna ante, at suscipit justo dapibus at. Pellentesque lacinia orci vel nisi lacinia, at pretium nibh dictum. Nunc suscipit dictum aliquam. Sed et nisl sit amet libero rutrum dictum vel et enim. Aliquam faucibus varius tellus eget hendrerit. Maecenas massa nisi, pulvinar a dignissim sed, tincidunt eu nisl. Cras laoreet posuere dolor, a euismod nunc aliquam eget. In pulvinar tellus non tincidunt euismod. Nunc lobortis, lectus nec lobortis sodales, dolor enim congue turpis, eget condimentum magna libero sed sapien. Vestibulum in eros nunc.</p>
    <p>Quisque massa odio, porttitor ac lacus a, tristique fermentum justo. Fusce metus lorem, commodo sit amet ipsum a, blandit mollis neque. Mauris vel tempor tortor, sit amet venenatis erat. Quisque eget volutpat massa, id aliquam sem. Aenean at aliquam ligula, ac placerat ex. Morbi sed urna nibh. Morbi malesuada ipsum nec lectus iaculis, eu imperdiet arcu aliquam. Aenean ac feugiat lectus. Etiam risus quam, pharetra et odio eu, fringilla tristique ex. Cras blandit, dui a feugiat vestibulum, odio quam viverra elit, eu porttitor nulla libero sed ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fermentum lobortis leo, vel dictum augue mollis vitae. Suspendisse imperdiet condimentum nisi, eu mattis nibh.</p>
    <p>Sed bibendum sagittis suscipit. Cras luctus id nibh sed viverra. Nam dictum leo risus, sit amet feugiat sem lobortis sed. Vestibulum feugiat lacus eget arcu tempor, id dapibus turpis condimentum. Mauris eu egestas eros. Phasellus dignissim leo tellus, id consectetur lorem luctus eget. Maecenas fermentum ex at dui mattis, in elementum nibh placerat. Praesent vehicula lacus eu mauris eleifend, at laoreet nulla congue. Donec id dui euismod neque vestibulum gravida. Quisque at arcu ipsum. Ut vulputate sollicitudin lorem, quis tincidunt sem sagittis a. Sed aliquam ante tortor, eget pellentesque velit varius quis. In ut augue rhoncus, sagittis ex ac, auctor diam.</p>
    <p>Donec hendrerit eget sem a vulputate. Aliquam faucibus neque a varius egestas. Donec dolor leo, ullamcorper at imperdiet eu, iaculis a metus. Morbi malesuada erat est. Integer porta felis felis, eget viverra velit finibus sed. Etiam a pellentesque ipsum. Integer id eros euismod, egestas dui at, accumsan augue. Praesent varius ante at efficitur posuere. Suspendisse sit amet massa ut arcu ullamcorper cursus. Nunc non felis sem.</p>
    <p>Aenean at risus ante. Maecenas nisl mauris, semper a sagittis ac, pulvinar vel elit. Aenean nec hendrerit tellus. Nullam dictum massa nibh. Donec pharetra sit amet lorem eget hendrerit. Ut a risus lacus. Etiam at mauris orci. Phasellus nec augue nec massa ultricies interdum. Donec eget mi risus. Quisque dui urna, convallis at auctor aliquam, viverra quis neque.</p>
  </div>
  <button id="acceptButton" disabled>Accept</button>
</section>

The CSS:

section {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

#target {
  max-height: 300px;
  overflow: auto;
  text-align: left;
  margin-bottom: 20px;
}

button {
  border: 0;
  background: orange;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}
button[disabled] {
  background: #ccc;
}

The Javascript code:

document.getElementById('target').addEventListener('scroll', ev => {
  const terms = ev.target;
  if(terms.offsetHeight + Math.ceil(terms.scrollTop) === terms.scrollHeight) {   document.getElementById('acceptButton').removeAttribute('disabled');
  };
})

Now I want to get into details about the solution. First we create the box with the terms and conditions text and after that we create the accept button and we disable it. The CSS code has styling and max-height limiter rule for the box. The javascript code has only an event listener for a scroll event. In this scroll event we check if we already got to the end of the boxes scroll track. For this we need to check if height along with the scroll top position of the box is equal to the total scroll height of the box. If yes then the enabling of the accept button can be initiated.

That’s all the magic. Enjoy !

0