J'ai créé une enquête mais la question de l'enquête arrive une par une. Je veux les mettre par section dans un onglet pour qu'ils aient l'air bien. Y a-t-il un composant bootstrap ou autre chose que je peux utiliser pour que la question de l'enquête soit meilleure peut être un onglet ou autre chose. Ajouter une image pour donner plus de clarté  entrez la description de l'image ici

Page Html: -

    <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>

Page Js: -

    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;

  }

Page de style: -

    @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;
}
3
jugal 26 août 2020 à 11:10

4 réponses

Meilleure réponse

Voici le code entièrement fonctionnel pour vous. J'utilise les classes bootstrap et tab section pour obtenir les résultats desired.

De plus, j'ai créé chaque fieldsets de chaque question afin que son easy pour vous en faire un peu CSS et personnaliser le HTML comme vous le souhaitez ou y ajouter plus de questions plus tard!

J'ai ajouté la section results qui affichera les résultats lorsqu'une question est sélectionnée dans chaque section. De plus, Send to PD F et Send to Email fonctionnent très bien.

Démonstration de travail en direct:

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>
2
Always Helping 27 août 2020 à 09:39

Dans la section principale, veuillez ajouter:

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

À la fin de la section corps, veuillez ajouter:

<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>

Voici votre code HTML:

  <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>
1
Tofa Hossain 27 août 2020 à 03:26

Il y a une section appelée Pills dans cette documentation officielle de bootstrap, qui pourrait vous aider, trouvez le lien associé ici

1
Nikhil Singh 26 août 2020 à 08:40

Vous pouvez utiliser l ' onglet Bootstrap JS

<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>

Reportez-vous à www.w3schools.com

2
AzimSharp 26 août 2020 à 09:04