<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cascading Dependent Radio Button Questionnaire</title>
</head>
<body>
    <div id="question1">
        <h2>Question 1: Choose a color</h2>
        <input type="radio" name="color" value="red" onchange="showQuestion2(this)"> Red<br>
        <input type="radio" name="color" value="blue" onchange="showQuestion2(this)"> Blue<br>
        <input type="radio" name="color" value="green" onchange="showQuestion2(this)"> Green<br>
    </div>

    <div id="question2" style="display: none;">
        <h2>Question 2: Choose a shape</h2>
        <input type="radio" name="shape" value="circle" onchange="showQuestion3(this)"> Circle<br>
        <input type="radio" name="shape" value="square" onchange="showQuestion3(this)"> Square<br>
        <input type="radio" name="shape" value="triangle" onchange="showQuestion3(this)"> Triangle<br>
    </div>

    <div id="question3" style="display: none;">
        <h2>Question 3: Choose a size</h2>
        <input type="radio" name="size" value="small"> Small<br>
        <input type="radio" name="size" value="medium"> Medium<br>
        <input type="radio" name="size" value="large"> Large<br>
    </div>

    <div id="question4" style="display: none;">
        <h2>Question 4: Choose a material</h2>
        <input type="radio" name="material" value="wood"> Wood<br>
        <input type="radio" name="material" value="metal"> Metal<br>
    </div>

    <div id="question5" style="display: none;">
        <h2>Question 5: Choose a weight</h2>
        <input type="radio" name="weight" value="light"> Light<br>
        <input type="radio" name="weight" value="medium"> Medium<br>
        <input type="radio" name="weight" value="heavy"> Heavy<br>
    </div>

    <script>
        function showQuestion2(selectedOption) {
            var value = selectedOption.value;
            if (value === 'red') {
                document.getElementById('question2').style.display = 'block';
            }else if (value === 'blue') {
                document.getElementById('question2').style.display = 'block';
            }
            
            else {
                document.getElementById('question2').style.display = 'none';
                document.getElementById('question3').style.display = 'none';
                document.getElementById('question4').style.display = 'none';
                document.getElementById('question5').style.display = 'none';
            }
        }

        function showQuestion3(selectedOption) {
            var value = selectedOption.value;
            if (value === 'triangle') {
                document.getElementById('question3').style.display = 'block';
            } else {
                document.getElementById('question3').style.display = 'none';
                document.getElementById('question4').style.display = 'none';
                document.getElementById('question5').style.display = 'none';
            }
        }

        function showQuestion4(selectedOption) {
            var value = selectedOption.value;
            if (value === 'large') {
                document.getElementById('question4').style.display = 'block';
            } else {
                document.getElementById('question4').style.display = 'none';
                document.getElementById('question5').style.display = 'none';
            }
        }

        function showQuestion5(selectedOption) {
            var value = selectedOption.value;
            if (value === 'metal') {
                document.getElementById('question5').style.display = 'block';
            } else {
                document.getElementById('question5').style.display = 'none';
            }
        }
    </script>
</body>
</html>


</html