JS / HTML调查页面的“下一个”和“上一个”按钮

Question

我正在创建调查页面，并使用Bootstrap nav-tab来创建调查表标签，但是我遇到的问题是我在下面的代码中使用了该标签来创建上一个和下一个标签

但是下面的代码对我不起作用我的完整代码在下面提供了HTMl / CSS和Js文件。单击上一个和下一个按钮后没有任何反应。请检查并让我知道我的代码有什么问题。< / p>

    $('.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 != '' && email.value != '' && age.value != '') {
    if (section1Total > 0 && 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 response&body=">Send to
                                email</a>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

Answer 1

您的问题在以下一行：

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

活动元素是锚，其父级是li，而ul是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 != '' && email.value != '' && age.value != '') {
      if (section1Total > 0 && 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 response&body=">Send to
                            email</a>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>