<div class="window" data-section="1">
  <ul>
    <li class="is-active">
      <section>
        <div class="intro">
          <h2 class="title">Section 01</h2>
          <div class="content">
            <p>This text is in the first box of a section.. The question or introduction statement can go here.</p>
            <div class="button-box">
              <button class="btn-answer" data-answer="right">Choice 1</button>
              <button class="btn-answer" data-answer="wrong">Choice 2</button>
            </div>
          </div>
        </div>
        <div class="answer">
          <h2 class="title">Section 01</h2>
          <div class="content">
            <p>This is the 2nd slide text, for the answer or whatever text goes in the next box.</p>
            <button class="next">Next</button>
          </div>
        </div>
      </section>
    </li>
    <li>
      <section>
        <div class="intro">
          <h2 class="title">Section 02</h2>
          <div class="content">
            <p>This text is in the first box of a section.. The question or introduction statement can go here.</p>
            <div class="button-box">
              <button class="btn-answer" data-answer="right">Choice 1</button>
              <button class="btn-answer" data-answer="wrong">Choice 2</button>
            </div>
          </div>
        </div>
        <div class="answer">
          <h2 class="title">Section 02</h2>
          <div class="content">
            <p>This is the 2nd slide text, for the answer or whatever text goes in the next box.</p>
            <button class="next">Next</button>
          </div>
        </div>
      </section>
    </li>
    <li>
      <section>
        <div class="intro">
          <h2 class="title">Section 03</h2>
          <div class="content">
            <p>This text is in the first box of a section.. The question or introduction statement can go here.</p>
            <div class="button-box">
              <button class="btn-answer" data-answer="right">Choice 1</button>
              <button class="btn-answer" data-answer="wrong">Choice 2</button>
            </div>
          </div>
        </div>
        <div class="answer">
          <h2 class="title">Section 03</h2>
          <div class="content">
            <p>This is the 2nd slide text, for the answer or whatever text goes in the next box.</p>
            <button class="next">Next</button>
          </div>
        </div>
      </section>
    </li>
    <li>
      <section>
        <div class="intro">
          <h2 class="title">Section 04</h2>
          <div class="content">
            <p>This text is in the first box of a section.. The question or introduction statement can go here.</p>
            <div class="button-box">
              <button class="btn-answer" data-answer="right">Choice 1</button>
              <button class="btn-answer" data-answer="wrong">Choice 2</button>
            </div>
          </div>
        </div>
        <div class="answer">
          <h2 class="title">Section 04</h2>
          <div class="content">
            <p>This is the 2nd slide text, for the answer or whatever text goes in the next box.</p>
            <button class="next">Next</button>
          </div>
        </div>
      </section>
    </li>
    <li>
      <section>
        <div class="intro">
          <h2 class="title">Section 05</h2>
          <div class="content">
            <p>This text is in the first box of a section.. The question or introduction statement can go here.</p>
            <div class="button-box">
              <button class="btn-answer" data-answer="right">Choice 1</button>
              <button class="btn-answer" data-answer="wrong">Choice 2</button>
            </div>
          </div>
        </div>
        <div class="answer">
          <h2 class="title">Section 05</h2>
          <div class="content">
            <p>This is the 2nd slide text, for the answer or whatever text goes in the next box.</p>
            <button class="next">Next</button>
          </div>
        </div>
      </section>
    </li>
    <li>
    <section>
        <div class="intro">
          <h2 class="title">Section 06</h2>
          <div class="content">
            <p>This text is in the first box of a section.. The question or introduction statement can go here.</p>
            <div class="button-box">
              <button class="btn-answer" data-answer="right">Choice 1</button>
              <button class="btn-answer" data-answer="wrong">Choice 2</button>
            </div>
          </div>
        </div>
        <div class="answer">
          <h2 class="title">Section 06</h2>
          <div class="content">
            <p>This is the 2nd slide text, for the answer or whatever text goes in the next box.</p>
            <button class="next">Next</button>
          </div>
        </div>
      </section>
    </li>
    <li>
      <section>
        <div class="intro">
          <h2 class="title">Section 07</h2>
          <div class="content">
            <p>This text is in the first box of a section.. The question or introduction statement can go here.</p>
            <div class="button-box">
              <button class="btn-answer" data-answer="right">Choice 1</button>
              <button class="btn-answer" data-answer="wrong">Choice 2</button>
            </div>
          </div>
        </div>
        <div class="answer">
          <h2 class="title">Section 07</h2>
          <div class="content">
            <p>This is the 2nd slide text, for the answer or whatever text goes in the next box.</p>
            <button class="next">Next</button>
          </div>
        </div>
      </section>
    </li>
    <li>
      <section>
        <div class="intro">
          <h2 class="title">Section 08</h2>
          <div class="content">
            <p>This text is in the first box of a section.. The question or introduction statement can go here.</p>
            <div class="button-box">
              <button class="btn-answer" data-answer="right">Choice 1</button>
              <button class="btn-answer" data-answer="wrong">Choice 2</button>
            </div>
          </div>
        </div>
        <div class="answer">
          <h2 class="title">Section 08</h2>
          <div class="content">
            <p>This is the final slide, so we could add one more after this for the results, with a different style.</p>
          </div>
        </div>
      </section>
    </li>
  </ul>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:#fafafa;
}

.window {
  width: 600px;
  height: 250px;
  border: 1px solid #d2d2d2;
  overflow: hidden;
  border-radius:8px;
  background-color:#FFF;
  box-shadow:6px 6px 0 rgba(0,0,0,0.05);
  
  > ul {
    height: 100%;
    transition: transform 0.5s;
    > li {
      height: 100%;
      section {
        height: 100%;
        position: relative;
        .intro,
        .answer {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: #fff;
        }
        .content {
          p {
            font-size:14px;
            line-height:1.6;
          }
        }
        .intro {
          padding: 20px;
          display: flex;
          flex-direction: column;
          .title {
            font-size: 20px;
            text-transform: uppercase;
            border-bottom: 1px solid #f1f1f1;
            padding-bottom: 10px;
            margin-bottom: 10px;
          }
          .content {
            position: relative;
            flex: 1;
            .button-box {
              position: absolute;
              bottom: 0;
              display: flex;
              justify-content: center;
              width: 100%;
              button {
                border: 2px solid #e2e2e2;
                border-radius: 9999px;
                background: none;
                padding: 12px 20px;
                margin: 0;
                font-size: 15px;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                cursor: pointer;
                outline: none;
                transition: background-color 0.4s;
                &:hover {
                  background-color: #ebebeb;
                }
                &:first-child {
                  margin-right: 12px;
                }
              }
            }
          }
        }
        .answer {
          padding: 20px;
          display: flex;
          flex-direction: column;
          opacity: 0;
          visibility: none;
          pointer-events: none;
          transition: opacity 0.4s, pointer-events 0s 0.4s, visibility 0s;
          &:after {
            content: "";
            position: absolute;
            top: 10px;
            right: 20px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 12px;
            transform:scale(0);
            transition:transform 0.3s 0.5s;
          }
          .title {
            font-size: 20px;
            text-transform: uppercase;
            border-bottom: 1px solid #f1f1f1;
            padding-bottom: 10px;
            margin-bottom: 10px;
          }
          .content {
            position: relative;
            flex: 1;
          }
          button {
            position: absolute;
            bottom: 0;
            right: 0;
            appearance: none;
            border-radius: 9999px;
            border: 2px solid #e2e2e2;
            background: none;
            padding: 12px 20px;
            margin: 0;
            font-size: 15px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            outline: none;
            transition: background-color 0.4s;
            &:hover {
              background-color: #ebebeb;
            }
          }
        }
      }

      &.is-answered {
        .answer {
          opacity: 1;
          visibility: visible;
          pointer-events: all;
          &:after {
            transform:scale(1);
          }
        }
      }
      &.is-right {
        .answer {
          &:after {
            content: "✔";
            background-color: green;
          }
        }
      }
      &.is-wrong {
        .answer {
          &:after {
            content: "✕";
            background-color: red;
          }
        }
      }
    }
  }
}

$(function () {
  var sectionCount = $(".window>ul>li").length;
  var sectionNo = 1;

  $(".window").on("click", ".next", function () {
    if (sectionNo < sectionCount) {
      sectionNo++;
      $(".window").find('li.is-active').removeClass('is-active');
      $(".window").attr("data-section", sectionNo).find('li').eq(sectionNo - 1).addClass('is-active');
      gsap.to(".window>ul", {
        y: (sectionNo - 1) * -100 + "%",
        duration: 0.4,
        ease: "power2.out"
      });
    }
  });
  
  $('.intro').on('click', '.btn-answer', function(){
    $('li.is-active').addClass('is-answered').addClass('is-' + $(this).data('answer'));
  })
});