JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div class="content" id="question1">
<div class="question-wrap">
    <h2>This is a Question1</h2>
</div>
<div class="choice-wrap">
<table class="choice-table">
    <tr>
    <td class="choice">choice1</td>
    <td class="choice">choice2</td>
    <td class="choice">choice3</td>
    <td class="choice">choice4</td>
    </tr>
</table>
</div>
</div>
<div class="content" id="question2">
<div class="question-wrap">
    <h2>This is a Question2</h2>
</div>
<div class="choice-wrap">
    <table class="choice-table">
        <tr>
            <td class="choice">choice1</td>
            <td class="choice">choice2</td>
            <td class="choice">choice3</td>
            <td class="choice">choice4</td>
        </tr>
    </table>
</div>
</div>
<div class="content" id="question3">
<div class="question-wrap">
    <h2>This is a Question3</h2>
</div>
<div class="choice-wrap">
    <table class="choice-table">
        <tr>
            <td class="choice">choice1</td>
            <td class="choice">choice2</td>
            <td class="choice">choice3</td>
            <td class="choice">choice4</td>
        </tr>
    </table>
</div>
</div>
<div class="content" id="question4">
<div class="question-wrap">
    <h2>This is a Question4</h2>
</div>
<div class="choice-wrap">
<table class="choice-table">
    <tr>
    <td class="choice">choice1</td>
    <td class="choice">choice2</td>
    <td class="choice">choice3</td>
    <td class="choice">choice4</td>
    </tr>
</table>
</div>
</div>
<div class="content" id="question5">
<div class="question-wrap">
    <h2>This is a Question5</h2>
</div>
<div class="choice-wrap">
<table class="choice-table">
    <tr>
    <td class="choice">choice1</td>
    <td class="choice">choice2</td>
    <td class="choice">choice3</td>
    <td class="choice">choice4</td>
    </tr>
</table>
</div>
</div>

CSS

.content    {
width: 1024px;
margin: auto;
text-align: center;
padding: 25px;
display:none;
}

.choice-wrap    {
margin-top: 50px;
}

.choice-table   {
margin: auto;
}

.choice    {
background: #666;
padding: 25px;
cursor: pointer;
border-radius: 999px;
}

JavaScript

$(document).ready(function(){
    $('div.content:first-child').fadeIn();
    $('.choice').click(function (){
        var $thisParent = $(this).closest('div.content');
        $thisParent.fadeOut(100, function(){
            if ($thisParent.next('.content').length > 0) {
                $thisParent.next('.content').fadeIn();
            } else {
                $('body').append('<span style="color:#000;">the test is finished : ) </span>')
            }
        });
    });
});