I have created a survey page but i want to change survey question from radio button to 5 point slider.I try to use
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1"/>
But it is not working also i need to define each value with some text as i did below in my radio button code ..please help me with that and suggest the solution.I also want to get value from those slider as i did it in below code.
HTML :-
<!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>
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)
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
}
CSS:-
@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;
}
from How can i change form-check(Radio button ) to 5 points slider in HTML/JS page?
