[英]Show radio button question section wise as a tab for HTML/JS page
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:- 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> <button onclick="window.print();">Send to PDF</button></div>
Js 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;
}
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;
}
You can use Bootstrap JS Tab您可以使用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>
Refer www.w3schools.com请参阅www.w3schools.com
Here is fully working code for you.这是适合您的完整工作代码。 I am using
bootstrap
and tab section
classes to get the desired
results.我正在使用
bootstrap
和tab section
类来获得desired
结果。
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!此外,我已经创建了每个问题的每个
fieldsets
,以便您可以easy
执行一些CSS
并根据需要自定义 HTML,或者稍后向其中添加更多问题!
I have added the results
section which will show the results when one question is selected from each section.我添加了
results
部分,当从每个部分选择一个问题时,它将显示结果。 As well as Send to PD
F and Send to Email
is working fine.以及
Send to PD
F 和Send to Email
工作正常。
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> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button> </div> </div> </div> </div> </div> </section> </body> </html>
此引导程序官方文档中有一个名为 Pills 的部分,可能对您有所帮助,请在此处找到相关链接
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:这是您的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.