<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'));
	})
});