JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page1">
    What is 2 times 24?<br /><br />
    
    <form>
        <input type="input" value="" name="q1" />
    </form>
    
    <br /><button>Next</button>
</div>
<div class="page2">2<br /><button>Next</button></div>
<div class="page3">3<br /><button>Next</button></div>
<div class="page4">4<br /><button>Next</button></div>
<div class="page5">5<br /><button>Next</button></div>
<div class="page6">6 (end)</div>

CSS

div[class^="page"] {
    display: none;
    margin: 20px auto;
    padding: 15px;
    width: 400px;
    height: 200px;
    box-sizing: border-box;
    background-color: orange;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}

JavaScript

$(document).ready(function() {
    $('.page1').css('display', 'block');
    
    $('div[class^="page"] button').click(function(evt) {
        evt.preventDefault();
        
        // Figure out the current page
        var page_nr = $(this).parent().attr('class');
        page_nr = page_nr.replace('page', '') * 1;
        
        // Check the question answer given
        if ($(this).parent().find('input').val() == '48') {
            // Hide current page
            $(this).parent().animate(
                { opacity: 'hide', display: 'none' },
                750, function() {
                    // Show next page
                    $('.page' + (page_nr + 1)).animate({ opacity: 'show', display: 'block' }, 750);
                });
        }
        else {
            alert('Wrong answer! Try again :)');
        }
    });
});