Show radio button question section wise as a tab for HTML/JS page

Question

I have created a survey but the question of the survey is coming one by one. I want to put them in section-wise in a tab so they look good. Is there any bootstrap component or anything else which I can use so that the survey question looks in a better way may be a tab or something else.adding a pic to give more clearity

Html Page:-

    <p>
  Select a radio button and click on Submit.
</p>
<div class="section-1">

  <h2>Section 1</h2>
  question 1:
  <input type="radio" name="question1" value="1">1
  <input type="radio" name="question1" value="2">2
  <input type="radio" name="question1" value="3">3

  <br> question 2:
  <input type="radio" name="question2" value="1">1
  <input type="radio" name="question2" value="2">2
  <input type="radio" name="question2" value="3">3

  <br> question 3:
  <input type="radio" name="question3" value="1">1
  <input type="radio" name="question3" value="2">2
  <input type="radio" name="question3" value="3">3

</div>
<div class="section-2">

  <h2>Section 2</h2>
  question 1:
  <input type="radio" name="question4" value="1">1
  <input type="radio" name="question4" value="2">2
  <input type="radio" name="question4" value="3">3

  <br> question 2:
  <input type="radio" name="question5" value="1">1
  <input type="radio" name="question5" value="2">2
  <input type="radio" name="question5" value="3">3
  <br> question 3:
  <input type="radio" name="question6" value="1">1
  <input type="radio" name="question6" value="2">2
  <input type="radio" name="question6" value="3">3
  <br> question 4:
  <input type="radio" name="question7" value="1">1
  <input type="radio" name="question7" value="2">2
  <input type="radio" name="question7" value="3">3
</div>
<br>

<div class="final-results"></div>
<br>

<button type="button" onclick="displayRadioValue()">
      Submit
     </button>

<div id="control" style="display: none"><a id="toemail" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to   
      email</a>&nbsp<button onclick="window.print();">Send to PDF</button></div>

Js page:-

    function displayRadioValue() {

  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  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
    }
  })

  //Final Results and validation
  if (section1Total > 0 && section2Total > 0) {
    finalResults.innerHTML += genTable(section1Question, section1Total, 1)
    finalResults.innerHTML += genTable(section2Question, section2Total, 2)
  } else {
    finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '}
    document.getElementById("control").style.display = "block";
    document.getElementById("toemail").href += document.getElementById("final-results").innerText;

  }

Style page:-

    @media print {
  body * {
    visibility: hidden;
  }
  .final-results * {
    visibility: visible;
  }
  .final-results {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}

Answer 1

You can use Bootstrap JS Tab

<ul class="nav nav-tabs">
   <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#section1">section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section2">section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section3">section 3</a>
      </li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active container" id="section1">...</div>
      <div class="tab-pane container" id="section2">...</div>
      <div class="tab-pane container" id="section3">...</div>
    </div>

Refer www.w3schools.com

Answer 2

Here is fully working code for you. I am using bootstrap and tab section classes to get the desired results.

Also, i have created each fieldsets of each question so that its easy for your do some CSS and customise the HTML as you want to or add more questions to it later on!

I have added the results section which will show the results when one question is selected from each section. As well as Send to PD F and Send to Email is working fine.

Live Working Demo:

 function displayRadioValue() { let section1 = document.querySelectorAll('.section-1 > input[type="radio"]') let section2 = document.querySelectorAll('.section-2 > input[type="radio"]') 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 } }) //Final Results and validation if (section1Total > 0 && section2Total > 0) { finalResults.innerHTML += genTable(section1Question, section1Total, 1) finalResults.innerHTML += genTable(section2Question, section2Total, 2) document.getElementById("control").style.display = "block"; document.getElementById("toemail").href += document.querySelector(".final-results").innerText; } else { finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section ' } } 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 }

 @media print { body * { visibility: hidden; } .final-results * { visibility: visible; } .final-results { 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> </head> <body> <style> </style> <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="#section1" data-toggle="tab" class="nav-link small text-uppercase active">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="section1" class="tab-pane fade active show"> <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> </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> </div> <div id="results" class="tab-pane fade"> <div class="final-results"></div> <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 3

此引导程序官方文档中有一个名为 Pills 的部分，可能对您有所帮助，请在此处找到相关链接

Answer 4

In head section please add:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

At the last of the body section, please add:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Here's your HTML code:

  <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="section1-tab" data-toggle="tab" href="#section1" role="tab" aria-controls="section1"
                aria-selected="true">Section 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="section2-tab" data-toggle="tab" href="#section2" role="tab" aria-controls="section2"
                aria-selected="false">Section 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="section3-tab" data-toggle="tab" href="#section3" role="tab" aria-controls="section3"
                aria-selected="false">Section 3</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="section1" role="tabpanel" aria-labelledby="section1-tab">
            question 1:
            <input type="radio" name="question1" value="1">1
            <input type="radio" name="question1" value="2">2
            <input type="radio" name="question1" value="3">3

            <br> question 2:
            <input type="radio" name="question2" value="1">1
            <input type="radio" name="question2" value="2">2
            <input type="radio" name="question2" value="3">3

            <br> question 3:
            <input type="radio" name="question3" value="1">1
            <input type="radio" name="question3" value="2">2
            <input type="radio" name="question3" value="3">3
        </div>
        <div class="tab-pane fade" id="section2" role="tabpanel" aria-labelledby="section2-tab">
            question 1:
            <input type="radio" name="question1" value="1">1
            <input type="radio" name="question1" value="2">2
            <input type="radio" name="question1" value="3">3

            <br> question 2:
            <input type="radio" name="question2" value="1">1
            <input type="radio" name="question2" value="2">2
            <input type="radio" name="question2" value="3">3

            <br> question 3:
            <input type="radio" name="question3" value="1">1
            <input type="radio" name="question3" value="2">2
            <input type="radio" name="question3" value="3">3
        </div>
        <div class="tab-pane fade" id="section3" role="tabpanel" aria-labelledby="section3-tab">
            question 1:
            <input type="radio" name="question1" value="1">1
            <input type="radio" name="question1" value="2">2
            <input type="radio" name="question1" value="3">3

            <br> question 2:
            <input type="radio" name="question2" value="1">1
            <input type="radio" name="question2" value="2">2
            <input type="radio" name="question2" value="3">3

            <br> question 3:
            <input type="radio" name="question3" value="1">1
            <input type="radio" name="question3" value="2">2
            <input type="radio" name="question3" value="3">3
        </div>
    </div>