Quiz

<div class="wizard">
<!-- Step 1 -->
<div class="wizard-step card active theme-cta" id="step-1">
    <p>Question 1: Your favorite type of music?</p>
    <div>
        <label><input type="radio" name="question1" value="a"> Rock</label>
        <label><input type="radio" name="question1" value="b"> Pop</label>
        <label><input type="radio" name="question1" value="c"> Classical</label>
        <label><input type="radio" name="question1" value="d"> Jazz</label>
    </div>
</div>
<!-- Step 2 -->
<div class="wizard-step card theme-cta" id="step-2">
    <p>Question 2: Your favorite season?</p>
    <div>
        <label><input type="radio" name="question2" value="a"> Spring</label>
        <label><input type="radio" name="question2" value="b"> Summer</label>
        <label><input type="radio" name="question2" value="c"> Autumn</label>
        <label><input type="radio" name="question2" value="d"> Winter</label>
    </div>
</div>

<!-- Step 3 -->
<div class="wizard-step card theme-cta" id="step-3">
    <p>Question 3: Preferred type of vacation?</p>
    <div>
        <label><input type="radio" name="question3" value="a"> Adventure</label>
        <label><input type="radio" name="question3" value="b"> Beach</label>
        <label><input type="radio" name="question3" value="c"> Cultural</label>
        <label><input type="radio" name="question3" value="d"> Staycation</label>
    </div>
</div>

<!-- Step 4 -->
<div class="wizard-step card theme-cta" id="step-4">
    <p>Question 4: Favorite type of movie?</p>
    <div>
        <label><input type="radio" name="question4" value="a"> Action</label>
        <label><input type="radio" name="question4" value="b"> Comedy</label>
        <label><input type="radio" name="question4" value="c"> Drama</label>
        <label><input type="radio" name="question4" value="d"> Horror</label>
    </div>
</div>
</div>
<!-- Result Types -->
<div id="result-types">
<div data-result="a">Funny (change this to your content/image)</div>
<div data-result="b">Handsome (change this to your content/image)</div>
<div data-result="c">Smart (change this to your content/image)</div>
<div data-result="d">Silly (change this to your content/image)</div>
</div>

<!-- Result display -->
<div id="result" class="wizard-step card theme-cta">
<p>Your personality type: <span id="result-text"></span></p>
</div>