@extends('mental.layouts.app')

@section('content')
<div class="container py-4">
    <!-- Main Header with Right-Aligned Button -->
    <div class="main-header mb-4 d-flex justify-content-between align-items-center">
        <h1 class="h2">Conners Rating Scales-Revised (CRS-R)</h1>
        <button type="button" class="btn btn-sm btn-outline-secondary show-view" data-view="dashboard">
            <i class="bi bi-arrow-left"></i> Back to Dashboard
        </button>
    </div>

    <!-- Instructions Section -->
    <h2 class="h5">Instructions</h2>
    <p>
    Below are a number of common problems that children have. Please rate each item according to your child's behavior in the last month. For each item, ask yourself, "How much of a problem has this been in the last month?" and circle the best answer for each one. If none, not true, or not observed, you would circle 0. If very much true, or it occurs very often or frequently, you would circle 3. You would circle 1 or 2 for ratings in between.

     <br><span>Rating Scale:  </span>0 = Not true at all (Never, Seldom) 1 = Just a little true (Occasionally) 2 = Pretty much true (Often, Quite a bit) 3 = Very much true (Very often, Very frequent)
    </p>
</div>
<form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post" action="{{ route('mentalHealth.connersStore') }}" data-redirect="{{ route('mentalHealth.dashboard') }}">     
<!-- Centered Content with Card and Progress Bar --> 
<div class="d-flex justify-content-center min-vh-75 align-items-center">
    <div class="col-sm-12 col-xl-6">

        <!-- Progress Bar -->
        <div class="progress mb-4">
  <div class="progress-bar bg-primary" id="progress-bar" role="progressbar" style="width: 0%;" 
       aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
    

        <!-- Question 1 -->
        <div class="bg-secondary border border-white rounded h-100 p-4 question" data-question="1">
        <h2>Oppositional Behaviors</h2>
            <h6 class="mb-4 text-white">Angry and resentful</h6>
            <input type="hidden" name="question" value="Angry and resentful">
            @for ($i = 0; $i <= 3; $i++) <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question1" id="question1_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white"
                    for="question1_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}</label>
        </div>
        <hr> 
        @endfor  

        <!-- Buttons -->
        <div class="d-flex justify-content-between mt-4">
            <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)" id="prevBtn">Previous</button>
            <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

        </div>
    </div>
  
    <!-- Question 2 -->
    <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="2">
    <h2>Oppositional Behaviors</h2>
        <h6 class="mb-4 text-white">Loses temper</h6>
            <input type="hidden" name="question" value="Loses temper"> 
          

        @for ($i = 0; $i <= 3; $i++) <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question2" id="question2_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white"
                for="question2_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}</label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)" id="prevBtn">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

    </div>
</div>

<!-- Question 3 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="3">
<h2>Oppositional Behaviors</h2>
    <h6 class="mb-4 text-white">Argues with adults</h6>
    <input type="hidden" name="question" value="Argues with adults">

    @for ($i = 0; $i <= 3; $i++) <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question3" id="question3_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white"
            for="question3_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}</label>
</div>
<hr>
@endfor

<!-- Buttons -->
<div class="d-flex justify-content-between mt-4">
    <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)" id="prevBtn">Previous</button>
    <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

</div>
</div>

  <!-- Question 4 -->
  <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="4">
  <h2>Oppositional Behaviors</h2>
            <h6 class="mb-4 text-white">Refuses to comply with adults' requests or rules</h6>
            <input type="hidden" name="question" value="Refuses to comply with adults' requests or rules">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question4" id="question4_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question4_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div>
            <hr>
            @endfor

   
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>

        <!-- Question 5 -->
        <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="5">
        <h2>Oppositional Behaviors</h2>
            <h6 class="mb-4 text-white">Deliberately annoys people</h6>
            <input type="hidden" name="question" value="Deliberately annoys people">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question5" id="question5_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question5_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div>
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>

        <!-- Question 6 -->
        <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="6">
        <h2>Oppositional Behaviors</h2>
            <h6 class="mb-4 text-white">Blames others for his/her mistakes or misbehavior</h6>
            <input type="hidden" name="question" value="Blames others for his/her mistakes or misbehavior">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question6" id="question6_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question6_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div>
            <hr>
            @endfor

              <!-- Buttons -->
              <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



                   <!-- Question 7 -->
        <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="7">
        <h2>Oppositional Behaviors</h2>
            <h6 class="mb-4 text-white">Touchy or easily annoyed by others</h6>
            <input type="hidden" name="question" value="Touchy or easily annoyed by others">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question7" id="question7_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question7_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



                         <!-- Question 8 -->
                         <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="8">
                         <h2>Oppositional Behaviors</h2>
            <h6 class="mb-4 text-white">Vindictive or spiteful</h6>
            <input type="hidden" name="question" value="Vindictive or spiteful">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question8" id="question8_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question8_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>


                                <!-- Question 9 -->
                                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="9">
                                <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Forgets things he/she has already learned</h6>
            <input type="hidden" name="question" value="Forgets things he/she has already learned">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question9" id="question9_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question9_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



                             <!-- Question 10 -->
                             <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="10">
                             <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Has difficulty completing assignments</h6>
            <input type="hidden" name="question" value="Has difficulty completing assignments">

            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question10" id="question10_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question10_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>


                           <!-- Question 11 -->
                           <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="11">
                           <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Poor in spelling</h6>
            <input type="hidden" name="question" value="Poor in spelling">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question11" id="question11_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question11_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



        
                           <!-- Question 12 -->
                           <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="12">
                           <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Not reading up to par</h6>
            <input type="hidden" name="question" value="Not reading up to par">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question12" id="question12_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question12_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



                      <!-- Question 13 -->
                      <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="13">
                      <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Poor in arithmetic</h6>
            <input type="hidden" name="question" value="Poor in arithmetic">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question13" id="question13_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question13_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>





        
                      <!-- Question 14 -->
                      <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="14">
                      <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Short attention span</h6>
            <input type="hidden" name="question" value="Short attention span">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question14" id="question14_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question14_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



                              <!-- Question 15 -->
                              <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="15">
                              <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Only attends if it is something he/she is very interested in</h6>
            <input type="hidden" name="question" value="Only attends if it is something he/she is very interested in">

            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question15" id="question15_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question15_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>




        
                              <!-- Question 16 -->
                              <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="16">
                              <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Distractibility or attention span a problem</h6>
            <input type="hidden" name="question" value="Distractibility or attention span a problem">
                @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question16" id="question16_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question16_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>




                                 <!-- Question 17 -->
                                 <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="17">
                                 <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Fails to finish things he/she starts</h6>
            <input type="hidden" name="question" value="Fails to finish things he/she starts">
           
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question17" id="question17_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question17_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



        
                                 <!-- Question 18 -->
                                 <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="18">
                                 <h2>Cognitive Problems/Inattention</h2>
            <h6 class="mb-4 text-white">Inattentive, easily distracted</h6>
            <input type="hidden" name="question" value="Inattentive, easily distracted">
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question18" id="question18_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question18_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor 
        
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary"  onclick="navigateQuestion(1, event)">Next</button>

            </div>

            </div> 


                                            <!-- Question 19 -->
                                            <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="19">
                                 <h2>Hyperactivity</h2>
            <h6 class="mb-4 text-white">Restless in the "squirmy" sense</h6>
            <input type="hidden" name="question" value="Restless in the squirmy sense">
           
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question19" id="question19_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question19_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



        
                                            <!-- Question 20 -->
                                            <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="20">
                                 <h2>Hyperactivity</h2>
            <h6 class="mb-4 text-white">Restless, always up and on the go</h6>
            <input type="hidden" name="question" value="Restless, always up and on the go">
           
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question20" id="question20_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question20_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



                                                  <!-- Question 21 -->
                                                  <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="21">
                                 <h2>Hyperactivity</h2>
            <h6 class="mb-4 text-white">Excitable, impulsive</h6>
            <input type="hidden" name="question" value="Excitable, impulsive">
           
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question21" id="question21_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question21_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



                                                 <!-- Question 22 -->
                                                 <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="22">
                                 <h2>Hyperactivity</h2>
            <h6 class="mb-4 text-white">Disturbs other children</h6>
            <input type="hidden" name="question" value="Disturbs other children">
           
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question22" id="question22_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question22_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>



                                                       <!-- Question 23 -->
                                                       <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="23">
                                 <h2>Hyperactivity</h2>
            <h6 class="mb-4 text-white">Cannot remain still</h6>
            <input type="hidden" name="question" value="Cannot remain still">
           
            @for ($i = 0; $i <= 3; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question23" id="question23_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question23_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
                </label>
            </div> 
            <hr>
            @endfor

      
            <!-- Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

            </div>
        </div>


        <!-- Question 24 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="24">
    <h2>Hyperactivity</h2>
    <h6 class="mb-4 text-white">Always climbing, doesn't sit still</h6>
    <input type="hidden" name="question" value="Always climbing, doesn't sit still">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question24" id="question24_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question24_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}</label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 25 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="25">
    <h2>Hyperactivity</h2>
    <h6 class="mb-4 text-white">Fidgets with hands or feet or squirms in seat</h6>
    <input type="hidden" name="question" value="Fidgets with hands or feet or squirms in seat">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question25" id="question25_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question25_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}</label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 26 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="26">
    <h2>Hyperactivity</h2>
    <h6 class="mb-4 text-white">Fails to give close attention to details or makes careless mistakes</h6>
    <input type="hidden" name="question" value="Fails to give close attention to details or makes careless mistakes">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question26" id="question26_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question26_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}</label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 27 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="27">
    <h2>Hyperactivity</h2>
    <h6 class="mb-4 text-white">Difficulty sustaining attention in tasks or play activities</h6>
    <input type="hidden" name="question" value="Difficulty sustaining attention in tasks or play activities">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question27" id="question27_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question27_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}</label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 28 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="28">
    <h2>Anxious-Shy</h2>
    <h6 class="mb-4 text-white">Fears, anxious, and worried</h6>
    <input type="hidden" name="question" value="Fears, anxious, and worried">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question28" id="question28_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question28_{{ $i }}">{{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}</label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 29 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="29">
    <h2>Anxious-Shy</h2>
    <h6 class="mb-4 text-white">Fearful or afraid of new situations, new people, or new places</h6>
    <input type="hidden" name="question" value="Fearful or afraid of new situations, new people, or new places">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question29" id="question29_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question29_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 30 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="30">
    <h2>Anxious-Shy</h2>
    <h6 class="mb-4 text-white">Timid, easily frightened</h6>
    <input type="hidden" name="question" value="Timid, easily frightened">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question30" id="question30_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question30_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 31 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="31">
    <h2>Anxious-Shy</h2>
    <h6 class="mb-4 text-white">Lacks self-confidence</h6>
    <input type="hidden" name="question" value="Lacks self-confidence">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question31" id="question31_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question31_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 32 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="32">
    <h2>Anxious-Shy</h2>
    <h6 class="mb-4 text-white">Shy, withdrawn</h6>
    <input type="hidden" name="question" value="Shy, withdrawn">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question32" id="question32_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question32_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 33 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="33">
    <h2>Anxious-Shy</h2>
    <h6 class="mb-4 text-white">Self-conscious or easily embarrassed</h6>
    <input type="hidden" name="question" value="Self-conscious or easily embarrassed">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question33" id="question33_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question33_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 34 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="34">
    <h2>Perfectionism</h2>
    <h6 class="mb-4 text-white">Needs to be perfect</h6>
    <input type="hidden" name="question" value="Needs to be perfect">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question34" id="question34_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question34_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 35 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="35">
    <h2>Perfectionism</h2>
    <h6 class="mb-4 text-white">Sets goals too high</h6>
    <input type="hidden" name="question" value="Sets goals too high">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question35" id="question35_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question35_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 36 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="36">
    <h2>Perfectionism</h2>
    <h6 class="mb-4 text-white">Over-focuses on details</h6>
    <input type="hidden" name="question" value="Over-focuses on details">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question36" id="question36_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question36_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 37 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="37">
    <h2>Perfectionism</h2>
    <h6 class="mb-4 text-white">Things must be just so</h6>
    <input type="hidden" name="question" value="Things must be just so">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question37" id="question37_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question37_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 38 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="38">
    <h2>Perfectionism</h2>
    <h6 class="mb-4 text-white">Everything must be just so</h6>
    <input type="hidden" name="question" value="Everything must be just so">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question38" id="question38_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question38_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 39 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="39">
    <h2>Social Problems</h2>
    <h6 class="mb-4 text-white">Has no friends</h6>
    <input type="hidden" name="question" value="Has no friends">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question39" id="question39_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question39_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 40 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="40">
    <h2>Social Problems</h2>
    <h6 class="mb-4 text-white">Does not get invited to play or go out with others</h6>
    <input type="hidden" name="question" value="Does not get invited to play or go out with others">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question40" id="question40_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question40_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 41 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="41">
    <h2>Social Problems</h2>
    <h6 class="mb-4 text-white">Avoids socializing with peers</h6>
    <input type="hidden" name="question" value="Avoids socializing with peers">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question41" id="question41_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question41_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 42 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="42">
    <h2>Social Problems</h2>
    <h6 class="mb-4 text-white">Has trouble with friendships</h6>
    <input type="hidden" name="question" value="Has trouble with friendships">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question42" id="question42_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question42_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 43 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="43">
    <h2>Social Problems</h2>
    <h6 class="mb-4 text-white">Uninterested in peers</h6>
    <input type="hidden" name="question" value="Uninterested in peers">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question43" id="question43_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question43_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>
 

<!-- Question 44 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="44">
    <h2>Psychosomatic</h2>
    <h6 class="mb-4 text-white">Complains of aches and pains</h6>
    <input type="hidden" name="question" value="Complains of aches and pains">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question44" id="question44_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question44_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 45 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="45">
    <h2>Psychosomatic</h2>
    <h6 class="mb-4 text-white">Complains of stomach aches</h6>
    <input type="hidden" name="question" value="Complains of stomach aches">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question45" id="question45_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question45_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 46 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="46">
    <h2>Psychosomatic</h2>
    <h6 class="mb-4 text-white">Complains of headaches</h6>
    <input type="hidden" name="question" value="Complains of headaches">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question46" id="question46_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question46_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 47 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="47">
    <h2>Psychosomatic</h2>
    <h6 class="mb-4 text-white">Complains of other physical problems</h6>
    <input type="hidden" name="question" value="Complains of other physical problems">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question47" id="question47_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question47_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>





<!-- Question 48 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="48">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Interrupts or intrudes on others</h6>
    <input type="hidden" name="question" value="Interrupts or intrudes on others">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question48" id="question48_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question48_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 49 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="49">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Talks excessively</h6>
    <input type="hidden" name="question" value="Talks excessively">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question49" id="question49_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question49_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 50 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="50">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Difficulty waiting in turn</h6>
    <input type="hidden" name="question" value="Difficulty waiting in turn">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question50" id="question50_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question50_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 51 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="51">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Gets up from seat when remaining seated is expected</h6>
    <input type="hidden" name="question" value="Gets up from seat when remaining seated is expected">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question51" id="question51_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question51_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 52 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="52">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Fidgets with hands or feet or squirms in seat</h6>
    <input type="hidden" name="question" value="Fidgets with hands or feet or squirms in seat">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question52" id="question52_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question52_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 53 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="53">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Difficulty playing or engaging in leisure activities quietly</h6>
    <input type="hidden" name="question" value="Difficulty playing or engaging in leisure activities quietly">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question53" id="question53_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question53_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>




<!-- Question 54 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="54">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Runs about or climbs excessively in situations where it is inappropriate</h6>
    <input type="hidden" name="question" value="Runs about or climbs excessively in situations where it is inappropriate">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question54" id="question54_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question54_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 55 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="55">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Appears restless/overactive</h6>
    <input type="hidden" name="question" value="Appears restless/overactive">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question55" id="question55_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question55_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 56 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="56">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Fails to finish things he/she starts</h6>
    <input type="hidden" name="question" value="Fails to finish things he/she starts">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question56" id="question56_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question56_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 57 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="57">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Does not follow through on instructions and fails to finish schoolwork</h6>
    <input type="hidden" name="question" value="Does not follow through on instructions and fails to finish schoolwork">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question57" id="question57_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question57_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 58 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="58">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Easily distracted by extraneous stimuli</h6>
    <input type="hidden" name="question" value="Easily distracted by extraneous stimuli">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question58" id="question58_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question58_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

    <!-- Buttons -->
    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 59 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="59">
    <h2>ADHD Index Items</h2>
    <h6 class="mb-4 text-white">Avoids, expresses reluctance about, or has difficulties engaging in tasks that require sustained mental effort</h6>
    <input type="hidden" name="question" value="Avoids, expresses reluctance about, or has difficulties engaging in tasks that require sustained mental effort">

    @for ($i = 0; $i <= 3; $i++)
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="question59" id="question59_{{ $i }}" value="{{ $i }}">
        <label class="form-check-label text-white" for="question59_{{ $i }}">
            {{ ['Not true at all', 'Just a little true', 'Pretty much true', 'Very much true'][$i] }}
        </label>
    </div>
    <hr>
    @endfor

         <!-- Buttons -->
         <div class="d-flex justify-content-between mt-4">
                <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                <button class="btn btn-primary" id="nextBtnfinel" onclick="navigateQuestion(1, event)">Next</button>

                <button type="submit" class="btn btn-success d-none" id="submitBtn">Submit</button>
            </div>
</div>
 

    

  

 
        </div>
  
</div>

</div>
</div>
</form>
<!-- JavaScript for Navigation -->

@endsection