Блог

Главная - Вопросы по программированию - Следующая и предыдущая кнопки для страницы опроса JS / HTML

Следующая и предыдущая кнопки для страницы опроса JS / HTML

#javascript #html #bootstrap-4

#javascript #HTML #bootstrap-4

Вопрос:

Я создаю страницу опроса и использую Bootstrap nav-tab для создания вкладки вопросника, но я столкнулся с проблемой, которую я использовал ниже кода для создания предыдущей и следующей вкладки

Но приведенный ниже код не работает для меня, мой полный код приведен ниже с файлом HTMl / CSS и Js.После нажатия кнопки next и previous ничего не происходит.Кто-нибудь, пожалуйста, проверьте и дайте мне знать, что не так с моим кодом.

     $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
  

 function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let fullName = document.querySelector('#fullName').value
  let email = document.querySelector('#email').value
  let age = document.querySelector('#age').value
  var ctx = document.querySelector('#resultsChart').getContext('2d');
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question  
      section1Total  =  radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question  
      section2Total  =  radio.value
    }
  })

  var options = {
    type: 'bar',
    data: {
      labels: ["Section 1", "Section 2"],
      datasets: [{
          label: 'Total Scored',
          data: [section1Question, section2Question, 30],
          backgroundColor: '#E91E63',
          borderWidth: 1
        },
        {
          label: 'Percentage %',
          data: [((section1Total / (section1Question * 3)) * 100).toFixed(2), ((section2Total / (section2Question * 3)) * 100).toFixed(2), 30],
          backgroundColor: '#004D40',
          borderWidth: 1
        }
      ]
    },
    options: {
      scales: {
        responsive: true,
        yAxes: [{
          ticks: {
            reverse: false
          }
        }]
      }
    }
  }

  //Final Results and validation
  if (fullName.value != '' amp;amp; email.value != '' amp;amp; age.value != '') {
    if (section1Total > 0 amp;amp; section2Total > 0) {
      finalResults.innerHTML  = genDetails(fullName, email, age)
      finalResults.innerHTML  = "<h2>Results</h2>"
      finalResults.innerHTML  = genTable(section1Question, section1Total, 1)
      finalResults.innerHTML  = genTable(section2Question, section2Total, 2)
      finalResults.innerHTML  = "<h2>Chart Results</h2>"
      document.getElementById("control").style.display = "block";
      document.getElementById("resultsChart").style.display = "block";
      document.getElementById("toemail").href  = document.querySelector(".final-results").innerText;
      new Chart(ctx, options); //show chart
    } else {
      finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
    }
  } else {
    finalResults.innerHTML = 'Snap! Please enter your name, emial, age in the first section '
  }
}

function genDetails(name, email, age) {
  var result = "<h2>Personal Info</h2>"
  result  = "<b>Full name:</b> <span>"   name   "</span><br>"
  result  = "<b>Email name:</b> <span>"   email   "</span><br>"
  result  = "<b>Age: </b> <span>"   age   "</span><br>"
  return result
}

function genTable(ques, total, section) {
  var result = "<b>Section "   section   ":</b><br>"
  var tr = "<tr><th>"   total   "</th><th>"   ((total / (ques * 3)) * 100).toFixed(2)   "</th></tr>"
  result  = "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>"   tr   "</tbody></table>"
  return result
}
$('.btnNext').click(function() {
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});  
 canvas {
  display: none
}

@media print {
  body * {
    visibility: hidden;
  }
  canvas {
    visibility: visible;
    margin-top: 30%;
  }
  .form-control {
    visibility: visible;
  }
  .final-results * {
    visibility: visible;
  }
  .final-results,
  .form-control {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}  
 <!DOCTYPE html>
<html lang="en">

<head>
  <title>Survey Question</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
</head>

<body>
  <section class="container py-4">
    <div class="row">
      <div class="col-md-12">
        <h2>Survey</h2>
        <ul id="tabs" class="nav nav-tabs">
          <li class="nav-item"><a href="" data-target="#personalInfo" data-toggle="tab" class="nav-link small text-uppercase active">Personal Info</a></li>
          <li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase">Section 1</a></li>
          <li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li>
          <li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li>
        </ul>
        <br>
        <div id="tabsContent" class="tab-content">
          <div id="personalInfo" class="tab-pane fade active show">
            <div class="form-group">
              <label for="fullName">Full Name address</label>
              <input type="email" class="form-control" id="fullName" aria-describedby="nameHelp" placeholder="Enter full name">
              <small id="nameHelp" class="form-text text-muted">Please enter your full name.</small>
            </div>
            <div class="form-group">
              <label for="email">Email address</label>
              <input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Enter email">
              <small id="email" class="form-text text-muted">Please enter your valid email address.</small>
            </div>
            <div class="form-group">
              <label for="age">Password</label>
              <input type="number" class="form-control" id="age" aria-describedby="age" placeholder="Age">
              <small id="age" class="form-text text-muted">Please enter your age in number.</small>
            </div>
            <a class="btn btn-primary btnNext">Next</a>

          </div>
          <div id="section1" class="tab-pane fade">
            <div class="section-1-questions">
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1">
                      <label class="form-check-label" for="gridRadios1">
                                      1
                                    </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2">
                      <label class="form-check-label" for="gridRadios2">
                                      2
                                    </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
                      <label class="form-check-label" for="gridRadios3">
                                      3
                                    </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 2:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1">
                      <label class="form-check-label" for="gridRadios4">
                                      1
                                    </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2">
                      <label class="form-check-label" for="gridRadios5">
                                      2
                                    </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3">
                      <label class="form-check-label" for="gridRadios6">
                                      3
                                    </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 3:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1">
                      <label class="form-check-label" for="gridRadios7">
                                      1
                                    </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2">
                      <label class="form-check-label" for="gridRadios8">
                                      2
                                    </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3">
                      <label class="form-check-label" for="gridRadios9">
                                      3
                                    </label>
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
            <a class="btn btn-primary btnNext">Next</a>
            <a class="btn btn-primary btnPrevious">Previous</a>
          </div>
          <div id="section2" class="tab-pane fade">
            <div class="section-2-question">
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1">
                      <label class="form-check-label" for="gridRadios10">
                                      1
                                    </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2">
                      <label class="form-check-label" for="gridRadios11">
                                      2
                                    </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3">
                      <label class="form-check-label" for="gridRadios12">
                                      3
                                    </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 5:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1">
                      <label class="form-check-label" for="gridRadios13">
                                      1
                                    </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2">
                      <label class="form-check-label" for="gridRadios14">
                                      2
                                    </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3">
                      <label class="form-check-label" for="gridRadios15">
                                      3
                                    </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1">
                      <label class="form-check-label" for="gridRadios16">
                                      1
                                    </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2">
                      <label class="form-check-label" for="gridRadios17">
                                      2
                                    </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3">
                      <label class="form-check-label" for="gridRadios18">
                                      3
                                    </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1">
                      <label class="form-check-label" for="gridRadios19">
                                      1
                                    </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2">
                      <label class="form-check-label" for="gridRadios20">
                                      2
                                    </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3">
                      <label class="form-check-label" for="gridRadios21">
                                      3
                                    </label>
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
            <a class="btn btn-primary btnNext">Next</a>
            <a class="btn btn-primary btnPrevious">Previous</a>
          </div>
          <div id="results" class="tab-pane fade">
            <div class="final-results"></div>
            <br>
            <canvas id="resultsChart"></canvas>
            <br>
            <button type="button" class="btn btn-success" onclick="displayRadioValue()">
                                Show Results
                            </button>
            <br>
            <br>
            <div id="control" style="display: none">
              <a id="toemail" class="btn btn-link" href="mailto:youremail@domain.com?subject=Survey responseamp;body=">Send to
                                email</a>amp;nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

Ответ №1:

Ваша проблема в этой строке:

 $('.nav-tabs > .active').

Активный элемент — это якорь, родительским элементом которого является li и, следовательно, ul. Следовательно, вам необходимо заменить на:

 $('.nav-tabs .active').closest('li')

или, чтобы быть более понятным:

 $('ul.nav-tabs li.nav-item a.active').closest('li')

Рабочий фрагмент:

 function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let fullName = document.querySelector('#fullName').value
  let email = document.querySelector('#email').value
  let age = document.querySelector('#age').value
  var ctx = document.querySelector('#resultsChart').getContext('2d');
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
      if (radio.checked) {
          section2Question  
          section1Total  =  radio.value
      }
  })

  //Section 2
  section2.forEach(function(radio, index) {
      if (radio.checked) {
          section1Question  
          section2Total  =  radio.value
      }
  })

  var options = {
      type: 'bar',
      data: {
          labels: ["Section 1", "Section 2"],
          datasets: [{
              label: 'Total Scored',
              data: [section1Question, section2Question, 30],
              backgroundColor: '#E91E63',
              borderWidth: 1
          },
              {
                  label: 'Percentage %',
                  data: [((section1Total / (section1Question * 3)) * 100).toFixed(2), ((section2Total / (section2Question * 3)) * 100).toFixed(2), 30],
                  backgroundColor: '#004D40',
                  borderWidth: 1
              }
          ]
      },
      options: {
          scales: {
              responsive: true,
              yAxes: [{
                  ticks: {
                      reverse: false
                  }
              }]
          }
      }
  }

  //Final Results and validation
  if (fullName.value != '' amp;amp; email.value != '' amp;amp; age.value != '') {
      if (section1Total > 0 amp;amp; section2Total > 0) {
          finalResults.innerHTML  = genDetails(fullName, email, age)
          finalResults.innerHTML  = "<h2>Results</h2>"
          finalResults.innerHTML  = genTable(section1Question, section1Total, 1)
          finalResults.innerHTML  = genTable(section2Question, section2Total, 2)
          finalResults.innerHTML  = "<h2>Chart Results</h2>"
          document.getElementById("control").style.display = "block";
          document.getElementById("resultsChart").style.display = "block";
          document.getElementById("toemail").href  = document.querySelector(".final-results").innerText;
          new Chart(ctx, options); //show chart
      } else {
          finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
      }
  } else {
      finalResults.innerHTML = 'Snap! Please enter your name, emial, age in the first section '
  }
}

function genDetails(name, email, age) {
  var result = "<h2>Personal Info</h2>"
  result  = "<b>Full name:</b> <span>"   name   "</span><br>"
  result  = "<b>Email name:</b> <span>"   email   "</span><br>"
  result  = "<b>Age: </b> <span>"   age   "</span><br>"
  return result
}

function genTable(ques, total, section) {
  var result = "<b>Section "   section   ":</b><br>"
  var tr = "<tr><th>"   total   "</th><th>"   ((total / (ques * 3)) * 100).toFixed(2)   "</th></tr>"
  result  = "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>"   tr   "</tbody></table>"
  return result
}
$('.btnNext').click(function(){
  $('.nav-tabs .active').closest('li').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function(){
  $('.nav-tabs .active').closest('li').prev('li').find('a').trigger('click');
});  
 canvas {
    display: none
}

@media print {
    body * {
        visibility: hidden;
    }
    canvas {
        visibility: visible;
        margin-top: 30%;
    }
    .form-control {
        visibility: visible;
    }
    .final-results * {
        visibility: visible;
    }
    .final-results,
    .form-control {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

table,
table tr th,
table tr td {
    border: 1px solid black;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<section class="container py-4">
    <div class="row">
        <div class="col-md-12">
            <h2>Survey</h2>
            <ul id="tabs" class="nav nav-tabs">
                <li class="nav-item"><a href="" data-target="#personalInfo" data-toggle="tab" class="nav-link small text-uppercase active">Personal Info</a></li>
                <li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase">Section 1</a></li>
                <li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li>
                <li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li>
            </ul>
            <br>
            <div id="tabsContent" class="tab-content">
                <div id="personalInfo" class="tab-pane fade active show">
                    <div class="form-group">
                        <label for="fullName">Full Name address</label>
                        <input type="email" class="form-control" id="fullName" aria-describedby="nameHelp" placeholder="Enter full name">
                        <small id="nameHelp" class="form-text text-muted">Please enter your full name.</small>
                    </div>
                    <div class="form-group">
                        <label for="email">Email address</label>
                        <input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Enter email">
                        <small id="email" class="form-text text-muted">Please enter your valid email address.</small>
                    </div>
                    <div class="form-group">
                        <label for="age">Password</label>
                        <input type="number" class="form-control" id="age" aria-describedby="age" placeholder="Age">
                        <small id="age" class="form-text text-muted">Please enter your age in number.</small>
                    </div>
                    <a class="btn btn-primary btnNext" >Next</a>

                </div>
                <div id="section1" class="tab-pane fade">
                    <div class="section-1-questions">
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
                                <div class="col-sm-10">
                                    <div class="form-check section-1">
                                        <input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1">
                                        <label class="form-check-label" for="gridRadios1">
                                            1
                                        </label>
                                    </div>
                                    <div class="form-check section-1">
                                        <input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2">
                                        <label class="form-check-label" for="gridRadios2">
                                            2
                                        </label>
                                    </div>
                                    <div class="form-check section-1">
                                        <input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
                                        <label class="form-check-label" for="gridRadios3">
                                            3
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">Question 2:</legend>
                                <div class="col-sm-10">
                                    <div class="form-check section-1">
                                        <input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1">
                                        <label class="form-check-label" for="gridRadios4">
                                            1
                                        </label>
                                    </div>
                                    <div class="form-check section-1">
                                        <input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2">
                                        <label class="form-check-label" for="gridRadios5">
                                            2
                                        </label>
                                    </div>
                                    <div class="form-check section-1">
                                        <input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3">
                                        <label class="form-check-label" for="gridRadios6">
                                            3
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">Question 3:</legend>
                                <div class="col-sm-10">
                                    <div class="form-check section-1">
                                        <input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1">
                                        <label class="form-check-label" for="gridRadios7">
                                            1
                                        </label>
                                    </div>
                                    <div class="form-check section-1">
                                        <input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2">
                                        <label class="form-check-label" for="gridRadios8">
                                            2
                                        </label>
                                    </div>
                                    <div class="form-check section-1">
                                        <input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3">
                                        <label class="form-check-label" for="gridRadios9">
                                            3
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <a class="btn btn-primary btnNext" >Next</a>
                    <a class="btn btn-primary btnPrevious" >Previous</a>
                </div>
                <div id="section2" class="tab-pane fade">
                    <div class="section-2-question">
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                                <div class="col-sm-10">
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1">
                                        <label class="form-check-label" for="gridRadios10">
                                            1
                                        </label>
                                    </div>
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2">
                                        <label class="form-check-label" for="gridRadios11">
                                            2
                                        </label>
                                    </div>
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3">
                                        <label class="form-check-label" for="gridRadios12">
                                            3
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">Question 5:</legend>
                                <div class="col-sm-10">
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1">
                                        <label class="form-check-label" for="gridRadios13">
                                            1
                                        </label>
                                    </div>
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2">
                                        <label class="form-check-label" for="gridRadios14">
                                            2
                                        </label>
                                    </div>
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3">
                                        <label class="form-check-label" for="gridRadios15">
                                            3
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                                <div class="col-sm-10">
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1">
                                        <label class="form-check-label" for="gridRadios16">
                                            1
                                        </label>
                                    </div>
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2">
                                        <label class="form-check-label" for="gridRadios17">
                                            2
                                        </label>
                                    </div>
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3">
                                        <label class="form-check-label" for="gridRadios18">
                                            3
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                                <div class="col-sm-10">
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1">
                                        <label class="form-check-label" for="gridRadios19">
                                            1
                                        </label>
                                    </div>
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2">
                                        <label class="form-check-label" for="gridRadios20">
                                            2
                                        </label>
                                    </div>
                                    <div class="form-check section-2">
                                        <input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3">
                                        <label class="form-check-label" for="gridRadios21">
                                            3
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <a class="btn btn-primary btnNext" >Next</a>
                    <a class="btn btn-primary btnPrevious" >Previous</a>
                </div>
                <div id="results" class="tab-pane fade">
                    <div class="final-results"></div>
                    <br>
                    <canvas id="resultsChart"></canvas>
                    <br>
                    <button type="button" class="btn btn-success" onclick="displayRadioValue()">
                        Show Results
                    </button>
                    <br>
                    <br>
                    <div id="control" style="display: none">
                        <a id="toemail" class="btn btn-link" href="mailto:youremail@domain.com?subject=Survey responseamp;body=">Send to
                            email</a>amp;nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>