Показывать раздел вопросов с переключателем в виде вкладки для страницы HTML / JS

ProgramBox

Показывать раздел вопросов с переключателем в виде вкладки для страницы HTML / JS

Post author:admin
Запись опубликована:10 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #bootstrap-modal

#javascript #HTML #bootstrap-модальный

Вопрос:

Я создал опрос, но вопрос об опросе приходит один за другим. Я хочу разместить их по разделам на вкладке, чтобы они выглядели хорошо. Есть ли какой-либо компонент начальной загрузки или что-либо еще, что я могу использовать, чтобы вопрос опроса выглядел лучше, может быть, вкладка или что-то еще. добавление рисунка для большей четкости

Страница 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 responseamp;body=">Send to   
      email</a>amp;nbsp<button onclick="window.print();">Send to PDF</button></div>

Страница 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 amp;amp; 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;

  }

Страница стиля:-

     @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;
}

1. Привет. Вы все еще ищете решение с вкладками или здесь все хорошо? Как вы хотите, чтобы вкладка выглядела — это очень неясно

2. Да, я хочу показать каждый раздел как вкладку или переключатель, и когда я нажимаю на этот раздел, должен появиться вопрос @AlwaysHelping

3. Можете ли вы нарисовать картинку или что-то еще, чтобы показать, как вы хотите, чтобы они выглядели

4. Я добавил картинку, пожалуйста, проверьте. @AlwaysHelping

5. У вас будут другие вопросы в другом разделе?

Ответ №1:

Вот полностью рабочий код для вас. Я использую классы bootstrap и tab section для получения desired результатов.

Кроме того, я создал каждый fieldsets из каждого вопроса, чтобы easy вы могли сделать что-то CSS и настроить HTML по своему усмотрению или добавить к нему дополнительные вопросы позже!

Я добавил results раздел, который будет показывать результаты при выборе одного вопроса из каждого раздела. А также Send to PD F и Send to Email работает нормально.

Живая рабочая демонстрация:

Показать фрагмент кода

 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 amp;amp; 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 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. Большое спасибо… это то, что мне было нужно

2. @jugal рад это слышать. Удачного кодирования.

3. существует одна проблема, связанная с неправильным результатом кода раздела… он показывает конечный результат с общим вопросом и ответом… Пожалуйста, помогите мне исправить это …. для обоих разделов результат будет одинаковым

4. @jugal Ах, я понимаю, почему. Просто измените <div class="section-1"> перед вопросом 4, измените это на <div class="section-2"> — тогда все будет хорошо.

5. @jugal проверьте мою последнюю правку. Каждый раздел рассчитан идеально. Нам просто нужно добавить класс в каждый input раздел. Теперь все работает.

Ответ №2:

Вы можете использовать вкладку 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>

См www.w3schools.com

Ответ №3:

В этой официальной документации по начальной загрузке есть раздел под названием «Таблетки», который может вам помочь, найдите соответствующую ссылку здесь

Ответ №4:

В разделе head, пожалуйста, добавьте:

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

В конце основного раздела, пожалуйста, добавьте:

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

Вот ваш 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>