javascript - 明智地将单选按钮问题部分显示为 HTML/JS 页面的选项卡
问题描述
我创建了一项调查,但调查的问题一一出现。我想将它们按部分放在选项卡中,这样它们看起来不错。是否有任何引导组件或我可以使用的其他任何东西,以便以更好的方式看起来调查问题可能是选项卡或其他东西。添加图片以更清晰
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页面:-
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;
}
样式页面:-
@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;
}
解决方案
这是适合您的完整工作代码。我正在使用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 && 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>
推荐阅读
- flutter - 多个 WebView 重新加载问题 Flutter
- python - python 使用azure devops api时出错“API资源位置未注册”
- arrays - 如何遍历 ReactTable 中的对象数组以显示数据?
- ignite -
无法运行查询 - python - 将范围表达式更改为列表的 Pythonic 方法
- excel - 如何复制不连续的列并复制除前 2 行和最后 1 行之外的所有内容而不剪切?当行数很多时,剪切需要很长时间
- html - 最后一个孩子/最后一个类型不能在 div 上工作
- c++ - macOS Mojave 上的 clang++ 问题
- git - 将更改从 git 分支还原到主分支
- c# - 来自 C# gRPC-server 的 RpcException 中的空元数据