診断チャートをWordPressのブロックで作成する方法

<?php
    if(have_rows('qa_question_list')) :
?>

    <div class="qa-chart">
        <p class="qa-chart__title"><?php the_field('qa_title'); ?></p>
		<p class="qa-chart__description"><?php the_field('qa_description'); ?></p>

	    <?php
	        $question_count = 1;
	        while(have_rows('qa_question_list')) :
	            the_row();   
	    ?>

        <div id="<?php echo $question_count; ?>" class="qa-chart__question">
            <p><?php the_sub_field('qa_question'); ?></p>
		    <?php
	            if(have_rows('qa_answer_list')) :
			?>
			<ul>
			<?php
		            $answer_count = 1;
		            while(have_rows('qa_answer_list')) :
	                    the_row();
		    ?>
            
               <li data-answer="<?php echo $answer_count; ?>"><?php the_sub_field('qa_answer'); ?></li>
		    <?php
	                $answer_count++;
	                endwhile;
			?>
			</ul>
			<?php
                endif;	
	        ?>
        </div>
	
	    <?php
	            $question_count++;
	        endwhile;
	    ?>
	
	    <?php
	        if(have_rows('qa_result_list')) :
	            while(have_rows('qa_result_list')) :
	                the_row();   
	    ?>

        <div data-result="<?php the_sub_field('qa_result_id'); ?>" class="qa-chart__result">
            <p class="qa-chart__result-title">最終結果</p>
            <p><?php the_sub_field('qa_result'); ?></p>
        </div>
	
	    <?php
	            endwhile;
	        endif;
	    ?>
	
	    <div class="qa-chart__error">申し訳ありませんが、結果が見つかりませんでした。</div>
		<p class="qa-chart__re-start">最初からやり直す</p>
    </div>

<?php
    endif;	
?>

<script type="text/javascript">
jQuery(function($){
    let answerAll = '';
    const questionCount = $('.qa-chart__question').length;
    $('.qa-chart li').click(function() {
        $(this).closest('div').hide();
        const currentQuestion = parseInt($(this).closest('div').attr('id'));
        const answer = $(this).data('answer');
        answerAll += answer;
        if(questionCount == currentQuestion) {
            if($('[data-result="' + answerAll + '"]').length) {
                $('[data-result="' + answerAll + '"]').fadeIn();
            }else {
                $('.qa-chart__error').fadeIn();
            }
        }else {
            $('#' + (currentQuestion + 1)).fadeIn();
        }

        return false;
    })

    $('.qa-chart__re-start').click(function() {
        $('.qa-chart > div').hide();
        answerAll = '';
        $('.qa-chart__question:first-of-type').fadeIn();
        return false;
    })
});
</script>

<style type="text/css">
:root {
  --color-qa-chart: #fdb6b6;
  --color-qa-chart_bg: #fef0f0;
}

.qa-chart{
	margin:0 auto 2rem;
	padding: 2.5em 2em;
	max-width: 600px;
	background-color: var( --color-qa-chart_bg);
	box-shadow: 0 3px 5px rgba(0,0,0,.07);
	font-size: 0.9em;
}

.qa-chart__title {
	background-color: var( --color-qa-chart);
	color: #fff;
	font-weight: bold;
	padding: 0.8em 1em;
	margin-bottom: 1.5em !important;
	text-align:center;
}

.qa-chart__description {
	margin-bottom: 2em !important;
}

.qa-chart > div {
	display: none;
}

.qa-chart__question:first-of-type {
	display: block;
}

.qa-chart__question > p {
	margin: 2em 0 0 !important;
	padding: 0.8em 1em 0.8em 4.3em !important;
	background: #fff;
	position: relative;
}

.qa-chart__question > p:before{
	content: "Q";
	background-color: var( --color-qa-chart);
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 1.1em;
	min-width: 48px;
}

.qa-chart__question > ul {
	margin: 2em 0 0 !important;
	padding-left: 1.5em !important;
	list-style: none;
}

.qa-chart__question > ul li {
	cursor: pointer;
	background: #fff;
	display: block;
	margin-top: 2em !important;
	padding: 0.8em !important;
	box-shadow: 0 3px 5px rgba(0,0,0,.07);
}

.qa-chart__question > ul li:hover{
	outline: 3px solid var( --color-qa-chart);
}

.qa-chart__result{
	background:#fff;
	padding:1.6em 2em 2em;
}

.qa-chart__result p {
	margin-bottom: 0.3em;
	font-size: 1.05em;
}

.qa-chart__result img {
	margin-bottom: 0.3em;
}

.qa-chart__result-title {
	color: var( --color-qa-chart);
	font-size: 1.1em;
	font-weight:bold;
	padding-bottom: 0.8em;
	margin: 0 0 1.4em !important;
	border-bottom: 1px solid var( --color-qa-chart);
}

.qa-chart__re-start {
	text-align: center;
	margin: 2.5em 5em !important;
	box-shadow: 0 3px 5px rgba(0,0,0,.15);
	color: #fff;
	font-weight: bold;
	padding: 0.6em 0;
	border-radius: 3px;
	cursor: pointer;
	background: var( --color-qa-chart);
}

.qa-chart__re-start:hover{
	opacity: 0.8;
}

.qa-chart__error {
	background: #fff;
	padding: 1em;
}

@media (max-width: 560px) {
	.qa-chart{
		padding: 1.8em 1.3em !important;
	}
	
	.qa-chart__description {
		margin-bottom: 1.5em !important;
	}
	
	.qa-chart__question > p {
		margin-bottom: 1.5em !important;
		padding: 0.8em 1em 0.8em 3.3em !important;
	}
	
	.qa-chart__question > p:before{
		min-width: 32px;
	}
	
	.qa-chart__question > ul {
		margin: 1.4em 0 0 !important;
	}
	
	.qa-chart__question > ul li {
		margin-top: 1.5em !important;
	}
	
	.qa-chart__result {
		padding: 1.2em 1.4em 1.4em !important;
	}
	
	.qa-chart__re-start {
		margin: 1.8em 5em 3em !important;
	}
}
</style>